site static directory + other site updates

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

@@ -84,6 +84,7 @@ export default function BandwidthChart({
 					fill="var(--color-sent)"
 					fillOpacity={0.4}
 					stroke="var(--color-sent)"
+					animationDuration={1200}
 				/>
 				<Area
 					dataKey="recv"
@@ -91,6 +92,7 @@ export default function BandwidthChart({
 					fill="var(--color-recv)"
 					fillOpacity={0.4}
 					stroke="var(--color-recv)"
+					animationDuration={1200}
 				/>
 			</AreaChart>
 		</ChartContainer>

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

@@ -9,16 +9,10 @@ import { $chartTime } from '@/lib/stores'
 import { chartTimeData, cn } from '@/lib/utils'
 import { ChartTimes } from '@/types'
 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"

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

@@ -18,10 +18,6 @@ export default function ContainerCpuChart({
 	chartData: Record<string, number | string>[]
 	ticks: number[]
 }) {
-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
-
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -57,6 +53,10 @@ export default function ContainerCpuChart({
 		return config satisfies ChartConfig
 	}, [chartData])
 
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 			<AreaChart
@@ -102,6 +102,7 @@ export default function ContainerCpuChart({
 						key={key}
 						// isAnimationActive={chartData.length < 20}
 						animateNewValues={false}
+						animationDuration={1200}
 						dataKey={key}
 						type="monotoneX"
 						fill={chartConfig[key].color}

site/src/components/charts/container-mem-chart.tsx

@@ -18,10 +18,6 @@ export default function ({
 	chartData: Record<string, number | string>[]
 	ticks: number[]
 }) {
-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
-
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -57,6 +53,10 @@ export default function ({
 		return config satisfies ChartConfig
 	}, [chartData])
 
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 			<AreaChart
@@ -108,6 +108,7 @@ export default function ({
 						key={key}
 						isAnimationActive={chartData.length < 20}
 						animateNewValues={false}
+						animationDuration={1200}
 						dataKey={key}
 						type="monotoneX"
 						fill={chartConfig[key].color}

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

@@ -25,10 +25,11 @@ export default function CpuChart({
 	chartData: { time: number; cpu: number }[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
+
 	if (!chartData.length || !ticks.length) {
 		return <Spinner />
 	}
-	const chartTime = useStore($chartTime)
 
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
@@ -70,7 +71,9 @@ export default function CpuChart({
 					fill="var(--color-cpu)"
 					fillOpacity={0.4}
 					stroke="var(--color-cpu)"
-					animateNewValues={false}
+					animationDuration={1200}
+					// animationEasing="ease-out"
+					// animateNewValues={false}
 				/>
 			</AreaChart>
 		</ChartContainer>

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

@@ -24,10 +24,6 @@ export default function DiskChart({
 	chartData: { time: number; disk: number; diskUsed: number }[]
 	ticks: number[]
 }) {
-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
-
 	const diskSize = useMemo(() => {
 		return Math.round(chartData[0]?.disk)
 	}, [chartData])
@@ -41,6 +37,10 @@ export default function DiskChart({
 	// 	return ticks
 	// }, [diskSize])
 
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 			<AreaChart
@@ -94,6 +94,7 @@ export default function DiskChart({
 					fill="var(--color-diskUsed)"
 					fillOpacity={0.4}
 					stroke="var(--color-diskUsed)"
+					animationDuration={1200}
 				/>
 			</AreaChart>
 		</ChartContainer>

site/src/components/charts/disk-io-chart.tsx

@@ -84,6 +84,7 @@ export default function DiskIoChart({
 					fill="var(--color-write)"
 					fillOpacity={0.4}
 					stroke="var(--color-write)"
+					animationDuration={1200}
 				/>
 				<Area
 					dataKey="read"
@@ -91,6 +92,7 @@ export default function DiskIoChart({
 					fill="var(--color-read)"
 					fillOpacity={0.4}
 					stroke="var(--color-read)"
+					animationDuration={1200}
 				/>
 			</AreaChart>
 		</ChartContainer>

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

@@ -17,10 +17,6 @@ export default function MemChart({
 	chartData: { time: number; mem: number; memUsed: number; memCache: number }[]
 	ticks: number[]
 }) {
-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
-
 	const totalMem = useMemo(() => {
 		return Math.ceil(chartData[0]?.mem)
 	}, [chartData])
@@ -39,6 +35,10 @@ export default function MemChart({
 		[]
 	) satisfies ChartConfig
 
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
 	return (
 		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 			<AreaChart
@@ -92,6 +92,7 @@ export default function MemChart({
 					fillOpacity={0.4}
 					stroke="var(--color-memUsed)"
 					stackId="a"
+					animationDuration={1200}
 				/>
 				<Area
 					dataKey="memCache"
@@ -101,6 +102,7 @@ export default function MemChart({
 					strokeOpacity={0.3}
 					stroke="var(--color-memCache)"
 					stackId="a"
+					animationDuration={1200}
 				/>
 			</AreaChart>
 		</ChartContainer>