AMP-30906: Resolve ndd dash bug

Author: brianbrix

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",

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',

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 { Tooltip } from 'react-tooltip';
 import PropTypes from 'prop-types';
 import './SimpleLegend.css';
 
@@ -26,12 +26,13 @@ export default class SimpleLegend extends Component {
                     }}
                     data-tip={d.name}
                     data-for={index.toString()}
+                    data-tooltip-content={d.name}
+                    data-tooltip-place="top"
                   />
                   <span className="label">
                     {d.name.substring(0, 10)}
-                    <ReactTooltip place="top"
-                      effect="float"
-                      backgroundColor={getColor(d)}
+                    <Tooltip
+                   backgroundColor={getColor(d)}
                       id={index.toString()} />
                   </span>
                 </li>