refactor : divisi

Deskripsi: - folder management divisi No Issues
2024-08-13 10:25:27 +08:00
parent 334f94cb39
commit a628e1c053
28 changed files with 21 additions and 39 deletions
--- a/src/module/division_new/ui/echart_bar_report.tsx
+++ b/src/module/division_new/ui/echart_bar_report.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { EChartsOption, color } from "echarts";
+import EChartsReact from "echarts-for-react";
+import { useShallowEffect } from '@mantine/hooks';
+import * as echarts from 'echarts';
+import { Box } from '@mantine/core';
+import { WARNA } from '@/module/_global';
+
+export default function EchartBarReport() {
+  const [options, setOptions] = useState<EChartsOption>({});
+
+  useShallowEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = () => {
+    const option: EChartsOption = {
+      title: {
+        text: "DOKUMEN",
+        top: '2%',
+        left: 'center',
+        textStyle: {
+          color: WARNA.biruTua
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: ['File', 'Folder', 'Documen'],
+          axisLabel: {
+            fontSize: 14
+          },
+          axisTick: {
+            alignWithLabel: true
+          },
+          axisLine: {
+            show: true,
+          },
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          show: true,
+          splitLine: {
+            lineStyle: {
+              color: "gray",
+              opacity: 0.1
+            }
+          },
+        }
+      ],
+      series: [
+        {
+          name: 'Direct',
+          type: 'bar',
+          barWidth: '70%',
+          data: [
+            {
+              value: 78,
+              name: 'Confidence',
+              itemStyle: {
+                color: "#F3C96B"
+              }
+            },
+            {
+              value: 35,
+              name: 'Supportive',
+              itemStyle: {
+                color: "#9EC97F"
+              }
+            },
+            {
+              value: 58,
+              name: 'Positive',
+              itemStyle: {
+                color: "#5971C0"
+              }
+            },
+
+          ],
+        }
+      ]
+    };
+    setOptions(option);
+  }
+
+  return (
+    <Box>
+      <EChartsReact style={{ height: 400, width: "auto" }} option={options} />
+    </Box>
+  );
+}