refactor: more clean

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>
   )

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}>

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

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