improve(style): Remove fixed barWidth for Bar and columnWidth for Col…

…umn & TinyColumn & DualAxes
oceanbase · Apr 12, 2024 · 2bc535a · 2bc535a
1 parent aaa17b4
commit 2bc535a
Show file tree

Hide file tree

Showing 16 changed files with 52 additions and 176 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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],
       // 分组柱状图组内柱子间距，仅分组柱状图生效