fix: depth default to zero

__tests__/integration/api-chart-auto-fit-slider.spec.ts

@@ -0,0 +1,22 @@
+import { chartAutoFitSlider as render } from '../plots/api/chart-auto-fit-slider';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import './utils/useCustomFetch';
+
+import './utils/useSnapshotMatchers';
+
+describe('mark.changeSize', () => {
+  const canvas = createNodeGCanvas(640, 480);
+
+  it('mark.changeSize(width, height) should rerender expected chart', async () => {
+    const { chart } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+
+    expect(chart['_computedOptions']().depth).toBe(0);
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-auto-fit-slider.ts

@@ -0,0 +1,34 @@
+import { Chart } from '../../../src';
+
+export function chartAutoFitSlider(context) {
+  const { container, canvas } = context;
+
+  // wrapperDiv
+  const wrapperDiv = document.createElement('div');
+  wrapperDiv.style.width = '800px';
+  wrapperDiv.style.height = '500px';
+  container.appendChild(wrapperDiv);
+
+  const chart = new Chart({
+    container: wrapperDiv,
+    autoFit: true,
+    canvas,
+  });
+
+  chart.options({
+    type: 'line',
+    data: { type: 'fetch', value: 'data/stocks.csv' },
+    legend: false,
+    encode: {
+      x: (d) => new Date(d.date).getFullYear(),
+      y: 'price',
+      color: 'symbol',
+    },
+    transform: [{ type: 'groupX', y: 'mean' }],
+    slider: { x: true },
+  });
+
+  const finished = chart.render();
+
+  return { chart, finished };
+}

__tests__/plots/api/index.ts

@@ -52,3 +52,4 @@ export { chartRender3dLinePlotPerspective } from './chart-render-3d-line-plot-pe
 export { chartOnBrushHighlightTooltip } from './chart-on-brush-highlight-tooltip';
 export { chartChangeSizeCustomShape } from './chart-change-size-custom-shape';
 export { chartOptionsCallbackChildren } from './chart-options-callback-children';
+export { chartAutoFitSlider } from './chart-auto-fit-slider';

__tests__/plots/interaction/indices-line-brush-series.ts

@@ -10,8 +10,6 @@ export async function indicesLineBrushSeries(): Promise<G2Spec> {
     children: [
       {
         type: 'line',
-        width: 800,
-        paddingLeft: 50,
         data,
         axis: {
           y: { labelAutoRotate: false },
@@ -23,7 +21,6 @@ export async function indicesLineBrushSeries(): Promise<G2Spec> {
           y: 'Close',
           color: 'Symbol',
           key: 'Symbol',
-          title: (d) => new Date(d.Date).toUTCString(),
         },
         state: {
           active: { stroke: 'red' },

src/api/utils.ts

@@ -71,8 +71,10 @@ export function valueOf(node: Node): Record<string, any> {
 
 export function sizeOf(options, container) {
   const { autoFit } = options;
-  if (autoFit) return getContainerSize(container);
-  const { width = 640, height = 480, depth = 0 } = options;
+  const { width = 640, height = 480 } = autoFit
+    ? getContainerSize(container)
+    : options;
+  const { depth = 0 } = options;
   return { width, height, depth };
 }
 

src/utils/size.ts

@@ -29,7 +29,6 @@ export function getContainerSize(container: HTMLElement): Size {
   return {
     width: wrapperWidth - widthPadding,
     height: wrapperHeight - heightPadding,
-    depth: wrapperWidth,
   };
 }