mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-11 08:18:37 +01:00
30 lines
840 B
Vue
30 lines
840 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 }>();
|
|
|
|
async function loadData() {
|
|
const response = await useTimeline('visits', 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>
|
|
<AdvancedLineChart v-if="ready" :data="data" :labels="labels" color="#5655d7"></AdvancedLineChart>
|
|
</div>
|
|
</template> |