106 lines
2.2 KiB
TypeScript
106 lines
2.2 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 EchartBarReport() {
|
|
const [options, setOptions] = useState<EChartsOption>({});
|
|
|
|
useShallowEffect(() => {
|
|
loadData()
|
|
}, [])
|
|
|
|
const loadData = () => {
|
|
const option: EChartsOption = {
|
|
title: {
|
|
text: "DOKUMEN",
|
|
top: '2%',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: WARNA.biruTua
|
|
}
|
|
},
|
|
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>
|
|
);
|
|
}
|