From 471df3b65930fdcf4eca8f74b47de7d41a97edf8 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Tue, 15 Jun 2021 15:00:07 -0700 Subject: [PATCH] IO-306 Furhter dashboard development --- bodyshop_translations.babel | 21 ++++ .../monthly-labor-sales.component.jsx | 97 +++++++++++-------- .../monthly-parts-sales.component.jsx | 73 ++++++-------- .../monthly-revenue-graph.component.jsx | 4 +- .../refresh-required.component.jsx | 12 +-- .../dashboard-grid.component.jsx | 21 ++-- client/src/graphql/appointments.queries.js | 9 +- client/src/translations/en_us/common.json | 1 + client/src/translations/es/common.json | 1 + client/src/translations/fr/common.json | 1 + 10 files changed, 136 insertions(+), 104 deletions(-) diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 3ee30f568..5ec01e999 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -10532,6 +10532,27 @@ errors + + refreshrequired + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + updatinglayout false diff --git a/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx b/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx index c47afbe1f..a8d100e02 100644 --- a/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx +++ b/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx @@ -32,13 +32,9 @@ export default function DashboardMonthlyLaborSales({ data, ...cardProps }) { return { name: t(`joblines.fields.lbr_types.${key.toUpperCase()}`), value: laborData[key].getAmount() / 100, - // color: pieColor(i.status), + color: pieColor(key.toUpperCase()), }; }); - console.log( - "🚀 ~ file: monthly-parts-sales.component.jsx ~ line 34 ~ chartData", - chartData - ); return ( @@ -72,36 +68,56 @@ export const DashboardMonthlyRevenueGraphGql = ` `; +const pieColor = (type) => { + if (type === "LAA") return "lightgreen"; + else if (type === "LAB") return "dodgerblue"; + else if (type === "LAD") return "aliceblue"; + else if (type === "LAE") return "seafoam"; + else if (type === "LAG") return "chartreuse"; + else if (type === "LAF") return "magenta"; + else if (type === "LAM") return "gold"; + else if (type === "LAR") return "crimson"; + else if (type === "LAU") return "slategray"; + else if (type === "LA1") return "slategray"; + else if (type === "LA2") return "slategray"; + else if (type === "LA3") return "slategray"; + else if (type === "LA4") return "slategray"; + return "slategray"; +}; + const renderActiveShape = (props) => { - const RADIAN = Math.PI / 180; + //const RADIAN = Math.PI / 180; const { cx, cy, - midAngle, + //midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, payload, - percent, + // 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"; + // 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 ( - + {payload.name} + + {Dinero({ amount: Math.round(value * 100) }).toFormat()} + { outerRadius={outerRadius + 10} fill={fill} /> - - - = 0 ? 1 : -1) * 12} - y={ey} - textAnchor={textAnchor} - fill="#333" - > - {payload.name} - - = 0 ? 1 : -1) * 12} - y={ey} - dy={18} - textAnchor={textAnchor} - fill="#999" - > - {Dinero({ amount: Math.round(value * 100) }).toFormat()} - ); }; +// ; +// = 0 ? 1 : -1) * 12} +// y={ey} +// textAnchor={textAnchor} +// fill="#333" +// > +// {payload.name} +// +// = 0 ? 1 : -1) * 12} +// y={ey} +// dy={18} +// textAnchor={textAnchor} +// fill="#999" +// > +// {Dinero({ amount: Math.round(value * 100) }).toFormat()} +// diff --git a/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx b/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx index 9f651c009..7dfc6dc47 100644 --- a/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx +++ b/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx @@ -29,13 +29,9 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) { return { name: t(`joblines.fields.part_types.${key.toUpperCase()}`), value: partData[key].getAmount() / 100, - // color: pieColor(i.status), + color: pieColor(key.toUpperCase()), }; }); - console.log( - "🚀 ~ file: monthly-parts-sales.component.jsx ~ line 34 ~ chartData", - chartData - ); return ( @@ -68,37 +64,55 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) { export const DashboardMonthlyRevenueGraphGql = ` `; +const pieColor = (type) => { + if (type === "PAA") return "darkgreen"; + else if (type === "PAC") return "green"; + else if (type === "PAE") return "gold"; + else if (type === "PAG") return "seafoam"; + else if (type === "PAL") return "chartreuse"; + else if (type === "PAM") return "magenta"; + else if (type === "PAN") return "crimson"; + else if (type === "PAO") return "gold"; + else if (type === "PAP") return "crimson"; + else if (type === "PAR") return "indigo"; + else if (type === "PAS") return "dodgerblue"; + else if (type === "PASL") return "dodgerblue"; + return "slategray"; +}; const renderActiveShape = (props) => { - const RADIAN = Math.PI / 180; + // const RADIAN = Math.PI / 180; const { cx, cy, - midAngle, + // midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, payload, - percent, + // 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"; + // 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 ( - + {payload.name} + + {Dinero({ amount: Math.round(value * 100) }).toFormat()} + { outerRadius={outerRadius + 10} fill={fill} /> - - - = 0 ? 1 : -1) * 12} - y={ey} - textAnchor={textAnchor} - fill="#333" - > - {payload.name} - - = 0 ? 1 : -1) * 12} - y={ey} - dy={18} - textAnchor={textAnchor} - fill="#999" - > - {Dinero({ amount: Math.round(value * 100) }).toFormat()} - ); }; diff --git a/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx b/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx index 4cc24d59c..012bee464 100644 --- a/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx +++ b/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx @@ -69,8 +69,8 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) { type="monotone" name="Accumulated Sales" dataKey="accSales" - fill="#8884d8" - stroke="#8884d8" + fill="#3CB371" + stroke="#3CB371" /> - - - {t("dashboard.errors.refreshrequired")} - + +
{t("dashboard.errors.refreshrequired")}
 ); diff --git a/client/src/components/dashboard-grid/dashboard-grid.component.jsx b/client/src/components/dashboard-grid/dashboard-grid.component.jsx index 910913168..b7fa83049 100644 --- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx +++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx @@ -198,15 +198,19 @@ const componentList = { label: "Production Dollars", component: DashboardTotalProductionDollars, gqlFragment: null, - w: 2, + w: 1, h: 1, + minW: 2, + minH: 1, }, ProductionHours: { label: "Production Hours", component: DashboardTotalProductionHours, gqlFragment: DashboardTotalProductionHoursGql, - w: 2, + w: 3, h: 1, + minW: 3, + minH: 1, }, ProjectedMonthlySales: { label: "Projected Monthly Sales", @@ -214,6 +218,8 @@ const componentList = { gqlFragment: DashboardProjectedMonthlySalesGql, w: 2, h: 1, + minW: 2, + minH: 1, }, MonthlyRevenueGraph: { label: "Monthly Sales Graph", @@ -254,12 +260,15 @@ const componentList = { }; const createDashboardQuery = (state) => { - const componentBasedAdditions = state.layout - .map((item, index) => componentList[item.i].gqlFragment || "") - .join(""); + const componentBasedAdditions = + state && + Array.isArray(state.layout) && + state.layout + .map((item, index) => componentList[item.i].gqlFragment || "") + .join(""); return gql` query QUERY_DASHBOARD_DETAILS { - ${componentBasedAdditions} + ${componentBasedAdditions || ""} monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment() .startOf("month") .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment() diff --git a/client/src/graphql/appointments.queries.js b/client/src/graphql/appointments.queries.js index 8afa5edfd..b5ffa9091 100644 --- a/client/src/graphql/appointments.queries.js +++ b/client/src/graphql/appointments.queries.js @@ -228,7 +228,6 @@ export const QUERY_SCHEDULE_LOAD_DATA = gql` where: { scheduled_completion: { _gte: $start, _lte: $end } } ) { id - ro_number scheduled_completion labhrs: joblines_aggregate( @@ -250,15 +249,9 @@ export const QUERY_SCHEDULE_LOAD_DATA = gql` } } } - arrJobs: jobs( - where: { - scheduled_in: { _gte: $start, _lte: $end } - removed: { _eq: false } - } - ) { + arrJobs: jobs(where: { scheduled_in: { _gte: $start, _lte: $end } }) { id scheduled_in - ro_number labhrs: joblines_aggregate( where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } } diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 1eb0ae3c6..ca20053e7 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -668,6 +668,7 @@ "addcomponent": "Add Component" }, "errors": { + "refreshrequired": "You must refresh the dashboard data to see this component.", "updatinglayout": "Error saving updated layout {{message}}" }, "labels": { diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 6cbc97daa..b6b76da07 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -668,6 +668,7 @@ "addcomponent": "" }, "errors": { + "refreshrequired": "", "updatinglayout": "" }, "labels": { diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index f9b208bd5..d43ebc656 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -668,6 +668,7 @@ "addcomponent": "" }, "errors": { + "refreshrequired": "", "updatinglayout": "" }, "labels": {