mirror of
https://github.com/bookorbit/bookorbit.git
synced 2026-11-03 00:11:37 -06:00
neon
51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { shallowRef, watchEffect } from 'vue'
|
|
import VChart from 'vue-echarts'
|
|
import { Globe } from 'lucide-vue-next'
|
|
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
|
|
|
|
import { useLanguageDistribution } from '../../composables/useLanguageDistribution'
|
|
import ChartCard from '../ChartCard.vue'
|
|
|
|
const { data, loading, error } = useLanguageDistribution()
|
|
const { md } = useBreakpoints(breakpointsTailwind)
|
|
|
|
const option = shallowRef({})
|
|
|
|
watchEffect(() => {
|
|
if (!data.value.items.length) return
|
|
option.value = {
|
|
tooltip: { trigger: 'item' },
|
|
legend: {
|
|
orient: md.value ? 'vertical' : 'horizontal',
|
|
right: md.value ? '2%' : 'auto',
|
|
bottom: md.value ? 'auto' : 0,
|
|
top: md.value ? 'middle' : 'auto',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
center: md.value ? ['38%', '50%'] : ['50%', '44%'],
|
|
data: data.value.items.map((item) => ({ name: item.language.toUpperCase(), value: item.count })),
|
|
label: { show: false },
|
|
},
|
|
],
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ChartCard
|
|
title="Language Distribution"
|
|
:icon="Globe"
|
|
:color-index="2"
|
|
:loading
|
|
:error
|
|
:empty="!data.items.length"
|
|
:unknown-count="data.unknownCount"
|
|
>
|
|
<VChart :option autoresize style="height: 100%" />
|
|
</ChartCard>
|
|
</template>
|