Merge pull request #4352 from devgateway/fix/AMP-30906/Fix-ndd-dashboard-bug

jdeanquin-dg · web-flow · commit d1aa005b9c4f · 2024-11-01T08:35:06.000-05:00
AMP-30906: Resolve ndd dash bug
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/package.json b/amp/TEMPLATE/reampv2/packages/reampv2-app/package.json
@@ -67,7 +67,7 @@
     "react-spinner": "^0.2.7",
     "react-spinners": "^0.13.8",
     "react-table": "^7.3.2",
-    "react-tooltip": "^5.25.1",
+    "react-tooltip": "^5.28.0",
     "react-transition-group": "^4.4.5",
     "react-visibility-sensor": "^5.1.1",
     "redux": "^4.0.5",
@@ -111,6 +111,7 @@
     "@types/react-bootstrap-table2-paginator": "^2.1.3",
     "@types/react-dom": "^17.0.2",
     "@types/react-redux": "^7.1.24",
+    "@types/react-tooltip": "^4.2.4",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "cross-env": "7.0.3",
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/actions/callReports.js b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/actions/callReports.js
@@ -23,7 +23,9 @@ export const callReport = (fundingType, filters, programIds, settings) => dispat
   return Promise.all([fetchApiData({
     url: DIRECT_INDIRECT_REPORT,
     body
-  })]).then((data) => dispatch(fetchIndirectReportSuccess(data[0])))
+  })]).then((data) => {
+    return dispatch(fetchIndirectReportSuccess(data[0]))
+  })
     .catch(error => dispatch(fetchIndirectReportError(error)));
 };
 
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/actions/reportActions.js b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/actions/reportActions.js
@@ -17,12 +17,10 @@ export function fetchIndirectReportPending() {
   };
 }
 
