upd: home

Deskripsi:
- chart jumlah dokumen di halaman home

No Issues"

src/app/api/home/route.ts

@@ -150,7 +150,7 @@ export async function GET(request: Request) {
          for (let index = 0; index < dataStatus.length; index++) {
             const cek = data.some((i: any) => i.status == dataStatus[index].status)
             if (cek) {
-               const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100)/ data.reduce((n, {_count}) => n + _count, 0)).toFixed(2)
+               const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100) / data.reduce((n, { _count }) => n + _count, 0)).toFixed(2)
                input = {
                   name: dataStatus[index].name,
                   value: find
@@ -195,14 +195,39 @@ export async function GET(request: Request) {
             where: kondisi,
          })
 
-         allData = _.map(_.groupBy(data, "extension"), (v: any) => ({
+         const groupData = _.map(_.groupBy(data, "extension"), (v: any) => ({
             file: v[0].extension,
             jumlah: v.length,
          }))
 
-         // console.log(allData)
+         const image = ['jpg', 'jpeg', 'png', 'heic']
 
 
+         let hasilImage = {
+            name: 'Gambar',
+            value: 0
+         }
+
+         let hasilFile = {
+            name: 'Dokumen',
+            value: 0
+         }
+
+         groupData.map((v: any) => {
+            if (image.some((i: any) => i == v.file)) {
+               hasilImage = {
+                  name: 'Gambar',
+                  value: hasilImage.value + v.jumlah
+               }
+            } else {
+               hasilFile = {
+                  name: 'Dokumen',
+                  value: hasilFile.value + v.jumlah
+               }
+            }
+         })
+
+         allData = [hasilImage, hasilFile]
 
       } else if (kategori == "event") {
          let kondisi

src/module/home/ui/chart_document.tsx

@@ -9,12 +9,13 @@ import toast from "react-hot-toast";
 import { funGetHome } from "../lib/api_home";
 
 export default function ChartDocumentHome() {
-   const [options, setOptions] = useState<EChartsOption>({});
+   const [options, setOptions] = useState<EChartsOption>({})
    const [isData, setData] = useState<any[]>([])
-   const [loading, setLoading] = useState(true);
+   const [loading, setLoading] = useState(true)
+   const color = ["#F3C96B", "#9EC97F", "#5971C0"]
 
    useShallowEffect(() => {
-      loadData()
+      // loadData()
       fetchData()
    }, [])
 
@@ -28,6 +29,7 @@ export default function ChartDocumentHome() {
 
          if (response.success) {
             setData(response.data)
+            loadData(response.data)
          } else {
             toast.error(response.message);
          }
@@ -40,7 +42,7 @@ export default function ChartDocumentHome() {
       }
    };
 
-   const loadData = () => {
+   const loadData = (value: any) => {
       const option: EChartsOption = {
          title: {
             text: "DOKUMEN",
@@ -65,7 +67,7 @@ export default function ChartDocumentHome() {
          xAxis: [
             {
                type: 'category',
-               data: ['File', 'Folder', 'Documen'],
+               data: value.map(({ name }: any) => name),
                axisLabel: {
                   fontSize: 14
                },
@@ -94,30 +96,16 @@ export default function ChartDocumentHome() {
                name: 'Direct',
                type: 'bar',
                barWidth: '70%',
-               data: [
+               data: value.map(
-                  {
+                  (v: any, i: any) =>
-                     value: 78,
+                  ({
-                     name: 'File',
+                     name: v.name,
+                     value: v.value,
                      itemStyle: {
-                        color: "#F3C96B"
+                        color: color[i]
-                     }
                      },
-                  {
+                  })
-                     value: 35,
+               ),
-                     name: 'Folder',
-                     itemStyle: {
-                        color: "#9EC97F"
-                     }
-                  },
-                  {
-                     value: 58,
-                     name: 'Documen',
-                     itemStyle: {
-                        color: "#5971C0"
-                     }
-                  },
-
-               ],
             }
          ]
       };