admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated parts status graph and formatting. BOD-328

Browse Source
This commit is contained in:
Patrick Fic
2020-08-27 15:56:01 -07:00
parent 6e611fbc7c
commit cc2947c7a2
14 changed files with 150 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -145,7 +145,7 @@ export function JobDetailCards({ setPrintCenterContext }) {
data={data ? data.jobs_by_pk : null}
/>
</Col>
<Col span={24}>
<Col {...colBreakPoints}>
<JobDetailCardsPartsComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
@@ -163,7 +163,7 @@ export function JobDetailCards({ setPrintCenterContext }) {
data={data ? data.jobs_by_pk : null}
/>
</Col>
<Col span={24}>
<Col {...colBreakPoints}>
<JobDetailCardsDamageComponent
loading={loading}
data={data ? data.jobs_by_pk : null}

130
client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx
View File

@@ -1,141 +1,17 @@
import React, { useMemo, useState } from "react";
import React from "react";
import { useTranslation } from "react-i18next";
import { Pie, PieChart, Sector } from "recharts";
import PartsStatusPie from "../parts-status-pie/parts-status-pie.component";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsPartsComponent({ loading, data }) {
const { t } = useTranslation();
const { joblines_status } = data;
// console.log(
// "JobDetailCardsPartsComponent -> joblines_stats",
// joblines_status
// );
const memoizedData = useMemo(() => Calculatedata(joblines_status), [
joblines_status,
]);
const [state, setState] = useState({ activeIndex: 0 });
const onPieEnter = (data, index) => {
setState({
activeIndex: index,
});
};
return (
<div>
<CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
<PieChart width={400} height={400}>
<Pie
activeIndex={state.activeIndex}
activeShape={renderActiveShape}
data={memoizedData}
cx={200}
cy={200}
innerRadius={60}
outerRadius={80}
fill="#8884d8"
dataKey="value"
onMouseEnter={onPieEnter}
/>
</PieChart>
<PartsStatusPie joblines_status={joblines_status} />
</CardTemplate>
</div>
);
}
const Calculatedata = (data) => {
if (data.length > 0) {
const statusMapping = {};
data.map((i) => {
if (!statusMapping[i.status])
statusMapping[i.status] = { name: i.status || "No Status*", value: 0 };
statusMapping[i.status].value = statusMapping[i.status].value + i.count;
return null;
});
return Object.keys(statusMapping).map((key) => {
return statusMapping[key];
});
} else {
return [
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 },
{ name: "Group D", value: 200 },
];
}
};
const renderActiveShape = (props) => {
const RADIAN = Math.PI / 180;
const {
cx,
cy,
midAngle,
innerRadius,
outerRadius,
startAngle,
endAngle,
fill,
payload,
percent,
value,
} = props;
const sin = Math.sin(-RADIAN * midAngle);
const cos = Math.cos(-RADIAN * midAngle);
const sx = cx + (outerRadius + 10) * cos;
const sy = cy + (outerRadius + 10) * sin;
const mx = cx + (outerRadius + 30) * cos;
const my = cy + (outerRadius + 30) * sin;
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
const ey = my;
const textAnchor = cos >= 0 ? "start" : "end";
return (
<g>
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
{payload.name}
</text>
<Sector
cx={cx}
cy={cy}
innerRadius={innerRadius}
outerRadius={outerRadius}
startAngle={startAngle}
endAngle={endAngle}
fill={fill}
/>
<Sector
cx={cx}
cy={cy}
startAngle={startAngle}
endAngle={endAngle}
innerRadius={outerRadius + 6}
outerRadius={outerRadius + 10}
fill={fill}
/>
<path
d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
stroke={fill}
fill="none"
/>
<circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
textAnchor={textAnchor}
fill="#333"
>{`Count: ${value}`}</text>
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
dy={18}
textAnchor={textAnchor}
fill="#999"
>
{`(${(percent * 100).toFixed(2)}%)`}
</text>
</g>
);
};

13
client/src/components/job-detail-cards/job-detail-cards.totals.component.jsx
View File

@@ -6,22 +6,15 @@ import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsTotalsComponent({ loading, data }) {
const { t } = useTranslation();
let totals;
try {
totals = JSON.parse(data.job_totals);
} catch (error) {
console.log("Error in CardsTotal component", error);
}
return (
<CardTemplate loading={loading} title={t("jobs.labels.cards.totals")}>
{totals ? (
{data.job_totals ? (
<div className="imex-flex-row imex-flex-row__flex-space-around">
<Statistic
className="imex-flex-row__margin-large"
title={t("jobs.labels.total_repairs")}
value={Dinero(totals.totals.total_repairs).toFormat()}
value={Dinero(data.job_totals.totals.total_repairs).toFormat()}
/>
<Statistic
className="imex-flex-row__margin-large"
@@ -33,7 +26,7 @@ export default function JobDetailCardsTotalsComponent({ loading, data }) {
<Statistic
className="imex-flex-row__margin-large"
title={t("jobs.labels.net_repairs")}
value={Dinero(totals.totals.net_repairs).toFormat()}
value={Dinero(data.job_totals.totals.net_repairs).toFormat()}
/>
</div>
) : (