feat: responsive container for application graph

Author: chenxuan-zhou

src/features/Stats/StatsApplicationsGraph.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IStatsApplications } from '../../config';
 
 import {
+    ResponsiveContainer,
     LineChart,
     Line,
     XAxis,
@@ -22,29 +23,29 @@ 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>
+        <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>
     );
 }