Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-12-27 07:34:12 +08:00
Code Issues Projects Releases Wiki Activity

fix: charts data slice (#17)

Browse Source 
* fix: charts data slice

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

---------

Co-authored-by: kunish <kunish.butt@gmail.com>
This commit is contained in:
Zephyruso 2023-08-29 17:45:07 +08:00 committed by GitHub
parent 36cc05fca3
commit 35f80426ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/Overview.tsx
View File

@ -10,10 +10,13 @@ import {
createEffect, createEffect,
createMemo, createMemo,
createSignal, createSignal,
onCleanup,
} from 'solid-js' } from 'solid-js'
import { secret, wsEndpointURL } from '~/signals' import { secret, wsEndpointURL } from '~/signals'
import type { Connection } from '~/types' import type { Connection } from '~/types'
const CHART_MAX_XAXIS = 10
const defaultChartOptions: ApexOptions = { const defaultChartOptions: ApexOptions = {
chart: { chart: {
toolbar: { show: false }, toolbar: { show: false },
@ -30,7 +33,11 @@ const defaultChartOptions: ApexOptions = {
grid: { yaxis: { lines: { show: false } } }, grid: { yaxis: { lines: { show: false } } },
stroke: { curve: 'smooth' }, stroke: { curve: 'smooth' },
tooltip: { enabled: false }, tooltip: { enabled: false },
xaxis: { labels: { show: false }, axisTicks: { show: false } }, xaxis: {
range: CHART_MAX_XAXIS,
labels: { show: false },
axisTicks: { show: false },
},
yaxis: { yaxis: {
labels: { labels: {
style: { colors: 'gray' }, style: { colors: 'gray' },
@ -55,6 +62,18 @@ export default () => {
[], [],
) )
const [memories, setMemories] = createSignal<number[]>([]) 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( const trafficWS = createReconnectingWS(
`${wsEndpointURL()}/traffic?token=${secret()}}`, `${wsEndpointURL()}/traffic?token=${secret()}}`,
@ -74,7 +93,7 @@ export default () => {
const t = traffic() const t = traffic()
if (t) { if (t) {
setTraffics((traffics) => [...traffics, t].slice(-10)) setTraffics((traffics) => [...traffics, t])
} }
}) })
@ -112,7 +131,7 @@ export default () => {
const m = memory() const m = memory()
if (m) { if (m) {
setMemories((memories) => [...memories, m].slice(-10)) setMemories((memories) => [...memories, m])
} }
}) })