[#391] Create CompareIncomeGap visualization

akvo · Jan 17, 2025 · 88e48ef · 88e48ef
1 parent b9739f3
commit 88e48ef
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 2 deletions.
diff --git a/frontend/src/pages/cases/steps/steps.scss b/frontend/src/pages/cases/steps/steps.scss
@@ -274,4 +274,66 @@
       line-height: 157.15%;
     }
   }
+
+  .compare-income-gap-table-wrapper {
+    .ant-table {
+      border: 1px solid #eaecf0;
+      border-radius: 20px;
+
+      .ant-table-thead {
+        background: #01625f;
+        border-radius: 40px;
+
+        // top-left
+        tr:first-child > *:first-child {
+          border-start-start-radius: 20px;
+        }
+
+        // top-right
+        tr:last-child > *:last-child {
+          border-start-end-radius: 20px;
+        }
+
+        .ant-table-cell {
+          color: #fff;
+          background: transparent;
+          font-family: "RocGrotesk";
+          font-size: 13px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 157.15%;
+
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+      .ant-table-tbody {
+        /* Style for even odd rows */
+        tr:nth-child(even) {
+          background-color: rgba(242, 242, 242, 0.5);
+        }
+        tr:nth-child(odd) {
+          background-color: #ffffff;
+        }
+        // bottom-left
+        tr:last-child > *:first-child {
+          border-end-start-radius: 20px;
+        }
+        // bottom-right
+        tr:last-child > *:last-child {
+          border-end-end-radius: 20px;
+        }
+
+        .ant-table-cell {
+          font-family: "TabletGothic";
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px;
+        }
+      }
+    }
+  }
 }
diff --git a/frontend/src/pages/cases/visualizations/CompareIncomeGap.js b/frontend/src/pages/cases/visualizations/CompareIncomeGap.js
@@ -1,7 +1,62 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Card, Col, Row, Space, Table } from "antd";
+import { CurrentCaseState, CaseVisualState } from "../store";
+import { thousandFormatter } from "../../../components/chart/options/common";
 
 const CompareIncomeGap = () => {
+  const currentCase = CurrentCaseState.useState((s) => s);
+  const dashboardData = CaseVisualState.useState((s) => s.dashboardData);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "Segment",
+        dataIndex: "name",
+        key: "name",
+        width: "30%",
+      },
+      {
+        title: "Number of farmers",
+        dataIndex: "number_of_farmers",
+        key: "number_of_farmers",
+        width: "20%",
+      },
+      {
+        title: "Income gap at current level",
+        dataIndex: "current_income_gap",
+        key: "current_income_gap",
+        render: (value) => `${value} ${currentCase.currency}`,
+      },
+      {
+        title: "Income gap at feasible level",
+        dataIndex: "feasible_income_gap",
+        key: "feasible_income_gap",
+        render: (value) => `${value} ${currentCase.currency}`,
+      },
+    ];
+  }, [currentCase.currency]);
+
+  const dataSource = useMemo(() => {
+    const res = dashboardData.map((d) => {
+      const currentIncomeGap =
+        d.target - d.total_current_income < 0
+          ? 0
+          : d.target - d.total_current_income;
+      const feasibleIncomeGap =
+        d.target - d.total_feasible_income < 0
+          ? 0
+          : d.target - d.total_feasible_income;
+      return {
+        id: d.id,
+        name: d.name,
+        number_of_farmers: d.number_of_farmers || 0,
+        current_income_gap: thousandFormatter(currentIncomeGap, 2),
+        feasible_income_gap: thousandFormatter(feasibleIncomeGap, 2),
+      };
+    });
+    return res;
+  }, [dashboardData]);
+
   return (
     <Card className="card-visual-wrapper">
       <Row gutter={[20, 20]} align="middle">
@@ -19,7 +74,13 @@ const CompareIncomeGap = () => {
           </Space>
         </Col>
         <Col span={16}>
-          <Table columns={[]} dataSource={[]} />
+          <Table
+            className="compare-income-gap-table-wrapper"
+            rowKey={(record) => record.id}
+            columns={columns}
+            dataSource={dataSource}
+            pagination={false}
+          />
         </Col>
       </Row>
     </Card>