Merge pull request #44 from bipproduction/lukman/10-juli-2024

style : update report

package.json

@@ -34,6 +34,8 @@
     "@tiptap/starter-kit": "^2.4.0",
     "@types/lodash": "^4.17.6",
     "dayjs": "^1.11.11",
+    "echarts": "^5.5.1",
+    "echarts-for-react": "^3.0.2",
     "embla-carousel-autoplay": "^7.1.0",
     "embla-carousel-react": "^7.1.0",
     "lodash": "^4.17.21",

src/module/_global/fun/WARNA.ts

@@ -3,5 +3,6 @@ export const WARNA = {
     biruTua: "#19345E",
     bgIcon: "#384288",
     borderOrange: "#FCAA4B",
-    bgHijauMuda: "#DCEED8"
+    bgHijauMuda: "#DCEED8",
+    borderBiruMuda: "#9EBDED"
 }

src/module/division_new/components/create_report.tsx

@@ -1,8 +1,10 @@
 "use client"
-import { LayoutNavbarNew } from '@/module/_global';
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { Box, Select, Stack } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
 import React, { useState } from 'react';
+import EchartPaiReport from './echart_pai_report';
+import EchartBarReport from './echart_bar_report';
 
 export default function CreateReport() {
   const [value, setValue] = useState<Date | null>(null);
@@ -27,6 +29,26 @@ export default function CreateReport() {
             label="Date input"
             placeholder="Date input"
           />
+          <Box pt={10}>
+            <Box bg={'white'} style={{
+              border: `1px solid ${WARNA.borderBiruMuda}`,
+              borderRadius: 10,
+              padding: 10
+            }}>
+              <EchartPaiReport />
+            </Box>
+          </Box>
+          <Box pt={10}>
+            <Box bg={'white'} style={{
+              border: `1px solid ${WARNA.borderBiruMuda}`,
+              borderRadius: 10,
+              padding: 10
+            }}>
+              <EchartBarReport />
+            </Box>
+
+          </Box>
+
         </Stack>
       </Box>
     </Box>

src/module/division_new/components/echart_bar_report.tsx

@@ -0,0 +1,103 @@
+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: "SENTIMENT ANALYSIS",
+        textStyle: {
+          color: "white"
+        }
+      },
+      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>
+  );
+}

src/module/division_new/components/echart_pai_report.tsx

@@ -0,0 +1,69 @@
+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 EchartPaiReport() {
+  const [options, setOptions] = useState<EChartsOption>({});
+
+  useShallowEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = () => {
+    const option: EChartsOption = {
+      title: {
+        text: "PROGRES TUGAS",
+        top: '2%',
+        left: 'center',
+        textStyle: {
+          color: WARNA.biruTua
+        }
+      },
+      legend: {
+        top: 'bottom',
+      },
+      series: [
+        {
+          name: 'Progres Tugas',
+          type: 'pie',
+          radius: '80%',
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 2,
+            borderWidth: 2
+          },
+          label: {
+            position: "inner",
+            formatter: (a) => {
+              return `${a.value + "%"}`;
+            },
+          },
+          data: [
+            { value: 25, name: 'Dikerjakan' },
+            { value: 35, name: 'Selesai dikerjakan' },
+            { value: 10, name: 'Segera dikerjakan' },
+            { value: 30, name: 'Batal dikerjakan' },
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    }
+    setOptions(option);
+  }
+
+  return (
+    <Box>
+      <EChartsReact style={{ height: 400, width: "auto" }} option={options} />
+    </Box>
+  );
+}

src/module/division_new/components/ui/navbar_create_users.tsx

@@ -78,11 +78,11 @@ export default function NavbarCreateUsers() {
               {dataUser.map((v, index) => {
                 const isSelected = selectedFiles[index];
                 return (
-                  <Box key={index} mb={20}>
+                  <Box key={index} mb={10}>
                     <Box
-
+                      bg={isSelected ? WARNA.bgHijauMuda : "white"}
                       style={{
-                        border: `${isSelected ? "2px solid #FFC107" : `1px solid ${WARNA.biruTua}`}`,
+                        border: `1px solid ${WARNA.biruTua}`,
                         borderRadius: 20,
                       }}
                       py={10}

yarn.lock

@@ -1324,6 +1324,22 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
+echarts-for-react@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz#ac5859157048a1066d4553e34b328abb24f2b7c1"
+  integrity sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    size-sensor "^1.0.1"
+
+echarts@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c"
+  integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.6.0"
+
 embla-carousel-autoplay@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/embla-carousel-autoplay/-/embla-carousel-autoplay-7.1.0.tgz#766a45eb5f21b9e3ff4bd1d91b4c3c578c04d8b6"
@@ -3150,6 +3166,11 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+size-sensor@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.2.tgz#b8f8da029683cf2b4e22f12bf8b8f0a1145e8471"
+  integrity sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -3420,6 +3441,11 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
@@ -3697,3 +3723,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zrender@5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b"
+  integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
+  dependencies:
+    tslib "2.3.0"