Commit bf1a944e authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

graph sales in admin report

parent 9ff8cb19
import * as React from 'react'; import * as React from "react";
import { useTheme } from '@mui/material/styles'; import { useTheme } from "@mui/material/styles";
import { LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer } from 'recharts'; import {
import Title from './Title'; LineChart,
Line,
XAxis,
YAxis,
Label,
ResponsiveContainer,
} from "recharts";
import Title from "./Title";
import { UserContext } from "@/pages/_app";
import { AdminOrderContext } from "../layout/AdminLayout";
// Generate Sales Data // Generate Sales Data
function createData(time, amount) { function createData(time, amount) {
return { time, amount }; return { time, amount };
} }
const data = [
createData('00:00', 0),
createData('03:00', 300),
createData('06:00', 600),
createData('09:00', 800),
createData('12:00', 1500),
createData('15:00', 2000),
createData('18:00', 2400),
createData('21:00', 2400),
createData('24:00', undefined),
];
export default function Chart() { export default function Chart() {
const theme = useTheme(); const theme = useTheme();
const user = React.useContext(UserContext);
const adminOrder = React.useContext(AdminOrderContext);
const [month, setMonth] = React.useState("");
const [year, setYear] = React.useState("2023");
const [data, setData] = React.useState([
createData("00:00", 0),
createData("03:00", 300),
createData("06:00", 600),
createData("09:00", 800),
createData("12:00", 1500),
createData("15:00", 2000),
createData("18:00", 2400),
createData("21:00", 2400),
createData("24:00", undefined),
]);
React.useEffect(() => {
if (!user.value?.token || adminOrder.value.length === 0) return;
const date = new Date(adminOrder.value[0].date);
const date_all = [];
const date_price = {};
const month_now = date.toLocaleString("default", { month: "long" });
const year_now = date.getFullYear();
for (let i = 0; i < adminOrder.value.length; i++) {
let d = new Date(adminOrder.value[i].date);
let da = d.getDate();
let m = date.toLocaleString("default", { month: "long" });
let y = date.getFullYear();
if (m === month_now && y === year_now) {
if (!date_all.includes(da)) date_all.push(da);
if (date_price[da]) {
date_price[da] += Number(adminOrder.value[i].total_price);
} else {
date_price[da] = Number(adminOrder.value[i].total_price);
}
}
}
setMonth(month_now);
setYear(year_now);
date_all.reverse()
let graph = []
date_all.map( dat => {
graph.push(createData(dat, date_price[dat]))
})
setData(graph)
}, [user]);
return ( return (
<React.Fragment> <React.Fragment>
...@@ -49,7 +95,7 @@ export default function Chart() { ...@@ -49,7 +95,7 @@ export default function Chart() {
angle={270} angle={270}
position="left" position="left"
style={{ style={{
textAnchor: 'middle', textAnchor: "middle",
fill: theme.palette.text.primary, fill: theme.palette.text.primary,
...theme.typography.body1, ...theme.typography.body1,
}} }}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment