fix(animation): non animation replace node

__tests__/integration/api-chart-render-update-non-animation.spec.ts

@@ -0,0 +1,26 @@
+import { chartRenderUpdateNonAnimation as render } from '../plots/api/chart-render-update-non-animation';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { kebabCase } from './utils/kebabCase';
+import './utils/useCustomFetch';
+import './utils/useSnapshotMatchers';
+
+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, chart, refreshed, button, ...rest } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+
+    button.dispatchEvent(new CustomEvent('click'));
+    await refreshed;
+    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-render-update-non-animation.ts

@@ -0,0 +1,53 @@
+import { Chart } from '../../../src';
+
+export function chartRenderUpdateNonAnimation(context) {
+  const { container, canvas } = context;
+
+  // button
+  const button = document.createElement('button');
+  button.innerText = 'Rerender';
+  container.appendChild(button);
+
+  // wrapperDiv
+  const wrapperDiv = document.createElement('div');
+  container.appendChild(wrapperDiv);
+
+  const chart = new Chart({
+    theme: 'classic',
+    container: wrapperDiv,
+    canvas,
+  });
+
+  const options = {
+    type: 'interval',
+    data: [
+      { genre: 'Sports', sold: 275 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Other', sold: 150 },
+    ],
+    encode: {
+      x: 'genre',
+      y: 'sold',
+    },
+    animate: false,
+  };
+
+  chart.options(options);
+
+  const finished = chart.render();
+
+  let resolve;
+  const refreshed = new Promise((r) => (resolve = r));
+
+  button.onclick = () => {
+    chart.options({
+      ...options,
+      type: 'point',
+    });
+    chart.render().then(resolve);
+  };
+
+  return { chart, button, finished, refreshed };
+}

__tests__/plots/api/index.ts

@@ -21,3 +21,4 @@ export { chartEmitItemTooltip } from './chart-emit-item-tooltip';
 export { chartEmitSeriesTooltip } from './chart-emit-series-tooltip';
 export { chartEmitPieTooltip } from './chart-emit-pie-tooltip';
 export { chartRenderUpdateAttributes } from './chart-render-update-attributes';
+export { chartRenderUpdateNonAnimation } from './chart-render-update-non-animation';

src/runtime/plot.ts

@@ -823,7 +823,7 @@ async function plotView(
               maybeFacetElement(this, parent, origin);
               const node = shapeFunction(data, index);
               const animation = updateFunction(data, [this], [node]);
-              if (animation === null) copyAttributes(this, node);
+              if (animation === null) this.parentNode.replaceChild(node, this);
               return animation;
             });
           }),