updates

site/src/components/charts/chart-time-select.tsx

@@ -0,0 +1,35 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select'
+import { $chartTime } from '@/lib/stores'
+import { cn } from '@/lib/utils'
+import { useStore } from '@nanostores/react'
+import { useEffect } from 'react'
+
+export default function ChartTimeSelect({ className }: { className?: string }) {
+	const chartTime = useStore($chartTime)
+
+	useEffect(() => {
+		// todo make sure this doesn't cause multiple fetches on load
+		return () => $chartTime.set('1h')
+	}, [])
+
+	return (
+		<Select defaultValue="1h" value={chartTime} onValueChange={(value) => $chartTime.set(value)}>
+			<SelectTrigger className={cn(className, 'w-40 px-5')}>
+				<SelectValue placeholder="1h" />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="1h">1 hour</SelectItem>
+				<SelectItem value="12h">12 hours</SelectItem>
+				<SelectItem value="24h">24 hours</SelectItem>
+				<SelectItem value="1w">1 week</SelectItem>
+				<SelectItem value="30d">30 days</SelectItem>
+			</SelectContent>
+		</Select>
+	)
+}

site/src/components/charts/cpu-chart.tsx

@@ -8,9 +8,6 @@ import {
 } from '@/components/ui/chart'
 import { formatShortDate, formatShortTime } from '@/lib/utils'
 import Spinner from '../spinner'
-// for (const data of chartData) {
-//   data.month = formatDateShort(data.month)
-// }
 
 const chartConfig = {
 	cpu: {

site/src/components/charts/radial.tsx

@@ -1,93 +0,0 @@
-import { TrendingUp } from 'lucide-react'
-import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
-
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from '@/components/ui/card'
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-const chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]
-
-const chartConfig = {
-	mobile: {
-		label: 'Mobile',
-		color: 'hsl(var(--chart-2))',
-	},
-} satisfies ChartConfig
-
-export function RadialChart() {
-	const totalVisitors = chartData[0].desktop + chartData[0].mobile
-
-	return (
-		<Card className="flex flex-col">
-			<CardHeader className="items-center pb-0">
-				<CardTitle>Radial Chart - Stacked</CardTitle>
-				<CardDescription>January - June 2024</CardDescription>
-			</CardHeader>
-			<CardContent className="flex flex-1 items-center pb-0">
-				<ChartContainer config={chartConfig} className="mx-auto aspect-square w-full max-w-[250px]">
-					<RadialBarChart data={chartData} endAngle={180} innerRadius={80} outerRadius={130}>
-						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-						<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-							<Label
-								content={({ viewBox }) => {
-									if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-										return (
-											<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
-												<tspan
-													x={viewBox.cx}
-													y={(viewBox.cy || 0) - 16}
-													className="fill-foreground text-2xl font-bold"
-												>
-													{totalVisitors.toLocaleString()}
-												</tspan>
-												<tspan
-													x={viewBox.cx}
-													y={(viewBox.cy || 0) + 4}
-													className="fill-muted-foreground"
-												>
-													Visitors
-												</tspan>
-											</text>
-										)
-									}
-								}}
-							/>
-						</PolarRadiusAxis>
-						<RadialBar
-							dataKey="desktop"
-							stackId="a"
-							cornerRadius={5}
-							fill="var(--color-desktop)"
-							className="stroke-transparent stroke-2"
-						/>
-						<RadialBar
-							dataKey="mobile"
-							fill="var(--color-mobile)"
-							stackId="a"
-							cornerRadius={5}
-							className="stroke-transparent stroke-2"
-						/>
-					</RadialBarChart>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter className="flex-col gap-2 text-sm">
-				<div className="flex items-center gap-2 font-medium leading-none">
-					Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-				</div>
-				<div className="leading-none text-muted-foreground">
-					Showing total visitors for the last 6 months
-				</div>
-			</CardFooter>
-		</Card>
-	)
-}