[#399] Enable show label and export btn in Understand income gap page

akvo · Jan 24, 2025 · 21ea360 · 21ea360
1 parent ebcddc7
commit 21ea360
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/frontend/src/pages/cases/steps/UnderstandIncomeGap.js b/frontend/src/pages/cases/steps/UnderstandIncomeGap.js
@@ -37,12 +37,13 @@ const UnderstandIncomeGap = ({ setbackfunction, setnextfunction }) => {
     <Row id="understand-income-gap" gutter={[24, 24]}>
       <Col span={24} className="header-wrapper">
         <Space direction="vertical">
-          <div className="title">Explanatory text</div>
+          <div className="title">What is the current income situation?</div>
           <div className="description">
-            This page enables you to explore various scenarios by adjusting your
-            income drivers in different ways across your segments. This allows
-            you to understand the potential paths towards improving farmer
-            household income
+            This page provides an overview of the current income situation of
+            farmers across various segments, offering insights into the living
+            income gap. It also enables a detailed exploration of the
+            composition of income drivers, helping you better understand their
+            contributions.
           </div>
         </Space>
       </Col>
@@ -58,6 +59,13 @@ const UnderstandIncomeGap = ({ setbackfunction, setnextfunction }) => {
       <Col span={24}>
         <CompareIncomeGap />
       </Col>
+      {/* EOL Chart */}
+      <Col span={24}>
+        <Card className="card-section-wrapper">
+          Understand current income and the income gap
+        </Card>
+      </Col>
+      {/* Chart */}
       <Col span={24}>
         <ChartExploreIncomeDriverBreakdown />
       </Col>

diff --git a/frontend/src/pages/cases/visualizations/ChartExploreIncomeDriverBreakdown.js b/frontend/src/pages/cases/visualizations/ChartExploreIncomeDriverBreakdown.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useRef } from "react";
 import { Card, Col, Row, Space } from "antd";
 import { VisualCardWrapper } from "../components";
 import { getColumnStackBarOptions } from "../../../components/chart/lib";
@@ -55,6 +55,8 @@ const ChartExploreIncomeDriverBreakdown = () => {
   const [selectedSegment, setSelectedSegment] = useState(null);
   const [selectedDriver, setSelectedDriver] = useState(null);
   const [axisTitle, setAxisTitle] = useState(currentCase.currency);
+  const [showLabel, setShowLabel] = useState(false);
+  const chartBreakdownDriverRef = useRef(null);
 
   const selectedSegmentData = useMemo(() => {
     if (!selectedSegment || !dashboardData.length) {
@@ -294,7 +296,14 @@ const ChartExploreIncomeDriverBreakdown = () => {
     <Card className="card-visual-wrapper">
       <Row gutter={[20, 20]} align="middle">
         <Col span={16}>
-          <VisualCardWrapper title="Explore income driver breakdown" bordered>
+          <VisualCardWrapper
+            title="Explore income driver breakdown"
+            bordered
+            showLabel={showLabel}
+            setShowLabel={setShowLabel}
+            exportElementRef={chartBreakdownDriverRef}
+            exportFilename="Explore income driver breakdown"
+          >
             <Row gutter={[20, 20]}>
               <Col span={24}>
                 <SegmentSelector
@@ -321,7 +330,7 @@ const ChartExploreIncomeDriverBreakdown = () => {
                     origin: selectedSegmentData ? [selectedSegmentData] : [],
                     yAxis: { name: axisTitle },
                     grid: chartGrid(selectedDriver),
-                    // showLabel: showLabel,
+                    showLabel: showLabel,
                   })}
                 />
               </Col>

diff --git a/frontend/src/pages/cases/visualizations/ChartIncomeGap.js b/frontend/src/pages/cases/visualizations/ChartIncomeGap.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState, useRef } from "react";
 import { Card, Col, Row, Space } from "antd";
 import { VisualCardWrapper } from "../components";
 import { CaseVisualState, CurrentCaseState } from "../store";
@@ -48,6 +48,9 @@ const ChartIncomeGap = () => {
   const currentCase = CurrentCaseState.useState((s) => s);
   const dashboardData = CaseVisualState.useState((s) => s.dashboardData);
 
+  const [showLabel, setShowLabel] = useState(false);
+  const chartIncomeGapRef = useRef(null);
+
   const chartData = useMemo(() => {
     return seriesTmp.map((tmp) => {
       const data = dashboardData.map((d) => {
@@ -82,7 +85,14 @@ const ChartIncomeGap = () => {
     <Card className="card-visual-wrapper">
       <Row gutter={[20, 20]} align="middle">
         <Col span={16}>
-          <VisualCardWrapper title="Income gap" bordered>
+          <VisualCardWrapper
+            title="Income gap"
+            bordered
+            showLabel={showLabel}
+            setShowLabel={setShowLabel}
+            exportElementRef={chartIncomeGapRef}
+            exportFilename="What is the current income of the farmers and their income gap?"
+          >
             <Chart
               wrapper={false}
               type="BAR"
@@ -91,7 +101,7 @@ const ChartIncomeGap = () => {
                 series: chartData,
                 origin: dashboardData,
                 yAxis: { name: `Income (${currentCase.currency})` },
-                // showLabel: showLabel,
+                showLabel: showLabel,
               })}
             />
           </VisualCardWrapper>