From d670e8ad89fa14cf693fc6a8248313c8004a482e Mon Sep 17 00:00:00 2001 From: lukman Date: Thu, 11 Jul 2024 15:18:09 +0800 Subject: [PATCH] style : update report --- package.json | 2 + src/module/_global/fun/WARNA.ts | 3 +- .../division_new/components/create_report.tsx | 24 +++- .../components/echart_bar_report.tsx | 103 ++++++++++++++++++ .../components/echart_pai_report.tsx | 69 ++++++++++++ .../components/ui/navbar_create_users.tsx | 6 +- yarn.lock | 33 ++++++ 7 files changed, 235 insertions(+), 5 deletions(-) create mode 100644 src/module/division_new/components/echart_bar_report.tsx create mode 100644 src/module/division_new/components/echart_pai_report.tsx diff --git a/package.json b/package.json index 5ea8861..fc054e1 100644 --- a/package.json +++ b/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", diff --git a/src/module/_global/fun/WARNA.ts b/src/module/_global/fun/WARNA.ts index 31b634f..c538b01 100644 --- a/src/module/_global/fun/WARNA.ts +++ b/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" } \ No newline at end of file diff --git a/src/module/division_new/components/create_report.tsx b/src/module/division_new/components/create_report.tsx index 432d043..ac934ae 100644 --- a/src/module/division_new/components/create_report.tsx +++ b/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(null); @@ -27,6 +29,26 @@ export default function CreateReport() { label="Date input" placeholder="Date input" /> + + + + + + + + + + + + diff --git a/src/module/division_new/components/echart_bar_report.tsx b/src/module/division_new/components/echart_bar_report.tsx new file mode 100644 index 0000000..1cf0136 --- /dev/null +++ b/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({}); + + 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 ( + + + + ); +} diff --git a/src/module/division_new/components/echart_pai_report.tsx b/src/module/division_new/components/echart_pai_report.tsx new file mode 100644 index 0000000..351331b --- /dev/null +++ b/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({}); + + 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 ( + + + + ); +} diff --git a/src/module/division_new/components/ui/navbar_create_users.tsx b/src/module/division_new/components/ui/navbar_create_users.tsx index 6aeeaad..4f8a4b2 100644 --- a/src/module/division_new/components/ui/navbar_create_users.tsx +++ b/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 ( - +