From 2bc535a55f4071a89288d93c4103aa0d996e5eb7 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Fri, 12 Apr 2024 18:06:14 +0800
Subject: [PATCH] improve(style): Remove fixed barWidth for Bar and columnWidth
 for Column & TinyColumn & DualAxes

---
 packages/charts/src/Bar/demo/basic.tsx      | 13 ++-----------
 packages/charts/src/Bar/demo/group.tsx      | 21 +++++----------------
 packages/charts/src/Bar/demo/percent.tsx    | 20 ++++----------------
 packages/charts/src/Bar/demo/progress.tsx   |  3 +--
 packages/charts/src/Bar/demo/range.tsx      | 20 ++++----------------
 packages/charts/src/Bar/demo/stack.tsx      | 20 ++++----------------
 packages/charts/src/Bar/index.tsx           | 14 ++++++--------
 packages/charts/src/Column/demo/basic.tsx   | 12 +-----------
 packages/charts/src/Column/demo/group.tsx   | 20 ++++----------------
 packages/charts/src/Column/demo/percent.tsx | 21 +++++----------------
 packages/charts/src/Column/demo/range.tsx   | 21 +++++----------------
 packages/charts/src/Column/demo/stack.tsx   | 21 +++++----------------
 packages/charts/src/Column/index.tsx        |  2 --
 packages/charts/src/DualAxes/index.tsx      | 14 ++++++--------
 packages/charts/src/Tiny/TinyColumn.tsx     |  2 --
 packages/charts/src/theme/light.ts          |  4 ----
 16 files changed, 52 insertions(+), 176 deletions(-)

diff --git a/packages/charts/src/Bar/demo/basic.tsx b/packages/charts/src/Bar/demo/basic.tsx
index 28c17d5e5..1eeb1c7ad 100644
--- a/packages/charts/src/Bar/demo/basic.tsx
+++ b/packages/charts/src/Bar/demo/basic.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Bar } from '@oceanbase/charts';
 import type { BarConfig } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
 
 export default () => {
   const data = [
@@ -34,14 +33,6 @@ export default () => {
       position: 'top-left',
     },
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Bar height={200} {...config} />
-      </Col>
-      <Col span={12}>
-        <Bar height={200} {...config} data={data.slice(0, 2)} />
-      </Col>
-    </Row>
-  );
+
+  return <Bar {...config} />;
 };
diff --git a/packages/charts/src/Bar/demo/group.tsx b/packages/charts/src/Bar/demo/group.tsx
index dc4c860ab..a08c0443f 100644
--- a/packages/charts/src/Bar/demo/group.tsx
+++ b/packages/charts/src/Bar/demo/group.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Bar } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { BarConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -55,24 +55,13 @@ export default () => {
       value: 100,
     },
   ];