-export function fetchIndirectReportSuccess(payload) {
-  return {
-    type: FETCH_DIRECT_INDIRECT_NDD_SUCCESS,
-    payload
-  };
-}
+export const fetchIndirectReportSuccess = (payload) => ({
+  type: FETCH_DIRECT_INDIRECT_NDD_SUCCESS,
+  payload,
+});
 
 export function fetchIndirectReportError(error) {
   return {
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/NDDDashboardHome.jsx b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/NDDDashboardHome.jsx
@@ -151,13 +151,14 @@ const NDDDashboardHome = (props) => {
     }
 
     const handleOuterChartClick = (event, outerData) => {
+
         const {
             selectedDirectProgram, filters, settings, fundingType
         } = state;
         if (event.points[0].data.name === DIRECT) {
             if (!selectedDirectProgram) {
                 setState(prevState => ({ ...prevState, selectedDirectProgram: outerData[event.points[0].i], fundingByYearSource: SRC_DIRECT }));
-                _callTopReport(fundingType || dashboardSettings.find(i => i.id === FUNDING_TYPE).value.defaultId,
+                _callTopReport(fundingType || dashboardSettings?.find(i => i.id === FUNDING_TYPE).value.defaultId,
                   settings, filters, outerData[event.points[0].i]);
             } else {
                 _clearTopReport();
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/charts/NestedDonutsProgramChart.jsx b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/charts/NestedDonutsProgramChart.jsx
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {CSSTransitionGroup} from 'react-transition-group';
+import {TransitionGroup,CSSTransition} from 'react-transition-group';
 
 // Dont use react-plotly directly: https://github.com/plotly/react-plotly.js/issues/135#issuecomment-501398125
 import Plotly from 'plotly.js';
@@ -16,7 +16,6 @@ import {
 } from '../../utils/Utils';
 import ToolTip from '../tooltips/ToolTip';
 // eslint-disable-next-line no-unused-vars
-import styles from '../styles.css';
 
 const Plot = createPlotlyComponent(Plotly);
 
@@ -260,15 +259,19 @@ class NestedDonutsProgramChart extends Component {
             }
         ] : [];
         return (
-            <CSSTransitionGroup
-                /* key={selectedDirectProgram} */
-                transitionName="solar-chart"
-                transitionAppear
-                transitionLeave
-                transitionEnter
-                transitionEnterTimeout={TRANSITIONS}
-                transitionLeaveTimeout={TRANSITIONS}
-                transitionAppearTimeout={TRANSITIONS}>
+            <TransitionGroup>
+                <CSSTransition
+                    key="solarChart"
+                    classNames="solar-chart"
+                    appear
+                    enter
+                    exit
+                    timeout={{
+                        appear: TRANSITIONS,
+                        enter: TRANSITIONS,
+                        exit: TRANSITIONS
+                    }}
+                >
                 <Plot
                     key="solarChart"
                     data={
@@ -348,6 +351,8 @@ class NestedDonutsProgramChart extends Component {
                     onHover={event => this.onHover(event)}
                     onUnhover={() => this.onUnHover()}
                 />
+                </CSSTransition>
+
                 <div
                     style={{
                         display: (!showLegend ? 'none' : 'block'),
@@ -357,7 +362,7 @@ class NestedDonutsProgramChart extends Component {
                     className="pie-legend-wrapper">
                     {this.createTooltip()}
                 </div>
-            </CSSTransitionGroup>
+            </TransitionGroup>
         );
     }
 }
@@ -377,7 +382,7 @@ NestedDonutsProgramChart.defaultProps = {
 };
 
 const mapStateToProps = state => ({
-    translations: state.translationsReducer.translations
+  translations: state.translationsReducer.translations
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/charts/TopChart.jsx b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/charts/TopChart.jsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { NDDTranslationContext } from '../StartUp';
 import ToolTip from '../tooltips/ToolTip';
 import { formatKMB, formatNumberWithSettings } from '../../utils/Utils';
-import SimpleLegend from '../../../../utils/components/SimpleLegend';
 import { CURRENCY_CODE } from '../../utils/constants';
+import SimpleLegend from '../../../../utils/components/SimpleLegend';
 
 const styles = {
   fontFamily: 'sans-serif',
@@ -61,7 +61,7 @@ class TopChart extends Component {
           data={data.values}
           getColor={this.getColor.bind(this)}
         />
-        <div style={{ height: '335px' }}>
+        <div style={{ height: '355px' }}>
           <ResponsiveBar
             data={transformedData}
             colors={this.getColor.bind(this)}
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/utils/Utils.js b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/utils/Utils.js
@@ -135,6 +135,8 @@ function getSuffixForLang(prefix, lang) {
 
 export function formatNumber(currency, translations, value, precision, decimalSeparator, groupSeparator, numberDivider,
   numberDividerDescriptionKey) {
+  if (decimalSeparator==='.')
+    decimalSeparator='';
   const formatString = `${decimalSeparator}.${precision}f`;
   const dividedValue = (numberDivider && numberDividerDescriptionKey) ? value / numberDivider : value;
   // eslint-disable-next-line max-len
@@ -162,6 +164,8 @@ export function formatNumberWithSettings(currency, translations, settings, value
 
 // TODO: Unify with formatNumber();
 export function formatOnlyNumber(settings, value) {
+  if (settings.decimalSeparator==='.')
+    settings.decimalSeparator='';
   const formatString = `${settings.decimalSeparator}.${settings.precision}f`;
   const dividedValue = (settings.numberDivider && settings.numberDividerDescriptionKey)
     ? value / settings.numberDivider
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/utils/components/SimpleLegend.jsx b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/utils/components/SimpleLegend.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactTooltip from 'react-tooltip';
+import ReactTooltip, { Tooltip } from 'react-tooltip';
 import PropTypes from 'prop-types';
 import './SimpleLegend.css';
 
@@ -23,12 +23,27 @@ export default class SimpleLegend extends Component {
                       border: `2px solid ${getColor(d)}`,
                       backgroundColor: `${getColor(d)}`
                     }}
-                    data-tip={d.name}
-                    data-for={index.toString()}
-                  />
-                  <span className="label">
+                    data-tooltip-content={d.name}
+                    data-tooltip-id={index.toString()}
+                    data-tooltip-place="top"
+
+                  >
+
+                  </span>
+                  <span className="label"
+                        data-tooltip-content={d.name}
+                        data-tooltip-id={index.toString()}
+                        data-tooltip-place="top"
+                        style={{cursor: 'pointer'}}
+                  >
                     {d.name.substring(0, 10)}
-                    <ReactTooltip place="top" effect="float" backgroundColor={getColor(d)} id={index.toString()} />
+                    <Tooltip
+                        place="top"
+                        effect="float"
+                        style={{
+                          backgroundColor: `${getColor(d)}`
+                        }}
+                        id={index.toString()} />
                   </span>
                 </li>
               );
