TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update analytics page layout

Browse Source
main
TZGyn 1 year ago
parent 6c2ec9fa2e
commit 46e7eb62dc
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
2 changed files with 263 additions and 224 deletions
Show Stats Download Patch File Download Diff File

2
frontend/src/routes/(app)/dashboard/+layout.svelte
Unescape Escape View File

@ -74,7 +74,7 @@
class="max-w-screen flex h-screen max-h-screen w-screen overflow-hidden">
<div class="bg-muted/40 flex max-w-[300px] flex-col border-r">
<div
class="flex w-full items-center justify-center gap-4 border-b px-2 py-2 lg:px-4">
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">
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Avatar.Root>

165
frontend/src/routes/(app)/dashboard/links/[id]/+page.svelte
Unescape Escape View File

@ -104,13 +104,30 @@
})
</script>
<div class="flex min-h-[80px] items-center justify-between p-4">
<div class="text-2xl font-bold">{data.shortener.link}</div>
<div
class="flex max-h-[80px] items-center justify-between border-b p-4">
<div class="text-xl font-bold">{data.shortener.link}</div>
</div>
<Separator />
<div
class="grid grid-cols-[repeat(auto-fit,_minmax(600px,_1fr))] gap-4 overflow-y-scroll p-4">
<div class="overflow-y-scroll">
<div class="flex p-4">
<Card.Root class="w-[400px]">
<Card.Header>
<Card.Title>Total Visitors</Card.Title>
<Card.Description>
Number of visit(s) all time
</Card.Description>
</Card.Header>
<Card.Content>
<span class="text-2xl font-bold">
{data.visitorAllTime[0].count}
</span>
</Card.Content>
</Card.Root>
</div>
<div
class="grid grid-cols-[repeat(auto-fit,_minmax(600px,_1fr))] gap-4 gap-y-8 p-4">
<Card.Root>
<Card.Header>
<Card.Title>Clicks</Card.Title>
@ -123,26 +140,22 @@
</Card.Content>
</Card.Root>
<Card.Root class="min-h-[500px]">
<Tabs.Root value="country">
<Card.Header
class="flex w-full flex-row items-center justify-between space-y-0">
<div>
<Card.Title>Visitors</Card.Title>
<Card.Description>
Visitors by Country/City
</Card.Description>
</div>
<Tabs.List>
<Tabs.Trigger value="country">Country</Tabs.Trigger>
<Tabs.Trigger value="city">City</Tabs.Trigger>
</Tabs.List>
</Card.Header>
<Card.Content>
<Tabs.Content value="country">
<Card.Root class="h-full min-h-[600px]">
<Card.Header
class="flex w-full flex-row items-center justify-between border-b p-4">
<Card.Description>Name</Card.Description>
<Card.Description>Count</Card.Description>
</Card.Header>
<Card.Content class="p-0">
{#each data.visitorByCountry as visitorByCountry}
<div
class="hover:bg-muted flex flex-col gap-2 border-b p-2 transition-colors">
class="hover:bg-muted flex flex-col gap-2 border-b p-2 px-4 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<img
@ -167,11 +180,20 @@
class={'h-2'} />
</div>
{/each}
</Card.Content>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="city">
<Card.Root class="h-full min-h-[600px]">
<Card.Header
class="flex w-full flex-row items-center justify-between border-b p-4">
<Card.Description>Name</Card.Description>
<Card.Description>Count</Card.Description>
</Card.Header>
<Card.Content class="p-0">
{#each data.visitorByCity as visitorByCity}
<div
class="hover:bg-muted flex flex-col gap-2 border-b p-2 transition-colors">
class="hover:bg-muted flex flex-col gap-2 border-b p-2 px-4 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<img
@ -196,28 +218,27 @@
class={'h-2'} />
</div>
{/each}
</Tabs.Content>
</Card.Content>
</Tabs.Root>
</Card.Root>
<Card.Root class="min-h-[500px]">
</Tabs.Content>
</Tabs.Root>
<Tabs.Root value="vendor">
<Card.Header
class="flex w-full flex-row items-center justify-between space-y-0">
<div>
<Card.Title>Devices</Card.Title>
<Card.Description>Visitors by Device</Card.Description>
</div>
<Tabs.List>
<Tabs.Trigger value="vendor">Vendor</Tabs.Trigger>
<Tabs.Trigger value="type">Type</Tabs.Trigger>
</Tabs.List>
</Card.Header>
<Card.Content>
<Tabs.Content value="vendor">
<Card.Root class="h-full min-h-[600px]">
<Card.Header
class="flex w-full flex-row items-center justify-between border-b p-4">
<Card.Description>Name</Card.Description>
<Card.Description>Count</Card.Description>
</Card.Header>
<Card.Content class="p-0">
{#each data.visitorByDeviceVendor as visitorByDeviceVendor}
<div
class="hover:bg-muted flex flex-col gap-2 border-b p-2 transition-colors">
class="hover:bg-muted flex flex-col gap-2 border-b p-2 px-4 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<TabletSmartphone />
@ -242,11 +263,20 @@
class={'h-2'} />
</div>
{/each}
</Card.Content>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="type">
<Card.Root class="h-full min-h-[600px]">
<Card.Header
class="flex w-full flex-row items-center justify-between border-b p-4">
<Card.Description>Name</Card.Description>
<Card.Description>Count</Card.Description>
</Card.Header>
<Card.Content class="p-0">
{#each data.visitorByDeviceType as visitorByDeviceType}
<div
class="hover:bg-muted flex flex-col gap-2 border-b p-2 transition-colors">
class="hover:bg-muted flex flex-col gap-2 border-b p-2 px-4 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
{#if visitorByDeviceType.type === 'mobile'}
@ -277,38 +307,39 @@
class={'h-2'} />
</div>
{/each}
</Tabs.Content>
</Card.Content>
</Tabs.Root>
</Card.Root>
<Card.Root class="min-h-[500px]">
<Tabs.Root value="os">
<Card.Header
class="flex w-full flex-row items-center justify-between space-y-0">
<div>
<Card.Title>Browsers</Card.Title>
<Card.Description>Visitors by Browser</Card.Description>
</div>
</Tabs.Content>
</Tabs.Root>
<Tabs.Root value="browser">
<Tabs.List>
<Tabs.Trigger value="os">OS</Tabs.Trigger>
<Tabs.Trigger value="browser">Browser</Tabs.Trigger>
<Tabs.Trigger value="os">OS</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="browser">
<Card.Root class="h-full min-h-[600px]">
<Card.Header
class="flex w-full flex-row items-center justify-between border-b p-4">
<Card.Description>Name</Card.Description>
<Card.Description>Count</Card.Description>
</Card.Header>
<Card.Content>
<Tabs.Content value="os">
{#each data.visitorByOS as visitorByOS}
<Card.Content class="p-0">
{#each data.visitorByBrowser as visitorByBrowser}
<div
class="hover:bg-muted flex flex-col gap-2 border-b p-2 transition-colors">
class="hover:bg-muted flex flex-col gap-2 border-b p-2 px-4 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<TabletSmartphone />
<div>{visitorByOS.os || '(None)'}</div>
<GlobeIcon />
<div>
{visitorByBrowser.browser || '(None)'}
</div>
</div>
<div>
{visitorByOS.count}
{visitorByBrowser.count}
<span class="text-muted-foreground">
({(
(visitorByOS.count /
(visitorByBrowser.count /
data.visitorAllTime[0].count) *
100
).toDecimalPoint(2)} %)
@ -316,28 +347,35 @@
</div>
</div>
<Progress
value={visitorByOS.count}
value={visitorByBrowser.count}
max={data.visitorAllTime[0].count}
class={'h-2'} />
</div>
{/each}
</Card.Content>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="browser">
{#each data.visitorByBrowser as visitorByBrowser}
<Tabs.Content value="os">
<Card.Root class="h-full min-h-[600px]">
<Card.Header
class="flex w-full flex-row items-center justify-between border-b p-4">
<Card.Description>Name</Card.Description>
<Card.Description>Count</Card.Description>
</Card.Header>
<Card.Content class="p-0">
{#each data.visitorByOS as visitorByOS}
<div
class="hover:bg-muted flex flex-col gap-2 border-b p-2 transition-colors">
class="hover:bg-muted flex flex-col gap-2 border-b p-2 px-4 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<GlobeIcon />
<div>
{visitorByBrowser.browser || '(None)'}
</div>
<TabletSmartphone />
<div>{visitorByOS.os || '(None)'}</div>
</div>
<div>
{visitorByBrowser.count}
{visitorByOS.count}
<span class="text-muted-foreground">
({(
(visitorByBrowser.count /
(visitorByOS.count /
data.visitorAllTime[0].count) *
100
).toDecimalPoint(2)} %)
@ -345,13 +383,14 @@
</div>
</div>
<Progress
value={visitorByBrowser.count}
value={visitorByOS.count}
max={data.visitorAllTime[0].count}
class={'h-2'} />
</div>
{/each}
</Tabs.Content>
</Card.Content>
</Tabs.Root>
</Card.Root>
</Tabs.Content>
</Tabs.Root>
</div>
</div>

Write Preview
Loading…
Cancel
Save