107 lines
2.1 KiB
TypeScript
107 lines
2.1 KiB
TypeScript
import * as React from "react";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
} from "recharts";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
Typography,
|
|
Box,
|
|
|
|
} from "@mui/material";
|
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
|
const data = [
|
|
{ name: "Jan", v1: 40 },
|
|
{ name: "Feb", v1: 50 },
|
|
{ name: "Mar", v1: 80 },
|
|
{ name: "Apr", v1: 20 },
|
|
{ name: "May", v1: 60 },
|
|
{ name: "Jun", v1: 30 },
|
|
];
|
|
|
|
export default function RoundedBarChart() {
|
|
const theme = useTheme();
|
|
|
|
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",
|
|
}}
|
|
>
|
|
Charge 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",
|
|
}}
|
|
>
|
|
Monthly
|
|
</Typography>
|
|
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
|
|
</Box>
|
|
</div>
|
|
<BarChart
|
|
width={600}
|
|
height={300}
|
|
data={data}
|
|
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
|
|
style={{ width: "100%", height: "auto" }}
|
|
>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis />
|
|
<YAxis tickFormatter={(value) => `${value}`} />
|
|
|
|
<Bar dataKey="v1" fill="skyblue" radius={[10, 10, 0, 0]} />
|
|
<Bar dataKey="v2" fill="skyblue" radius={[10, 10, 0, 0]} />
|
|
</BarChart>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|