mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 15:58:38 +01:00
31 lines
880 B
Vue
31 lines
880 B
Vue
<script lang="ts" setup>
|
|
import { onMounted } from 'vue';
|
|
import DateService, { type Slice } from '@services/DateService';
|
|
|
|
const data = ref<number[]>([]);
|
|
const labels = ref<string[]>([]);
|
|
const ready = ref<boolean>(false);
|
|
|
|
const props = defineProps<{ slice: Slice, referrer: string }>();
|
|
|
|
async function loadData() {
|
|
const response = await useReferrersTimeline(props.referrer, props.slice);
|
|
if (!response) return;
|
|
data.value = response.map(e => e.count);
|
|
labels.value = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
|
|
ready.value = true;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await loadData();
|
|
watch(props, async () => { await loadData(); });
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<AdvancedBarChart v-if="ready" :data="data" :labels="labels" color="#5680f8">
|
|
</AdvancedBarChart>
|
|
</div>
|
|
</template> |