131 lines
2.6 KiB
TypeScript
131 lines
2.6 KiB
TypeScript
import * as React from "react";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
Typography,
|
|
Box,
|
|
Select,
|
|
MenuItem,
|
|
FormControl,
|
|
SelectChangeEvent,
|
|
} from "@mui/material";
|
|
import { BarChart } from "@mui/x-charts/BarChart";
|
|
import { axisClasses } from "@mui/x-charts/ChartsAxis";
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
|
|
// Sample Data
|
|
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 },
|
|
];
|
|
|
|
// Chart Configuration
|
|
const chartSetting = {
|
|
yAxis: [
|
|
{
|
|
label: "Value",
|
|
tickFormatter: (value: number) => `${value}`, // Formatting Y-axis ticks
|
|
},
|
|
],
|
|
xAxis: [
|
|
{
|
|
dataKey: "name",
|
|
scaleType: "band" as const,
|
|
},
|
|
],
|
|
width: 500,
|
|
height: 300,
|
|
sx: {
|
|
[`.${axisClasses.left} .${axisClasses.label}`]: {
|
|
transform: "translate(-20px, 0)",
|
|
},
|
|
},
|
|
};
|
|
|
|
export default function RoundedBarChart() {
|
|
const theme = useTheme();
|
|
const [selectedOption, setSelectedOption] = React.useState("Monthly");
|
|
|
|
const handleChange = (event: SelectChangeEvent<string>) => {
|
|
setSelectedOption(event.target.value);
|
|
};
|
|
|
|
return (
|
|
<Card
|
|
variant="outlined"
|
|
sx={{
|
|
width: "553px",
|
|
height: "444px",
|
|
borderRadius: "16px",
|
|
"*:where([data-mui-color-scheme='dark']) &": {
|
|
backgroundColor: "#202020",
|
|
},
|
|
}}
|
|
>
|
|
<CardContent>
|
|
<Box display="flex" alignItems="center" color="#F2F2F2">
|
|
<Typography
|
|
variant="h6"
|
|
color="#F2F2F2"
|
|
sx={{
|
|
fontFamily: "Gilroy",
|
|
fontWeight: 500,
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
}}
|
|
>
|
|
Charge Stats
|
|
</Typography>
|
|
|
|
<FormControl
|
|
sx={{
|
|
mt: 2,
|
|
ml: "auto",
|
|
backgroundColor: "#202020",
|
|
color: "#F2F2F2",
|
|
width: "149px",
|
|
height: "44px",
|
|
padding: "12px 16px",
|
|
gap: "8px",
|
|
}}
|
|
>
|
|
<Select
|
|
value={selectedOption}
|
|
onChange={handleChange}
|
|
sx={{
|
|
color: "#D9D8D8",
|
|
".MuiSelect-icon": {
|
|
color: "#F2F2F2",
|
|
},
|
|
}}
|
|
IconComponent={ExpandMoreIcon}
|
|
>
|
|
<MenuItem value="Monthly">Monthly</MenuItem>
|
|
<MenuItem value="Weekly">Weekly</MenuItem>
|
|
<MenuItem value="Daily">Daily</MenuItem>
|
|
<MenuItem value="Yearly">Yearly</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
|
|
<BarChart
|
|
dataset={data}
|
|
series={[
|
|
{
|
|
dataKey: "v1",
|
|
label: "Value",
|
|
color: "skyblue",
|
|
},
|
|
]}
|
|
{...chartSetting}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|