fix(data): render empty data (#5098)

__tests__/integration/api-chart-change-data-empty.spec.ts

@@ -0,0 +1,25 @@
+import { chartChangeDataEmpty as render } from '../plots/api/chart-change-data-empty';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import { kebabCase } from './utils/kebabCase';
+import './utils/useSnapshotMatchers';
+import './utils/useCustomFetch';
+
+describe('chart.options.autoFit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
+  const canvas = createNodeGCanvas(800, 500);
+
+  it('chart({ autoFit: true }) should fit parent container', async () => {
+    const { finished } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-change-data-empty.ts

@@ -0,0 +1,29 @@
+import { Chart } from '../../../src';
+
+export function chartChangeDataEmpty(context) {
+  const { container, canvas } = context;
+
+  const chart = new Chart({
+    theme: 'classic',
+    container,
+    canvas,
+  });
+
+  chart.options({
+    theme: 'classic',
+    type: 'line',
+    clip: true,
+    data: {
+      type: 'fetch',
+      value: 'data/aapl.csv',
+    },
+    encode: {
+      x: 'date',
+      y: 'close',
+    },
+  });
+
+  const finished = chart.render().then((chart) => chart.changeData([]));
+
+  return { chart, finished };
+}

__tests__/plots/api/index.ts

@@ -24,3 +24,4 @@ export { chartRenderUpdateAttributes } from './chart-render-update-attributes';
 export { chartRenderUpdateNonAnimation } from './chart-render-update-non-animation';
 export { chartEmitBrushHighlightX } from './chart-emit-brush-highlight-x';
 export { chartRenderBrushEnd } from './chart-render-brush-end';
+export { chartChangeDataEmpty } from './chart-change-data-empty';

src/mark/area.ts

@@ -42,7 +42,7 @@ export const Area: MC<AreaOptions> = () => {
 
     // Group data by series field.
     const series = S ? Array.from(group(index, (i) => S[i]).values()) : [index];
-    const I = series.map((group) => group[0]);
+    const I = series.map((group) => group[0]).filter((i) => i !== undefined);
 
     // A group of data corresponds to one area.
     const P = Array.from(series, (SI) => {

src/mark/line.ts

@@ -26,7 +26,7 @@ const line: Mark = (index, scale, value, coordinate) => {
   // Group data into series.
   // There is only one series without specified series encode.
   const series = S ? Array.from(group(index, (i) => S[i]).values()) : [index];
-  const I = series.map((group) => group[0]);
+  const I = series.map((group) => group[0]).filter((i) => i !== undefined);
 
   // A group of data corresponds to one line.
   const xoffset = (x?.getBandWidth?.() || 0) / 2;

src/runtime/scale.ts

@@ -190,28 +190,23 @@ function inferScaleDomain(
 ): Primitive[] {
   const { domain } = options;
   if (domain !== undefined) return domain;
-  const { domainMax, domainMin } = options;
   switch (type) {
     case 'linear':
     case 'time':
     case 'log':
     case 'pow':
     case 'sqrt':
     case 'quantize':
-    case 'threshold': {
-      const [d0, d1] = inferDomainQ(values, options);
-      return [domainMin ?? d0, domainMax ?? d1];
-    }
+    case 'threshold':
+      return maybeMinMax(inferDomainQ(values, options), options);
     case 'band':
     case 'ordinal':
     case 'point':
       return inferDomainC(values);
     case 'quantile':
       return inferDomainO(values);
-    case 'sequential': {
-      const [d0, d1] = inferDomainS(values);
-      return [domainMin ?? d0, domainMax ?? d1];
-    }
+    case 'sequential':
+      return maybeMinMax(inferDomainS(values), options);
     default:
       return [];
   }
@@ -403,6 +398,16 @@ function asQuantitativeType(name: string, range: Primitive[]) {
   return range ? 'linear' : 'sequential';
 }
 
+function maybeMinMax(
+  domain: Primitive[],
+  options: G2ScaleOptions,
+): Primitive[] {
+  if (domain.length === 0) return domain;
+  const { domainMin, domainMax } = options;
+  const [d0, d1] = domain;
+  return [domainMin ?? d0, domainMax ?? d1];
+}
+
 function inferDomainQ(values: Primitive[][], options: G2ScaleOptions) {
   const { zero = false } = options;
   let min = Infinity;