91 lines
2.2 KiB
JavaScript
91 lines
2.2 KiB
JavaScript
"use client";
|
|
|
|
import { LineChart, lineElementClasses } from "@mui/x-charts";
|
|
|
|
function Chart({ data, loading }) {
|
|
return (
|
|
<LineChart
|
|
loading={loading}
|
|
xAxis={[
|
|
{
|
|
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
|
disableLine: true,
|
|
disableTicks: true,
|
|
},
|
|
]}
|
|
series={[
|
|
{
|
|
id: "income",
|
|
data: data.chart_amount_income,
|
|
area: true,
|
|
showMark: false,
|
|
},
|
|
]}
|
|
yAxis={[
|
|
{
|
|
disableLine: true,
|
|
disableTicks: true,
|
|
},
|
|
]}
|
|
margin={{
|
|
left: 60,
|
|
right: 50,
|
|
top: 10,
|
|
bottom: 60,
|
|
}}
|
|
sx={{
|
|
[`& .${lineElementClasses.root}`]: {
|
|
strokeWidth: 3,
|
|
stroke: loading ? "#E6E6E6" : "#5559CE",
|
|
},
|
|
"& .MuiAreaElement-series-income": {
|
|
fill: "url('#myGradient') !important",
|
|
},
|
|
"& .MuiChartsAxis-directionY .MuiChartsAxis-tickLabel": {
|
|
fontSize: "14px !important",
|
|
fontWeight: "400 !important",
|
|
fill: "#858D9D",
|
|
"@media (prefers-color-scheme: dark)": {
|
|
fill: "#A1A1A1",
|
|
},
|
|
},
|
|
"& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel": {
|
|
fontSize: "10px !important",
|
|
fontWeight: "400 !important",
|
|
fill: "#7E7E7E",
|
|
"@media (prefers-color-scheme: dark)": {
|
|
fill: "#A1A1A1",
|
|
},
|
|
},
|
|
"& .MuiChartsGrid-line": {
|
|
strokeDasharray: 2,
|
|
"@media (prefers-color-scheme: dark)": {
|
|
stroke: "#343645",
|
|
},
|
|
},
|
|
"& .MuiChartsAxis-directionY": {
|
|
// transform: 'translateX(-50px) !important'
|
|
},
|
|
}}
|
|
grid={{ horizontal: true }}
|
|
className="!w-full !mt-[20px] !h-[250px]"
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="myGradient"
|
|
x1="252.5"
|
|
y1="0"
|
|
x2="252.5"
|
|
y2="145"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#3A6FF8" stopOpacity="0.1" />
|
|
<stop offset="1" stopColor="#3A6FF8" stopOpacity="0.02" />
|
|
</linearGradient>
|
|
</defs>
|
|
</LineChart>
|
|
);
|
|
}
|
|
|
|
export default Chart;
|