add temperature chart

beszel/site/src/components/ui/chart.tsx

@@ -258,7 +258,7 @@ const ChartLegendContent = React.forwardRef<
 			nameKey?: string
 		}
 >(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
-	const { config } = useChart()
+	// const { config } = useChart()
 
 	if (!payload?.length) {
 		return null
@@ -268,33 +268,35 @@ const ChartLegendContent = React.forwardRef<
 		<div
 			ref={ref}
 			className={cn(
-				'flex items-center justify-center gap-4',
+				'flex items-center justify-center gap-4 gap-y-1 flex-wrap',
 				verticalAlign === 'top' ? 'pb-3' : 'pt-3',
 				className
 			)}
 		>
 			{payload.map((item) => {
-				const key = `${nameKey || item.dataKey || 'value'}`
-				const itemConfig = getPayloadConfigFromPayload(config, item, key)
+				// const key = `${nameKey || item.dataKey || 'value'}`
+				// const itemConfig = getPayloadConfigFromPayload(config, item, key)
 
 				return (
 					<div
 						key={item.value}
 						className={cn(
-							'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'
+							// 'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground text-muted-foreground'
+							'flex items-center gap-1.5 text-muted-foreground'
 						)}
 					>
-						{itemConfig?.icon && !hideIcon ? (
+						{/* {itemConfig?.icon && !hideIcon ? (
 							<itemConfig.icon />
-						) : (
-							<div
-								className="h-2 w-2 shrink-0 rounded-[2px]"
-								style={{
-									backgroundColor: item.color,
-								}}
-							/>
-						)}
-						{itemConfig?.label}
+						) : ( */}
+						<div
+							className="h-2 w-2 shrink-0 rounded-[2px]"
+							style={{
+								backgroundColor: item.color,
+							}}
+						/>
+						{item.value}
+						{/* )} */}
+						{/* {itemConfig?.label} */}
 					</div>
 				)
 			})}