feat: more to explore (#360)

components/common/CommonTrendingCharts.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { History } from 'masto'
+import sparkline from '@fnando/sparkline'
+
+const {
+  history,
+} = $defineProps<{
+  history?: History[]
+}>()
+
+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>
+  <svg ref="sparklineEl" class="sparkline" width="60" height="40" stroke-width="3" />
+</template>