feat: 漏斗图

Author: wangyuhu

@sensoro-design/plots/src/components/Funnel/config.ts

@@ -0,0 +1,7 @@
+import type { StyleConfig } from './types';
+
+export const DEFAULT_STYLE_CONFIG: StyleConfig = {
+  // TODO: 黑色主题的颜色配置
+  stroke: 'white',
+  lineWidth: 2,
+};

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

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+import { Funnel as AntFunnel } from '@ant-design/plots';
+import type { Chart } from '@ant-design/plots/es/interface';
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import type { FunnelConfig as AntFunnelConfig } from '@ant-design/plots';
+import { getItemConfig } from '../../helpers/utils';
+import { DEFAULT_INSET_LEFT, DEFAULT_INSET_RIGHT } from '../../config';
+import { DEFAULT_STYLE_CONFIG } from './config';
+import type { StyleConfig } from './types';
+
+export interface FunnelConfig extends Omit<AntFunnelConfig, 'style'> {
+  style?: AntFunnelConfig['style'] | boolean;
+}
+
+export const Funnel = forwardRef<Chart, FunnelConfig>(
+  (props, ref) => {
+    const {
+      insetLeft = DEFAULT_INSET_LEFT,
+      insetRight = DEFAULT_INSET_RIGHT,
+      label = false,
+      style = true,
+      ...rest
+    } = props;
+
+    const styleConfig = getItemConfig<StyleConfig>(style, DEFAULT_STYLE_CONFIG);
+
+    return (
+      <AntFunnel
+        insetLeft={insetLeft}
+        insetRight={insetRight}
+        label={label}
+        style={styleConfig}
+        {...rest}
+        ref={ref}
+        renderer={new SVGRenderer()}
+      />
+    );
+  },
+);
+
+export default Funnel;

@sensoro-design/plots/src/components/Funnel/types.ts

@@ -0,0 +1,3 @@
+import type { FunnelConfig } from '@ant-design/plots';
+
+export type StyleConfig = NonNullable<FunnelConfig['style']>;

@sensoro-design/plots/src/components/index.ts

@@ -24,3 +24,6 @@ export type { RadarConfig } from './Radar';
 
 export { Rose } from './Rose';
 export type { RoseConfig } from './Rose';
+
+export { Funnel } from './Funnel';
+export type { FunnelConfig } from './Funnel';

packages/storybook/stories/Charts/Funnel.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Funnel, type FunnelConfig } from '@sensoro-design/plots';
+
+const data = [
+  { stage: '简历筛选', number: 253 },
+  { stage: '初试人数', number: 151 },
+  { stage: '复试人数', number: 113 },
+  { stage: '录取人数', number: 87 },
+  { stage: '入职人数', number: 59 },
+];
+
+const meta = {
+  title: 'Charts/Funnel',
+};
+
+export default meta;
+
+export function Basic() {
+  const config: FunnelConfig = {
+    title: '漏斗图',
+    data,
+    xField: 'stage',
+    yField: 'number',
+    width: 500,
+  };
+
+  return (
+    <Funnel {...config} />
+  );
+}