From bd1feaafff1932087a6c9551275473ab0b2eac9c Mon Sep 17 00:00:00 2001
From: Peter Bull Hove <peterbullhove@gmail.com>
Date: Tue, 2 Apr 2024 15:40:56 +0200
Subject: [PATCH] refactor: more clean

---
 .../Components/Bridging/BridgeContainer.tsx   |  8 +-
 web/src/Components/Bridging/BridgeGraph.tsx   |  8 +-
 .../Components/Bridging/CumulativeGraph.tsx   | 21 +----
 .../Components/Bridging/DistributionGraph.tsx | 18 +++++
 .../ParticleSizeDistributionGraph.tsx         | 77 -------------------
 5 files changed, 24 insertions(+), 108 deletions(-)
 create mode 100644 web/src/Components/Bridging/DistributionGraph.tsx
 delete mode 100644 web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx

diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
index 5c541ef..70b542a 100644
--- a/web/src/Components/Bridging/BridgeContainer.tsx
+++ b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -2,11 +2,11 @@ import { useContext, useEffect, useState } from 'react'
 import { FractionsAPI } from '../../Api'
 import { BridgingOption, CeramicDiscsValues } from '../../Enums'
 import { AuthContext } from 'react-oauth2-code-pkce'
-import BridgeGraph from './BridgeGraph'
 import { ErrorToast } from '../Common/Toast'
 import InputContainer from './InputContainer'
 import { findGraphData } from '../../Utils'
-import ParticleSizeDistributionGraph from './ParticleSizeDistributionGraph'
+import CumulativeGraph from './CumulativeGraph'
+import DistributionGraph from './DistributionGraph'
 
 export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
   const [sizeFractions, setSizeFractions] = useState([])
@@ -88,8 +88,8 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
         bridgeValueHelperText={bridgeValueHelperText}
       />
       <div style={{ display: 'flex', alignItems: 'center', backgroundColor: 'white' }}>
-        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
-        <ParticleSizeDistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
+        <CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
+        <DistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
       </div>
     </div>
   )
diff --git a/web/src/Components/Bridging/BridgeGraph.tsx b/web/src/Components/Bridging/BridgeGraph.tsx
index 7b9880b..38a96b7 100644
--- a/web/src/Components/Bridging/BridgeGraph.tsx
+++ b/web/src/Components/Bridging/BridgeGraph.tsx
@@ -4,8 +4,7 @@ import { ParticleSizeContext } from '../../Context'
 import { findGraphData } from '../../Utils'
 import { graphColors } from './styles'
 
-export function BridgeGraph({ bridges, sizeFractions }) {
-  const [graphData, setGraphData] = useState([])
+export function BridgeGraph({ graphData, sizeFractions, bridges }) {
   const [particleFromPercentage, setParticleFromPercentage] = useState('')
   const [particleToPercentage, setParticleToPercentage] = useState('')
   const particleRange = useContext(ParticleSizeContext)
@@ -26,11 +25,6 @@ export function BridgeGraph({ bridges, sizeFractions }) {
     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={980} height={500}>
diff --git a/web/src/Components/Bridging/CumulativeGraph.tsx b/web/src/Components/Bridging/CumulativeGraph.tsx
index a345ca4..d4ae29c 100644
--- a/web/src/Components/Bridging/CumulativeGraph.tsx
+++ b/web/src/Components/Bridging/CumulativeGraph.tsx
@@ -5,32 +5,13 @@ 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} />
+  return <BridgeGraph graphData={graphData} bridges={bridges} sizeFractions={sizeFractions} />
 }
 
 export default CumulativeGraph
diff --git a/web/src/Components/Bridging/DistributionGraph.tsx b/web/src/Components/Bridging/DistributionGraph.tsx
new file mode 100644
index 0000000..6564a33
--- /dev/null
+++ b/web/src/Components/Bridging/DistributionGraph.tsx
@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+import { findGraphData } from '../../Utils'
+import { differentiateArrayObjects } from './utils'
+import BridgeGraph from './BridgeGraph'
+
+export function ParticleSizeDistributionGraph({ bridges, sizeFractions }) {
+  const [graphData, setGraphData] = useState([])
+
+  useEffect(() => {
+    const newGraphData = findGraphData(sizeFractions, bridges)
+    const diffentiated = differentiateArrayObjects(newGraphData)
+    setGraphData(diffentiated)
+  }, [bridges, sizeFractions])
+
+  return <BridgeGraph graphData={graphData} sizeFractions={sizeFractions} bridges={bridges} />
+}
+
+export default ParticleSizeDistributionGraph
diff --git a/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx b/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx
deleted file mode 100644
index f2ab9e9..0000000
--- a/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useContext, useEffect, useState } from 'react'
-import { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts'
-import { ParticleSizeContext } from '../../Context'
-import { findGraphData } from '../../Utils'
-import { graphColors } from './styles'
-import { differentiateArrayObjects } from './utils'
-
-export function ParticleSizeDistributionGraph({ 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)
-    const diffentiated = differentiateArrayObjects(newGraphData)
-    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>
-  )
-}
-
-export default ParticleSizeDistributionGraph