Moves from chart.js to recharts

Author: KSJaay

app/components/monitor/graph/graph.scss

@@ -1,6 +1,15 @@
 @use '../../../styles/breakpoints.scss' as *;
 @use '../../../styles/pxToRem.scss' as *;
 
+.monitor-chart-content {
+  width: 100%;
+  height: 425px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem 1.75rem;
+}
+
 .monitor-chart-container {
   background-color: var(--accent-900);
   border-radius: pxToRem(16);
@@ -21,7 +30,23 @@
   display: none;
 }
 
+@include laptop {
+  .monitor-chart-content {
+    height: 325px;
+  }
+}
+
+@include tablet {
+  .monitor-chart-content {
+    height: 280px;
+  }
+}
+
 @include mobile {
+  .monitor-chart-content {
+    height: 250px;
+  }
+
   .monitor-chart-buttons-container {
     display: none;
   }

app/components/monitor/graph/index.jsx

@@ -1,110 +1,83 @@
 import './graph.scss';
 
 // import dependencies
-import 'chartjs-adapter-dayjs-3';
 import {
-  BarController,
-  BarElement,
-  Chart as ChartJs,
-  Filler,
-  LinearScale,
-  LineController,
-  LineElement,
-  PointElement,
-  TimeScale,
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
   Tooltip,
-  CategoryScale,
-} from 'chart.js';
-import { Chart } from 'react-chartjs-2';
+  ResponsiveContainer,
+} from 'recharts';
+import dayjs from 'dayjs';
 
 // import local files
 import useLocalStorageContext from '../../../hooks/useLocalstorage';
 import GraphMenu from './menu';
 import useGraphStatus from '../../../hooks/useGraphStatus';
 import { fullMonitorPropType } from '../../../../shared/utils/propTypes';
 
-ChartJs.register(
-  LineController,
-  BarController,
-  LineElement,
-  PointElement,
-  TimeScale,
-  BarElement,
-  LinearScale,
-  Tooltip,
-  Filler,
-  CategoryScale
-);
-
 const MonitorGraph = ({ monitor }) => {
   const { dateformat, timeformat, theme } = useLocalStorageContext();
 
   const { statusType, statusHeartbeats, setStatusType } =
     useGraphStatus(monitor);
 
-  const labels = statusHeartbeats.map((heartbeat = {}) => heartbeat.date);
-  const data = statusHeartbeats.map((heartbeat = {}) => heartbeat.latency);
+  const data = statusHeartbeats.map((heartbeat = {}) => {
+    return { Latency: heartbeat.latency, time: heartbeat.date };
+  });
+
   const gridColor =
     theme.type === 'light' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)';
 
   return (
     <div className="monitor-chart-container">
       <GraphMenu statusType={statusType} setStatusType={setStatusType} />
-      <Chart
-        type={'line'}
-        data={{
-          labels,
-          datasets: [
-            {
-              data,
-              borderColor: '#3ba55c',
-              backgroundColor: '#3ba55d28',
-              yAxisID: 'y',
-              fill: 'origin',
-              tension: 0.15,
-            },
-          ],
-        }}
-        options={{
-          responsive: true,
-          maintainAspectRatio: false,
-          onResize: (chart) => {
-            if (window.innerWidth < 576) {
-              chart.canvas.style.height = '225px';
-            } else if (window.innerWidth < 768) {
-              chart.canvas.style.height = '275px';
-            } else if (window.innerWidth < 1200) {
-              chart.canvas.style.height = '300px';
-            } else if (window.innerWidth < 1920) {
-              chart.canvas.style.height = '320px';
-            } else {
-              chart.canvas.style.height = '400px';
-            }
-          },
-          layout: { padding: { left: 10, right: 30, top: 30, bottom: 10 } },
-          elements: { point: { radius: 0, hitRadius: 100 } },
-          scales: {
-            x: {
-              type: 'time',
-              time: {
-                minUnit: 'minute',
-                round: 'second',
-                tooltipFormat: `${dateformat} ${timeformat}`,
-                displayFormats: { minute: 'HH:mm', hour: 'MM-DD HH:mm' },
-              },
-              ticks: { maxRotation: 0, autoSkipPadding: 30 },
-              grid: { color: gridColor, offset: false },
-            },
-            y: {
-              type: 'linear',
-              title: { display: true, text: 'respTime (ms)' },
-              offset: true,
-              grid: { color: gridColor },
-              min: 0,
-            },
-          },
-        }}
-      />
+      <div className="monitor-chart-content">
+        <ResponsiveContainer>
+          <AreaChart data={data}>
+            <XAxis
+              type="category"
+              dataKey="time"
+              style={{ fill: 'var(--accent-200)' }}
+              tick={{ fontSize: 12 }}
+              tickFormatter={(date) => dayjs(date).format(timeformat)}
+            />
+            <YAxis
+              label={{
+                value: 'respTime (ms)',
+                angle: -90,
+                position: 'insideLeft',
+                style: { textAnchor: 'middle' },
+              }}
+              style={{ fill: 'var(--accent-200)' }}
+            />
+            <CartesianGrid vertical={false} stroke={gridColor} />
+            <Tooltip
+              formatter={(value) => `${value} ms`}
+              labelFormatter={(value) =>
+                dayjs(value).format(`${dateformat} - ${timeformat}`)
+              }
+              separator=": "
+              contentStyle={{
+                backgroundColor: 'var(--accent-800)',
+                border: '1px solid var(--accent-600)',
+                padding: '10px',
+                borderRadius: '5px',
+                fontSize: '0.8rem',
+                color: 'var(--font-color)',
+              }}
+            />
+            <Area
+              type="monotone"
+              dataKey="Latency"
+              stroke="var(--primary-400)"
+              fill="var(--primary-500)"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
     </div>
   );
 };