fix: further stuff

equinor · Apr 3, 2024 · 7f1d2fd · 7f1d2fd
1 parent c341a4d
commit 7f1d2fd
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 19 deletions.
diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -3,22 +3,30 @@ import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, X
 import { ParticleSizeContext } from '../../../Context'
 import { findGraphData } from '../../../Utils'
 import { graphColors } from '../styles'
+import { Bridge, GraphData } from '../../../Types'
 
-export function BridgeGraph({ graphData, sizeFractions, bridges }) {
-  const [particleFromPercentage, setParticleFromPercentage] = useState('')
-  const [particleToPercentage, setParticleToPercentage] = useState('')
+type BridgeGraphProps = {
+  yAxis: string
+  graphData: GraphData[]
+  sizeFractions: number[]
+  bridges: Bridge
+}
+
+export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: BridgeGraphProps) {
+  const [particleFromPercentage, setParticleFromPercentage] = useState<string>('')
+  const [particleToPercentage, setParticleToPercentage] = useState<string>('')
   const particleRange = useContext(ParticleSizeContext)
 
   useEffect(() => {
     setParticleFromPercentage(particleSizeOffsetPercentage(particleRange.from))
     if (particleRange.to > sizeFractions[sizeFractions.length - 1]) {
-      setParticleToPercentage(sizeFractions[sizeFractions.length - 1])
+      setParticleToPercentage(`${sizeFractions[sizeFractions.length - 1]}`)
     } else {
       setParticleToPercentage(particleSizeOffsetPercentage(particleRange.to))
     }
   }, [particleRange, sizeFractions])
 
-  function particleSizeOffsetPercentage(offsetSize) {
+  function particleSizeOffsetPercentage(offsetSize: number) {
     const index = sizeFractions.findIndex(size => size > offsetSize)
     if (index === -1) return ''
     const percentage = Math.round(index / sizeFractions.length) * 100
@@ -47,14 +55,7 @@ export function BridgeGraph({ graphData, sizeFractions, bridges }) {
           label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
           height={70}
         />
-        <YAxis
-          type='number'
-          domain={[0, 100]}
-          ticks={[20, 40, 60, 80, 100]}
-          allowDataOverflow
-          width={75}
-          label={{ value: 'Cumulative Volume (%)', angle: '270' }}
-        />
+        <YAxis type='number' allowDataOverflow width={75} label={{ value: yAxis, angle: '270' }} />
         <Tooltip />
         <Legend verticalAlign='bottom' align='center' />
         {Object.entries(bridges).map(([name, cumulative], index) => (

diff --git a/web/src/Components/Bridging/Graphs/CumulativeGraph.tsx b/web/src/Components/Bridging/Graphs/CumulativeGraph.tsx
@@ -11,7 +11,14 @@ export function CumulativeGraph({ bridges, sizeFractions }) {
     setGraphData(newGraphData)
   }, [bridges, sizeFractions])
 
-  return <BridgeGraph graphData={graphData} bridges={bridges} sizeFractions={sizeFractions} />
+  return (
+    <BridgeGraph
+      graphData={graphData}
+      bridges={bridges}
+      sizeFractions={sizeFractions}
+      yAxis={'Cumulative Volume (%)'}
+    />
+  )
 }
 
 export default CumulativeGraph
diff --git a/web/src/Components/Bridging/Graphs/DistributionGraph.tsx b/web/src/Components/Bridging/Graphs/DistributionGraph.tsx
@@ -12,7 +12,7 @@ export function ParticleSizeDistributionGraph({ bridges, sizeFractions }) {
     setGraphData(diffentiated)
   }, [bridges, sizeFractions])
 
-  return <BridgeGraph graphData={graphData} sizeFractions={sizeFractions} bridges={bridges} />
+  return <BridgeGraph yAxis='Volume (%)' graphData={graphData} sizeFractions={sizeFractions} bridges={bridges} />
 }
 
 export default ParticleSizeDistributionGraph
diff --git a/web/src/Components/Bridging/InputContainer.tsx b/web/src/Components/Bridging/InputContainer.tsx
@@ -97,11 +97,20 @@ const InputContainer = ({
         </div>
       </InputWrapper>
       {optimalBridgeGraphData.length > 0 && (
-        <div style={{ marginBlockStart: '3rem' }}>
+        <div style={{ marginBlockStart: '3rem', alignItems: 'center' }}>
           <Typography variant='h3'>Optimal Bridge:</Typography>
-          <p>D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}µ</p>
-          <p>D50: {findDValue(optimalBridgeGraphData, 50, 'Bridge')}µ</p>
-          <p>D90: {findDValue(optimalBridgeGraphData, 90, 'Bridge')}µ</p>
+          <p>
+            D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}
+            {'\u00B5'}
+          </p>
+          <p>
+            D50: {findDValue(optimalBridgeGraphData, 50, 'Bridge')}
+            {'\u00B5'}
+          </p>
+          <p>
+            D90: {findDValue(optimalBridgeGraphData, 90, 'Bridge')}
+            {'\u00B5'}
+          </p>
         </div>
       )}
     </div>