elk/components/common/CommonTrendingCharts.vue

34 lines
825 B
Vue
Raw Normal View History

2022-12-11 10:52:36 +00:00
<script lang="ts" setup>
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-12-11 10:52:36 +00:00
import sparkline from '@fnando/sparkline'
const {
history,
2023-01-05 22:50:14 +00:00
width = 60,
height = 40,
2022-12-11 10:52:36 +00:00
} = $defineProps<{
2023-01-08 06:21:09 +00:00
history?: mastodon.v1.TagHistory[]
2023-01-05 22:50:14 +00:00
width?: number
height?: number
2022-12-11 10:52:36 +00:00
}>()
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
2022-12-11 10:52:36 +00:00
watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => {
if (!sparklineEl)
return
sparklineFn(sparklineEl, historyNum)
2022-12-11 10:52:36 +00:00
})
</script>
<template>
2023-01-05 22:50:14 +00:00
<svg ref="sparklineEl" class="sparkline" :width="width" :height="height" stroke-width="3" />
2022-12-11 10:52:36 +00:00
</template>