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