chore(deps): update dependency react-tooltip to v5

AOEpeople · Jan 10, 2023 · a957ff7 · a957ff7
1 parent beec091
commit a957ff7
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "react-modal": "3.16.1",
     "react-router-dom": "6.6.1",
     "react-scripts": "5.0.1",
-    "react-tooltip": "4.5.1",
+    "react-tooltip": "5.4.0",
     "sanitize-html": "2.8.1",
     "sass": "1.57.1",
     "typescript": "4.9.4",

diff --git a/src/components/Chart/BlipPoints.tsx b/src/components/Chart/BlipPoints.tsx
@@ -65,7 +65,7 @@ function renderBlip(
     fill: blip.colour,
     "data-background-color": blip.colour,
     "data-text-color": blip.txtColour,
-    "data-tip": blip.title,
+    "data-tooltip-content": blip.title,
     key: index,
   };
   switch (blip.flag) {

diff --git a/src/components/Chart/BlipShapes.tsx b/src/components/Chart/BlipShapes.tsx
@@ -8,7 +8,7 @@ type VisualBlipProps = {
   fill: string;
   "data-background-color": string;
   "data-text-color": string;
-  "data-tip": string;
+  "data-tooltip-content": string;
   key: number;
 };
 

diff --git a/src/components/Chart/RadarChart.tsx b/src/components/Chart/RadarChart.tsx
@@ -1,6 +1,6 @@
 import * as d3 from "d3";
 import React from "react";
-import ReactTooltip from "react-tooltip";
+import { Tooltip, TooltipProvider } from "react-tooltip";
 
 import { ConfigData } from "../../config";
 import { Item } from "../../model";
@@ -64,6 +64,7 @@ const RadarChart: React.FC<{
     .range([config.chartConfig.size, 0]);
 
   return (
+    <TooltipProvider>
     <div className="chart" style={{ maxWidth: `${config.chartConfig.size}px` }}>
       <svg
         viewBox={`0 0 ${config.chartConfig.size} ${config.chartConfig.size}`}
@@ -75,10 +76,6 @@ const RadarChart: React.FC<{
           <XAxis scale={xScale} />
         </g>
 
-        {Object.values(config.quadrantsMap).map((value, index) => {
-          console.log(value)
-          return null
-        })}
         {Object.values(config.quadrantsMap).map((value, index) => (
           <QuadrantRings
             key={index}
@@ -105,8 +102,9 @@ const RadarChart: React.FC<{
           config={config}
         />
       </svg>
-      <ReactTooltip className="tooltip" offset={{ top: -5 }} />
+      <Tooltip className="tooltip" offset={-5} />
     </div>
+    </TooltipProvider>
   );
 };