Merge pull request #406 from euanwm/fix/chartjs_fails_build

back to basic config options
euanwm · Oct 2, 2024 · bb120f4 · bb120f4
2 parents 0ab2291 + 33f7064
commit bb120f4
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 60 deletions.
diff --git a/frontend/components/molecules/lifterGraph.tsx b/frontend/components/molecules/lifterGraph.tsx
@@ -8,7 +8,7 @@ import {
   Title,
   Tooltip,
   Legend,
-  ChartOptions
+  ChartOptions,
 } from 'chart.js'
 import { Line } from 'react-chartjs-2'
 
@@ -19,74 +19,85 @@ ChartJS.register(
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
 )
 
 // todo: add a aspect ratio prop to the component
-export const LifterGraph = ({ lifterHistory, setRatio }: { lifterHistory: LifterChartData | null, setRatio: number }) => {
+const LifterGraph = ({
+  lifterHistory,
+  setRatio,
+}: {
+  lifterHistory: LifterChartData | null
+  setRatio: number
+}) => {
   if (!lifterHistory) {
-    return null;
+    return null
   }
 
   // todo: define each dataset as a type/interface instead of manually indexing into the array
   const processedData = {
     labels: lifterHistory.labels,
-    datasets: [{
-      ...lifterHistory.datasets[0],
-      borderColor: '#0072F5',
-      backgroundColor: '#3694FF'
-    }, {
-      ...lifterHistory.datasets[1],
-      borderColor: '#17C964',
-      backgroundColor: '#78F2AD'
-    }, {
-      ...lifterHistory.datasets[2],
-      borderColor: '#F31260',
-      backgroundColor: '#F75F94'
-    }, {
-      ...lifterHistory.datasets[3],
-      borderColor: '#F3A312',
-      backgroundColor: '#F7C78F'
-    }]
+    datasets: [
+      {
+        ...lifterHistory.datasets[0],
+        borderColor: '#0072F5',
+        backgroundColor: '#3694FF',
+      },
+      {
+        ...lifterHistory.datasets[1],
+        borderColor: '#17C964',
+        backgroundColor: '#78F2AD',
+      },
+      {
+        ...lifterHistory.datasets[2],
+        borderColor: '#F31260',
+        backgroundColor: '#F75F94',
+      },
+      {
+        ...lifterHistory.datasets[3],
+        borderColor: '#F3A312',
+        backgroundColor: '#F7C78F',
+      },
+    ],
   }
 
-  /* todo: implement scales gridlines colour into the config
-      scales: {
-        x: {grid: {color: '#313538'}},
-        y: {grid: {color: '#313538'}}
+  const config = {
+    plugins: {
+      legend: {
+        display: false,
       },
-   */
-  const config: ChartOptions = {
-    aspectRatio: setRatio,
-    color: 'white',
-    layout: {
-      padding: 20
     },
-    elements: {
-      point: {
-        radius: 4,
-        borderWidth: 0,
-        hitRadius: 2
+    scales: {
+      x: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          color: '#A0A0A0',
+          font: {
+            size: 12,
+          },
+        },
       },
-      line: {
-        tension: 0.1,
-        borderCapStyle: 'round',
-        fill: false,
-        borderWidth: 2
-      }
-    },
-    plugins: {
-      legend: {
-        position: 'bottom',
-        labels: {
-          boxHeight: 15,
-          boxWidth: 15
+      y: {
+        grid: {
+          color: '#F0F0F0',
+          borderColor: '#F0F0F0',
+          borderWidth: 1,
         },
-      }
+        ticks: {
+          color: '#A0A0A0',
+          font: {
+            size: 12,
+          },
+        },
+      },
     },
+    maintainAspectRatio: false,
+    aspectRatio: setRatio,
   }
 
-  return (
-    <Line data={processedData} options={config} />
-  )
-};
+  return <Line data={processedData} options={config} />
+}
+
+export default LifterGraph
diff --git a/frontend/components/molecules/lifterGraphModal.tsx b/frontend/components/molecules/lifterGraphModal.tsx
@@ -1,7 +1,7 @@
 import useSWR from 'swr'
 import { Modal, ModalContent, ModalHeader, Spinner } from '@nextui-org/react'
 import fetchLifterGraphData from '@/api/fetchLifterGraphData/fetchLifterGraphData'
-import { LifterGraph } from './lifterGraph'
+import LifterGraph from './lifterGraph'
 
 function LifterGraphModal({
   lifterName,

diff --git a/frontend/components/organisms/lifterPage.tsx b/frontend/components/organisms/lifterPage.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { Spinner } from '@nextui-org/react'
 
 import { LifterStats } from '@/components/molecules/lifterStats'
-import { LifterGraph } from '@/components/molecules/lifterGraph'
+import LifterGraph from '@/components/molecules/lifterGraph'
 import { HistoryTable } from '@/components/molecules/historyTable'
 import fetchLifterHistory from '../../api/fetchLifterHistory/fetchLifterHistory'
 import HeaderBar from '@/components/molecules/head'
@@ -15,10 +15,7 @@ function LifterPage() {
     params[key] = router.query[key]?.toString() || ''
   }
 
-  const { data, isLoading } = useSWR(
-    params,
-    fetchLifterHistory,
-  )
+  const { data, isLoading } = useSWR(params, fetchLifterHistory)
 
   return (
     <>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json