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',

src/components/charts/h-bar.tsx

@@ -6,25 +6,46 @@ 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 } = props;
+  const {
+    data,
+    xField,
+    yField,
+    title,
+    height,
+    group,
+    colorField,
+    seriesField,
+    stack,
+    legend = undefined
+  } = props;
   const config = {
     data,
     xField,
     yField,
-    // colorField: 'name',
+    colorField: colorField || 'name',
     direction: 'vertical',
+    seriesField,
     height,
-    group: true,
-    legend: {
-      color: {
-        position: 'top',
-        layout: {
-          justifyContent: 'center'
-        }
-      }
-    },
+    group,
+    stack,
+    legend:
+      legend === 'undefined'
+        ? {
+            color: {
+              position: 'top',
+              layout: {
+                justifyContent: 'center'
+              }
+            }
+          }
+        : legend,
     scale: {
       x: {
         type: 'band',
@@ -59,7 +80,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
     markBackground: {},
     style: {
-      fill: 'linear-gradient(180deg,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,
       height: 20

src/components/charts/line-chart.tsx

@@ -7,10 +7,12 @@ interface LineChartProps {
   color?: string[];
   xField?: string;
   yField?: string;
-  slider?: boolean;
+  labelFormatter?: (v: any) => string;
+  slider?: any;
 }
 const LineChart: React.FC<LineChartProps> = (props) => {
-  const { data, title, color, xField, yField, slider, height } = props;
+  const { data, title, color, xField, yField, slider, height, labelFormatter } =
+    props;
   const config = {
     title,
     height,
@@ -28,7 +30,12 @@ const LineChart: React.FC<LineChartProps> = (props) => {
         }
       },
       y: {
-        tick: false
+        tick: false,
+        // size: 14,
+        // title: '%',
+        titlePosition: 'top',
+        titleFontSize: 12,
+        labelFormatter
       }
     },
     // point: {

src/components/charts/liquid.tsx

@@ -12,7 +12,7 @@ interface LiquidChartProps {
 }
 const LiquidChart: React.FC<LiquidChartProps> = (props) => {
   const {
-    percent,
+    percent = 0,
     color,
     title,
     width,