elk/components/common/CommonTrendingCharts.vue

33 lines
714 B
Vue
Raw Normal View History

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