feat: donut chart on the popup page (#646) (#647)

Author: sheepzh

src/i18n/message/popup/header-resource.json

@@ -2,7 +2,8 @@
     "en": {
         "rate": "Rate Us",
         "showSiteName": "Display site name",
-        "showTopN": "Display top {n}"
+        "showTopN": "Display top {n}",
+        "donutChart": "Displayed as donut charts"
     },
     "zh_CN": {
         "rate": "评分",

src/i18n/message/popup/header.ts

@@ -8,6 +8,7 @@
 import resource from './header-resource.json'
 
 export type HeaderMessage = {
+    donutChart: string
     rate: string
     showSiteName: string
     showTopN: string

src/pages/app/components/Analysis/components/Trend/Dimension/Chart.tsx

@@ -7,7 +7,7 @@
 
 import { type DimensionEntry, type ValueFormatter } from "@app/components/Analysis/util"
 import { useEcharts } from "@hooks/useEcharts"
-import { defineComponent, watch } from "vue"
+import { defineComponent } from "vue"
 import Wrapper from "./Wrapper"
 
 type Props = {
@@ -18,14 +18,15 @@ type Props = {
 }
 
 const _default = defineComponent<Props>(props => {
-    const { elRef, refresh } = useEcharts(Wrapper, () => ({
+    const { elRef } = useEcharts(Wrapper, () => ({
         entries: props.data,
         preEntries: props.previous,
         title: props.title,
         valueFormatter: props.valueFormatter,
-    }))
+    }), {
+        deps: [() => props.data, () => props.valueFormatter],
+    })
 
-    watch([() => props.data, () => props.valueFormatter], refresh)
     return () => <div ref={elRef} style={{ width: '100%', height: '100%' }} />
 }, { props: ['data', 'previous', 'title', 'valueFormatter'] })
 

src/pages/hooks/useEcharts.ts

@@ -10,7 +10,7 @@ import { processAnimation, processAria, processFont, processRtl } from "@util/ec
 import { type AriaComponentOption, type ComposeOption, SeriesOption, TitleComponentOption } from "echarts"
 import { type ECharts, init } from "echarts/core"
 import { ElLoading } from "element-plus"
-import { type Ref, isRef, onMounted, ref, watch } from "vue"
+import { type Ref, type WatchSource, isRef, onMounted, ref, watch } from "vue"
 import { useElementSize } from './useElementSize'
 import { useWindowSize } from "./useWindowSize"
 
@@ -86,7 +86,6 @@ export abstract class EchartsWrapper<BizOption, EchartsOption> {
 
 
 type WrapperResult<BizOption, EchartsOption, EW extends EchartsWrapper<BizOption, EchartsOption>> = {
-    refresh: () => Promise<void>
     elRef: Ref<HTMLDivElement | undefined>
     wrapper: EW
 }
@@ -97,15 +96,17 @@ export const useEcharts = <BizOption, EchartsOption, EW extends EchartsWrapper<B
     option?: {
         hideLoading?: boolean
         manual?: boolean
-        afterInit?: (ew: EW) => void
+        afterInit?: ArgCallback<EW>,
+        deps?: WatchSource | WatchSource[],
     }): WrapperResult<BizOption, EchartsOption, EW> => {
     const elRef = ref<HTMLDivElement>()
     const wrapperInstance = new Wrapper()
     const {
         hideLoading = false,
         manual = false,
         afterInit,
-    } = option || {}
+        deps,
+    } = option ?? {}
 
     let refresh = async () => {
         const loading = hideLoading ? null : ElLoading.service({ target: elRef.value })
@@ -124,13 +125,11 @@ export const useEcharts = <BizOption, EchartsOption, EW extends EchartsWrapper<B
         isRef(fetch) && watch(fetch, refresh)
     })
 
+    deps && watch(deps, refresh)
+
     const { width: winW, height: winH } = useWindowSize()
     const { width: elW, height: elH } = useElementSize(elRef, { debounce: 50 })
     watch([winW, winH, elW, elH], () => wrapperInstance?.resize?.())
 
-    return {
-        refresh,
-        elRef,
-        wrapper: wrapperInstance,
-    }
+    return { elRef, wrapper: wrapperInstance }
 }

src/pages/popup/components/Header/Option.tsx

@@ -7,7 +7,6 @@ import { ROUTE_PERCENTAGE } from '@popup/router'
 import { ElCheckbox, ElIcon, ElInputNumber, ElPopover, ElText, useNamespace } from "element-plus"
 import { computed, defineComponent, type StyleValue } from "vue"
 import { useRoute } from 'vue-router'
-// import "./option.sass"
 
 const reference = () => (
     <ElIcon size="large" style={{ cursor: 'pointer' } satisfies StyleValue}>
@@ -20,12 +19,16 @@ const reference = () => (
 const Option = defineComponent(() => {
     const option = useOption()
     const route = useRoute()
-    const showTopN = computed(() => !!route.path?.endsWith(ROUTE_PERCENTAGE))
+    const isPercentage = computed(() => !!route.path?.endsWith(ROUTE_PERCENTAGE))
 
     const toggleName = () => {
         option.showName = !option.showName
         close()
     }
+    const toggleDonutChart = () => {
+        option.donutChart = !option.donutChart
+        close()
+    }
     const handleSiteChange = (v: number | undefined) => {
         if (!v) return
         option.topN = v
@@ -59,7 +62,11 @@ const Option = defineComponent(() => {
                     <ElCheckbox size='small' modelValue={option.showName} />
                     <ElText size='small'>{t(msg => msg.header.showSiteName)}</ElText>
                 </Flex>
-                <Flex v-show={showTopN.value}>
+                <Flex v-show={isPercentage.value} gap={4} align='center' cursor="pointer" onClick={toggleDonutChart}>
+                    <ElCheckbox size='small' modelValue={!!option.donutChart} />
+                    <ElText size='small'>{t(msg => msg.header.donutChart)}</ElText>
+                </Flex>
+                <Flex v-show={isPercentage.value}>
                     <ElText size='small'>
                         {tN(msg => msg.header.showTopN, {
                             n: <ElInputNumber

src/pages/popup/components/Percentage/Cate/Wrapper.ts

@@ -15,8 +15,8 @@ import {
 } from "echarts/components"
 import { type ComposeOption, type ECElementEvent } from "echarts/core"
 import {
-    formatTooltip, generateSiteSeriesOption, generateTitleOption, generateToolboxOption, handleClick, isOther,
-    type PieSeriesItemOption,
+    adaptDonutSeries, formatTooltip, generateSiteSeriesOption, generateTitleOption, generateToolboxOption,
+    handleClick, isOther, type PieSeriesItemOption,
 } from "../chart"
 import { type PercentageResult } from "../query"
 
@@ -85,7 +85,7 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti
 
         if (!result) return {}
 
-        const { rows, query } = result
+        const { rows, query, donutChart } = result
         const { dimension } = query
         const selected: timer.stat.Row | undefined = this.selectedCache
             ? rows.filter(isCate).filter(r => r.cateKey === this.selectedCache)[0]
@@ -113,8 +113,8 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti
         const series: PieSeriesOption[] = [{
             type: "pie",
             center: selected ? ['15%', '28%'] : ['58%', '56%'],
-            radius: selected ? '30%' : '55%',
             selectedMode: 'single',
+            selectedOffset: 5,
             startAngle: 180,
             data: rows.filter(isCate).map(row => ({
                 value: row[dimension], row,
@@ -135,6 +135,8 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti
                 position: selected ? 'inner' : 'outer',
                 fontSize: selected ? 10 : undefined,
             },
+            // not display as donut chart if selected
+            ...adaptDonutSeries(donutChart, selected ? '30%' : '55%', selected ? 0.3 : undefined),
         }]
         if (selected) {
             let mergedRows = (selected?.mergedRows || []).sort((a, b) => (b[dimension] ?? 0) - (a[dimension] ?? 0))

src/pages/popup/components/Percentage/Cate/index.tsx

@@ -1,6 +1,6 @@
 import { useEcharts } from "@hooks/useEcharts"
 import { usePopupContext } from "@popup/context"
-import { defineComponent, toRef, watch } from "vue"
+import { defineComponent, toRef } from "vue"
 import { type PercentageResult } from "../query"
 import Wrapper from "./Wrapper"
 
@@ -11,8 +11,7 @@ type Props = {
 const Cate = defineComponent<Props>(props => {
     const { darkMode } = usePopupContext()
     const data = toRef(props, 'value')
-    const { elRef, refresh } = useEcharts(Wrapper, data)
-    watch(darkMode, refresh)
+    const { elRef } = useEcharts(Wrapper, data, { deps: darkMode })
 
     return () => <div ref={elRef} style={{ width: '100%', height: '100%' }} />
 }, { props: ['value'] })

src/pages/popup/components/Percentage/Site/index.tsx

@@ -1,6 +1,6 @@
 import { useEcharts } from "@hooks/useEcharts"
 import { usePopupContext } from "@popup/context"
-import { defineComponent, toRef, watch } from "vue"
+import { defineComponent, toRef } from "vue"
 import { type PercentageResult } from "../query"
 import Wrapper from "./Wrapper"
 
@@ -11,8 +11,7 @@ type Props = {
 const Site = defineComponent<Props>(props => {
     const { darkMode } = usePopupContext()
     const data = toRef(props, 'value')
-    const { elRef, refresh } = useEcharts(Wrapper, data)
-    watch(darkMode, refresh)
+    const { elRef } = useEcharts(Wrapper, data, { deps: darkMode })
 
     return () => <div ref={elRef} style={{ width: '100%', height: '100%' }} />
 }, { props: ['value'] })

src/pages/popup/components/Percentage/chart.ts

@@ -221,7 +221,7 @@ type CustomOption = Pick<
 >
 
 export function generateSiteSeriesOption(rows: timer.stat.Row[], result: PercentageResult, customOption: CustomOption): PieSeriesOption {
-    const { displaySiteName, query: { dimension }, itemCount, groups } = result || {}
+    const { displaySiteName, query: { dimension }, itemCount, groups, donutChart } = result
     const groupMap = toMap(groups, g => g.id)
 
     const chartRows = cvt2ChartRows(rows, dimension, itemCount)
@@ -268,7 +268,46 @@ export function generateSiteSeriesOption(rows: timer.stat.Row[], result: Percent
             },
         },
         avoidLabelOverlap: true,
-        ...customOption || {},
+        ...customOption,
+        ...adaptDonutSeries(donutChart, customOption.radius),
+    }
+}
+
+export function adaptDonutSeries(
+    donutChart: boolean,
+    radius: CustomOption['radius'],
+    donutRadiusRatio: number = 0.5,
+): Pick<PieSeriesOption, 'itemStyle' | 'padAngle' | 'radius' | 'minAngle'> {
+    return {
+        ...donutChart ? {
+            itemStyle: { borderRadius: 5 },
+            padAngle: 1,
+            minAngle: 1.5,
+        } : {
+            itemStyle: { borderRadius: 0 },
+            padAngle: 0,
+            minAngle: 0,
+        },
+        radius: calcRealRadius(donutChart, radius, donutRadiusRatio),
+    }
+}
+
+function calcRealRadius(
+    donutChart: boolean,
+    radius: CustomOption['radius'],
+    donutRadiusRatio: number = 0.5,
+): CustomOption['radius'] {
+    if (!donutChart) return radius
+    if (!radius) return radius
+    if (Array.isArray(radius)) return radius
+    if (typeof radius === 'number') return [radius * donutRadiusRatio, radius]
+    // String
+    try {
+        const percent = parseFloat(radius.replace('%', ''))
+        const inner = percent * donutRadiusRatio
+        return [`${inner}%`, radius]
+    } catch {
+        return radius
     }
 }
 

src/pages/popup/components/Percentage/query.ts

@@ -15,6 +15,7 @@ export type PercentageResult = {
     itemCount: number
     dateLength: number
     groups: chrome.tabGroups.TabGroup[]
+    donutChart: boolean
 }
 
 const findAllDates = (row: timer.stat.Row): Set<string> => {
@@ -68,5 +69,6 @@ export const doQuery = async (query: PopupQuery, option: PopupOption): Promise<P
         chartTitle: t(msg => msg.content.percentage.title[query?.duration], { n: query?.durationNum }),
         itemCount,
         groups,
+        donutChart: !!option.donutChart,
     } satisfies PercentageResult
 }