fix: horizontal layout finished

equinor · Apr 2, 2024 · f871b7f · f871b7f
1 parent 4c394fd
commit f871b7f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 26 deletions.
diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -75,8 +75,7 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
   }
 
   return (
-    //<div style={{ display: 'flex' }}>
-    <div>
+    <div style={{ display: 'flex', overflow: 'auto' }}>
       <InputContainer
         mode={mode}
         onBridgeOptionChange={onBridgeOptionChange}
@@ -87,9 +86,9 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
         bridgeValueVariant={bridgeValueVariant}
         bridgeValueHelperText={bridgeValueHelperText}
       />
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
-        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
+      <div style={{display: 'flex', alignItems: 'center', backgroundColor: 'white' }}>
+      <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
+      <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
       </div>
     </div>
   )

diff --git a/web/src/Components/Bridging/BridgeGraph.tsx b/web/src/Components/Bridging/BridgeGraph.tsx
@@ -1,14 +1,13 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts'
-import { ParticleSizeContext } from "../../Context"
+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({ bridges, sizeFractions }) {
   const [graphData, setGraphData] = useState([])
-  const [particleFromPercentage, setParticleFromPercentage] = useState("")
-  const [particleToPercentage, setParticleToPercentage] = useState("")
+  const [particleFromPercentage, setParticleFromPercentage] = useState('')
+  const [particleToPercentage, setParticleToPercentage] = useState('')
   const particleRange = useContext(ParticleSizeContext)
 
   useEffect(() => {
@@ -22,7 +21,7 @@ export function BridgeGraph({ bridges, sizeFractions }) {
 
   function particleSizeOffsetPercentage(offsetSize) {
     const index = sizeFractions.findIndex(size => size > offsetSize)
-    if (index === -1) return ""
+    if (index === -1) return ''
     const percentage = Math.round(index / sizeFractions.length) * 100
     return `${percentage}%`
   }
@@ -33,37 +32,37 @@ export function BridgeGraph({ bridges, sizeFractions }) {
   }, [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={420}>
+    <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 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" />
+        <CartesianGrid strokeDasharray='3 3' />
         <XAxis
-          dataKey="size"
-          scale="log"
+          dataKey='size'
+          scale='log'
           domain={[0.1, 10000]}
-          type="number"
+          type='number'
           ticks={[0.1, 1, 10, 100, 1000, 10000]}
           label={{ value: 'microns', position: 'center', offset: 0 }}
           height={70}
         />
-        <YAxis type="number" domain={[0, 100]} ticks={[20, 40, 60, 80, 100]} allowDataOverflow />
+        <YAxis type='number' domain={[0, 100]} ticks={[20, 40, 60, 80, 100]} allowDataOverflow />
         <Tooltip />
-        {/* <Legend  verticalAlign='middle' align='right' width={150}/> */}
+        <Legend verticalAlign='bottom' align='center' />
         {Object.entries(bridges).map(([name, cumulative], index) => (
           <Area
-            type="monotone"
+            type='monotone'
             dataKey={name}
             stroke={graphColors[index % graphColors.length]}
             key={name}
-            fill={(name === "Bridge" && "url(#particleArea)") || "transparent"}
+            fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
             name={name}
             strokeWidth={1.5}
           />