1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-12-23 21:20:19 +03:00
elk/components/common/CommonTrendingCharts.vue
2024-09-07 07:38:18 +00:00

33 lines
814 B
Vue

<script setup lang="ts">
import type { mastodon } from 'masto'
import sparkline from '@fnando/sparkline'
const {
history,
width = 60,
height = 40,
} = defineProps<{
history?: mastodon.v1.TagHistory[]
width?: number
height?: number
}>()
const historyNum = computed(() => {
if (!history)
return [1, 1, 1, 1, 1, 1, 1]
return [...history].reverse().map(item => Number(item.accounts) || 0)
})
const sparklineEl = ref<SVGSVGElement>()
const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
watch([historyNum, sparklineEl], ([historyNum, sparklineEl]) => {
if (!sparklineEl)
return
sparklineFn(sparklineEl, historyNum)
})
</script>
<template>
<svg ref="sparklineEl" class="sparkline" :width="width" :height="height" stroke-width="3" />
</template>