mui charts

Brandawg93 · Dec 30, 2024 · 8a5a4bc · 8a5a4bc
1 parent 7253aca
commit 8a5a4bc
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 188 deletions.
diff --git a/__tests__/unit/app/page.test.tsx b/__tests__/unit/app/page.test.tsx
@@ -23,11 +23,6 @@ jest.mock('@tanstack/react-query', () => {
   }
 })
 
-jest.mock('react-chartjs-2', () => ({
-  Line: () => null,
-  Doughnut: () => null,
-}))
-
 jest.mock('../../../src/app/actions', () => ({
   getDevices: jest.fn(),
   checkSettings: jest.fn(),

diff --git a/__tests__/unit/client/components/gauge.test.tsx b/__tests__/unit/client/components/gauge.test.tsx
@@ -2,10 +2,6 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import Gauge from '@/client/components/gauge'
 
-jest.mock('react-chartjs-2', () => ({
-  Doughnut: () => null,
-}))
-
 describe('Gauge', () => {
   it('renders', () => {
     const { getByTestId } = render(<Gauge percentage={100} title='test' />)

diff --git a/__tests__/unit/client/components/line-chart.test.tsx b/__tests__/unit/client/components/line-chart.test.tsx
@@ -3,10 +3,6 @@ import { render } from '@testing-library/react'
 import LineChart from '@/client/components/line-chart'
 import { DEVICE } from '@/common/types'
 
-jest.mock('react-chartjs-2', () => ({
-  Line: () => null,
-}))
-
 const device: DEVICE = {
   vars: {
     'input.voltage': {

diff --git a/__tests__/unit/client/components/watts-chart.test.tsx b/__tests__/unit/client/components/watts-chart.test.tsx
@@ -3,10 +3,6 @@ import { render } from '@testing-library/react'
 import WattsChart from '@/client/components/watts-chart'
 import { DEVICE } from '@/common/types'
 
-jest.mock('react-chartjs-2', () => ({
-  Line: () => null,
-}))
-
 const device: DEVICE = {
   vars: {
     'ups.realpower': {

diff --git a/package.json b/package.json
@@ -38,8 +38,6 @@
     "@mui/x-charts": "^7.23.2",
     "@tanstack/react-query": "^5.62.8",
     "@tanstack/react-table": "^8.20.6",
-    "chart.js": "^4.4.7",
-    "chartjs-plugin-annotation": "^3.1.0",
     "i18next": "^24.1.2",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-resources-to-backend": "^1.2.1",
@@ -48,7 +46,6 @@
     "next": "^15.1.1",
     "next-i18next": "^15.4.1",
     "react": "^19.0.0",
-    "react-chartjs-2": "^5.2.0",
     "react-dom": "^19.0.0",
     "react-i18next": "^15.2.0",
     "react-icons": "^5.4.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/client/components/charts-container.tsx b/src/client/components/charts-container.tsx
@@ -1,15 +1,10 @@
 'use client'
 
-import 'chart.js/auto'
 import React from 'react'
-import { Chart } from 'chart.js'
-import annotationPlugin from 'chartjs-plugin-annotation'
 import { VARS, DeviceData } from '@/common/types'
 import LineChart from '@/client/components/line-chart'
 import WattsChart from '@/client/components/watts-chart'
 
-Chart.register(annotationPlugin)
-
 type Props = {
   vars: VARS
   data: DeviceData

diff --git a/src/client/components/line-chart.tsx b/src/client/components/line-chart.tsx
@@ -1,9 +1,17 @@
 import React, { useEffect, useState, useRef, useContext } from 'react'
-import { Line } from 'react-chartjs-2'
 import { Card } from '@material-tailwind/react'
-
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend'
+import { ChartsGrid } from '@mui/x-charts/ChartsGrid'
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'
+import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
 import { useTranslation } from 'react-i18next'
 import { LanguageContext } from '@/client/context/language'
+import { ThemeContext } from '../context/theme'
 
 type Props = {
   id: string
@@ -16,6 +24,12 @@ type Props = {
 export default function LineChart(props: Props) {
   const { id, inputVoltage, inputVoltageNominal, outputVoltage, updated } = props
   const lng = useContext<string>(LanguageContext)
+  const { theme } = useContext(ThemeContext)
+  const darkTheme = createTheme({
+    palette: {
+      mode: theme,
+    },
+  })
   const { t } = useTranslation(lng)
   const [inputVoltageData, setInputVoltageData] = useState<Array<number>>([])
   const [outputVoltageData, setOutputVoltageData] = useState<Array<number>>([])
@@ -35,69 +49,47 @@ export default function LineChart(props: Props) {
   }, [id, inputVoltage, outputVoltage, updated])
 
   return (
-    <Card
-      className='border-neutral-300 h-96 w-full border border-solid border-gray-300 p-3 shadow-none dark:border-gray-800 dark:bg-gray-950'
-      data-testid='line'
-    >
-      <Line
-        className='dark:hue-rotate-180 dark:invert'
-        data={{
-          labels: inputVoltageData.map(() => ''),
-          datasets: [
-            {
-              label: t('lineChart.inputVoltage'),
-              data: inputVoltageData,
-              fill: false,
-              borderColor: 'rgb(8, 143, 143)',
-              tension: 0.1,
-            },
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <Card
+        className='border-neutral-300 h-96 w-full border border-solid border-gray-300 p-3 shadow-none dark:border-gray-800 dark:bg-gray-950'
+        data-testid='line'
+      >
+        <ResponsiveChartContainer
+          height={300}
+          series={[
+            { data: inputVoltageData, label: t('lineChart.inputVoltage'), type: 'line' },
+            { data: outputVoltageData, label: t('lineChart.outputVoltage'), type: 'line' },
+          ]}
+          xAxis={[{ scaleType: 'point', data: inputVoltageData.map((value, index) => index) }]}
+          yAxis={[
             {
-              label: t('lineChart.outputVoltage'),
-              data: outputVoltageData,
-              fill: false,
-              borderColor: 'rgb(255, 83, 73)',
-              tension: 0.1,
-            },
-            {
-              label: t('lineChart.nominalInputVoltage'),
-              data: [],
-              borderColor: 'black',
-              borderDash: [6, 6],
-              borderDashOffset: 0,
-              borderWidth: 3,
-              backgroundColor: 'rgb(0, 0, 0, 0)',
-            },
-          ],
-        }}
-        options={{
-          animation: {
-            duration: window.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 1000 : 0,
-          },
-          scales: {
-            y: {
-              ticks: {
-                callback: (tickValue: string | number) => `${tickValue}V`,
-              },
-            },
-          },
-          maintainAspectRatio: false,
-          plugins: {
-            annotation: {
-              annotations: {
-                nominal: {
-                  type: 'line',
-                  borderColor: 'black',
-                  borderDash: [6, 6],
-                  borderDashOffset: 0,
-                  borderWidth: 3,
-                  scaleID: 'y',
-                  value: inputVoltageNominal,
-                },
-              },
+              scaleType: 'linear',
+              valueFormatter: (value: number) => `${value}V`,
+              min: inputVoltageNominal
+                ? Math.min(...inputVoltageData, ...outputVoltageData, inputVoltageNominal)
+                : Math.min(...inputVoltageData, ...outputVoltageData),
+              max: inputVoltageNominal
+                ? Math.max(...inputVoltageData, ...outputVoltageData, inputVoltageNominal)
+                : Math.max(...inputVoltageData, ...outputVoltageData),
             },
-          },
-        }}
-      />
-    </Card>
+          ]}
+        >
+          <LinePlot />
+          <MarkPlot />
+          {inputVoltageNominal && (
+            <ChartsReferenceLine
+              y={inputVoltageNominal}
+              label={t('lineChart.nominalInputVoltage')}
+              lineStyle={{ stroke: 'red', strokeDasharray: '10 5' }}
+            />
+          )}
+          <ChartsXAxis disableTicks disableLine tickLabelStyle={{ display: 'none' }} />
+          <ChartsYAxis />
+          <ChartsLegend />
+          <ChartsGrid horizontal vertical />
+        </ResponsiveChartContainer>
+      </Card>
+    </ThemeProvider>
   )
 }