rev: report divisi
Deskripsi: - api chart progres tugas - api chart dokumen - api chart acara - ui chart acara No Issues
This commit is contained in:
@@ -27,8 +27,6 @@ export async function GET(request: Request) {
|
||||
|
||||
if (kat == "table-progress") {
|
||||
let kondisiProgress
|
||||
const dateStart = date
|
||||
const dateEnd = dateAkhir
|
||||
if (division == "undefined") {
|
||||
kondisiProgress = {
|
||||
isActive: true,
|
||||
@@ -38,10 +36,10 @@ export async function GET(request: Request) {
|
||||
DivisionProjectTask: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(dateStart))
|
||||
gte: new Date(String(date))
|
||||
},
|
||||
dateEnd: {
|
||||
lte: new Date(String(dateEnd))
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -54,10 +52,10 @@ export async function GET(request: Request) {
|
||||
DivisionProjectTask: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(dateStart))
|
||||
gte: new Date(String(date))
|
||||
},
|
||||
dateEnd: {
|
||||
lte: new Date(String(dateEnd))
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -96,20 +94,34 @@ export async function GET(request: Request) {
|
||||
if (division == "undefined") {
|
||||
kondisiProgress = {
|
||||
isActive: true,
|
||||
updatedAt: {
|
||||
lte: new Date(String(date))
|
||||
},
|
||||
Division: {
|
||||
idGroup: String(grup)
|
||||
},
|
||||
DivisionProjectTask: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(date))
|
||||
},
|
||||
dateEnd: {
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
kondisiProgress = {
|
||||
isActive: true,
|
||||
idDivision: String(division),
|
||||
updatedAt: {
|
||||
lte: new Date(String(date))
|
||||
},
|
||||
DivisionProjectTask: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(date))
|
||||
},
|
||||
dateEnd: {
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,7 +165,8 @@ export async function GET(request: Request) {
|
||||
idGroup: String(grup)
|
||||
},
|
||||
createdAt: {
|
||||
lte: new Date(String(date))
|
||||
gte: new Date(String(date)),
|
||||
lte: new Date(String(dateAkhir))
|
||||
},
|
||||
}
|
||||
} else {
|
||||
@@ -162,7 +175,8 @@ export async function GET(request: Request) {
|
||||
category: 'FILE',
|
||||
idDivision: String(division),
|
||||
createdAt: {
|
||||
lte: new Date(String(date))
|
||||
gte: new Date(String(date)),
|
||||
lte: new Date(String(dateAkhir))
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -207,53 +221,112 @@ export async function GET(request: Request) {
|
||||
|
||||
|
||||
// CHART EVENT
|
||||
let kondisiEvent
|
||||
let kondisiEvent, kondisiSelesai, kondisiComingSoon
|
||||
if (division == "undefined") {
|
||||
kondisiEvent = {
|
||||
isActive: true,
|
||||
Division: {
|
||||
idGroup: String(grup)
|
||||
},
|
||||
dateStart: new Date(String(date))
|
||||
DivisionCalendarReminder: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(date)),
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
kondisiEvent = {
|
||||
isActive: true,
|
||||
idDivision: String(division),
|
||||
dateStart: new Date(String(date))
|
||||
DivisionCalendarReminder: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(date)),
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
kondisiSelesai = {
|
||||
isActive: true,
|
||||
idDivision: String(division),
|
||||
DivisionCalendarReminder: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(date)),
|
||||
lte: new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
kondisiComingSoon = {
|
||||
isActive: true,
|
||||
idDivision: String(division),
|
||||
DivisionCalendarReminder: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gt: new Date(),
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const dataEvent = await prisma.divisionCalendar.findMany({
|
||||
where: kondisiEvent,
|
||||
select: {
|
||||
id: true,
|
||||
idDivision: true,
|
||||
title: true,
|
||||
desc: true,
|
||||
status: true,
|
||||
timeStart: true,
|
||||
dateStart: true,
|
||||
timeEnd: true,
|
||||
dateEnd: true,
|
||||
createdAt: true,
|
||||
User: {
|
||||
select: {
|
||||
name: true
|
||||
}
|
||||
}
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: 'desc'
|
||||
}
|
||||
const eventSelesai = await prisma.divisionCalendar.count({
|
||||
where: kondisiSelesai
|
||||
})
|
||||
|
||||
const hasilEvent = dataEvent.map((v: any) => ({
|
||||
..._.omit(v, ["User"]),
|
||||
user_name: v.User.name,
|
||||
timeStart: moment.utc(v.timeStart).format('HH:mm'),
|
||||
timeEnd: moment.utc(v.timeEnd).format('HH:mm')
|
||||
}))
|
||||
const eventComingSoon = await prisma.divisionCalendar.count({
|
||||
where: kondisiComingSoon
|
||||
})
|
||||
|
||||
const hasilEvent = [
|
||||
{
|
||||
name: 'Selesai',
|
||||
value: eventSelesai
|
||||
},
|
||||
{
|
||||
name: 'Akan Datang',
|
||||
value: eventComingSoon
|
||||
}
|
||||
]
|
||||
|
||||
// const dataEvent = await prisma.divisionCalendar.findMany({
|
||||
// where: kondisiEvent,
|
||||
// select: {
|
||||
// id: true,
|
||||
// idDivision: true,
|
||||
// title: true,
|
||||
// desc: true,
|
||||
// status: true,
|
||||
// timeStart: true,
|
||||
// dateStart: true,
|
||||
// timeEnd: true,
|
||||
// dateEnd: true,
|
||||
// createdAt: true,
|
||||
// User: {
|
||||
// select: {
|
||||
// name: true
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// orderBy: {
|
||||
// createdAt: 'desc'
|
||||
// }
|
||||
// })
|
||||
|
||||
// const hasilEvent = dataEvent.map((v: any) => ({
|
||||
// ..._.omit(v, ["User"]),
|
||||
// user_name: v.User.name,
|
||||
// timeStart: moment.utc(v.timeStart).format('HH:mm'),
|
||||
// timeEnd: moment.utc(v.timeEnd).format('HH:mm')
|
||||
// }))
|
||||
|
||||
|
||||
const allData = {
|
||||
|
||||
93
src/module/division_new/ui/echart_bar_calender.tsx
Normal file
93
src/module/division_new/ui/echart_bar_calender.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>({});
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user