fix: make graph smooth transition again

equinor · Apr 4, 2024 · 7bc0005 · 7bc0005
1 parent bbe8478
commit 7bc0005
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -5,7 +5,7 @@ import { AuthContext } from 'react-oauth2-code-pkce'
 import { ErrorToast } from '../Common/Toast'
 import InputContainer from './InputContainer'
 import { findGraphData } from '../../Utils'
-import { Bridge } from '../../Types'
+import { Bridge, GraphData } from '../../Types'
 import BridgeGraph from './Graphs/BridgeGraph'
 import { differentiateArrayObjects } from './utils'
 
@@ -23,6 +23,8 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContain
   const [bridgeValueHelperText, setBridgeValueHelperText] = useState(undefined)
   const [bridgeValueVariant, setBridgeValueVariant] = useState(undefined)
   const [optimalBridgeGraphData, setOptimalBridgeGraphData] = useState([])
+  const [graphData, setGraphData] = useState([])
+  const [cumulativeGraphData, setCumulativeGraphData] = useState([])
   const { token } = useContext(AuthContext)
 
   // Load size fractions once on first render
@@ -84,6 +86,13 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContain
     setBridgeValueHelperText(undefined)
   }
 
+  useEffect(() => {
+    const cumulative = findGraphData(sizeFractions, bridges)
+    const differentiated = differentiateArrayObjects(cumulative)
+    setCumulativeGraphData(cumulative)
+    setGraphData(differentiated)
+  }, [sizeFractions, bridges])
+
   return (
     <div style={{ overflow: 'auto' }}>
       <div
@@ -107,17 +116,12 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContain
           bridgeValueHelperText={bridgeValueHelperText}
         />
         <BridgeGraph
-          graphData={findGraphData(sizeFractions, bridges)}
+          graphData={cumulativeGraphData}
           yAxis={'Cumulative Volume (%)'}
           sizeFractions={sizeFractions}
           bridges={bridges}
         />
-        <BridgeGraph
-          graphData={differentiateArrayObjects(findGraphData(sizeFractions, bridges))}
-          yAxis={'Volume (%)'}
-          sizeFractions={sizeFractions}
-          bridges={bridges}
-        />
+        <BridgeGraph graphData={graphData} yAxis={'Volume (%)'} sizeFractions={sizeFractions} bridges={bridges} />
       </div>
     </div>
   )

diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -36,7 +36,7 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: Bridge
   return (
     <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
       <ResponsiveContainer height={500} minWidth={600}>
-        <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+        <AreaChart data={graphData} margin={{ top: 5, right: 30, bottom: 5 }}>
           {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
           <defs>
             <linearGradient id='particleArea'>