Fix overflow for mobile using esponsiveContainer

hasadna · Nov 28, 2023 · e28ab65 · e28ab65
1 parent e54fb3d
commit e28ab65
Showing 1 changed file with 49 additions and 58 deletions.
diff --git a/src/pages/gapsPatterns/GapsPatternsPage.tsx b/src/pages/gapsPatterns/GapsPatternsPage.tsx
@@ -26,6 +26,7 @@ import {
   ComposedChart,
   Cell,
   TooltipProps,
+  ResponsiveContainer,
 } from 'recharts'
 import { mapColorByExecution } from '../components/utils'
 import { useGapsList } from '../useGapsList'
@@ -68,11 +69,6 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
     ...hourlyData.map((entry) => entry.actual_rides),
   )
 
-  const isSmallScreen = window.innerWidth < 992
-  const widgetWidth =
-    window.innerWidth - (isSmallScreen ? (window.innerWidth < 768 ? 120 : 179) : 500)
-  const barSize = isSmallScreen ? 10 : 20
-
   return (
     lineRef > 0 && (
       <div className="widget">
@@ -91,59 +87,54 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
               <Radio.Button value="hour">{TEXTS.order_by_hour}</Radio.Button>
               <Radio.Button value="severity">{TEXTS.order_by_severity} </Radio.Button>
             </Radio.Group>
-
-            <ComposedChart
-              layout="vertical"
-              width={widgetWidth}
-              height={hourlyData.length * 50}
-              data={hourlyData}
-              margin={{
-                top: 20,
-                right: isSmallScreen ? 5 : 20,
-                bottom: 20,
-                left: isSmallScreen ? 5 : 20,
-              }}
-              barGap={-barSize}>
-              <CartesianGrid stroke="#f5f5f5" />
-              <XAxis
-                type="number"
-                xAxisId={0}
-                reversed={true}
-                orientation={'top'}
-                domain={[0, maxHourlyRides]}
-              />
-              <XAxis
-                type="number"
-                xAxisId={1}
-                reversed={true}
-                orientation={'top'}
-                domain={[0, maxHourlyRides]}
-                hide
-              />
-              <YAxis
-                dataKey="planned_hour"
-                type="category"
-                orientation={'right'}
-                style={{ direction: 'ltr', marginTop: '-10px' }}
-              />
-              <Tooltip content={<CustomTooltip />} />
-              <Legend />
-              <Bar dataKey="actual_rides" barSize={barSize} radius={9} xAxisId={1} opacity={30}>
-                {hourlyData.map((entry, index) => (
-                  <Cell
-                    key={`cell-${index}`}
-                    fill={mapColorByExecution(entry.planned_rides, entry.actual_rides)}
-                  />
-                ))}
-              </Bar>
-              <Bar
-                dataKey="planned_rides"
-                barSize={barSize}
-                fill="#413ea055"
-                radius={9}
-                xAxisId={0}
-              />
-            </ComposedChart>
+            <ResponsiveContainer width="100%" height={hourlyData.length * 50}>
+              <ComposedChart
+                layout="vertical"
+                width={500}
+                height={hourlyData.length * 50}
+                data={hourlyData}
+                margin={{
+                  top: 20,
+                  right: 20,
+                  bottom: 20,
+                  left: 20,
+                }}
+                barGap={-20}>
+                <CartesianGrid stroke="#f5f5f5" />
+                <XAxis
+                  type="number"
+                  xAxisId={0}
+                  reversed={true}
+                  orientation={'top'}
+                  domain={[0, maxHourlyRides]}
+                />
+                <XAxis
+                  type="number"
+                  xAxisId={1}
+                  reversed={true}
+                  orientation={'top'}
+                  domain={[0, maxHourlyRides]}
+                  hide
+                />
+                <YAxis
+                  dataKey="planned_hour"
+                  type="category"
+                  orientation={'right'}
+                  style={{ direction: 'ltr', marginTop: '-10px' }}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend />
+                <Bar dataKey="actual_rides" barSize={20} radius={9} xAxisId={1} opacity={30}>
+                  {hourlyData.map((entry, index) => (
+                    <Cell
+                      key={`cell-${index}`}
+                      fill={mapColorByExecution(entry.planned_rides, entry.actual_rides)}
+                    />
+                  ))}
+                </Bar>
+                <Bar dataKey="planned_rides" barSize={20} fill="#413ea055" radius={9} xAxisId={0} />
+              </ComposedChart>
+            </ResponsiveContainer>
           </>
         )}
       </div>