65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
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({ data }: { data: any }) {
|
|
const [options, setOptions] = useState<EChartsOption>({});
|
|
|
|
useShallowEffect(() => {
|
|
loadData(data)
|
|
}, [data])
|
|
|
|
const loadData = (value: any) => {
|
|
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: '70%',
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 2,
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
position: "inner",
|
|
formatter: (a) => {
|
|
return `${a.value + "%"}`;
|
|
},
|
|
},
|
|
data: value,
|
|
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>
|
|
);
|
|
}
|