Added variance reporting on header RPS-45

src/components/molecules/reporting-scatterchart/reporting-scatterchart.molecule.jsx

@@ -1,5 +1,11 @@
-import { Card, Skeleton, Typography, Tooltip as AntdToolTip } from "antd";
-import React from "react";
+import {
+  Card,
+  Radio,
+  Skeleton,
+  Tooltip as AntdToolTip,
+  Typography,
+} from "antd";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import {
   CartesianGrid,
@@ -24,19 +30,23 @@ const mapStateToProps = createStructuredSelector({
   reportingLoading: selectReportLoading,
   scoreCard: selectScorecard,
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = (dispatch) => ({});
 export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(ReportingScatterChartMolecule);
 
 export function ReportingScatterChartMolecule({ reportingLoading, scoreCard }) {
+  const [type, setType] = useState("percent");
+
   if (reportingLoading) return <Skeleton active />;
   if (!scoreCard)
     return <ErrorResultAtom title="Error displaying score card data." />;
 
+  const handleTypeChange = (e) => {
+    setType(e.target.value);
+  };
+
   return (
     <div>
       <div
@@ -47,24 +57,60 @@ export function ReportingScatterChartMolecule({ reportingLoading, scoreCard }) {
           height: "30rem",
         }}
       >
-        <AntdToolTip
-          placement="bottomLeft"
-          title="Calculated as Actual Job RPS % less Target Job RPS %. E.g. 10% - 8% = 2%"
-        >
-          <Typography.Title level={4}>% Variance from Target</Typography.Title>
-        </AntdToolTip>
+        <div style={{ display: "flex", flexDirection: "row" }}>
+          {type === "percent" && (
+            <AntdToolTip
+              placement="bottomLeft"
+              title="Calculated as Actual Job RPS % less Target Job RPS %. E.g. 10% - 8% = 2%"
+            >
+              <Typography.Title level={4}>
+                % Variance from Target
+              </Typography.Title>
+            </AntdToolTip>
+          )}
+          {type === "dollars" && (
+            <AntdToolTip
+              placement="bottomLeft"
+              title="Calculated as Actual Job RPS $ less Target Job RPS $."
+            >
+              <Typography.Title level={4}>
+                $ Variance from Target
+              </Typography.Title>
+            </AntdToolTip>
+          )}
+
+          <Radio.Group
+            onChange={handleTypeChange}
+            value={type}
+            placeholder="Variance Type"
+            style={{ marginLeft: "auto" }}
+          >
+            <Radio.Button value="percent">% - Percent</Radio.Button>
+            <Radio.Button value="dollars">$ - Dollars</Radio.Button>
+          </Radio.Group>
+        </div>
 
         <ResponsiveContainer>
           <ScatterChart margin={{ top: 20, right: 20, bottom: 10, left: 10 }}>
             <CartesianGrid strokeDasharray="3 3" />
-            <XAxis
-              dataKey="deviation"
-              type="number"
-              ticks={[-100, -75, -50, -25, 0, 25, 50, 75, 100]}
-              domain={[-100, 100]}
-              name="Deviation"
-              unit="%"
-            />
+            {type === "percent" && (
+              <XAxis
+                dataKey="deviationPc"
+                type="number"
+                ticks={[-100, -75, -50, -25, 0, 25, 50, 75, 100]}
+                domain={[-100, 100]}
+                name="Deviation"
+                unit="%"
+              />
+            )}
+            {type === "dollars" && (
+              <XAxis
+                dataKey="deviationDollars"
+                type="number"
+                name="Deviation ($)"
+              />
+            )}
+
             <YAxis type="number" dataKey="age" name="Age" unit="Years" />
             <ZAxis dataKey="dbPriceSumAmt" name="DB Price Total" />
             <Tooltip
@@ -73,8 +119,6 @@ export function ReportingScatterChartMolecule({ reportingLoading, scoreCard }) {
                 if (!item) return null;
                 return (
                   <Card title={item.clm_no}>
-                    <div></div>
-                    <div></div>
                     <DataLabelAtom label="Owner">{item.owner}</DataLabelAtom>
                     <DataLabelAtom label="Vehicle">
                       {item.vehicle}
@@ -88,6 +132,12 @@ export function ReportingScatterChartMolecule({ reportingLoading, scoreCard }) {
                     <DataLabelAtom label="DB Price">
                       {item.dbPriceSum.toFormat()}
                     </DataLabelAtom>
+                    <DataLabelAtom label="Variance %">
+                      {`${item.deviationPc}%`}
+                    </DataLabelAtom>
+                    <DataLabelAtom label="Variance $">
+                      ${item.deviationDollars}
+                    </DataLabelAtom>
                   </Card>
                 );
               }}

src/redux/reporting/reporting.sagas.js

@@ -102,8 +102,13 @@ export function* handleCalculateScoreCard({ payload: jobs }) {
         actPriceSum
       );
 
+      const deviationPc = Math.round((jobRpsPc - jobTarget) * 1000) / 10;
+
       scoreCard.scatterChart[job.group].push({
-        deviation: Math.round((jobRpsPc - jobTarget) * 1000) / 10,
+        deviationPc: isNaN(deviationPc) ? -100 : deviationPc,
+        deviationDollars: (
+          jobRpsDollars.subtract(expectedRpsDollars).getAmount() / 100
+        ).toFixed(2),
         age: job.v_age,
         dbPriceSum,
         dbPriceSumAmt: dbPriceSum.getAmount() / 100,
@@ -112,7 +117,7 @@ export function* handleCalculateScoreCard({ payload: jobs }) {
         vehicle: `${job.v_model_yr} ${job.v_makedesc} ${job.v_model} (${job.v_type}) - ${job.group}`,
         clm_no: job.clm_no,
         jobRpsDollars,
-        jobRpsPc,
+        jobRpsPc: isNaN(jobRpsPc) ? -1 : jobRpsPc,
       });
 
       //sum db price * percentage expected.