[#391] Create ChartExploreIncomeDriversBreakdown

akvo · Jan 20, 2025 · 8d8dc91 · 8d8dc91
1 parent 53121d5
commit 8d8dc91
Show file tree

Hide file tree

Showing 6 changed files with 322 additions and 123 deletions.
diff --git a/frontend/src/pages/cases/components/IncomeDriversDropdown.js b/frontend/src/pages/cases/components/IncomeDriversDropdown.js
@@ -1,84 +1,50 @@
-import React, { useMemo } from "react";
+import React, { useEffect } from "react";
 import { Select } from "antd";
 import { selectProps } from "../../../lib";
-import { uniqBy, capitalize } from "lodash";
-
-const otherCommodities = ["secondary", "tertiary"];
+import { CurrentCaseState } from "../store";
 
 const IncomeDriversDropdown = ({
+  driverOptionsDropdown,
   selectedSegmentData,
-  options = [],
-  value,
-  onChange,
+  selectedDriver,
+  setSelectedDriver,
+  setAxisTitle,
 }) => {
-  const driverOptionsDropdown = useMemo(() => {
-    if (!selectedSegmentData) {
-      return [];
+  const currentCase = CurrentCaseState.useState((s) => s);
+
+  useEffect(() => {
+    if (driverOptionsDropdown.length > 0) {
+      setSelectedDriver("diversified");
+    }
+  }, [driverOptionsDropdown, setSelectedDriver]);
+
+  const handleOnChangeDriverDropdown = (value) => {
+    setSelectedDriver(value);
+    if (value === "diversified") {
+      setAxisTitle(currentCase.currency);
+      return;
+    }
+    if (selectedSegmentData) {
+      const questions = selectedSegmentData.answers.find(
+        (a) => a.isTotalCurrentFocusIncome
+      ).question?.childrens;
+      const currentQuestion = questions.find((q) => q.id === value);
+      const { unit } = currentQuestion;
+      const unitName = unit
+        .split(" ")
+        .map((x) => currentCase?.[x])
+        .filter((x) => x)
+        .join(" / ");
+      setAxisTitle(unitName);
     }
-    const focusCommodityAnswers = selectedSegmentData.answers.filter(
-      (a) => a.commodityFocus && a.question.question_type !== "diversified"
-    );
-    const driverQuestions =
-      uniqBy(
-        focusCommodityAnswers.map((a) => a.question),
-        "id"
-      ).find((q) => !q.parent)?.childrens || [];
-    const focusRes = driverQuestions
-      .map((q) => ({
-        label: q.text,
-        type: "focus",
-        value: q.id,
-        childrens: q.childrens.map((q) => ({ ...q, type: "focus" })),
-      }))
-      .filter((x) => x.value !== 2); // remove land driver from dropdown
-    // add secondary - tertiary value
-    const additonalCommodities = otherCommodities
-      .map((x) => {
-        const commodity = selectedSegmentData.answers.find(
-          (a) =>
-            a.commodityType === x && a.question.question_type !== "diversified"
-        );
-        if (!commodity) {
-          return false;
-        }
-        return {
-          text: `Total ${capitalize(x)} / Non Primary - ${
-            commodity.commodityName
-          }`,
-          type: x,
-          id: x,
-        };
-      })
-      .filter((x) => x);
-    // add diversified questions
-    let diversifiedQuestions = selectedSegmentData.answers
-      .filter(
-        (a) =>
-          a.commodityType === "diversified" &&
-          a.question.question_type === "diversified"
-      )
-      .flatMap((a) => a.question);
-    diversifiedQuestions = uniqBy(diversifiedQuestions, "id").map((q) => ({
-      ...q,
-      type: "diversified",
-    }));
-    const diversifiedRes = [
-      {
-        label: "Diversified Income",
-        type: "diversified",
-        value: "diversified",
-        childrens: [...additonalCommodities, ...diversifiedQuestions],
-      },
-    ];
-    return [...focusRes, ...diversifiedRes];
-  }, [selectedSegmentData]);
+  };
 
   return (
     <Select
       options={driverOptionsDropdown}
       placeholder="Select Driver"
-      value={value}
-      onChange={onChange}
+      value={selectedDriver}
+      onChange={handleOnChangeDriverDropdown}
       {...selectProps}
       allowClear={false}
     />

diff --git a/frontend/src/pages/cases/components/SegmentSelector.js b/frontend/src/pages/cases/components/SegmentSelector.js
@@ -9,7 +9,7 @@ const SegmentSelector = ({ selectedSegment, setSelectedSegment }) => {
     if (!selectedSegment && dashboardData?.length > 0) {
       setSelectedSegment(dashboardData[0].id);
     }
-  }, [selectedSegment, dashboardData]);
+  }, [selectedSegment, dashboardData, setSelectedSegment]);
 
   const handleChangeSegmentSelector = (e) => {
     const value = e.target.value;

diff --git a/frontend/src/pages/cases/components/VisualCardWrapper.js b/frontend/src/pages/cases/components/VisualCardWrapper.js
@@ -1,28 +1,8 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React from "react";
 import { Row, Col, Card, Space, Button } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { SegmentSelector, IncomeDriversDropdown } from "../components";
-import { CaseVisualState } from "../store";
-
-const VisualCardWrapper = ({
-  children,
-  title,
-  bordered = false,
-  showSegmentSelector = false,
-  showIncomeDriversDropdown = false,
-}) => {
-  const dashboardData = CaseVisualState.useState((s) => s.dashboardData);
-
-  const [selectedSegment, setSelectedSegment] = useState(null);
-  const [selectedDriver, setSelectedDriver] = useState(null);
-
-  const selectedSegmentData = useMemo(() => {
-    if (!selectedSegment || !dashboardData.length) {
-      return null;
-    }
-    return dashboardData.find((d) => d.id === selectedSegment);
-  }, [dashboardData, selectedSegment]);
 
+const VisualCardWrapper = ({ children, title, bordered = false }) => {
   return (
     <Card
       className={`visual-card-wrapper ${bordered ? "bordered" : ""}`}
@@ -44,22 +24,7 @@ const VisualCardWrapper = ({
         </Row>
       }
     >
-      <Row gutter={[20, 20]}>
-        {showSegmentSelector && (
-          <Col span={24}>
-            <SegmentSelector
-              selectedSegment={selectedSegment}
-              setSelectedSegment={setSelectedSegment}
-            />
-          </Col>
-        )}
-        {showIncomeDriversDropdown && (
-          <Col span={24}>
-            <IncomeDriversDropdown selectedSegmentData={selectedSegmentData} />
-          </Col>
-        )}
-        <Col span={24}>{children}</Col>
-      </Row>
+      {children}
     </Card>
   );
 };

diff --git a/frontend/src/pages/cases/layout/CaseWrapper.js b/frontend/src/pages/cases/layout/CaseWrapper.js
@@ -108,10 +108,12 @@ const CaseWrapper = ({ children, step, caseId, currentCase }) => {
                 }
               >
                 {currentCase.segments.filter((s) => s.id).length ? (
-                  React.cloneElement(children, {
-                    setbackfunction: (fn) => (backFunctionRef.current = fn),
-                    setnextfunction: (fn) => (nextFunctionRef.current = fn),
-                  })
+                  React.isValidElement(children) ? (
+                    React.cloneElement(children, {
+                      setbackfunction: (fn) => (backFunctionRef.current = fn),
+                      setnextfunction: (fn) => (nextFunctionRef.current = fn),
+                    })
+                  ) : null
                 ) : (
                   // Show alert if current case doesn't have any segments
                   <Alert