84 lines
1.8 KiB
React
84 lines
1.8 KiB
React
|
import { useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
// material-ui
|
||
|
|
import { useTheme } from '@mui/material/styles';
|
||
|
|
|
||
|
|
// third-party
|
||
|
|
import ReactApexChart from 'react-apexcharts';
|
||
|
|
|
||
|
|
// chart options
|
||
|
|
const areaChartOptions = {
|
||
|
|
chart: {
|
||
|
|
type: 'donut',
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
pie: {
|
||
|
|
startAngle: -90,
|
||
|
|
endAngle: 90,
|
||
|
|
offsetY: 10,
|
||
|
|
expandOnClick:false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: true
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: '2024년 2월',
|
||
|
|
align: 'center'
|
||
|
|
},
|
||
|
|
responsive: [{
|
||
|
|
breakpoint: 480,
|
||
|
|
options: {
|
||
|
|
chart: {
|
||
|
|
width: 200
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
position: 'bottom'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
grid: {
|
||
|
|
padding: {
|
||
|
|
bottom: -150
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// ==============================|| REPORT AREA CHART ||============================== //
|
||
|
|
|
||
|
|
const ReportAreaChart = () => {
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
const { primary, secondary } = theme.palette.text;
|
||
|
|
const line = theme.palette.divider;
|
||
|
|
|
||
|
|
const [options, setOptions] = useState(areaChartOptions);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setOptions((prevState) => ({
|
||
|
|
...prevState,
|
||
|
|
labels: ['PC', 'Mobile'],
|
||
|
|
colors: ['#448EF7', '#FFC107'],
|
||
|
|
// colors: [theme.palette.warning.main],
|
||
|
|
grid: {
|
||
|
|
borderColor: line
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
theme: 'light'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
position: 'bottom',
|
||
|
|
labels: {
|
||
|
|
colors: 'grey.500'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
}, [primary, secondary, line, theme]);
|
||
|
|
|
||
|
|
const [series] = useState([90, 10]);
|
||
|
|
|
||
|
|
return <ReactApexChart options={options} series={series} type="donut" />;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ReportAreaChart;
|