feat: responsive container for application graph

hackmcgill · Nov 26, 2021 · 16eb3be · 16eb3be
1 parent fcbad99
commit 16eb3be
Showing 1 changed file with 27 additions and 23 deletions.
diff --git a/src/features/Stats/StatsApplicationsGraph.tsx b/src/features/Stats/StatsApplicationsGraph.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { Box } from '@rebass/grid';
 import { IStatsApplications } from '../../config';
 
 import {
+    ResponsiveContainer,
     LineChart,
     Line,
     XAxis,
@@ -22,29 +24,31 @@ const StatsApplicationsGraph: React.FC<IStatsApplicationsGraph> = (props) => {
 
     // cannot use ResponsiveContainer since parent has no width and height
     return (
-        <LineChart
-            width={700}
-            height={300}
-            data={applications}
-            margin={{
-                top: 5,
-                right: 30,
-                left: 20,
-                bottom: 5
-            }}
-        >
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="date" />
-            <YAxis />
-            <Tooltip />
-            <Legend />
-            <Line
-                type="monotone"
-                dataKey="applications"
-                stroke="#8884d8"
-                activeDot={{ r: 8 }}
-            />
-        </LineChart>
+        <Box width={1} alignSelf={'center'}>
+            <ResponsiveContainer width="100%" height={300}>
+                <LineChart
+                    data={applications}
+                    margin={{
+                        top: 5,
+                        right: 30,
+                        left: 20,
+                        bottom: 5
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="date" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Line
+                        type="monotone"
+                        dataKey="applications"
+                        stroke="#8884d8"
+                        activeDot={{ r: 8 }}
+                    />
+                </LineChart>
+            </ResponsiveContainer>
+        </Box>
     );
 }