fix: add title instead of long y axis text

equinor · Apr 5, 2024 · e386825 · e386825
1 parent bd7ee81
commit e386825
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -117,13 +117,13 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContain
         />
         <BridgeGraph
           graphData={cumulativeVolumeData}
-          yAxis={'Cumulative Frequency (Volume %)'}
+          title={'Cumulative Frequency'}
           sizeFractions={sizeFractions}
           bridges={bridges}
         />
         <BridgeGraph
           graphData={volumeData}
-          yAxis={'Relative Frequency (Volume %)'}
+          title={'Relative Frequency'}
           sizeFractions={sizeFractions}
           bridges={bridges}
           showBridge={false}

diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -4,16 +4,17 @@ import { ParticleSizeContext } from '../../../Context'
 import { findGraphData } from '../../../Utils'
 import { bridgeColor, graphColors } from '../styles'
 import { Bridge, GraphData } from '../../../Types'
+import { Typography } from '@equinor/eds-core-react'
 
 type BridgeGraphProps = {
-  yAxis: string
+  title: string
   graphData: GraphData[]
   sizeFractions: number[]
   bridges: Bridge | undefined
   showBridge?: boolean
 }
 
-export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges, showBridge = true }: BridgeGraphProps) {
+export function BridgeGraph({ title, graphData, sizeFractions, bridges, showBridge = true }: BridgeGraphProps) {
   const [particleFromPercentage, setParticleFromPercentage] = useState<string>('0%')
   const [particleToPercentage, setParticleToPercentage] = useState<string>('100%')
   const particleRange = useContext(ParticleSizeContext)
@@ -40,6 +41,9 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges, showBrid
 
   return (
     <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
+      <Typography variant='h4' style={{ textAlign: 'center' }}>
+        {title}
+      </Typography>
       <ResponsiveContainer height={500} minWidth={600}>
         <AreaChart data={graphData} margin={{ top: 5, right: 30, bottom: 5 }}>
           {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
@@ -52,6 +56,7 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges, showBrid
             </linearGradient>
           </defs>
           <CartesianGrid strokeDasharray='3 3' />
+
           <XAxis
             dataKey='size'
             scale='log'
@@ -61,7 +66,7 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges, showBrid
             label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
             height={70}
           />
-          <YAxis type='number' allowDataOverflow width={75} label={{ value: yAxis, angle: '270' }} />
+          <YAxis type='number' allowDataOverflow width={75} label={{ value: 'Volume (%)', angle: '270' }} />
           <Tooltip />
           <Legend verticalAlign='bottom' align='center' />
           {Object.entries(bridges).map(([name, cumulative], index) => (