rev: report divisi

Deskripsi:
- api chart progres tugas
- api chart dokumen
- api chart acara
- ui chart acara

No Issues

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>
+  );
+}

src/module/division_new/ui/echart_bar_report.tsx

@@ -1,11 +1,10 @@
-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 { TEMA,  } from '@/module/_global';
+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 EchartBarReport({ data }: { data: any }) {
   const [options, setOptions] = useState<EChartsOption>({});

src/module/division_new/ui/report_division_id.tsx

@@ -13,6 +13,7 @@ import { funGetReportDivision } from '../lib/api_division';
 import EchartBarReport from './echart_bar_report';
 import EchartPaiReport from './echart_pai_report';
 import EventReport from './event_report';
+import EchartBarReportCalender from './echart_bar_calender';
 
 
 export default function ReportDivisionId() {
@@ -36,7 +37,7 @@ export default function ReportDivisionId() {
     end_date: false
   })
 
-  async function onReport(date: any) {
+  async function onReport(awal: any, akhir: any) {
     try {
       setReport({
         progress: [],
@@ -45,7 +46,7 @@ export default function ReportDivisionId() {
       })
       setTampil(true)
       setLoading(true)
-      const res = await funGetReportDivision(`?division=${param.id}&date=${moment(date).format("YYYY-MM-DD")}`)
+      const res = await funGetReportDivision(`?division=${param.id}&date=${moment(awal).format("YYYY-MM-DD")}&date-end=${moment(akhir).format("YYYY-MM-DD")}`)
       if (res.success) {
         setReport(res.data)
       } else {
@@ -84,7 +85,7 @@ export default function ReportDivisionId() {
           setTampil(false)
         } else {
           setTouched({ ...touched, end_date: false })
-          onReport(val)
+          onReport(val, valueAkhir)
           onReportTable(val, valueAkhir)
         }
       }
@@ -96,7 +97,7 @@ export default function ReportDivisionId() {
           setTampil(false)
         } else {
           setTouched({ ...touched, end_date: false })
-          onReport(val)
+          onReport(value, val)
           onReportTable(value, val)
         }
       }
@@ -231,7 +232,8 @@ export default function ReportDivisionId() {
                           padding: 10,
                         }}
                       >
-                        <EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} />
+                        <EchartBarReportCalender data={report.event} />
+                        {/* <EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} /> */}
                       </Box>
                     </Box>