feat(charts): 条形图扩展

* test: 多级矩形树图

* feat: 条形图右侧数值间距问题

* test: render添加到demo中

* test: 条形图demo

* feat: 条形图扩展

* feat: 条形图类型&导出

---------

Co-authored-by: wangyuhu <wangyuhu@sensoro.com>

Author: tiger5wang

@sensoro-design/charts/src/bar/Bar.tsx

@@ -0,0 +1,62 @@
+import { Bar as BaseBar } from '@sensoro-design/plots';
+import type { BarConfig as BaseBarConfig } from '@sensoro-design/plots';
+import { deepMix } from '@antv/util';
+
+export interface BarConfig extends BaseBarConfig {
+  // 自定义属性
+  aloneLabel?: boolean; // label是否单独一行
+}
+
+const ALONE_TITLE_AXIS = {
+  x: {
+    size: 0,
+    label: false,
+  },
+};
+
+const ALONE_TITLE_LABEL = {
+  text: 'name',
+  position: 'left',
+  transform: [{ type: 'overlapDodgeY' }],
+  dy: -18,
+  lineHeight: 20,
+};
+
+export function Bar(props: BarConfig) {
+  const { aloneLabel, data, axis, yField, label, width, height, paddingRight, markBackground, ...rest } = props;
+  const valueLength = data?.reduce(
+    (len: number, next: BaseBarConfig['data']) => Math.max(next[yField as string], len),
+    0,
+  ).toString().length;
+
+  const axisConfig = aloneLabel ? deepMix({}, ALONE_TITLE_AXIS, axis) : axis;
+
+  const labelConfig = aloneLabel
+    ? deepMix({}, ALONE_TITLE_LABEL, label)
+    : label;
+
+  const heightConfig
+    = height || data.length * 8 + (data.length - 1) * (aloneLabel ? 36 : 24) + 92 + 48;
+
+  const paddingRightConfig = paddingRight || valueLength * 7;
+
+  const markBackgroundConfig = deepMix(
+    {},
+    { label: { dx: width! - 48 - 16 - (aloneLabel ? 0 : 110) } },
+    markBackground,
+  );
+
+  return (
+    <BaseBar
+      width={width}
+      height={heightConfig}
+      yField={yField}
+      axis={axisConfig}
+      label={labelConfig}
+      paddingRight={paddingRightConfig}
+      markBackground={markBackgroundConfig}
+      data={data}
+      {...rest}
+    />
+  );
+}

@sensoro-design/charts/src/bar/index.ts

@@ -0,0 +1,4 @@
+import { Bar } from './Bar';
+
+export type { BarConfig } from './Bar';
+export default Bar;

@sensoro-design/charts/src/bar/style/index.less

@@ -0,0 +1 @@
+@import "./token.less";

@sensoro-design/charts/src/bar/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

@sensoro-design/charts/src/bar/style/token.less

@@ -6,3 +6,6 @@ export type { LineConfig } from './line';
 
 export { default as Area } from './area';
 export type { AreaConfig } from './area';
+
+export { default as Bar } from './bar';
+export type { BarConfig } from './bar';

@sensoro-design/charts/src/index.ts

@@ -20,7 +20,8 @@ export const Bar = forwardRef<Chart, BarConfig>((props, ref) => {
     scale,
     interaction,
     markBackground,
-    paddingRight = 44,
+    paddingRight = 0, // TODO 需要再charts中抹平 paddingRight 和数据值的位数关系:最大值的长度 * 3
+    // @ts-expect-error 暂时忽略
     ...rest
   } = props;
 

@sensoro-design/plots/src/components/Bar/index.tsx

@@ -8,8 +8,9 @@ export const getDefaultMarkBackgroundConfig: (
     text: ({ originData }: { originData: any }) => {
       return `${originData[yField]}`;
     },
-    position: 'right',
-    dx: 44,
+    position: 'left',
+    // TODO 需要再charts中抹平dx和数据值的位数关系:图表宽度 - 图表内部左右padding（默认24） - 图表左侧x轴label宽度（默认110 || 0） - 值距离条形图的距离（默认16）
+    dx: 0,
     dy: 0,
     style: {
       fill: colorGrey10,

@sensoro-design/plots/src/components/Bar/utils.ts

@@ -11,7 +11,7 @@ export default meta;
 const data = [
   {
     name: '蓝领',
-    value: 10,
+    value: 8,
   },
   {
     name: '白领',
@@ -34,11 +34,16 @@ export function Basic() {
     data,
     xField: 'name',
     yField: 'value',
+    // 需要传入宽度
+    width: 480, // 480 - 48 - 110 - 16,
     scale: {
       y: {
-        domain: [0, 800],
+        domain: [0, 1200],
       },
     },
+    // TODO 以下内容需要再 charts 中实现
+    paddingRight: 21,
+    markBackground: { label: { dx: 316 } },
   };
 
   // @ts-expect-error 暂时忽略
@@ -48,15 +53,20 @@ export function Basic() {
 export function AloneTitle() {
   const config: BarConfig = {
     title: '独立标题行条形图',
-    height: data.length * 8 + (data.length - 1) * 24 + 92 + 48,
+    height: data.length * 8 + (data.length - 1) * 36 + 92 + 48,
     data,
     xField: 'name',
     yField: 'value',
+    // 需要传入宽度
+    width: 480,
     scale: {
       y: {
-        domain: [0, 800],
+        domain: [0, 1200],
       },
     },
+    // TODO 以下内容需要再 charts 中实现
+    paddingRight: 21,
+    markBackground: { label: { dx: 427 } },
     axis: {
       x: {
         size: 0,
@@ -72,5 +82,6 @@ export function AloneTitle() {
     },
   };
 
-  return <Bar {...config} />;
+  // @ts-expect-error 暂时忽略
+  return <Bar {...config} renderer={new SVGRenderer()} />;
 }

packages/storybook/stories/Charts/Bar.stories.tsx

@@ -35,7 +35,8 @@ export function Basic() {
     innerRadius: 0,
   };
 
-  return <Pie {...config} />;
+  // @ts-expect-error 暂时忽略
+  return <Pie {...config} renderer={new SVGRenderer()} />;
 }
 
 export function Ring() {