rev: report divisi

Deskripsi: - api chart progres tugas - api chart dokumen - api chart acara - ui chart acara No Issues
2025-01-10 12:04:05 +08:00
parent baef8d2964
commit c654fd439d
4 changed files with 224 additions and 57 deletions
--- a/src/module/division_new/ui/echart_bar_calender.tsx
+++ b/src/module/division_new/ui/echart_bar_calender.tsx
@@ -0,0 +1,93 @@
+import { TEMA, } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { EChartsOption } from "echarts";
+import EChartsReact from "echarts-for-react";
+import { useState } from 'react';
+
+export default function EchartBarReportCalender({ data }: { data: any }) {
+  const [options, setOptions] = useState<EChartsOption>({});
+  const color = ["#5971C0", "#868e96", "#9EC97F"]
+  const tema = useHookstate(TEMA)
+
+  useShallowEffect(() => {
+    loadData(data)
+  }, [data])
+
+  const loadData = (value: any) => {
+    const option: EChartsOption = {
+      title: {
+        text: "ACARA DIVISI",
+        top: '2%',
+        left: 'center',
+        textStyle: {
+          color: tema.get().utama
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: value.map(({ name }: any) => name),
+          axisLabel: {
+            fontSize: 14
+          },
+          axisTick: {
+            alignWithLabel: true
+          },
+          axisLine: {
+            show: true,
+          },
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          show: true,
+          splitLine: {
+            lineStyle: {
+              color: "gray",
+              opacity: 0.1
+            }
+          },
+        }
+      ],
+      series: [
+        {
+          name: 'Data',
+          type: 'bar',
+          barWidth: '70%',
+          data: value.map(
+            (v: any, i: any) =>
+            ({
+              name: v.name,
+              value: v.value,
+              itemStyle: {
+                color: color[i]
+              },
+            })
+          ),
+        }
+      ]
+    };
+    setOptions(option);
+  }
+
+  return (
+    <Box>
+      <EChartsReact style={{ height: 400, width: "auto" }} option={options} />
+    </Box>
+  );
+}