feat: hide bridge in relative graph

equinor · Apr 5, 2024 · bd7ee81 · bd7ee81
1 parent ebc7bb5
commit bd7ee81
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 19 deletions.
diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -117,11 +117,17 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContain
         />
         <BridgeGraph
           graphData={cumulativeVolumeData}
-          yAxis={'Cumulative Volume (%)'}
+          yAxis={'Cumulative Frequency (Volume %)'}
           sizeFractions={sizeFractions}
           bridges={bridges}
         />
-        <BridgeGraph graphData={volumeData} yAxis={'Volume (%)'} sizeFractions={sizeFractions} bridges={bridges} />
+        <BridgeGraph
+          graphData={volumeData}
+          yAxis={'Relative Frequency (Volume %)'}
+          sizeFractions={sizeFractions}
+          bridges={bridges}
+          showBridge={false}
+        />
       </div>
     </div>
   )

diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -2,17 +2,18 @@ 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 { graphColors } from '../styles'
+import { bridgeColor, graphColors } from '../styles'
 import { Bridge, GraphData } from '../../../Types'
 
 type BridgeGraphProps = {
   yAxis: string
   graphData: GraphData[]
   sizeFractions: number[]
-  bridges: Bridge
+  bridges: Bridge | undefined
+  showBridge?: boolean
 }
 
-export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: BridgeGraphProps) {
+export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges, showBridge = true }: BridgeGraphProps) {
   const [particleFromPercentage, setParticleFromPercentage] = useState<string>('0%')
   const [particleToPercentage, setParticleToPercentage] = useState<string>('100%')
   const particleRange = useContext(ParticleSizeContext)
@@ -32,6 +33,10 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: Bridge
     let percentage = (index / sizeFractions.length) * 100
     return `${percentage}%`
   }
+  if (!showBridge) {
+    const { Bridge, ...withoutBridge } = bridges
+    bridges = withoutBridge
+  }
 
   return (
     <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
@@ -63,7 +68,9 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: Bridge
             <Area
               type='monotone'
               dataKey={name}
-              stroke={graphColors[index % graphColors.length]}
+              stroke={
+                name === 'Bridge' ? bridgeColor : graphColors[(index - (showBridge ? 1 : 0)) % graphColors.length]
+              }
               key={name}
               fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
               name={name}

diff --git a/web/src/Components/Bridging/InputContainer.tsx b/web/src/Components/Bridging/InputContainer.tsx
@@ -138,18 +138,12 @@ const InputContainer = ({
         >
           <Typography variant='h3'>Optimal Bridge:</Typography>
           <div style={{ marginInlineStart: '0.5rem' }}>
-            <p>
-              D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}
-              {'\u00B5m'}
-            </p>
-            <p>
-              D50: {findDValue(optimalBridgeGraphData, 50, 'Bridge')}
-              {'\u00B5m'}
-            </p>
-            <p>
-              D90: {findDValue(optimalBridgeGraphData, 90, 'Bridge')}
-              {'\u00B5m'}
-            </p>
+            {[10, 50, 90].map(d => (
+              <p>
+                D{d}: {findDValue(optimalBridgeGraphData, d, 'Bridge')}
+                {'\u00B5m'}
+              </p>
+            ))}
           </div>
         </div>
       )}

diff --git a/web/src/Components/Bridging/styles.ts b/web/src/Components/Bridging/styles.ts
@@ -21,8 +21,9 @@ export const StyledSelect = styled.select`
   background-color: #ffffff;
 `
 
+export const bridgeColor = '#000000'
+
 export const graphColors = [
-  '#000000',
   '#ee2e89',
   '#21d0bb',
   '#2077d9',