feat: 仪表盘

Author: wangyuhu

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

@@ -0,0 +1,30 @@
+import { colorBlue2, colorGrey04, colorGrey10 } from '../../config';
+import type { AxisConfig, ScaleConfig, StyleConfig } from './types';
+
+export const DEFAULT_STYLE_CONFIG: StyleConfig = {
+  textContent: (target: number, total: number) => {
+    return `${Math.round((target / total) * 100)}%`;
+  },
+  textFill: colorGrey10,
+  textFontSize: '24px',
+  textLineHeight: '24px',
+  textFontFamily: 'DIN Alternate',
+  textFontWeight: 'bold',
+  textY: '70%',
+};
+
+export const DEFAULT_AXIS_CONFIG: AxisConfig = {
+  x: {
+    title: false,
+  },
+  y: {
+    tick: false,
+    label: false,
+  },
+};
+
+export const DEFAULT_SCALE_CONFIG: ScaleConfig = {
+  color: {
+    range: [colorBlue2, colorGrey04],
+  },
+};

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

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+import { Gauge as AntGauge } from '@ant-design/plots';
+import type { Chart } from '@ant-design/plots/es/interface';
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import type { GaugeConfig as AntGaugeConfig } from '@ant-design/plots';
+import { getItemConfig } from '../../helpers/utils';
+import { DEFAULT_INSET_LEFT, DEFAULT_INSET_RIGHT, colorBlue2, colorGrey04 } from '../../config';
+import { DEFAULT_AXIS_CONFIG, DEFAULT_SCALE_CONFIG, DEFAULT_STYLE_CONFIG } from './config';
+import type { AxisConfig, ScaleConfig, StyleConfig } from './types';
+
+export interface GaugeConfig extends Omit<AntGaugeConfig, 'axis' | 'scale'> {
+  axis?: AntGaugeConfig['axis'] | boolean;
+  scale?: AntGaugeConfig['scale'] | boolean;
+  startAngle?: number;
+  endAngle?: number;
+}
+
+export const Gauge = forwardRef<Chart, GaugeConfig>(
+  (props, ref) => {
+    const {
+      data,
+      insetLeft = DEFAULT_INSET_LEFT,
+      insetRight = DEFAULT_INSET_RIGHT,
+      startAngle = -1.25 * Math.PI,
+      endAngle = 0.25 * Math.PI,
+      axis = true,
+      scale = true,
+      ...rest
+    } = props;
+
+    // 需要给data的name赋值为空字符串，否则会显示默认值 scale
+    const dataConfig = Object.assign({}, data, { name: '' });
+    const axisConfig = getItemConfig<AxisConfig>(axis, DEFAULT_AXIS_CONFIG);
+    const scaleConfig = getItemConfig<ScaleConfig>(scale, DEFAULT_SCALE_CONFIG);
+    const styleConfig = getItemConfig<StyleConfig>(scale, DEFAULT_STYLE_CONFIG);
+
+    return (
+      <AntGauge
+        insetLeft={insetLeft}
+        insetRight={insetRight}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        data={dataConfig}
+        axis={axisConfig}
+        scale={scaleConfig}
+        style={styleConfig}
+        {...rest}
+        ref={ref}
+        renderer={new SVGRenderer()}
+      />
+    );
+  },
+);
+
+export default Gauge;

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

@@ -0,0 +1,5 @@
+import type { GaugeConfig } from '@ant-design/plots';
+
+export type StyleConfig = NonNullable<GaugeConfig['style']>;
+export type AxisConfig = NonNullable<GaugeConfig['axis']>;
+export type ScaleConfig = NonNullable<GaugeConfig['scale']>;

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

@@ -27,3 +27,6 @@ export type { RoseConfig } from './Rose';
 
 export { Funnel } from './Funnel';
 export type { FunnelConfig } from './Funnel';
+
+export { Gauge } from './Gauge';
+export type { GaugeConfig } from './Gauge';

packages/storybook/stories/Charts/Gauge.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Gauge, type GaugeConfig } from '@sensoro-design/plots';
+
+const meta = {
+  title: 'Charts/Gauge',
+};
+
+export default meta;
+
+export function Basic() {
+  const config: GaugeConfig = {
+    title: '仪表盘',
+    // data 格式为 { target: number, total: number } | { percent: number }
+    // percent 优先级更高，会覆盖 target 和 total
+    data: {
+      target: 120,
+      total: 400,
+      percent: 0.6,
+    },
+    width: 720,
+  };
+
+  return (
+    <Gauge {...config} />
+  );
+}