fix: chart.options changeData problem (#4936)

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

@@ -0,0 +1,26 @@
+import { chartOptionsChangeData as render } from '../plots/api/chart-options-change-data';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import './utils/useSnapshotMatchers';
+import './utils/useCustomFetch';
+
+describe('chart.options.changeData', () => {
+  const canvas = createNodeGCanvas(800, 500);
+
+  it('chart.options.changeData should rerender expected chart', async () => {
+    const { finished, button, chart } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    button.dispatchEvent(new CustomEvent('click'));
+    await new Promise<void>((resolve) => chart.on('afterrender', resolve));
+    const dir = `${__dirname}/snapshots/api`;
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

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

@@ -0,0 +1,52 @@
+import { Chart } from '../../../src';
+
+export function chartOptionsChangeData(context) {
+  const { container, canvas } = context;
+
+  const button = document.createElement('button');
+  button.innerText = 'Update Data';
+  button.style.display = 'block';
+  container.appendChild(button);
+
+  const div = document.createElement('div');
+  container.appendChild(div);
+
+  const chart = new Chart({
+    theme: 'classic',
+    container,
+    canvas,
+  });
+
+  chart.options({
+    type: 'interval',
+    coordinate: { type: 'theta' },
+    transform: [{ type: 'stackY' }],
+    data: [
+      { genre: 'Sports', sold: 275 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Other', sold: 150 },
+    ],
+    encode: {
+      y: 'sold',
+      color: 'genre',
+    },
+    animate: {
+      enter: {
+        type: 'waveIn',
+      },
+    },
+  });
+
+  const finished = chart.render();
+
+  button.onclick = () => {
+    chart.changeData([
+      { genre: 'Sports', sold: 275 },
+      { genre: 'Strategy', sold: 115 },
+    ]);
+  };
+
+  return { chart, finished, button };
+}

__tests__/plots/api/index.ts

@@ -15,3 +15,4 @@ export { chartChangeSizePolar } from './chart-change-size-polar';
 export { chartChangeDataFacet } from './chart-change-data-facet';
 export { chartRenderClearAnimation } from './chart-render-clear-animation';
 export { chartOnBrushFilter } from './chart-on-brush-filter';
+export { chartOptionsChangeData } from './chart-options-change-data';

src/api/chart.ts

@@ -253,6 +253,13 @@ export class Chart extends View<ChartOptions> {
     return this;
   }
 
+  // @todo Remove it when implement updateRoot.
+  changeData(data: any): Promise<Chart> {
+    // Update options data.
+    this.options({ data });
+    return super.changeData(data);
+  }
+
   getContainer(): HTMLElement {
     return this._container;
   }