move application code into beszel folder

2025-12-17 10:46:16 +01:00 · 2024-08-11 13:41:57 -04:00
parent ea71492d13
commit 9da1e5751a
103 changed files with 84 additions and 7 deletions
--- a/beszel/site/src/components/charts/container-net-chart.tsx
+++ b/beszel/site/src/components/charts/container-net-chart.tsx
@@ -0,0 +1,157 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { useMemo, useRef } from 'react'
+import {
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+import { Separator } from '@/components/ui/separator'
+
+export default function ContainerCpuChart({
+	chartData,
+	ticks,
+}: {
+	chartData: Record<string, number | number[]>[]
+	ticks: number[]
+}) {
+	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	const chartConfig = useMemo(() => {
+		let config = {} as Record<
+			string,
+			{
+				label: string
+				color: string
+			}
+		>
+		const totalUsage = {} as Record<string, number>
+		for (let stats of chartData) {
+			for (let key in stats) {
+				if (!Array.isArray(stats[key])) {
+					continue
+				}
+				if (!(key in totalUsage)) {
+					totalUsage[key] = 0
+				}
+				totalUsage[key] += stats[key][2] ?? 0
+			}
+		}
+		let keys = Object.keys(totalUsage)
+		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
+		const length = keys.length
+		for (let i = 0; i < length; i++) {
+			const key = keys[i]
+			const hue = ((i * 360) / length) % 360
+			config[key] = {
+				label: key,
+				color: `hsl(${hue}, 60%, 55%)`,
+			}
+		}
+		return config satisfies ChartConfig
+	}, [chartData])
+
+	// if (!chartData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }
+
+	return (
+		<div ref={chartRef}>
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
+				<AreaChart
+					accessibilityLayer
+					data={chartData}
+					margin={{
+						top: 10,
+					}}
+					reverseStackOrder={true}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
+						width={yAxisWidth}
+						tickLine={false}
+						axisLine={false}
+						unit={' MB/s'}
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+					/>
+					<XAxis
+						dataKey="time"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={
+							<ChartTooltipContent
+								indicator="line"
+								contentFormatter={(item, key) => {
+									try {
+										const sent = item?.payload?.[key][0] ?? 0
+										const received = item?.payload?.[key][1] ?? 0
+										return (
+											<span className="flex">
+												{received.toLocaleString()} MB/s
+												<span className="opacity-70 ml-0.5"> rx </span>
+												<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
+												{sent.toLocaleString()} MB/s<span className="opacity-70 ml-0.5"> tx</span>
+											</span>
+										)
+									} catch (e) {
+										return null
+									}
+								}}
+							/>
+						}
+					/>
+					{Object.keys(chartConfig).map((key) => (
+						<Area
+							key={key}
+							name={key}
+							// animationDuration={1200}
+							isAnimationActive={false}
+							dataKey={(data) => data?.[key]?.[2] ?? 0}
+							type="monotoneX"
+							fill={chartConfig[key].color}
+							fillOpacity={0.4}
+							stroke={chartConfig[key].color}
+							stackId="a"
+						/>
+					))}
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+}