diff --git a/__tests__/integration/snapshots/static/aaplLineMissingDataTrial.png b/__tests__/integration/snapshots/static/aaplLineMissingDataTrial.png new file mode 100644 index 0000000000..b3b0b4d857 Binary files /dev/null and b/__tests__/integration/snapshots/static/aaplLineMissingDataTrial.png differ diff --git a/__tests__/plots/static/aapl-line-missing-data-trial.ts b/__tests__/plots/static/aapl-line-missing-data-trial.ts new file mode 100644 index 0000000000..2c9cfdf18b --- /dev/null +++ b/__tests__/plots/static/aapl-line-missing-data-trial.ts @@ -0,0 +1,29 @@ +import { G2Spec } from '../../../src'; + +export function aaplLineMissingDataTrial(): G2Spec { + return { + type: 'line', + data: { + type: 'fetch', + value: 'data/aapl.csv', + transform: [ + { type: 'slice', end: 100 }, + { + type: 'map', + callback: (d) => ({ + ...d, + close1: d.date.getDate() <= 14 ? NaN : d.close, + }), + }, + ], + }, + encode: { + x: 'date', + y: 'close1', + size: 'close', + }, + style: { shape: 'trail' }, + }; +} + +aaplLineMissingDataTrial.maxError = 125; diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index 5302f6bfd6..b7ecb30687 100644 --- a/__tests__/plots/static/index.ts +++ b/__tests__/plots/static/index.ts @@ -263,3 +263,4 @@ export { mockLegendColorSize } from './mock-legend-color-size'; export { weatherLineMultiAxesLegend } from './weather-line-multi-axes-legend'; export { population2015IntervalDonutTextAnnotationInset } from './population2015-interval-donut-text-annotation-inset'; export { stocksLineSeriesGradient } from './stocks-line-series-gradient'; +export { aaplLineMissingDataTrial } from './aapl-line-missing-data-trial'; diff --git a/site/examples/general/line/demo/line-var-size-missing.ts b/site/examples/general/line/demo/line-var-size-missing.ts new file mode 100644 index 0000000000..8e22a80f55 --- /dev/null +++ b/site/examples/general/line/demo/line-var-size-missing.ts @@ -0,0 +1,31 @@ +import { Chart } from '@antv/g2'; + +const chart = new Chart({ + container: 'container', + theme: 'classic', + autoFit: true, +}); + +chart + .line() + .data({ + type: 'fetch', + value: + 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv', + transform: [ + { type: 'slice', end: 100 }, + { + type: 'map', + callback: (d) => ({ + ...d, + close1: d.date.getDate() <= 5 ? NaN : d.close, + }), + }, + ], + }) + .encode('x', (d) => new Date(d.date)) + .encode('y', 'close1') + .encode('size', 'close') + .style('shape', 'trail'); + +chart.render(); diff --git a/site/examples/general/line/demo/meta.json b/site/examples/general/line/demo/meta.json index 970ac40ae8..3fc702e9af 100644 --- a/site/examples/general/line/demo/meta.json +++ b/site/examples/general/line/demo/meta.json @@ -52,6 +52,14 @@ }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*pWrERLZIMyQAAAAAAAAAAAAADmJ7AQ/original" }, + { + "filename": "line-var-size-missing.ts", + "title": { + "zh": "缺失变宽折线图", + "en": "Missing Var Size Line Chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*haZaQaG0tBgAAAAAAAAAAAAADmJ7AQ/original" + }, { "filename": "line-var-size-facet.ts", "title": { diff --git a/src/shape/line/trail.ts b/src/shape/line/trail.ts index 06230b744e..07a369eba4 100644 --- a/src/shape/line/trail.ts +++ b/src/shape/line/trail.ts @@ -3,6 +3,7 @@ import { ShapeComponent as SC } from '../../runtime'; import { select } from '../../utils/selection'; import { applyStyle } from '../utils'; import { angle, sub, add, Vector2 } from '../../utils/vector'; +import { defined } from '../../utils/helper'; import { Curve } from './curve'; /** @@ -44,6 +45,7 @@ function stroke(path, p0, p1, s0, s1) { export type TrailOptions = Record; +// @todo Support connect and connectStyle. export const Trail: SC = (options, context) => { const { document } = context; return (P, value, defaults) => { @@ -55,7 +57,7 @@ export const Trail: SC = (options, context) => { const p1 = P[i + 1]; const s0 = seriesSize[i]; const s1 = seriesSize[i + 1]; - stroke(path, p0, p1, s0, s1); + if ([...p0, ...p1].every(defined)) stroke(path, p0, p1, s0, s1); } return select(document.createElement('path', {})) .call(applyStyle, rest)