-  const config = {
+  const config: BarConfig = {
+    data,
     isGroup: true,
     xField: 'value',
     yField: 'label',
     seriesField: 'type',
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Bar height={250} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Bar
-          height={250}
-          data={data.filter(item => ['Mon.', 'Tues.'].includes(item.label))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+
+  return <Bar {...config} />;
 };
diff --git a/packages/charts/src/Bar/demo/percent.tsx b/packages/charts/src/Bar/demo/percent.tsx
index 5cf9e73b5..a5d1a80e0 100644
--- a/packages/charts/src/Bar/demo/percent.tsx
+++ b/packages/charts/src/Bar/demo/percent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Bar } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { BarConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -110,25 +110,13 @@ export default () => {
       value: 628,
     },
   ];
-  const config = {
+  const config: BarConfig = {
+    data,
     xField: 'value',
     yField: 'year',
     seriesField: 'country',
     isPercent: true,
     isStack: true,
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Bar height={200} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Bar
-          height={200}
-          data={data.filter(item => ['1750', '1800'].includes(item.year))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+  return <Bar data={data} {...config} />;
 };
diff --git a/packages/charts/src/Bar/demo/progress.tsx b/packages/charts/src/Bar/demo/progress.tsx
index ba2772ca5..f5bbdb4b9 100644
--- a/packages/charts/src/Bar/demo/progress.tsx
+++ b/packages/charts/src/Bar/demo/progress.tsx
@@ -26,10 +26,9 @@ export default () => {
     },
   ];
   const config1 = {
+    isProgress: true,
     xField: 'value',
     yField: 'type',
-    isProgress: true,
-
     meta: {
       value: {
         alias: '比赛进度',
diff --git a/packages/charts/src/Bar/demo/range.tsx b/packages/charts/src/Bar/demo/range.tsx
index 075dc122f..b0e5ff054 100644
--- a/packages/charts/src/Bar/demo/range.tsx
+++ b/packages/charts/src/Bar/demo/range.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Bar } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { BarConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -37,23 +37,11 @@ export default () => {
       values: [18, 34],
     },
   ];
-  const config = {
+  const config: BarConfig = {
+    data,
     xField: 'values',
     yField: 'type',
     isRange: true,
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Bar height={200} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Bar
-          height={200}
-          data={data.filter(item => ['分类一', '分类二'].includes(item.type))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+  return <Bar {...config} />;
 };
diff --git a/packages/charts/src/Bar/demo/stack.tsx b/packages/charts/src/Bar/demo/stack.tsx
index 5023abaee..39f77c35b 100644
--- a/packages/charts/src/Bar/demo/stack.tsx
+++ b/packages/charts/src/Bar/demo/stack.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Bar } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { BarConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -80,24 +80,12 @@ export default () => {
       type: 'Jon',
     },
   ];
-  const config = {
+  const config: BarConfig = {
+    data,
     isStack: true,
     xField: 'value',
     yField: 'year',
     seriesField: 'type',
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Bar height={200} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Bar
-          height={200}
-          data={data.filter(item => ['1991', '1992'].includes(item.year))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+  return <Bar {...config} />;
 };
diff --git a/packages/charts/src/Bar/index.tsx b/packages/charts/src/Bar/index.tsx
index a88e1d90b..55dd50116 100644
--- a/packages/charts/src/Bar/index.tsx
+++ b/packages/charts/src/Bar/index.tsx
@@ -57,8 +57,6 @@ const Bar = forwardRef<unknown, BarConfig>(
       isPercent,
       isRange,
       seriesField,
-      maxBarWidth: themeConfig.barWidth,
-      minBarWidth: themeConfig.barWidth,
       meta: isProgress
         ? {
             ...meta,
@@ -101,12 +99,12 @@ const Bar = forwardRef<unknown, BarConfig>(
             isRange
               ? 2
               : !isStack ||
-                (isStack &&
-                  seriesField &&
-                  // 堆叠条形图仅最后一段末端展示 2px 圆角
-                  datum[seriesField] === lastStackValue)
-              ? [2, 2, 0, 0]
-              : [],
+                  (isStack &&
+                    seriesField &&
+                    // 堆叠条形图仅最后一段末端展示 2px 圆角
+                    datum[seriesField] === lastStackValue)
+                ? [2, 2, 0, 0]
+                : [],
         };
       },
       xAxis: {
diff --git a/packages/charts/src/Column/demo/basic.tsx b/packages/charts/src/Column/demo/basic.tsx
index 560b751d0..c713145e7 100644
--- a/packages/charts/src/Column/demo/basic.tsx
+++ b/packages/charts/src/Column/demo/basic.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Column } from '@oceanbase/charts';
 import type { ColumnConfig } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
 
 export default () => {
   const data = [
@@ -47,14 +46,5 @@ export default () => {
       position: 'top',
     },
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Column height={200} {...config} />
-      </Col>
-      <Col span={12}>
-        <Column height={200} {...config} data={data.slice(0, 2)} />
-      </Col>
-    </Row>
-  );
+  return <Column {...config} />;
 };
diff --git a/packages/charts/src/Column/demo/group.tsx b/packages/charts/src/Column/demo/group.tsx
index d6a315ed1..b16f269b8 100644
--- a/packages/charts/src/Column/demo/group.tsx
+++ b/packages/charts/src/Column/demo/group.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Column } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { ColumnConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -55,24 +55,12 @@ export default () => {
       value: 100,
     },
   ];
-  const config = {
+  const config: ColumnConfig = {
+    data,
     isGroup: true,
     xField: 'label',
     yField: 'value',
     seriesField: 'type',
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Column height={250} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Column
-          height={250}
-          data={data.filter(item => ['Mon.', 'Tues.'].includes(item.label))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+  return <Column {...config} />;
 };
diff --git a/packages/charts/src/Column/demo/percent.tsx b/packages/charts/src/Column/demo/percent.tsx
index 044f9b009..21be20e4b 100644
--- a/packages/charts/src/Column/demo/percent.tsx
+++ b/packages/charts/src/Column/demo/percent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Column } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { ColumnConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -110,25 +110,14 @@ export default () => {
       value: 628,
     },
   ];
-  const config = {
+  const config: ColumnConfig = {
+    data,
     xField: 'year',
     yField: 'value',
     seriesField: 'country',
     isPercent: true,
     isStack: true,
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Column height={250} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Column
-          height={250}
-          data={data.filter(item => ['1750', '1800'].includes(item.year))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+
+  return <Column {...config} />;
 };
diff --git a/packages/charts/src/Column/demo/range.tsx b/packages/charts/src/Column/demo/range.tsx
index e56195061..d07c7798e 100644
--- a/packages/charts/src/Column/demo/range.tsx
+++ b/packages/charts/src/Column/demo/range.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Column } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { ColumnConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -37,23 +37,12 @@ export default () => {
       values: [18, 34],
     },
   ];
-  const config = {
+  const config: ColumnConfig = {
+    data,
     xField: 'type',
     yField: 'values',
     isRange: true,
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Column height={250} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Column
-          height={250}
-          data={data.filter(item => ['分类一', '分类二'].includes(item.type))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+
+  return <Column {...config} />;
 };
diff --git a/packages/charts/src/Column/demo/stack.tsx b/packages/charts/src/Column/demo/stack.tsx
index 988da3109..57e3b279e 100644
--- a/packages/charts/src/Column/demo/stack.tsx
+++ b/packages/charts/src/Column/demo/stack.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Column } from '@oceanbase/charts';
-import { Col, Row } from '@oceanbase/design';
+import type { ColumnConfig } from '@oceanbase/charts';
 
 export default () => {
   const data = [
@@ -125,24 +125,13 @@ export default () => {
       type: 'Jon',
     },
   ];
-  const config = {
+  const config: ColumnConfig = {
+    data,
     isStack: true,
     xField: 'year',
     yField: 'value',
     seriesField: 'type',
   };
-  return (
-    <Row gutter={200}>
-      <Col span={12}>
-        <Column height={250} data={data} {...config} />
-      </Col>
-      <Col span={12}>
-        <Column
-          height={250}
-          data={data.filter(item => ['1991', '1992'].includes(item.year))}
-          {...config}
-        />
-      </Col>
-    </Row>
-  );
+
+  return <Column {...config} />;
 };
diff --git a/packages/charts/src/Column/index.tsx b/packages/charts/src/Column/index.tsx
index abd87b8aa..c39e3cccb 100644
--- a/packages/charts/src/Column/index.tsx
+++ b/packages/charts/src/Column/index.tsx
@@ -48,8 +48,6 @@ const Column = forwardRef<unknown, ColumnConfig>(
       isGroup,
       isRange,
       seriesField,
-      maxColumnWidth: themeConfig.columnWidth,
-      minColumnWidth: themeConfig.columnWidth,
       // 普通柱状图 label 会展示在顶部，需要留出一定空间，否则 label 会被遮挡
       appendPadding: isStack || isGroup || isRange ? 0 : [16, 0, 0, 0],
       // 分组柱状图组内柱子间距，仅分组柱状图生效
diff --git a/packages/charts/src/DualAxes/index.tsx b/packages/charts/src/DualAxes/index.tsx
index d2346ac01..08b9511c6 100644
--- a/packages/charts/src/DualAxes/index.tsx
+++ b/packages/charts/src/DualAxes/index.tsx
@@ -114,8 +114,6 @@ const DualAxes = forwardRef<unknown, DualAxesConfig>(
           // 堆叠柱状图中最后一段对应的值
           const lastStackValue = stackValues?.[0];
           defaultGeometryOption = {
-            maxColumnWidth: themeConfig.columnWidth,
-            minColumnWidth: themeConfig.columnWidth,
             columnStyle: datum => {
               return {
                 radius:
@@ -123,12 +121,12 @@ const DualAxes = forwardRef<unknown, DualAxesConfig>(
                   isRange
                     ? 2
                     : !isStack ||
-                      (isStack &&
-                        seriesField &&
-                        // 堆叠柱状图仅最后一段末端展示 2px 圆角
-                        datum[seriesField] === lastStackValue)
-                    ? [2, 2, 0, 0]
-                    : [],
+                        (isStack &&
+                          seriesField &&
+                          // 堆叠柱状图仅最后一段末端展示 2px 圆角
+                          datum[seriesField] === lastStackValue)
+                      ? [2, 2, 0, 0]
+                      : [],
               };
             },
           };
diff --git a/packages/charts/src/Tiny/TinyColumn.tsx b/packages/charts/src/Tiny/TinyColumn.tsx
index c94d218e1..9eed1e24d 100644
--- a/packages/charts/src/Tiny/TinyColumn.tsx
+++ b/packages/charts/src/Tiny/TinyColumn.tsx
@@ -21,8 +21,6 @@ const TinyColumn = forwardRef<unknown, TinyColumnConfig>(
     const newConfig: TinyColumnConfig = {
       height,
       appendPadding: label ? [16, 0, 0, 0] : 0,
-      maxColumnWidth: themeConfig.columnWidth,
-      minColumnWidth: themeConfig.columnWidth,
       columnStyle: {
         radius: [2, 2, 0, 0],
         ...columnStyle,
diff --git a/packages/charts/src/theme/light.ts b/packages/charts/src/theme/light.ts
index 4c9e956b9..7212a0a9c 100644
--- a/packages/charts/src/theme/light.ts
+++ b/packages/charts/src/theme/light.ts
@@ -95,11 +95,7 @@ const lightTheme = {
   semanticRedGradient: 'l(270) 0:rgba(229,54,59,0) 1:rgba(229,54,59,0.2)',
   semanticDarkRedGradient: 'l(270) 0:rgba(137,39,63,0) 1:rgba(137,39,63,0.2)',
   semanticGrayGradient: 'l(270) 0:rgba(171,184,213,0) 1:rgba(171,184,213,0.2)',
-  // 条形宽度
-  barWidth: 12,
   barBackgroundColor: AXIS_LINE_COLOR,
-  // 柱子宽度
-  columnWidth: 16,
   styleSheet: {
     /** 默认颜色 */
     brandColor: COLORS_10[0],