From fe06b7e90bdd685036380492a224f47cb86c716f Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Thu, 12 Oct 2023 15:56:21 +0800
Subject: [PATCH] fix: depth defualt to zero

---
 .../api-chart-auto-fit-slider.spec.ts         | 22 ++++++++++++
 __tests__/plots/api/chart-auto-fit-slider.ts  | 34 +++++++++++++++++++
 __tests__/plots/api/index.ts                  |  1 +
 .../interaction/indices-line-brush-series.ts  |  3 --
 src/api/utils.ts                              |  6 ++--
 src/utils/size.ts                             |  1 -
 6 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 __tests__/integration/api-chart-auto-fit-slider.spec.ts
 create mode 100644 __tests__/plots/api/chart-auto-fit-slider.ts

diff --git a/__tests__/integration/api-chart-auto-fit-slider.spec.ts b/__tests__/integration/api-chart-auto-fit-slider.spec.ts
new file mode 100644
index 0000000000..f61cd4749d
--- /dev/null
+++ b/__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();
+  });
+});
diff --git a/__tests__/plots/api/chart-auto-fit-slider.ts b/__tests__/plots/api/chart-auto-fit-slider.ts
new file mode 100644
index 0000000000..1f6a532d71
--- /dev/null
+++ b/__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 };
+}
diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts
index 3f2767f7b7..e8af4507de 100644
--- a/__tests__/plots/api/index.ts
+++ b/__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';
diff --git a/__tests__/plots/interaction/indices-line-brush-series.ts b/__tests__/plots/interaction/indices-line-brush-series.ts
index 182f2b6d5b..b0027d588d 100644
--- a/__tests__/plots/interaction/indices-line-brush-series.ts
+++ b/__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' },
diff --git a/src/api/utils.ts b/src/api/utils.ts
index d56419a34d..e06a3abea7 100644
--- a/src/api/utils.ts
+++ b/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 };
 }
 
diff --git a/src/utils/size.ts b/src/utils/size.ts
index efef226bf2..7d1ee1e866 100644
--- a/src/utils/size.ts
+++ b/src/utils/size.ts
@@ -29,7 +29,6 @@ export function getContainerSize(container: HTMLElement): Size {
   return {
     width: wrapperWidth - widthPadding,
     height: wrapperHeight - heightPadding,
-    depth: wrapperWidth,
   };
 }