@@ -12,13 +12,13 @@ const CustomTooltip = ({ active, payload, label }) => {
|
|||||||
>
|
>
|
||||||
<p style={{ margin: "0" }}>{label}</p>
|
<p style={{ margin: "0" }}>{label}</p>
|
||||||
{payload.map((data, index) => {
|
{payload.map((data, index) => {
|
||||||
if (data.dataKey === "sales")
|
if (data.dataKey === "sales" || data.dataKey === "accSales")
|
||||||
return (
|
return (
|
||||||
<p
|
<p
|
||||||
style={{ margin: "10px 0", color: data.color }}
|
style={{ margin: "10px 0", color: data.color }}
|
||||||
key={index}
|
key={index}
|
||||||
>{`${data.name} : ${Dinero({
|
>{`${data.name} : ${Dinero({
|
||||||
amount: data.value,
|
amount: Math.round(data.value * 100),
|
||||||
}).toFormat()}`}</p>
|
}).toFormat()}`}</p>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import Dinero from "dinero.js";
|
||||||
import { Card } from "antd";
|
import { Card } from "antd";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
@@ -45,25 +46,22 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
|
|||||||
return {
|
return {
|
||||||
bodyhrs: dayAcc.bodyhrs + dayVal.bodyhrs,
|
bodyhrs: dayAcc.bodyhrs + dayVal.bodyhrs,
|
||||||
painthrs: dayAcc.painthrs + dayVal.painthrs,
|
painthrs: dayAcc.painthrs + dayVal.painthrs,
|
||||||
|
sales:
|
||||||
|
dayAcc.painthrs +
|
||||||
|
dayVal.job.job_totals.totals.subtotal.amount / 100 +
|
||||||
|
2500,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
{ bodyhrs: 0, painthrs: 0 }
|
{ bodyhrs: 0, painthrs: 0, sales: 0 }
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
dayhrs = {
|
dayhrs = {
|
||||||
bodyhrs: 0,
|
bodyhrs: 0,
|
||||||
painthrs: 0,
|
painthrs: 0,
|
||||||
|
sales: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const yesterdaySales = acc.length > 0 && acc[acc.length - 1].sales;
|
|
||||||
const sales =
|
|
||||||
sbEntriesByDate[val]?.reduce((acc, sb) => {
|
|
||||||
return acc + sb.job.job_totals.totals.subtotal.amount;
|
|
||||||
}, 0) || 0;
|
|
||||||
|
|
||||||
const accSales = yesterdaySales + sales;
|
|
||||||
|
|
||||||
const theValue = {
|
const theValue = {
|
||||||
date: moment(val).format("D ddd"),
|
date: moment(val).format("D ddd"),
|
||||||
paintHrs: _.round(dayhrs.painthrs, 1),
|
paintHrs: _.round(dayhrs.painthrs, 1),
|
||||||
@@ -82,7 +80,13 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
|
|||||||
: dayhrs.painthrs + dayhrs.bodyhrs,
|
: dayhrs.painthrs + dayhrs.bodyhrs,
|
||||||
1
|
1
|
||||||
),
|
),
|
||||||
sales: accSales,
|
sales: _.round(dayhrs.sales, 2),
|
||||||
|
accSales: _.round(
|
||||||
|
acc.length > 0
|
||||||
|
? acc[acc.length - 1].accSales + dayhrs.sales
|
||||||
|
: dayhrs.sales,
|
||||||
|
2
|
||||||
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
return [...acc, theValue];
|
return [...acc, theValue];
|
||||||
@@ -99,22 +103,18 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
|
|||||||
<XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
|
<XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
|
||||||
<YAxis
|
<YAxis
|
||||||
strokeWidth={graphProps.strokeWidth}
|
strokeWidth={graphProps.strokeWidth}
|
||||||
allowDataOverflow
|
// allowDataOverflow
|
||||||
dataKey="sales"
|
dataKey="sales"
|
||||||
yAxisId="right"
|
yAxisId="right"
|
||||||
|
tickFormatter={(value) =>
|
||||||
|
Dinero({ amount: Math.round(value * 100) }).toFormat()
|
||||||
|
}
|
||||||
orientation="right"
|
orientation="right"
|
||||||
/>
|
/>
|
||||||
<YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
|
<YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
|
||||||
<Tooltip content={<CustomTooltip />} />
|
<Tooltip content={<CustomTooltip />} />
|
||||||
<Legend />
|
<Legend />
|
||||||
<Area
|
|
||||||
type="monotone"
|
|
||||||
name="Accumulated Hours"
|
|
||||||
dataKey="accHrs"
|
|
||||||
fill="lightgreen"
|
|
||||||
stroke="green"
|
|
||||||
yAxisId="left"
|
|
||||||
/>
|
|
||||||
<Bar
|
<Bar
|
||||||
name="Body Hours"
|
name="Body Hours"
|
||||||
dataKey="bodyHrs"
|
dataKey="bodyHrs"
|
||||||
@@ -140,11 +140,30 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
|
|||||||
strokeWidth={graphProps.strokeWidth}
|
strokeWidth={graphProps.strokeWidth}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Line
|
<Area
|
||||||
name="Sales"
|
|
||||||
type="monotone"
|
type="monotone"
|
||||||
|
name="MTD Hours"
|
||||||
|
dataKey="accHrs"
|
||||||
|
fill="lightblue"
|
||||||
|
stroke="blue"
|
||||||
|
yAxisId="left"
|
||||||
|
/>
|
||||||
|
{
|
||||||
|
// <Area
|
||||||
|
// type="monotone"
|
||||||
|
// name="MTD Sales"
|
||||||
|
// dataKey="accSales"
|
||||||
|
// fill="lightgreen"
|
||||||
|
// stroke="green"
|
||||||
|
// yAxisId="right"
|
||||||
|
// />
|
||||||
|
}
|
||||||
|
<Bar
|
||||||
|
name="Sales"
|
||||||
dataKey="sales"
|
dataKey="sales"
|
||||||
stroke="#8F00FF"
|
stackId="day"
|
||||||
|
barSize={20}
|
||||||
|
fill="darkgreen"
|
||||||
yAxisId="right"
|
yAxisId="right"
|
||||||
strokeWidth={graphProps.strokeWidth}
|
strokeWidth={graphProps.strokeWidth}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -20,13 +20,9 @@ const mapDispatchToProps = (dispatch) => ({});
|
|||||||
|
|
||||||
const TechJobStatistics = ({ technician }) => {
|
const TechJobStatistics = ({ technician }) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const searchParams = queryString.parse(useLocation().search);
|
|
||||||
const { start, end } = searchParams;
|
|
||||||
|
|
||||||
const startDate = start
|
const startDate = moment().startOf("week")
|
||||||
? moment(start)
|
const endDate = moment().endOf("week");
|
||||||
: moment().startOf("week").subtract(7, "days");
|
|
||||||
const endDate = end ? moment(end) : moment().endOf("week");
|
|
||||||
|
|
||||||
const { loading, error, data } = useQuery(
|
const { loading, error, data } = useQuery(
|
||||||
QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE,
|
QUERY_TIME_TICKETS_TECHNICIAN_IN_RANGE,
|
||||||
|
|||||||
Reference in New Issue
Block a user