line graph shows up in blue, toggle button ok, needs to parse correct data.

Author: sparklingwter

Diff for: src/components/common/SingleGradesInfo/singleGradesInfo.tsx

@@ -1,5 +1,5 @@
-import { Skeleton } from '@mui/material';
-import React from 'react';
+import { Skeleton, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import React, { useState } from 'react';
 
 import BarGraph from '@/components/graph/BarGraph/barGraph';
 import LineGraph from '@/components/graph/LineGraph/lineGraph';
@@ -42,6 +42,16 @@ type Props = {
 };
 
 function SingleGradesInfo({ title, course, grades }: Props) {
+  const [chartType, setChartType] = useState<'line' | 'bar'>('line');
+
+  const handleChartToggle = (
+    event: React.MouseEvent<HTMLElement>,
+    newChartType: 'line' | 'bar'
+  ) => {
+    if (newChartType !== null) {
+      setChartType(newChartType);
+    }
+  };
   if (typeof grades === 'undefined' || grades.state === 'error') return null;
   if (grades.state === 'loading') {
     return (
@@ -59,6 +69,26 @@ function SingleGradesInfo({ title, course, grades }: Props) {
   const gpaValues = [4,4,3.67,3.33,3,2.67,2.33,2,1.67,1.33,1,0.67,0];
 
   return (
+    
+    <div>
+    {/* Toggle Button to switch chart type */}
+    <div className="flex justify-end mb-4 pr-2">
+    <ToggleButtonGroup
+      value={chartType}
+      exclusive
+      onChange={handleChartToggle}
+      size = "small"
+      orientation= "vertical"
+      aria-label="chart type">
+
+      <ToggleButton value="line" aria-label="line chart">
+        Line
+      </ToggleButton>
+      <ToggleButton value="bar" aria-label="bar chart">
+        Bar
+      </ToggleButton>
+    </ToggleButtonGroup>
+    </div>
     <div className="p-2">
       <div className="h-64">
         <BarGraph
@@ -83,7 +113,9 @@ function SingleGradesInfo({ title, course, grades }: Props) {
         />
       </div>
     </div>
+    </div>
   );
 }
 
+
 export default SingleGradesInfo;

Diff for: src/components/graph/LineGraph/lineGraph.tsx

@@ -1,4 +1,4 @@
-import { Skeleton, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { Skeleton } from '@mui/material';
 import dynamic from 'next/dynamic';
 import React, { useEffect, useState } from 'react';
 
@@ -26,7 +26,6 @@ type Props = {
 };
 
 function LineGraph({ gpaTrend, chartTitle, xAxisLabels, yAxisFormatter, tooltipFormatter, series }: Props): React.ReactNode {
-  const [chartType, setChartType] = useState<'line' | 'bar'>('line');
   const [chartData, setChartData] = useState<{
     options: {
       chart: {
@@ -178,20 +177,11 @@ function LineGraph({ gpaTrend, chartTitle, xAxisLabels, yAxisFormatter, tooltipF
       );
     }
   }
-
-  const handleChartToggle = (_event: React.MouseEvent<HTMLElement>, newChartType: 'line' | 'bar' | null) => {
-    if (newChartType) setChartType(newChartType);
-  };
+  const chartType = 'line'; // Define the chart type
 
   return (
-    <div className="p-2">
-      <ToggleButtonGroup value={chartType} exclusive onChange={handleChartToggle} className="mb-2">
-        <ToggleButton value="bar" />
-        <ToggleButton value="line" />
-      </ToggleButtonGroup>
-      <div className="h-64">
-        <Chart options={chartData.options} series={chartData.series} type={chartType} height={250} />
-      </div>
+    <div className="h-64">
+      <Chart options={chartData.options} series={chartData.series} type={chartType} height={250} />
     </div>
   );
 }