From 46e7eb62dc39049745f49841c44511e333ee62c1 Mon Sep 17 00:00:00 2001 From: TZGyn Date: Sun, 8 Sep 2024 23:31:34 +0800 Subject: [PATCH] update analytics page layout --- .../src/routes/(app)/dashboard/+layout.svelte | 2 +- .../(app)/dashboard/links/[id]/+page.svelte | 485 ++++++++++-------- 2 files changed, 263 insertions(+), 224 deletions(-) diff --git a/frontend/src/routes/(app)/dashboard/+layout.svelte b/frontend/src/routes/(app)/dashboard/+layout.svelte index 95d7fbc..50a3051 100644 --- a/frontend/src/routes/(app)/dashboard/+layout.svelte +++ b/frontend/src/routes/(app)/dashboard/+layout.svelte @@ -74,7 +74,7 @@ class="max-w-screen flex h-screen max-h-screen w-screen overflow-hidden">
+ class="flex h-[60px] max-h-[60px] min-h-[60px] w-full items-center justify-center gap-4 border-b px-2 py-2 lg:px-4"> diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/+page.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/+page.svelte index 2b9147f..6e71b94 100644 --- a/frontend/src/routes/(app)/dashboard/links/[id]/+page.svelte +++ b/frontend/src/routes/(app)/dashboard/links/[id]/+page.svelte @@ -104,254 +104,293 @@ }) -
-
{data.shortener.link}
+
+
{data.shortener.link}
- -
- - - Clicks - - Number of visit(s) over this year - - - -
- - +
+
+ + + Total Visitors + + Number of visit(s) all time + + + + + {data.visitorAllTime[0].count} + + + +
- - - -
- Visitors - - Visitors by Country/City - -
- - Country - City - +
+ + + Clicks + + Number of visit(s) over this year + - - {#each data.visitorByCountry as visitorByCountry} -
-
-
- -
{visitorByCountry.country}
-
-
- {visitorByCountry.count} - - ({( - (visitorByCountry.count / - data.visitorAllTime[0].count) * - 100 - ).toDecimalPoint(2)} %) - +
+ + + + + + Country + City + + + + + Name + Count + + + {#each data.visitorByCountry as visitorByCountry} +
+
+
+ +
{visitorByCountry.country}
+
+
+ {visitorByCountry.count} + + ({( + (visitorByCountry.count / + data.visitorAllTime[0].count) * + 100 + ).toDecimalPoint(2)} %) + +
+
- -
- {/each} - - - {#each data.visitorByCity as visitorByCity} -
-
-
- -
{visitorByCity.city}
-
-
- {visitorByCity.count} - - ({( - (visitorByCity.count / - data.visitorAllTime[0].count) * - 100 - ).toDecimalPoint(2)} %) - + {/each} + + + + + + + Name + Count + + + {#each data.visitorByCity as visitorByCity} +
+
+
+ +
{visitorByCity.city}
+
+
+ {visitorByCity.count} + + ({( + (visitorByCity.count / + data.visitorAllTime[0].count) * + 100 + ).toDecimalPoint(2)} %) + +
+
- -
- {/each} - - + {/each} + + + - - + - -
- Devices - Visitors by Device -
- - Vendor - Type - - - - - {#each data.visitorByDeviceVendor as visitorByDeviceVendor} -
-
-
- + + Vendor + Type + + + + + Name + Count + + + {#each data.visitorByDeviceVendor as visitorByDeviceVendor} +
+
+
+ +
+ {visitorByDeviceVendor.vendor || '(None)'} +
+
- {visitorByDeviceVendor.vendor || '(None)'} + {visitorByDeviceVendor.count} + + ({( + (visitorByDeviceVendor.count / + data.visitorAllTime[0].count) * + 100 + ).toDecimalPoint(2)} %) +
-
- {visitorByDeviceVendor.count} - - ({( - (visitorByDeviceVendor.count / - data.visitorAllTime[0].count) * - 100 - ).toDecimalPoint(2)} %) - -
+
- -
- {/each} - - - {#each data.visitorByDeviceType as visitorByDeviceType} -
-
-
- {#if visitorByDeviceType.type === 'mobile'} - - {:else if visitorByDeviceType.type === 'tablet'} - - {:else} - - {/if} + {/each} + + + + + + + Name + Count + + + {#each data.visitorByDeviceType as visitorByDeviceType} +
+
+
+ {#if visitorByDeviceType.type === 'mobile'} + + {:else if visitorByDeviceType.type === 'tablet'} + + {:else} + + {/if} +
+ {visitorByDeviceType.type ?? '(None)'} +
+
- {visitorByDeviceType.type ?? '(None)'} + {visitorByDeviceType.count} + + ({( + (visitorByDeviceType.count / + data.visitorAllTime[0].count) * + 100 + ).toDecimalPoint(2)} %) +
-
- {visitorByDeviceType.count} - - ({( - (visitorByDeviceType.count / - data.visitorAllTime[0].count) * - 100 - ).toDecimalPoint(2)} %) - -
+
- -
- {/each} - - + {/each} + + + - - - - -
- Browsers - Visitors by Browser -
- - OS - Browser - - - - - {#each data.visitorByOS as visitorByOS} -
-
-
- -
{visitorByOS.os || '(None)'}
-
-
- {visitorByOS.count} - - ({( - (visitorByOS.count / - data.visitorAllTime[0].count) * - 100 - ).toDecimalPoint(2)} %) - + + + + Browser + OS + + + + + Name + Count + + + {#each data.visitorByBrowser as visitorByBrowser} +
+
+
+ +
+ {visitorByBrowser.browser || '(None)'} +
+
+
+ {visitorByBrowser.count} + + ({( + (visitorByBrowser.count / + data.visitorAllTime[0].count) * + 100 + ).toDecimalPoint(2)} %) + +
+
- -
- {/each} - - - {#each data.visitorByBrowser as visitorByBrowser} -
-
-
- + {/each} + + + + + + + Name + Count + + + {#each data.visitorByOS as visitorByOS} +
+
+
+ +
{visitorByOS.os || '(None)'}
+
- {visitorByBrowser.browser || '(None)'} + {visitorByOS.count} + + ({( + (visitorByOS.count / + data.visitorAllTime[0].count) * + 100 + ).toDecimalPoint(2)} %) +
-
- {visitorByBrowser.count} - - ({( - (visitorByBrowser.count / - data.visitorAllTime[0].count) * - 100 - ).toDecimalPoint(2)} %) - -
+
- -
- {/each} - - + {/each} + + + - +