refactor: extract into one

equinor · Apr 2, 2024 · 615ee33 · 615ee33
1 parent 9c091f3
commit 615ee33
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 89 deletions.
diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -7,6 +7,7 @@ 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([])
@@ -88,7 +89,7 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
         bridgeValueHelperText={bridgeValueHelperText}
       />
       <div style={{ display: 'flex', alignItems: 'center', backgroundColor: 'white' }}>
-        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
+        <CumulativeGraph 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,48 +1,10 @@
-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 { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts'
 import { graphColors } from './styles'
 
-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])
-
+export function BridgeGraph({ graphData, 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>
+      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={700} height={500}>
         <CartesianGrid strokeDasharray='3 3' />
         <XAxis
           dataKey='size'
@@ -53,14 +15,7 @@ export function BridgeGraph({ bridges, sizeFractions }) {
           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: '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
@@ -0,0 +1,38 @@
+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 BridgeGraph from './BridgeGraph'
+
+export function CumulativeGraph({ 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 <BridgeGraph graphData={graphData} bridges={bridges} />
+}
+
+export default CumulativeGraph
diff --git a/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx b/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx
@@ -4,6 +4,7 @@ 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([])
@@ -33,45 +34,7 @@ export function ParticleSizeDistributionGraph({ bridges, sizeFractions }) {
     setGraphData(diffentiated)
   }, [bridges, sizeFractions])
 
-  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>
-  )
+  return <BridgeGraph graphData={graphData} bridges={bridges} />
 }
 
 export default ParticleSizeDistributionGraph