153 lines
3.4 KiB
TypeScript
153 lines
3.4 KiB
TypeScript
import * as React from "react";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import Card from "@mui/material/Card";
|
|
import CardContent from "@mui/material/CardContent";
|
|
import Chip from "@mui/material/Chip";
|
|
import Typography from "@mui/material/Typography";
|
|
import Stack from "@mui/material/Stack";
|
|
import { LineChart } from "@mui/x-charts/LineChart";
|
|
import { Box } from "@mui/material";
|
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
|
function AreaGradient({ color, id }: { color: string; id: string }) {
|
|
return (
|
|
<defs>
|
|
<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
|
|
<stop offset="0%" stopColor={color} stopOpacity={0.5} />
|
|
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
);
|
|
}
|
|
|
|
function getDaysInMonth(month: number, year: number) {
|
|
const date = new Date(year, month, 0);
|
|
const monthName = date.toLocaleDateString("en-US", {
|
|
month: "short",
|
|
});
|
|
const daysInMonth = date.getDate();
|
|
const days = [];
|
|
let i = 1;
|
|
while (days.length < daysInMonth) {
|
|
days.push(`${monthName} ${i}`);
|
|
i += 1;
|
|
}
|
|
return days;
|
|
}
|
|
|
|
export default function LineChartCard() {
|
|
const theme = useTheme();
|
|
const data = getDaysInMonth(4, 2024);
|
|
|
|
const colorPalette = [theme.palette.primary.light];
|
|
|
|
return (
|
|
<Card
|
|
variant="outlined"
|
|
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
|
|
>
|
|
<CardContent>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
color: "#FFFFFF",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h6"
|
|
align="left"
|
|
color="#FFFFFF"
|
|
sx={{
|
|
fontFamily: "Gilroy",
|
|
fontWeight: 500,
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
}}
|
|
>
|
|
Sales Stats
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
mt: 2,
|
|
mb: 2,
|
|
backgroundColor: "#3B3B3B",
|
|
marginLeft: "auto",
|
|
marginRight: "16px",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
p: 1.5,
|
|
borderRadius: "8px",
|
|
border: "1px solid #454545",
|
|
|
|
padding: "4px 8px",
|
|
color: "#FFFFFF",
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
fontFamily: "Gilroy",
|
|
fontWeight: 500,
|
|
fontSize: "14px",
|
|
lineHeight: "24px",
|
|
color: "#F2F2F2",
|
|
p: "4px",
|
|
}}
|
|
>
|
|
Weekly
|
|
</Typography>
|
|
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
|
|
</Box>
|
|
</div>
|
|
|
|
<LineChart
|
|
colors={colorPalette}
|
|
xAxis={[
|
|
{
|
|
scaleType: "point",
|
|
data,
|
|
tickInterval: (index, i) => (i + 1) % 5 === 0,
|
|
},
|
|
]}
|
|
series={[
|
|
{
|
|
id: "direct",
|
|
label: "Direct",
|
|
showMark: false,
|
|
curve: "linear",
|
|
stack: "total",
|
|
area: true,
|
|
stackOrder: "ascending",
|
|
data: [
|
|
300, 900, 500, 1200, 1500, 1800, 2400, 2100,
|
|
2700, 3000, 1800, 3300, 3600, 3900, 4200, 4500,
|
|
3900, 4800, 5100, 5400, 4500, 5700, 6000, 6300,
|
|
6600, 6900, 7200, 7500, 7800, 8100,
|
|
],
|
|
color: "#FFFFFF",
|
|
},
|
|
]}
|
|
height={250}
|
|
margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
|
|
grid={{ horizontal: true }}
|
|
sx={{
|
|
"& .MuiAreaElement-series-direct": {
|
|
fill: "url('#direct')",
|
|
},
|
|
}}
|
|
slotProps={{
|
|
legend: {
|
|
hidden: true,
|
|
},
|
|
}}
|
|
>
|
|
<AreaGradient
|
|
color={theme.palette.primary.light}
|
|
id="direct"
|
|
/>
|
|
</LineChart>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|