feat: custom tooltip for bridge graph

equinor · Apr 8, 2024 · ca433a5 · ca433a5
1 parent 70cc978
commit ca433a5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -41,8 +41,7 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContain
 
   useEffect(() => {
     if (bridges['Bridge'].length && sizeFractions.length) {
-      const x = findGraphData(sizeFractions, { Bridge: bridges['Bridge'] })
-      setOptimalBridgeGraphData(x)
+      setOptimalBridgeGraphData(findGraphData(sizeFractions, { Bridge: bridges['Bridge'] }))
     }
   }, [bridges, sizeFractions])
 

diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react'
 import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { ParticleSizeContext } from '../../../Context'
-import { findGraphData } from '../../../Utils'
 import { bridgeColor, graphColors } from '../styles'
 import { Bridge, GraphData } from '../../../Types'
 import { Typography } from '@equinor/eds-core-react'
@@ -14,6 +13,25 @@ type BridgeGraphProps = {
   showBridge?: boolean
 }
 
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    console.log(payload)
+    console.log(label)
+    return (
+      <div style={{ backgroundColor: 'white', border: '1px solid gray', padding: '5px', borderRadius: '2px' }}>
+        <div style={{ opacity: '50%' }}>{`Particle size : ${label}µm`}</div>
+        <div style={{ marginTop: '15px' }}>
+          {payload.map((graphData: any) => (
+            <div style={{ color: graphData.color }}>{`${graphData.name}: ${graphData.value}%`}</div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return null
+}
+
 export function BridgeGraph({ title, graphData, sizeFractions, bridges, showBridge = true }: BridgeGraphProps) {
   const [particleFromPercentage, setParticleFromPercentage] = useState<string>('0%')
   const [particleToPercentage, setParticleToPercentage] = useState<string>('100%')
@@ -68,7 +86,7 @@ export function BridgeGraph({ title, graphData, sizeFractions, bridges, showBrid
             height={70}
           />
           <YAxis type='number' allowDataOverflow width={75} label={{ value: 'Volume (%)', angle: '270' }} />
-          <Tooltip />
+          <Tooltip content={CustomTooltip} />
           <Legend verticalAlign='bottom' align='center' height={legendHeight} />
           {Object.entries(bridges).map(([name, cumulative], index) => (
             <Area