100 lines
2.6 KiB
JavaScript
100 lines
2.6 KiB
JavaScript
import { Card } from "antd";
|
|
import moment from "moment";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import _ from "lodash";
|
|
import {
|
|
Area,
|
|
Bar,
|
|
CartesianGrid,
|
|
ComposedChart,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
import Dinero from "dinero.js";
|
|
import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
|
|
|
|
export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
|
|
const { t } = useTranslation();
|
|
if (!data) return null;
|
|
|
|
const jobsByDate = _.groupBy(data.monthly_sales, (item) =>
|
|
moment(item.date_invoiced).format("YYYY-MM-DD")
|
|
);
|
|
console.log(
|
|
"🚀 ~ file: monthly-revenue-graph.component.jsx ~ line 27 ~ jobsByDate",
|
|
jobsByDate
|
|
);
|
|
|
|
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.add(Dinero(dayVal.job_totals.totals.subtotal));
|
|
}, Dinero());
|
|
} else {
|
|
dailySales = Dinero();
|
|
}
|
|
|
|
const theValue = {
|
|
date: moment(val).format("DD"),
|
|
dailySales: dailySales.getAmount() / 100,
|
|
accSales:
|
|
acc.length > 0
|
|
? acc[acc.length - 1].accSales + dailySales.getAmount() / 100
|
|
: dailySales.getAmount() / 100,
|
|
};
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
export const DashboardMonthlyRevenueGraphGql = `
|
|
monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment()
|
|
.startOf("month")
|
|
.format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
|
|
.endOf("month")
|
|
.format("YYYY-MM-DD")}"}}]}) {
|
|
id
|
|
date_invoiced
|
|
job_totals
|
|
}
|
|
`;
|