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

feat: show vertical stats on small screen devices

Browse Source
This commit is contained in:
kunish 2023-08-28 01:20:09 +08:00
parent 4a39f163fe
commit 841161a0da
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Connections.tsx
View File

@ -10,7 +10,7 @@ import byteSize from 'byte-size'
import { isIPv6 } from 'is-ip'
import { For, createSignal } from 'solid-js'
import { secret, wsEndpointURL } from '~/signals'
import type { Connection } from '../types'
import type { Connection } from '~/types'
export const Connections = () => {
const [search, setSearch] = createSignal('')

81
src/pages/Overview.tsx
View File

@ -3,7 +3,14 @@ import { createReconnectingWS } from '@solid-primitives/websocket'
import { ApexOptions } from 'apexcharts'
import byteSize from 'byte-size'
import { SolidApexCharts } from 'solid-apexcharts'
import { createEffect, createMemo, createSignal } from 'solid-js'
import {
JSX,
ParentComponent,
children,
createEffect,
createMemo,
createSignal,
} from 'solid-js'
import { secret, wsEndpointURL } from '~/signals'
import type { Connection } from '~/types'
@ -34,6 +41,15 @@ const defaultChartOptions: ApexOptions = {
},
}
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
<div class="stat">
<div class="stat-title text-secondary-content">{props.label}</div>
<div class="stat-value text-primary-content">
{children(() => props.children)()}
</div>
</div>
)
export const Overview = () => {
const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
[],
@ -134,45 +150,30 @@ export const Overview = () => {
return (
<div class="flex flex-col gap-4">
<div class="stats w-full bg-primary shadow">
<div class="stat">
<div class="stat-title text-secondary-content">Upload</div>
<div class="stat-value text-primary-content">
{byteSize(traffic()?.up || 0).toString()}/s
</div>
</div>
<div class="stat">
<div class="stat-title text-secondary-content">Download</div>
<div class="stat-value text-primary-content">
{byteSize(traffic()?.down || 0).toString()}/s
</div>
</div>
<div class="stat">
<div class="stat-title text-secondary-content">Upload Total</div>
<div class="stat-value text-primary-content">
{byteSize(connection()?.uploadTotal || 0).toString()}
</div>
</div>
<div class="stat">
<div class="stat-title text-secondary-content">Download Total</div>
<div class="stat-value text-primary-content">
{byteSize(connection()?.downloadTotal || 0).toString()}
</div>
</div>
<div class="stat">
<div class="stat-title text-secondary-content">
Active Connections
</div>
<div class="stat-value text-primary-content">
{connection()?.connections.length || 0}
</div>
</div>
<div class="stat">
<div class="stat-title text-secondary-content">Memory Usage</div>
<div class="stat-value text-primary-content">
{byteSize(memory() || 0).toString()}
</div>
</div>
<div class="stats stats-vertical w-full bg-primary shadow sm:stats-horizontal">
<TrafficWidget label="Upload">
{byteSize(traffic()?.up || 0).toString()}/s
</TrafficWidget>
<TrafficWidget label="Download">
{byteSize(traffic()?.down || 0).toString()}/s
</TrafficWidget>
<TrafficWidget label="Upload Total">
{byteSize(connection()?.uploadTotal || 0).toString()}
</TrafficWidget>
<TrafficWidget label="Download Total">
{byteSize(connection()?.downloadTotal || 0).toString()}
</TrafficWidget>
<TrafficWidget label="Active Connections">
{connection()?.connections.length || 0}
</TrafficWidget>
<TrafficWidget label="Memory Usage">
{byteSize(memory() || 0).toString()}
</TrafficWidget>
</div>
<div class="mx-auto grid w-full max-w-screen-lg grid-cols-1 gap-4">

2
src/pages/Proxies.tsx
View File

@ -1,6 +1,6 @@
import { For, createSignal, onMount } from 'solid-js'
import { useRequest } from '~/signals'
import { Proxy, ProxyProvider } from '~/types'
import type { Proxy, ProxyProvider } from '~/types'
export const Proxies = () => {
const request = useRequest()