#2774: Completed line graph component and added sample line graph to …

…stats page

src/frontend/src/components/StatsLineGraph.tsx

@@ -0,0 +1,114 @@
+import { Line } from 'react-chartjs-2';
+import {
+  Chart,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+import { Box } from '@mui/material';
+
+Chart.register(CategoryScale, LinearScale, LineController, LineElement, PointElement, Title, Tooltip, Legend);
+
+interface StatsLineGraphProps {
+  xAxisData: string[];
+  yAxisData: number[];
+  xAxisLabel: string;
+  yAxisLabel: string;
+  timeFrame?: string;
+  width?: number;
+  height?: number;
+  graphTitle: string;
+}
+
+const StatsLineGraph: React.FC<StatsLineGraphProps> = ({
+  xAxisData,
+  yAxisData,
+  xAxisLabel,
+  yAxisLabel,
+  width = 600,
+  height = 400,
+  graphTitle
+}) => {
+  const data = {
+    labels: xAxisData,
+    datasets: [
+      {
+        label: yAxisLabel,
+        data: yAxisData,
+        backgroundColor: '#DE514C',
+        borderColor: '#DE514C'
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: true,
+    plugins: {
+      title: {
+        display: true,
+        text: graphTitle,
+        font: {
+          size: 18
+        },
+        color: 'white'
+      },
+      legend: {
+        display: true,
+        position: 'top' as const,
+        labels: {
+          font: {
+            size: 14
+          },
+          color: 'white'
+        }
+      }
+    },
+
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: xAxisLabel,
+          font: {
+            size: 14
+          },
+          color: 'white'
+        },
+        ticks: {
+          color: 'white'
+        }
+      },
+      y: {
+        title: {
+          display: true,
+          text: yAxisLabel,
+          font: {
+            size: 14
+          },
+          color: 'white'
+        },
+        ticks: {
+          color: 'white'
+        },
+        grid: {
+          color: '#6A6B6B'
+        },
+        min: 0
+      }
+    }
+  };
+
+  return (
+    <Box sx={{ width: '100%', height: '100%', maxWidth: width, maxHeight: height }}>
+      <Line data={data} options={options} />
+    </Box>
+  );
+};
+
+export default StatsLineGraph;

src/frontend/src/pages/StatisticsPage/StatisticsPage.tsx

@@ -6,37 +6,53 @@
 import PageLayout from '../../components/PageLayout';
 import BarChart from '../../components/StatsBarChart';
 import PieChart from '../../components/StatsPieChart';
+import LineGraph from '../../components/StatsLineGraph';
+import { Box } from '@mui/material';
 
 const StatisticsPage: React.FC = () => {
-  // Testing bar and pie chart components
+  // Testing bar, pie, and line chart components
   return (
     <PageLayout title="Statistics">
-      <BarChart
-        xAxisData={['test1', 'test2', 'test3', 'test4']}
-        yAxisData={[100, 200, 50, 300]}
-        xAxisLabel="Categories"
-        yAxisLabel="Values"
-        graphTitle="Bar Chart Test"
-      />
+      <Box style={{ display: 'flex', justifyContent: 'normal' }}>
+        <BarChart
+          xAxisData={['test1', 'test2', 'test3', 'test4']}
+          yAxisData={[100, 200, 50, 300]}
+          xAxisLabel="Categories"
+          yAxisLabel="Values"
+          graphTitle="Bar Chart Test"
+        />
 
-      <PieChart
-        xAxisData={[
-          'test1',
-          'test2',
-          'test3',
-          'test4',
-          'test5',
-          'test6',
-          'test7',
-          'test8',
-          'test9',
-          'test10',
-          'test11',
-          'test12'
-        ]}
-        yAxisData={[10, 20, 5, 35, 15, 25, 10, 20, 5, 10, 12, 20]}
-        graphTitle="Pie Chart Test"
-      />
+        <Box style={{ padding: '50px' }} />
+
+        <PieChart
+          xAxisData={[
+            'test1',
+            'test2',
+            'test3',
+            'test4',
+            'test5',
+            'test6',
+            'test7',
+            'test8',
+            'test9',
+            'test10',
+            'test11',
+            'test12'
+          ]}
+          yAxisData={[10, 20, 5, 35, 15, 25, 10, 20, 5, 10, 12, 20]}
+          graphTitle="Pie Chart Test"
+        />
+      </Box>
+
+      <Box style={{ display: 'flex', justifyContent: 'normal' }}>
+        <LineGraph
+          xAxisData={['test1', 'test2', 'test3', 'test4']}
+          yAxisData={[100, 200, 50, 500]}
+          xAxisLabel="Categories"
+          yAxisLabel="Values"
+          graphTitle="Line graph Test"
+        />
+      </Box>
     </PageLayout>
   );
 };