update visitor chart

frontend/src/routes/(app)/links/[id]/+page.server.ts

@@ -1,6 +1,8 @@
 import { db } from '$lib/db'
 import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
+import { sql } from 'drizzle-orm'
+import { visitor as visitorSchema } from '$lib/db/schema'
 
 export const load = (async (event) => {
 	const user = event.locals.userObject
@@ -17,9 +19,17 @@ export const load = (async (event) => {
 		},
 	})
 
+	const visitor = await db
+		.select({
+			count: sql<number>`cast(count(*) as int)`,
+			month: sql<number>`cast(to_char(${visitorSchema.createdAt}, 'MM') as int)`,
+		})
+		.from(visitorSchema)
+		.groupBy(sql`to_char(${visitorSchema.createdAt}, 'MM')`)
+
 	if (!shortener) {
 		throw redirect(303, '/')
 	}
 
-	return { shortener }
+	return { shortener, visitor }
 }) satisfies PageServerLoad

frontend/src/routes/(app)/links/[id]/+page.svelte

@@ -1,10 +1,99 @@
 <script lang="ts">
 	import type { PageData } from './$types'
 	import { Separator } from '$lib/components/ui/separator'
-	import BarChart from './BarChart.svelte'
 	import * as Card from '$lib/components/ui/card'
+	import type { ApexOptions } from 'apexcharts'
+	import { mode } from 'mode-watcher'
+	import { onMount } from 'svelte'
 
 	export let data: PageData
+
+	let options = {
+		series: [
+			{
+				name: 'Clicks',
+				data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+			},
+		],
+		chart: {
+			type: 'bar',
+			height: 500,
+			toolbar: {
+				show: false,
+			},
+		},
+		plotOptions: {
+			bar: {
+				borderRadius: 4,
+				horizontal: false,
+			},
+		},
+		dataLabels: {
+			enabled: false,
+		},
+		xaxis: {
+			categories: [
+				'Jan',
+				'Feb',
+				'Mar',
+				'Apr',
+				'May',
+				'Jun',
+				'Jul',
+				'Aug',
+				'Sep',
+				'Oct',
+				'Nov',
+				'Dec',
+			],
+			labels: {
+				show: true,
+				style: {
+					fontSize: '14px',
+				},
+			},
+		},
+		yaxis: {
+			tickAmount: 1,
+			labels: {
+				formatter: function (val) {
+					return val.toFixed(0)
+				},
+				style: {
+					fontSize: '14px',
+				},
+			},
+		},
+		grid: {
+			show: false,
+		},
+		tooltip: {
+			theme: 'dark',
+		},
+	} satisfies ApexOptions
+
+	data.visitor.map((visitor) => {
+		options.series[0].data[visitor.month - 1] = visitor.count
+	})
+
+	$: options.tooltip.theme = $mode === 'dark' ? 'dark' : 'light'
+
+	let container: HTMLElement | undefined
+
+	const renderChart = async (options: ApexOptions) => {
+		if (container) {
+			container.innerHTML = ''
+		}
+		var chart = new apexChart(container, options)
+		chart.render()
+	}
+
+	$: container && apexChart && renderChart(options)
+
+	let apexChart: typeof ApexCharts
+	onMount(async () => {
+		apexChart = (await import('apexcharts')).default
+	})
 </script>
 
 <div class="flex justify-between p-8">
@@ -13,14 +102,14 @@
 <Separator />
 
 <div class="flex flex-col gap-4 overflow-y-scroll p-4">
-	<Card.Root>
+	<Card.Root class="max-w-[700px]">
 		<Card.Header>
 			<Card.Title>Clicks</Card.Title>
 			<Card.Description
 				>Number of visit(s) over this year</Card.Description>
 		</Card.Header>
 		<Card.Content>
-			<BarChart />
+			<div bind:this={container}></div>
 		</Card.Content>
 	</Card.Root>
 </div>

frontend/src/routes/(app)/links/[id]/BarChart.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-	import type { ApexOptions } from 'apexcharts'
-	import { mode } from 'mode-watcher'
-	import { onMount } from 'svelte'
-	let options = {
-		series: [
-			{
-				name: 'Clicks',
-				data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
-			},
-		],
-		chart: {
-			type: 'bar',
-			height: 500,
-			toolbar: {
-				show: false,
-			},
-		},
-		plotOptions: {
-			bar: {
-				borderRadius: 4,
-				horizontal: false,
-			},
-		},
-		dataLabels: {
-			enabled: false,
-		},
-		xaxis: {
-			categories: [
-				'Jan',
-				'Feb',
-				'Mar',
-				'Apr',
-				'May',
-				'Jun',
-				'Jul',
-				'Aug',
-				'Sep',
-				'Oct',
-				'Nov',
-				'Dec',
-			],
-			labels: {
-				show: false,
-			},
-		},
-		tooltip: {
-			theme: 'dark',
-		},
-	} satisfies ApexOptions
-
-	$: options.tooltip.theme = $mode === 'dark' ? 'dark' : 'light'
-
-	let container: HTMLElement | undefined
-
-	const renderChart = async (options: ApexOptions) => {
-		if (container) {
-			container.innerHTML = ''
-		}
-		var chart = new apexChart(container, options)
-		chart.render()
-	}
-
-	$: container && apexChart && renderChart(options)
-
-	let apexChart: typeof ApexCharts
-	onMount(async () => {
-		apexChart = (await import('apexcharts')).default
-	})
-</script>
-
-<div bind:this={container}></div>