fix(line): support missing trail

__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;

__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';

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();

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": {

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<string, any>;
 
+// @todo Support connect and connectStyle.
 export const Trail: SC<TrailOptions> = (options, context) => {
   const { document } = context;
   return (P, value, defaults) => {
@@ -55,7 +57,7 @@ export const Trail: SC<TrailOptions> = (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)