fix: charts data slice (#17)

* fix: charts data slice

* feat: shrink the chart data array size down once a while

---------

Co-authored-by: kunish <kunish.butt@gmail.com>

src/pages/Overview.tsx

@@ -10,10 +10,13 @@ import {
   createEffect,
   createMemo,
   createSignal,
+  onCleanup,
 } from 'solid-js'
 import { secret, wsEndpointURL } from '~/signals'
 import type { Connection } from '~/types'
 
+const CHART_MAX_XAXIS = 10
+
 const defaultChartOptions: ApexOptions = {
   chart: {
     toolbar: { show: false },
@@ -30,7 +33,11 @@ const defaultChartOptions: ApexOptions = {
   grid: { yaxis: { lines: { show: false } } },
   stroke: { curve: 'smooth' },
   tooltip: { enabled: false },
-  xaxis: { labels: { show: false }, axisTicks: { show: false } },
+  xaxis: {
+    range: CHART_MAX_XAXIS,
+    labels: { show: false },
+    axisTicks: { show: false },
+  },
   yaxis: {
     labels: {
       style: { colors: 'gray' },
@@ -55,6 +62,18 @@ export default () => {
     [],
   )
   const [memories, setMemories] = createSignal<number[]>([])
+  // https://github.com/apexcharts/apexcharts.js/blob/main/samples/source/line/realtime.xml
+  // TODO: need a better way
+  const preventLeakTimer = setInterval(
+    () => {
+      setTraffics((traffics) => traffics.slice(-CHART_MAX_XAXIS))
+      setMemories((memo) => memo.slice(-CHART_MAX_XAXIS))
+    },
+    // we shrink the chart data array size down every 10 minutes
+    10 * 60 * 1000,
+  )
+
+  onCleanup(() => clearInterval(preventLeakTimer))
 
   const trafficWS = createReconnectingWS(
     `${wsEndpointURL()}/traffic?token=${secret()}}`,
@@ -74,7 +93,7 @@ export default () => {
     const t = traffic()
 
     if (t) {
-      setTraffics((traffics) => [...traffics, t].slice(-10))
+      setTraffics((traffics) => [...traffics, t])
     }
   })
 
@@ -112,7 +131,7 @@ export default () => {
     const m = memory()
 
     if (m) {
-      setMemories((memories) => [...memories, m].slice(-10))
+      setMemories((memories) => [...memories, m])
     }
   })