Revert "refactor: extract into one"

This reverts commit 615ee33.
equinor · Apr 2, 2024 · a5a285e · a5a285e
1 parent 19b1a37
commit a5a285e
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 9 deletions.
diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -7,7 +7,6 @@ import { ErrorToast } from '../Common/Toast'
 import InputContainer from './InputContainer'
 import { findGraphData } from '../../Utils'
 import ParticleSizeDistributionGraph from './ParticleSizeDistributionGraph'
-import CumulativeGraph from './CumulativeGraph'
 
 export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
   const [sizeFractions, setSizeFractions] = useState([])
@@ -89,7 +88,7 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
         bridgeValueHelperText={bridgeValueHelperText}
       />
       <div style={{ display: 'flex', alignItems: 'center', backgroundColor: 'white' }}>
-        <CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
+        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
         <ParticleSizeDistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
       </div>
     </div>

diff --git a/web/src/Components/Bridging/BridgeGraph.tsx b/web/src/Components/Bridging/BridgeGraph.tsx
@@ -1,10 +1,48 @@
-import { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts'
+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'
 
-export function BridgeGraph({ graphData, bridges }) {
+export function BridgeGraph({ bridges, sizeFractions }) {
+  const [graphData, setGraphData] = useState([])
+  const [particleFromPercentage, setParticleFromPercentage] = useState('')
+  const [particleToPercentage, setParticleToPercentage] = useState('')
+  const particleRange = useContext(ParticleSizeContext)
+
+  useEffect(() => {
+    setParticleFromPercentage(particleSizeOffsetPercentage(particleRange.from))
+    if (particleRange.to > sizeFractions[sizeFractions.length - 1]) {
+      setParticleToPercentage(sizeFractions[sizeFractions.length - 1])
+    } else {
+      setParticleToPercentage(particleSizeOffsetPercentage(particleRange.to))
+    }
+  }, [particleRange, sizeFractions])
+
+  function particleSizeOffsetPercentage(offsetSize) {
+    const index = sizeFractions.findIndex(size => size > offsetSize)
+    if (index === -1) return ''
+    const percentage = Math.round(index / sizeFractions.length) * 100
+    return `${percentage}%`
+  }
+
+  useEffect(() => {
+    const newGraphData = findGraphData(sizeFractions, bridges)
+    setGraphData(newGraphData)
+  }, [bridges, sizeFractions])
+
   return (
     <div style={{ backgroundColor: 'white', borderRadius: '0.5rem' }}>
-      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={700} height={500}>
+      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={980} height={500}>
+        {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
+        <defs>
+          <linearGradient id='particleArea'>
+            <stop offset={particleFromPercentage} stopColor='transparent' />
+            <stop offset={particleFromPercentage} stopColor='#E2DCDC' />
+            <stop offset={particleToPercentage} stopColor='#E2DCDC' />
+            <stop offset={particleToPercentage} stopColor='transparent' />
+          </linearGradient>
+        </defs>
         <CartesianGrid strokeDasharray='3 3' />
         <XAxis
           dataKey='size'
@@ -15,7 +53,14 @@ export function BridgeGraph({ graphData, bridges }) {
           label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
           height={70}
         />
-        <YAxis type='number' allowDataOverflow width={75} label={{ value: 'Cumulative Volume (%)', angle: '270' }} />
+        <YAxis
+          type='number'
+          domain={[0, 100]}
+          ticks={[20, 40, 60, 80, 100]}
+          allowDataOverflow
+          width={75}
+          label={{ value: 'Cumulative Volume (%)', angle: '270' }}
+        />
         <Tooltip />
         <Legend verticalAlign='bottom' align='center' />
         {Object.entries(bridges).map(([name, cumulative], index) => (

diff --git a/web/src/Components/Bridging/CumulativeGraph.tsx b/web/src/Components/Bridging/CumulativeGraph.tsx
@@ -1,5 +1,4 @@
 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 BridgeGraph from './BridgeGraph'

diff --git a/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx b/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx
@@ -4,7 +4,6 @@ import { ParticleSizeContext } from '../../Context'
 import { findGraphData } from '../../Utils'
 import { graphColors } from './styles'
 import { differentiateArrayObjects } from './utils'
-import BridgeGraph from './BridgeGraph'
 
 export function ParticleSizeDistributionGraph({ bridges, sizeFractions }) {
   const [graphData, setGraphData] = useState([])
@@ -34,7 +33,45 @@ export function ParticleSizeDistributionGraph({ bridges, sizeFractions }) {
     setGraphData(diffentiated)
   }, [bridges, sizeFractions])
 
-  return <BridgeGraph graphData={graphData} bridges={bridges} />
+  return (
+    <div style={{ backgroundColor: 'white', borderRadius: '0.5rem' }}>
+      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={980} height={500}>
+        {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
+        <defs>
+          <linearGradient id='particleArea'>
+            <stop offset={particleFromPercentage} stopColor='transparent' />
+            <stop offset={particleFromPercentage} stopColor='#E2DCDC' />
+            <stop offset={particleToPercentage} stopColor='#E2DCDC' />
+            <stop offset={particleToPercentage} stopColor='transparent' />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray='3 3' />
+        <XAxis
+          dataKey='size'
+          scale='log'
+          domain={[0.1, 10000]}
+          type='number'
+          ticks={[0.1, 1, 10, 100, 1000, 10000]}
+          label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
+          height={70}
+        />
+        <YAxis type='number' label={{ value: 'Volume (%)', angle: '270' }} width={75} allowDataOverflow />
+        <Tooltip />
+        <Legend verticalAlign='bottom' align='center' />
+        {Object.entries(bridges).map(([name, cumulative], index) => (
+          <Area
+            type='monotone'
+            dataKey={name}
+            stroke={graphColors[index % graphColors.length]}
+            key={name}
+            fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
+            name={name}
+            strokeWidth={1.5}
+          />
+        ))}
+      </AreaChart>
+    </div>
+  )
 }
 
 export default ParticleSizeDistributionGraph