[#432] Enable show empty value on JMP chart

akvo · Oct 12, 2023 · ef0dc4d · ef0dc4d
1 parent a062969
commit ef0dc4d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/frontend/src/chart/custom/JMPBarStack.js b/frontend/src/chart/custom/JMPBarStack.js
@@ -8,6 +8,7 @@ import {
   NoData,
 } from '../chart-style.js';
 import uniq from 'lodash/uniq';
+import uniqBy from 'lodash/uniqBy';
 import isEmpty from 'lodash/isEmpty';
 import sortBy from 'lodash/sortBy';
 
@@ -23,11 +24,14 @@ const JMPBarStack = (data, chartTitle, extra) => {
     ['score']
   );
 
-  let stacked = data.find((d) => d?.stack?.length);
-  if (!stacked) {
+  let stacked = uniqBy(
+    data.flatMap((d) => d?.stack),
+    'name'
+  );
+  if (!stacked.length) {
     return NoData;
   }
-  stacked = stacked.stack.map((x) => ({ name: x.name, color: x.color }));
+  stacked = stacked.map((x) => ({ name: x.name, color: x.color }));
   const legends = stacked.map((s, si) => ({
     name: s.name,
     itemStyle: { color: s.color || Color.color[si] },

diff --git a/frontend/src/chart/index.js b/frontend/src/chart/index.js
@@ -38,7 +38,7 @@ const EchartWrapper = ({ emptyValueCheckboxSetting, option, height }) => {
       {emptyValueCheckboxSetting?.show && (
         <Col span={24}>
           <Checkbox
-            style={{ float: 'right', marginRight: '15px' }}
+            style={{ float: 'right', margin: '0 15px 20px 0' }}
             checked={emptyValueCheckboxSetting.checked}
             onChange={emptyValueCheckboxSetting.handleOnCheck}
           >

diff --git a/frontend/src/pages/main/tabs/StackBarChart.jsx b/frontend/src/pages/main/tabs/StackBarChart.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Spin } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import uniq from 'lodash/uniq';
@@ -60,6 +60,7 @@ const StackBarChart = ({
   const initLoading = totalPages > 1 ? true : false;
   const [chartValues, setChartValues] = useState(data);
   const [loading, setLoading] = useState(initLoading);
+  const [showEmptyValueChart, setShowEmptyValueChart] = useState(false);
 
   const paginationCallback = (allData) => {
     const { statusPercentages, scoreValues } = getAdmScores(
@@ -78,6 +79,25 @@ const StackBarChart = ({
     setLoading(false);
   };
 
+  const filteredChartValues = useMemo(() => {
+    if (showEmptyValueChart) {
+      return chartValues;
+    }
+    const filterTmp = chartValues
+      .map((d) => {
+        const filterStack = d.stack.filter((s) => s.value > 0 || s.value);
+        if (!filterStack.length) {
+          return false;
+        }
+        return {
+          ...d,
+          stack: filterStack,
+        };
+      })
+      .filter((x) => x);
+    return filterTmp;
+  }, [showEmptyValueChart, chartValues]);
+
   return (
     <div className="jmp-chart-container">
       <PaginationApi
@@ -96,12 +116,23 @@ const StackBarChart = ({
             title=""
             subTitle=""
             type={'JMP-BARSTACK'}
-            data={chartValues}
+            data={filteredChartValues}
             wrapper={false}
             height={height < 320 ? 320 : height}
             extra={{
               selectedAdministration,
             }}
+            emptyValueCheckboxSetting={{
+              show: true,
+              checked: showEmptyValueChart,
+              handleOnCheck: () => {
+                setLoading(true);
+                setShowEmptyValueChart(!showEmptyValueChart);
+                setTimeout(() => {
+                  setLoading(false);
+                }, 500);
+              },
+            }}
           />
         )}
       </div>