chore: dashboard api

src/components/charts/column-bar.tsx

@@ -6,38 +6,60 @@ interface BarChartProps {
   yField: string;
   title?: string;
   height?: number;
+  group?: boolean;
+  colorField?: string;
+  seriesField?: string;
+  stack?: boolean;
+  legend?: any;
 }
 const BarChart: React.FC<BarChartProps> = (props) => {
-  const { data, xField, yField, title, height = 260 } = props;
+  const {
+    data,
+    xField,
+    yField,
+    title,
+    height = 260,
+    group,
+    colorField,
+    seriesField,
+    stack,
+    legend = undefined
+  } = props;
   const config = {
     data,
     xField,
     yField,
-    // colorField: 'name',
+    colorField: colorField || 'name',
     direction: 'vertical',
+    stack,
+    seriesField,
     height,
-    group: true,
+    group,
     scale: {
       x: {
         type: 'band',
         padding: 0.5
       }
     },
-    legend: {
-      color: {
-        position: 'top',
-        layout: {
-          justifyContent: 'center'
-        }
-      }
-    },
+    legend:
+      legend === 'undefined'
+        ? {
+            color: {
+              position: 'top',
+              layout: {
+                justifyContent: 'center'
+              }
+            }
+          }
+        : legend,
     axis: {
       x: {
         xAxis: true,
         tick: false
       },
       y: {
-        tick: false
+        tick: false,
+        labelAutoWrap: true
       }
     },
     title: {
@@ -61,7 +83,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
 
     style: {
-      fill: 'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
+      fill: (params: any) => {
+        return (
+          params.color ||
+          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)'
+        );
+      },
       radiusTopLeft: 12,
       radiusTopRight: 12,
       align: 'center',