feat: basic analytics

Author: NagariaHussain

frontend/src/Layout.vue

@@ -1,14 +1,29 @@
 <template>
 	<div class="flex h-screen w-full flex-row bg-surface-white shadow">
-		<Sidebar :header="{title: 'LinkLite', menuItems: [ { label: 'Toggle Theme', icon: Moon, onClick: toggleTheme },] }" />
-		<div class="w-full">
+		<Sidebar :header="{
+			title: 'LinkLite',
+			menuItems: [ { label: 'Toggle Theme', icon: Moon, onClick: toggleTheme },]
+		}"
+
+		:sections="[
+			{
+				label: '',
+				items: [
+					{label: 'Links', icon: Link, to: '/'},
+					{label: 'Analytics', icon: ChartColumn, to: '/analytics'}
+				]
+			}
+		]"/>
+		<div class="w-full m-5">
 			<slot></slot>
 		</div>
 	</div>
 </template>
 
 <script setup>
 import Moon from '~icons/lucide/moon';
+import Link from "~icons/lucide/link";
+import ChartColumn from "~icons/lucide/chart-column";
 import { Sidebar } from 'frappe-ui';
 
 function toggleTheme() {

frontend/src/pages/Analytics.vue

@@ -0,0 +1,69 @@
+<template>
+	<div>
+		<h2 class="font-bold text-gray-800">Analytics</h2>
+	</div>
+	<div class="grid grid-cols-5 justify-start items-start">
+		<NumberChart
+			:config="{
+				title: 'Total Clicks',
+				value: analyticsData.totalClicks,
+			}"
+  		/>
+
+		<div class="col-span-2">
+		<AxisChart
+			:config="{
+				data: analyticsData.clicksByLink,
+				title: 'Clicks by Link',
+				subtitle: 'Number of clicks per link',
+				xAxis: {
+					key: 'link',
+					title: 'Link',
+					type: 'category',
+				},
+				yAxis: {
+					title: 'Clicks',
+				},
+				swapXY: true,
+				series: [
+					{
+						name: 'clicks',
+						type: 'bar',
+					},
+				],
+			}"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { NumberChart, AxisChart, createResource, createListResource } from 'frappe-ui';
+import { reactive } from 'vue';
+
+const analyticsData = reactive({
+	totalClicks: 0,
+	clicksByLink: []
+})
+
+createResource({
+	url: 'frappe.client.get_count',
+	params: {
+		doctype: 'Short Link Click'
+	},
+	onSuccess(count) {
+		analyticsData.totalClicks = count;
+	},
+	auto: true
+})
+
+createListResource({
+	doctype: 'Short Link Click',
+	fields: ['link', 'count(name) as clicks'],
+	groupBy: 'link',
+	onSuccess(data) {
+		analyticsData.clicksByLink = data;
+	},
+	auto: true
+})
+</script>

frontend/src/pages/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-5">
+
 
 	<div class="flex items-baseline justify-between mb-4">
 		<h2 class=" text-gray-900 font-semibold">Links</h2>
@@ -187,7 +187,6 @@
 		</div>
 	  </template>
 	</Dialog>
-  </div>
 </template>
 
 <script setup>

frontend/src/router.js

@@ -7,10 +7,15 @@ const routes = [
     path: '/',
     name: 'Home',
     component: () => import('@/pages/Home.vue'),
+  },
+  {
+	path: '/analytics',
+	name: 'Analytics',
+	component: () => import('@/pages/Analytics.vue'),
   }
 ]
 
-let router = createRouter({
+const router = createRouter({
   history: createWebHistory('/frontend'),
   routes,
 })