c654fd439d
Deskripsi: - api chart progres tugas - api chart dokumen - api chart acara - ui chart acara No Issues
94 lines
2.0 KiB
TypeScript
94 lines
2.0 KiB
TypeScript
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>
|
|
);
|
|
}
|