- Merge client update into test-beta
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
@@ -1,39 +1,39 @@
|
||||
import Dinero from "dinero.js";
|
||||
|
||||
const CustomTooltip = ({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid gray",
|
||||
padding: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<p style={{ margin: "0" }}>{label}</p>
|
||||
{payload.map((data, index) => {
|
||||
if (data.dataKey === "sales" || data.dataKey === "accSales")
|
||||
return (
|
||||
<p
|
||||
style={{ margin: "10px 0", color: data.color }}
|
||||
key={index}
|
||||
>{`${data.name} : ${Dinero({
|
||||
amount: Math.round(data.value * 100),
|
||||
}).toFormat()}`}</p>
|
||||
);
|
||||
const CustomTooltip = ({active, payload, label}) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid gray",
|
||||
padding: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<p style={{margin: "0"}}>{label}</p>
|
||||
{payload.map((data, index) => {
|
||||
if (data.dataKey === "sales" || data.dataKey === "accSales")
|
||||
return (
|
||||
<p
|
||||
style={{margin: "10px 0", color: data.color}}
|
||||
key={index}
|
||||
>{`${data.name} : ${Dinero({
|
||||
amount: Math.round(data.value * 100),
|
||||
}).toFormat()}`}</p>
|
||||
);
|
||||
|
||||
return (
|
||||
<p
|
||||
style={{ margin: "10px 0", color: data.color }}
|
||||
key={index}
|
||||
>{`${data.name} : ${data.value}`}</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<p
|
||||
style={{margin: "10px 0", color: data.color}}
|
||||
key={index}
|
||||
>{`${data.name} : ${data.value}`}</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
return null;
|
||||
};
|
||||
|
||||
export default CustomTooltip;
|
||||
|
||||
@@ -1,174 +1,174 @@
|
||||
import { Card } from "antd";
|
||||
import {Card} from "antd";
|
||||
import Dinero from "dinero.js";
|
||||
import _ from "lodash";
|
||||
import moment from "moment";
|
||||
import dayjs from "../../utils/day";
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import {connect} from "react-redux";
|
||||
import {
|
||||
Area,
|
||||
Bar,
|
||||
CartesianGrid,
|
||||
ComposedChart,
|
||||
Legend,
|
||||
Line,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Area,
|
||||
Bar,
|
||||
CartesianGrid,
|
||||
ComposedChart,
|
||||
Legend,
|
||||
Line,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||
import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
|
||||
import CustomTooltip from "./chart-custom-tooltip";
|
||||
|
||||
const graphProps = {
|
||||
strokeWidth: 3,
|
||||
strokeWidth: 3,
|
||||
};
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardChart);
|
||||
|
||||
export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
|
||||
const listOfBusDays = Utils.ListOfDaysInCurrentMonth();
|
||||
export function ScoreboardChart({sbEntriesByDate, bodyshop}) {
|
||||
const listOfBusDays = Utils.ListOfDaysInCurrentMonth();
|
||||
|
||||
const data = listOfBusDays.reduce((acc, val) => {
|
||||
//Sum up the current day.
|
||||
let dayhrs;
|
||||
if (!!sbEntriesByDate[val]) {
|
||||
dayhrs = sbEntriesByDate[val].reduce(
|
||||
(dayAcc, dayVal) => {
|
||||
return {
|
||||
bodyhrs: dayAcc.bodyhrs + dayVal.bodyhrs,
|
||||
painthrs: dayAcc.painthrs + dayVal.painthrs,
|
||||
sales:
|
||||
dayAcc.sales + dayVal.job.job_totals.totals.subtotal.amount / 100,
|
||||
};
|
||||
},
|
||||
{ bodyhrs: 0, painthrs: 0, sales: 0 }
|
||||
);
|
||||
} else {
|
||||
dayhrs = {
|
||||
bodyhrs: 0,
|
||||
painthrs: 0,
|
||||
sales: 0,
|
||||
};
|
||||
}
|
||||
const data = listOfBusDays.reduce((acc, val) => {
|
||||
//Sum up the current day.
|
||||
let dayhrs;
|
||||
if (!!sbEntriesByDate[val]) {
|
||||
dayhrs = sbEntriesByDate[val].reduce(
|
||||
(dayAcc, dayVal) => {
|
||||
return {
|
||||
bodyhrs: dayAcc.bodyhrs + dayVal.bodyhrs,
|
||||
painthrs: dayAcc.painthrs + dayVal.painthrs,
|
||||
sales:
|
||||
dayAcc.sales + dayVal.job.job_totals.totals.subtotal.amount / 100,
|
||||
};
|
||||
},
|
||||
{bodyhrs: 0, painthrs: 0, sales: 0}
|
||||
);
|
||||
} else {
|
||||
dayhrs = {
|
||||
bodyhrs: 0,
|
||||
painthrs: 0,
|
||||
sales: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const theValue = {
|
||||
date: moment(val).format("D ddd"),
|
||||
paintHrs: _.round(dayhrs.painthrs, 1),
|
||||
bodyHrs: _.round(dayhrs.bodyhrs, 1),
|
||||
accTargetHrs: _.round(
|
||||
Utils.AsOfDateTargetHours(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget +
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
val
|
||||
) +
|
||||
bodyshop.scoreboard_target.dailyBodyTarget +
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
1
|
||||
),
|
||||
accHrs: _.round(
|
||||
acc.length > 0
|
||||
? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
|
||||
: dayhrs.painthrs + dayhrs.bodyhrs,
|
||||
1
|
||||
),
|
||||
sales: _.round(dayhrs.sales, 2),
|
||||
accSales: _.round(
|
||||
acc.length > 0
|
||||
? acc[acc.length - 1].accSales + dayhrs.sales
|
||||
: dayhrs.sales,
|
||||
2
|
||||
),
|
||||
};
|
||||
const theValue = {
|
||||
date: dayjs(val).format("D ddd"),
|
||||
paintHrs: _.round(dayhrs.painthrs, 1),
|
||||
bodyHrs: _.round(dayhrs.bodyhrs, 1),
|
||||
accTargetHrs: _.round(
|
||||
Utils.AsOfDateTargetHours(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget +
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
val
|
||||
) +
|
||||
bodyshop.scoreboard_target.dailyBodyTarget +
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
1
|
||||
),
|
||||
accHrs: _.round(
|
||||
acc.length > 0
|
||||
? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
|
||||
: dayhrs.painthrs + dayhrs.bodyhrs,
|
||||
1
|
||||
),
|
||||
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];
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<ResponsiveContainer width="100%" height={475}>
|
||||
<ComposedChart
|
||||
data={data}
|
||||
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
|
||||
>
|
||||
<CartesianGrid stroke="#f5f5f5" />
|
||||
<XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
|
||||
<YAxis
|
||||
strokeWidth={graphProps.strokeWidth}
|
||||
// allowDataOverflow
|
||||
dataKey="sales"
|
||||
yAxisId="right"
|
||||
tickFormatter={(value) =>
|
||||
Dinero({ amount: Math.round(value * 100) }).toFormat()
|
||||
}
|
||||
orientation="right"
|
||||
/>
|
||||
<YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
return (
|
||||
<Card>
|
||||
<ResponsiveContainer width="100%" height={475}>
|
||||
<ComposedChart
|
||||
data={data}
|
||||
margin={{top: 20, right: 20, bottom: 20, left: 20}}
|
||||
>
|
||||
<CartesianGrid stroke="#f5f5f5"/>
|
||||
<XAxis dataKey="date" strokeWidth={graphProps.strokeWidth}/>
|
||||
<YAxis
|
||||
strokeWidth={graphProps.strokeWidth}
|
||||
// allowDataOverflow
|
||||
dataKey="sales"
|
||||
yAxisId="right"
|
||||
tickFormatter={(value) =>
|
||||
Dinero({amount: Math.round(value * 100)}).toFormat()
|
||||
}
|
||||
orientation="right"
|
||||
/>
|
||||
<YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth}/>
|
||||
<Tooltip content={<CustomTooltip/>}/>
|
||||
<Legend/>
|
||||
|
||||
<Bar
|
||||
name="Body Hours"
|
||||
dataKey="bodyHrs"
|
||||
stackId="day"
|
||||
barSize={20}
|
||||
fill="darkblue"
|
||||
yAxisId="left"
|
||||
/>
|
||||
<Bar
|
||||
name="Paint Hours"
|
||||
dataKey="paintHrs"
|
||||
stackId="day"
|
||||
barSize={20}
|
||||
fill="darkred"
|
||||
yAxisId="left"
|
||||
/>
|
||||
<Line
|
||||
name="Target Hours"
|
||||
type="monotone"
|
||||
dataKey="accTargetHrs"
|
||||
stroke="#ff7300"
|
||||
yAxisId="left"
|
||||
strokeWidth={graphProps.strokeWidth}
|
||||
/>
|
||||
<Bar
|
||||
name="Body Hours"
|
||||
dataKey="bodyHrs"
|
||||
stackId="day"
|
||||
barSize={20}
|
||||
fill="darkblue"
|
||||
yAxisId="left"
|
||||
/>
|
||||
<Bar
|
||||
name="Paint Hours"
|
||||
dataKey="paintHrs"
|
||||
stackId="day"
|
||||
barSize={20}
|
||||
fill="darkred"
|
||||
yAxisId="left"
|
||||
/>
|
||||
<Line
|
||||
name="Target Hours"
|
||||
type="monotone"
|
||||
dataKey="accTargetHrs"
|
||||
stroke="#ff7300"
|
||||
yAxisId="left"
|
||||
strokeWidth={graphProps.strokeWidth}
|
||||
/>
|
||||
|
||||
<Area
|
||||
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"
|
||||
stackId="day"
|
||||
barSize={20}
|
||||
fill="darkgreen"
|
||||
yAxisId="right"
|
||||
strokeWidth={graphProps.strokeWidth}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
);
|
||||
<Area
|
||||
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"
|
||||
stackId="day"
|
||||
barSize={20}
|
||||
fill="darkgreen"
|
||||
yAxisId="right"
|
||||
strokeWidth={graphProps.strokeWidth}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user