chore: dashbord ui

src/components/charts/column-bar.tsx

@@ -13,7 +13,6 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     data,
     xField,
     yField,
-    title,
     // colorField: 'name',
     direction: 'vertical',
     height,
@@ -31,7 +30,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         xAxis: true
       }
     },
-
+    title: {
+      title,
+      style: {
+        align: 'center'
+      }
+    },
     split: {
       type: 'line',
       line: {
@@ -44,7 +48,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
 
     style: {
-      fill: '#2fbf85',
+      fill: '#54cc98',
       radiusTopLeft: 8,
       radiusTopRight: 8,
       width: 30

src/components/charts/gauge.tsx

@@ -0,0 +1,47 @@
+import { Gauge } from '@ant-design/plots';
+import React from 'react';
+
+interface GaugeChartProps {
+  target: number;
+  total: number;
+  width?: number;
+  height?: number;
+  title?: string;
+  thresholds: number[];
+  rangColor: string[];
+}
+
+const GaugeChart: React.FC<GaugeChartProps> = (props) => {
+  const { target, total, width, height, thresholds, rangColor, title } = props;
+  const config = {
+    width,
+    height,
+    autoFit: true,
+    data: {
+      target,
+      total,
+      name: 'score',
+      thresholds
+    },
+    legend: false,
+    scale: {
+      color: {
+        range: rangColor
+      }
+    },
+    title: {
+      titleFontSize: 14,
+      style: {
+        align: 'center'
+      }
+    },
+    style: {
+      textContent: (target: number, total: number) => {
+        return `${(target / total) * 100}%`;
+      }
+    }
+  };
+  return <Gauge {...config} />;
+};
+
+export default GaugeChart;

src/components/charts/h-bar.tsx

@@ -13,7 +13,6 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     data,
     xField,
     yField,
-    title,
     // colorField: 'name',
     direction: 'vertical',
     height,
@@ -31,7 +30,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         xAxis: true
       }
     },
-
+    title: {
+      title,
+      style: {
+        align: 'center'
+      }
+    },
     split: {
       type: 'line',
       line: {
@@ -44,7 +48,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
 
     style: {
-      fill: '#2fbf85',
+      fill: '#54cc98',
       radiusTopLeft: 8,
       radiusTopRight: 8,
       height: 30

src/components/charts/line-chart.tsx

@@ -0,0 +1,58 @@
+import { Line } from '@ant-design/plots';
+
+interface LineChartProps {
+  title?: string;
+  height?: number;
+  data: any[];
+  color?: string[];
+  xField?: string;
+  yField?: string;
+  slider?: boolean;
+}
+const LineChart: React.FC<LineChartProps> = (props) => {
+  const { data, title, color, xField, yField, slider, height } = props;
+  const config = {
+    title,
+    height,
+    xField: xField || 'time',
+    yField: yField || 'value',
+    color: color || ['red', 'blue', 'green'],
+    colorField: 'type',
+    autoFit: true,
+    slider,
+    shapeField: 'smooth',
+    axis: {
+      x: {
+        textStyle: {
+          autoRoate: true
+        }
+      }
+    },
+    point: {
+      shapeField: 'circle',
+      sizeField: 2
+    },
+    style: {
+      lineWidth: 1.5
+    },
+    legend: {
+      itemMarker: {
+        symbol: 'circle'
+      },
+      color: {
+        layout: { justifyContent: 'center' }
+      }
+    },
+    tooltip: {
+      title: 'time',
+      items: [{ channel: 'y' }]
+    }
+  };
+  return (
+    <>
+      <Line data={data} {...config} />
+    </>
+  );
+};
+
+export default LineChart;