-
Memory Usage
-
-
- {memory.used.size} {memory.used.unit}
-
-
- / {memory.total.size} {memory.total.unit}
-
+
+
CPU Usage
+
{Math.floor(status.cpu * 100)}%
-
-
-
Uptime
-
-
- {Math.floor(uptime.time)}
-
-
- {uptime.unit}
-
+
+
Memory Usage
+
+
+ {memory.used.size} {memory.used.unit}
+
+
+ / {memory.total.size} {memory.total.unit}
+
+
-
-
+
+
Uptime
+
+
+ {Math.floor(uptime.time)}
+
+
+ {uptime.unit}
+
+
+
+
+
+
+ Bandwidth Usage
+
+
+ {Math.floor(bandwidth.percentage)}
+
+
+
+
+ {bandwidth.used.size} {bandwidth.used.unit} /{' '}
+ {bandwidth.total
+ ? `${bandwidth.total.size} ${bandwidth.total.unit}`
+ : 'unlimited'}
+
+
+
+
+ CPU
+
+
+
+ Memory
+
+
+
)}
)
diff --git a/resources/scripts/util/chart.ts b/resources/scripts/util/chart.ts
new file mode 100644
index 00000000..754c5279
--- /dev/null
+++ b/resources/scripts/util/chart.ts
@@ -0,0 +1,224 @@
+import {
+ Chart as ChartJS,
+ ChartData,
+ ChartDataset,
+ ChartOptions,
+ Filler,
+ LinearScale,
+ LineElement,
+ PointElement,
+} from 'chart.js'
+import { DeepPartial } from 'ts-essentials'
+import { useEffect, useState } from 'react'
+import { deepmerge, deepmergeCustom } from 'deepmerge-ts'
+import { theme } from 'twin.macro'
+import { hexToRgba } from '@/util/helpers'
+import { useStoreState } from '@/state'
+
+ChartJS.register(LineElement, PointElement, Filler, LinearScale)
+
+const options: ChartOptions<'line'> = {
+ responsive: true,
+ animation: false,
+ plugins: {
+ legend: { display: false },
+ title: { display: false },
+ tooltip: { enabled: false },
+ },
+ layout: {
+ padding: 0,
+ },
+ scales: {
+ x: {
+ min: 0,
+ max: 19,
+ type: 'linear',
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ y: {
+ min: 0,
+ type: 'linear',
+ grid: {
+ display: true,
+ color: theme('colors.stone.300'),
+ drawBorder: false,
+ },
+ ticks: {
+ display: true,
+ count: 3,
+ color: theme('colors.stone.900'),
+ font: {
+ family: theme('fontFamily.sans'),
+ size: 11,
+ weight: '400',
+ },
+ },
+ },
+ },
+ elements: {
+ point: {
+ radius: 0,
+ },
+ line: {
+ tension: 0.15,
+ },
+ },
+}
+
+function getOptions(
+ opts?: DeepPartial
> | undefined
+): ChartOptions<'line'> {
+ return deepmerge(options, opts || {})
+}
+
+type ChartDatasetCallback = (
+ value: ChartDataset<'line'>,
+ index: number
+) => ChartDataset<'line'>
+
+function getEmptyData(
+ label: string,
+ sets = 1,
+ callback?: ChartDatasetCallback | undefined
+): ChartData<'line'> {
+ const next = callback || ((value) => value)
+
+ return {
+ labels: Array(20)
+ .fill(0)
+ .map((_, index) => index),
+ datasets: Array(sets)
+ .fill(0)
+ .map((_, index) =>
+ next(
+ {
+ fill: true,
+ label,
+ data: Array(20).fill(-5),
+ borderColor: theme('colors.blue.400'),
+ backgroundColor: hexToRgba(theme('colors.blue.700'), 0.5),
+ },
+ index
+ )
+ ),
+ }
+}
+
+const merge = deepmergeCustom({ mergeArrays: false })
+
+interface UseChartOptions {
+ sets: number
+ options?: DeepPartial> | number | undefined
+ callback?: ChartDatasetCallback | undefined
+}
+
+function useChart(label: string, opts?: UseChartOptions) {
+ const themeMode = useStoreState((state) => state.settings.data?.theme)
+
+ const [options, setOptions] = useState(
+ getOptions(
+ typeof opts?.options === 'number'
+ ? { scales: { y: { min: 0, suggestedMax: opts.options } } }
+ : opts?.options
+ )
+ )
+
+ useEffect(() => {
+ if (themeMode === 'dark') {
+ setOptions(
+ merge(options, {
+ scales: {
+ y: {
+ grid: {
+ color: theme('colors.stone.700'),
+ },
+ ticks: {
+ color: theme('colors.stone.300'),
+ },
+ },
+ },
+ })
+ )
+ } else {
+ setOptions(
+ merge(options, {
+ scales: {
+ y: {
+ grid: {
+ color: theme('colors.stone.300'),
+ },
+ ticks: {
+ color: theme('colors.stone.900'),
+ },
+ },
+ },
+ })
+ )
+ }
+ }, [themeMode])
+
+ const [data, setData] = useState(
+ getEmptyData(label, opts?.sets || 1, opts?.callback)
+ )
+
+ const push = (items: number | null | (number | null)[]) =>
+ setData((state) =>
+ merge(state, {
+ datasets: (Array.isArray(items) ? items : [items]).map(
+ (item, index) => ({
+ ...state.datasets[index],
+ data: state.datasets[index].data
+ .slice(1)
+ .concat(
+ typeof item === 'number' ? Number(item.toFixed(2)) : item
+ ),
+ })
+ ),
+ })
+ )
+
+ const clear = () =>
+ setData((state) =>
+ merge(state, {
+ datasets: state.datasets.map((value) => ({
+ ...value,
+ data: Array(20).fill(-5),
+ })),
+ })
+ )
+
+ return { props: { data, options }, push, clear, setOptions }
+}
+
+function useChartTickLabel(
+ label: string,
+ max: number,
+ tickLabel: string,
+ roundTo?: number
+) {
+ return useChart(label, {
+ sets: 1,
+ options: {
+ scales: {
+ y: {
+ suggestedMax: max,
+ ticks: {
+ callback(value) {
+ return `${
+ roundTo ? Number(value).toFixed(roundTo) : value
+ }${tickLabel}`
+ },
+ },
+ },
+ },
+ },
+ })
+}
+
+export { useChart, useChartTickLabel, getOptions, getEmptyData }
diff --git a/resources/scripts/util/helpers.ts b/resources/scripts/util/helpers.ts
index 0f9f4c78..4faf9693 100644
--- a/resources/scripts/util/helpers.ts
+++ b/resources/scripts/util/helpers.ts
@@ -29,7 +29,7 @@ export interface FormattedBytes {
unit: string
}
-export type Sizes = 'B' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'
+export type Sizes = 'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB' | 'PiB' | 'EiB' | 'ZiB' | 'YiB'
export function formatBytes(
bytes: number,
@@ -47,7 +47,7 @@ export function formatBytes(
return {
size,
- unit: sizes[i],
+ unit: sizes[i] as Sizes,
}
}
@@ -73,4 +73,16 @@ export const convertTimeToSmallest = (seconds: number) => {
time: seconds / (bestUnit[0] as number),
unit: bestUnit[1] as string,
}
+}
+
+export const hexToRgba = (hex: string, alpha = 1): string => {
+ // noinspection RegExpSimplifiable
+ if (!/#?([a-fA-F0-9]{2}){3}/.test(hex)) {
+ return hex;
+ }
+
+ // noinspection RegExpSimplifiable
+ const [r, g, b] = hex.match(/[a-fA-F0-9]{2}/g)!.map((v) => parseInt(v, 16));
+
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
\ No newline at end of file
diff --git a/resources/scripts/util/useNotify.ts b/resources/scripts/util/useNotify.ts
new file mode 100644
index 00000000..8d2c0c38
--- /dev/null
+++ b/resources/scripts/util/useNotify.ts
@@ -0,0 +1,12 @@
+import { NotificationProps, showNotification } from '@mantine/notifications'
+
+const useNotify = () => {
+ return (props: Omit) => showNotification({
+ ...props,
+ style: {
+ transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+ },
+ })
+}
+
+export default useNotify
diff --git a/tailwind.config.js b/tailwind.config.js
index 4f0aa1d1..ab2502e2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,11 +15,14 @@ module.exports = {
theme: {
extend: {
colors: {
- primary: '#111111'
+ primary: '#111111',
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
+ boxShadow: {
+ 'light': '0 4px 4px 0 rgba(0,0,0,.02)'
+ }
},
},