[#391] Render ChartIncomeGap

frontend/src/components/chart/options/Bar.js

@@ -9,6 +9,7 @@ import {
   axisTitle,
   NoData,
   thousandFormatter,
+  formatNumberToString,
 } from "./common";
 import { sortBy, isEmpty, sumBy } from "lodash";
 
@@ -68,6 +69,9 @@ const Bar = ({
       axisLabel: {
         ...TextStyle,
         color: "#9292ab",
+        formatter: function (value) {
+          return formatNumberToString(value);
+        },
       },
     },
     [horizontal ? "yAxis" : "xAxis"]: {

frontend/src/pages/cases/Case.js

@@ -175,7 +175,9 @@ const Case = () => {
 
   const [loading, setLoading] = useState(false);
   const currentCase = CurrentCaseState.useState((s) => s);
-  const questionGroups = CaseVisualState.useState((s) => s.questionGroups);
+  const { questionGroups, totalIncomeQuestions } = CaseVisualState.useState(
+    (s) => s
+  );
 
   const updateStepIncomeTargetState = (key, value) => {
     CaseUIState.update((s) => {
@@ -370,6 +372,15 @@ const Case = () => {
           };
         });
 
+        const totalCurrentIncomeAnswer = totalIncomeQuestions
+          .map((qs) => segment.answers[`current-${qs}`])
+          .filter((a) => a)
+          .reduce((acc, a) => acc + a, 0);
+        const totalFeasibleIncomeAnswer = totalIncomeQuestions
+          .map((qs) => segment.answers[`feasible-${qs}`])
+          .filter((a) => a)
+          .reduce((acc, a) => acc + a, 0);
+
         const totalCostFeasible = remappedAnswers
           .filter((a) => a.feasibleCost)
           .reduce((acc, curr) => acc + curr.value, 0);
@@ -419,6 +430,8 @@ const Case = () => {
 
         return {
           ...segment,
+          total_current_income: totalCurrentIncomeAnswer,
+          total_feasible_income: totalFeasibleIncomeAnswer,
           total_feasible_cost: -totalCostFeasible,
           total_current_cost: -totalCostCurrent,
           total_feasible_focus_income: totalFeasibleFocusIncome,
@@ -439,7 +452,12 @@ const Case = () => {
         dashboardData: orderBy(mappedData, ["id"]),
       }));
     }
-  }, [currentCase.segments, currentCase.case_commodities, questionGroups]);
+  }, [
+    currentCase.segments,
+    currentCase.case_commodities,
+    questionGroups,
+    totalIncomeQuestions,
+  ]);
 
   return (
     <CaseWrapper caseId={caseId} step={step} currentCase={currentCase}>

frontend/src/pages/cases/visualizations/ChartIncomeGap.js

@@ -1,14 +1,99 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Card, Col, Row, Space } from "antd";
 import { VisualCardWrapper } from "../components";
+import { CaseVisualState, CurrentCaseState } from "../store";
+import Chart from "../../../components/chart";
+import { getColumnStackBarOptions } from "../../old-cases/visualizations";
+
+const seriesTmp = [
+  {
+    key: "total_current_income",
+    name: "Current Household Income",
+    type: "bar",
+    stack: "current",
+    color: "#1b726f",
+  },
+  {
+    key: "total_feasible_income",
+    name: "Feasible Household Income",
+    type: "bar",
+    stack: "feasible",
+    color: "#9cc2c1",
+  },
+  {
+    key: "current_income_gap",
+    name: "Current Income Gap",
+    type: "bar",
+    stack: "current",
+    color: "#fecb21",
+  },
+  {
+    key: "feasible_income_gap",
+    name: "Feasible Income Gap",
+    type: "bar",
+    stack: "feasible",
+    color: "#ffeeb8",
+  },
+  {
+    key: "target",
+    name: "Income Target",
+    type: "line",
+    symbol: "diamond",
+    symbolSize: 15,
+    color: "#000",
+  },
+];
 
 const ChartIncomeGap = () => {
+  const currentCase = CurrentCaseState.useState((s) => s);
+  const dashboardData = CaseVisualState.useState((s) => s.dashboardData);
+
+  const chartData = useMemo(() => {
+    return seriesTmp.map((tmp) => {
+      const data = dashboardData.map((d) => {
+        let value = d?.[tmp.key] ? d[tmp.key] : 0;
+        if (tmp.key === "current_income_gap") {
+          const currentIncomeGap =
+            d.target - d.total_current_income < 0
+              ? 0
+              : d.target - d.total_current_income;
+          value = currentIncomeGap;
+        }
+        if (tmp.key === "feasible_income_gap") {
+          const feasibleIncomeGap =
+            d.target - d.total_feasible_income < 0
+              ? 0
+              : d.target - d.total_feasible_income;
+          value = feasibleIncomeGap;
+        }
+        return {
+          name: d.name,
+          value: Math.round(value),
+        };
+      });
+      return {
+        ...tmp,
+        data: data,
+      };
+    });
+  }, [dashboardData]);
+
   return (
     <Card className="card-visual-wrapper">
       <Row gutter={[20, 20]} align="middle">
         <Col span={16}>
           <VisualCardWrapper title="Income gap" bordered>
-            Chart
+            <Chart
+              wrapper={false}
+              type="BAR"
+              loading={!chartData.length}
+              override={getColumnStackBarOptions({
+                series: chartData,
+                origin: dashboardData,
+                yAxis: { name: `Income (${currentCase.currency})` },
+                // showLabel: showLabel,
+              })}
+            />
           </VisualCardWrapper>
         </Col>
         <Col span={8}>

frontend/src/pages/old-cases/visualizations/index.js

@@ -9,6 +9,7 @@ import {
   Easing,
   LabelStyle,
   NoData,
+  formatNumberToString,
 } from "../../../components/chart/options/common";
 import isEmpty from "lodash/isEmpty";
 
@@ -106,7 +107,9 @@ export const getColumnStackBarOptions = ({
       nameLocation: "middle",
       nameGap: 75,
       axisLabel: {
-        formatter: (e) => thousandFormatter(e),
+        formatter: function (value) {
+          return formatNumberToString(value);
+        },
         ...TextStyle,
         color: "#9292ab",
       },