mirror of https://github.com/TZGyn/shortener
added visitors chart to shortener detail page
parent
be9a1ccec5
commit
8850a7b270
GPG Key ID:
122EAF77AE81FD4A
@ -1,7 +1,26 @@
|
||||
<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'
|
||||
|
||||
export let data: PageData
|
||||
</script>
|
||||
|
||||
{JSON.stringify(data.shortener)}
|
||||
<div class="flex justify-between p-8">
|
||||
<div class="text-4xl font-bold">{data.shortener.link}</div>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
<div class="flex flex-col gap-4 overflow-y-scroll p-4">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Clicks</Card.Title>
|
||||
<Card.Description
|
||||
>Number of visit(s) over this year</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<BarChart />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,72 @@
|
||||
<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>
|
||||
Loading…
Reference in New Issue