83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
import { Card } from "antd";
|
|
import moment from "moment";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
Area,
|
|
Bar,
|
|
CartesianGrid,
|
|
ComposedChart,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis
|
|
} from "recharts";
|
|
import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
|
|
|
|
export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
|
|
const { t } = useTranslation();
|
|
|
|
const jobsByDate = {
|
|
"2020-07-5": [{ clm_total: 1224 }],
|
|
"2020-07-8": [{ clm_total: 987 }, { clm_total: 8755 }],
|
|
"2020-07-12": [{ clm_total: 684 }, { clm_total: 12022 }],
|
|
"2020-07-21": [{ clm_total: 15000 }],
|
|
"2020-07-28": [{ clm_total: 122 }, { clm_total: 4522 }],
|
|
};
|
|
|
|
const listOfDays = Utils.ListOfDaysInCurrentMonth();
|
|
|
|
const chartData = listOfDays.reduce((acc, val) => {
|
|
//Sum up the current day.
|
|
let dailySales;
|
|
if (!!jobsByDate[val]) {
|
|
dailySales = jobsByDate[val].reduce((dayAcc, dayVal) => {
|
|
return dayAcc + dayVal.clm_total;
|
|
}, 0);
|
|
} else {
|
|
dailySales = 0;
|
|
}
|
|
|
|
const theValue = {
|
|
date: moment(val).format("D dd"),
|
|
dailySales,
|
|
accSales:
|
|
acc.length > 0 ? acc[acc.length - 1].accSales + dailySales : dailySales,
|
|
};
|
|
|
|
return [...acc, theValue];
|
|
}, []);
|
|
|
|
return (
|
|
<Card title={t("dashboard.titles.monthlyrevenuegraph")} {...cardProps}>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<ComposedChart
|
|
data={chartData}
|
|
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
|
|
>
|
|
<CartesianGrid stroke="#f5f5f5" />
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Area
|
|
type="monotone"
|
|
name="Accumulated Sales"
|
|
dataKey="accSales"
|
|
fill="#8884d8"
|
|
stroke="#8884d8"
|
|
/>
|
|
<Bar
|
|
name="Daily Sales"
|
|
dataKey="dailySales"
|
|
//stackId="day"
|
|
barSize={20}
|
|
fill="#413ea0"
|
|
/>
|
|
</ComposedChart>
|
|
</ResponsiveContainer>
|
|
</Card>
|
|
);
|
|
}
|