add temperature chart

beszel/site/src/components/charts/temperature-chart.tsx

@@ -0,0 +1,129 @@
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import {
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+import { SystemStatsRecord } from '@/types'
+import { useMemo, useRef } from 'react'
+
+export default function TemperatureChart({
+	ticks,
+	systemData,
+}: {
+	ticks: number[]
+	systemData: SystemStatsRecord[]
+}) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+	const chartTime = useStore($chartTime)
+
+	/** Format temperature data for chart and assign colors */
+	const newChartData = useMemo(() => {
+		const chartData = { data: [], colors: {} } as {
+			data: Record<string, number | string>[]
+			colors: Record<string, string>
+		}
+		const tempSums = {} as Record<string, number>
+		for (let data of systemData) {
+			let newData = { created: data.created } as Record<string, number | string>
+			let keys = Object.keys(data.stats?.t ?? {})
+			for (let i = 0; i < keys.length; i++) {
+				let key = keys[i]
+				newData[key] = data.stats.t![key]
+				tempSums[key] = (tempSums[key] ?? 0) + newData[key]
+			}
+			chartData.data.push(newData)
+		}
+		const keys = Object.keys(tempSums).sort((a, b) => tempSums[b] - tempSums[a])
+		for (let key of keys) {
+			chartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
+		}
+		return chartData
+	}, [systemData])
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	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,
+				})}
+			>
+				<LineChart
+					accessibilityLayer
+					data={newChartData.data}
+					margin={{
+						left: 0,
+						right: 0,
+						top: 10,
+						bottom: 0,
+					}}
+				>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickLine={false}
+						axisLine={false}
+						unit={' °C'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={
+							<ChartTooltipContent
+								unit=" °C"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					{Object.keys(newChartData.colors).map((key) => (
+						<Line
+							key={key}
+							dataKey={key}
+							name={key}
+							type="monotoneX"
+							dot={false}
+							strokeWidth={1.5}
+							fill="hsl(360, 60%, 55%)"
+							stroke={newChartData.colors[key]}
+							isAnimationActive={false}
+						/>
+					))}
+					<ChartLegend content={<ChartLegendContent />} />
+				</LineChart>
+			</ChartContainer>
+		</div>
+	)
+}