Refactor

Author: sheepzh

src/app/components/dashboard/components/week-on-week.ts

@@ -4,7 +4,10 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
+import type { Ref } from "vue"
+import type { TimerQueryParam } from "@service/timer-service"
 import type { ECharts } from "echarts/core"
+
 import { init, use, ComposeOption } from "echarts/core"
 import { CandlestickChart, CandlestickSeriesOption } from "echarts/charts"
 import {
@@ -18,8 +21,6 @@ use([CandlestickChart, GridComponent, TitleComponent, TooltipComponent])
 import { formatPeriodCommon, MILL_PER_DAY } from "@util/time"
 import { ElLoading } from "element-plus"
 import { defineComponent, h, onMounted, ref } from "vue"
-import type { Ref } from "vue"
-import type { TimerQueryParam } from "@service/timer-service"
 import timerService from "@service/timer-service"
 import DataItem from "@entity/dto/data-item"
 import { groupBy, sum } from "@util/array"

src/app/components/trend/components/chart/index.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { ComputedRef, Ref } from "vue"
+import type { TimerQueryParam } from "@service/timer-service"
+
+import { computed, defineComponent, h, onMounted, ref, watch } from "vue"
+import timerService, { SortDirect } from "@service/timer-service"
+import HostOptionInfo from "../../host-option-info"
+import DataItem from "@entity/dto/data-item"
+import ChartWrapper from "./wrapper"
+
+const _default = defineComponent({
+    name: "TrendChart",
+    setup(_, ctx) {
+        const elRef: Ref<HTMLDivElement> = ref()
+        const host: Ref<HostOptionInfo> = ref(HostOptionInfo.empty())
+        const dateRange: Ref<Array<Date>> = ref([])
+        const chartWrapper: ChartWrapper = new ChartWrapper()
+
+        const queryParam: ComputedRef<TimerQueryParam> = computed(() => ({
+            // If the host is empty, no result will be queried with this param.
+            host: host.value.host === '' ? '___foo_bar' : host.value.host,
+            mergeHost: host.value.merged,
+            fullHost: true,
+            sort: 'date',
+            sortOrder: SortDirect.ASC
+        }))
+
+        async function queryAndRender() {
+            const row: DataItem[] = await timerService.select(queryParam.value)
+            chartWrapper.render(host.value, dateRange.value, row)
+        }
+
+        watch(host, () => queryAndRender())
+        watch(dateRange, () => queryAndRender())
+
+        ctx.expose({
+            setDomain: (key: string) => host.value = HostOptionInfo.from(key),
+            setDateRange: (newVal: Date[]) => dateRange.value = newVal
+        })
+
+        onMounted(() => {
+            chartWrapper.init(elRef.value)
+            queryAndRender()
+        })
+
+        return () => h('div', { class: 'chart-container', ref: elRef })
+    }
+})
+
+export default _default

src/app/components/trend/components/chart/wrapper.ts

@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { ECharts, ComposeOption } from "echarts/core"
+import type { LineSeriesOption } from "echarts/charts"
+import type {
+    GraphicComponentOption,
+    LegendComponentOption,
+    TitleComponentOption,
+    TooltipComponentOption,
+    ToolboxComponentOption,
+} from "echarts/components"
+
+import { init, use } from "echarts/core"
+import { LineChart } from "echarts/charts"
+import { GridComponent, LegendComponent, TitleComponent, TooltipComponent, ToolboxComponent } from "echarts/components"
+import { CanvasRenderer } from "echarts/renderers"
+import { t } from "@app/locale"
+import { formatPeriodCommon, formatTime, MILL_PER_DAY } from "@util/time"
+import HostOptionInfo from "../../host-option-info"
+import DataItem from "@entity/dto/data-item"
+import hostAliasService from "@service/host-alias-service"
+import HostAlias from "@entity/dao/host-alias"
+
+use([
+    LineChart,
+    GridComponent,
+    LegendComponent,
+    TitleComponent,
+    ToolboxComponent,
+    TooltipComponent,
+    CanvasRenderer,
+])
+
+type EcOption = ComposeOption<
+    | LineSeriesOption
+    | GraphicComponentOption
+    | LegendComponentOption
+    | TitleComponentOption
+    | ToolboxComponentOption
+    | TooltipComponentOption
+>
+
+const TITLE = t(msg => msg.trend.history.title)
+const DEFAULT_SUB_TITLE = t(msg => msg.trend.defaultSubTitle)
+const SAVE_AS_IMAGE = t(msg => msg.trend.saveAsImageTitle)
+
+const TIME_UNIT = t(msg => msg.trend.history.timeUnit)
+const NUMBER_UNIT = t(msg => msg.trend.history.numberUnit)
+
+function formatTimeOfEchart(params: any): string {
+    const format = params instanceof Array ? params[0] : params
+    const { seriesName, name, value } = format
+    return `${seriesName}<br/>${name}&ensp;-&ensp;${formatPeriodCommon((typeof value === 'number' ? value : 0) * 1000)}`
+}
+
+const mill2Second = (mill: number) => Math.floor((mill || 0) / 1000)
+
+function optionOf(
+    xAxisData: string[],
+    subtext: string,
+    [focusData, totalData, timeData]: number[][]
+) {
+    const option: EcOption = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        grid: { top: '100' },
+        title: { text: TITLE, subtext, left: 'center' },
+        tooltip: { trigger: 'item' },
+        toolbox: {
+            feature: {
+                saveAsImage: {
+                    show: true,
+                    title: SAVE_AS_IMAGE,
+                    excludeComponents: ['toolbox'],
+                    pixelRatio: 1,
+                    backgroundColor: '#fff'
+                }
+            }
+        },
+        xAxis: { type: 'category', data: xAxisData },
+        yAxis: [
+            { name: TIME_UNIT, type: 'value' },
+            { name: NUMBER_UNIT, type: 'value' }
+        ],
+        legend: {
+            left: 'left',
+            data: [t(msg => msg.item.total), t(msg => msg.item.focus), t(msg => msg.item.time)]
+        },
+        series: [{
+            // run time
+            name: t(msg => msg.item.total),
+            data: totalData,
+            yAxisIndex: 0,
+            type: 'line',
+            smooth: true,
+            tooltip: { formatter: formatTimeOfEchart }
+        }, {
+            name: t(msg => msg.item.focus),
+            data: focusData,
+            yAxisIndex: 0,
+            type: 'line',
+            smooth: true,
+            tooltip: { formatter: formatTimeOfEchart }
+        }, {
+            name: t(msg => msg.item.time),
+            data: timeData,
+            yAxisIndex: 1,
+            type: 'line',
+            smooth: true,
+            tooltip: {
+                formatter: (params: any) => {
+                    const format = params instanceof Array ? params[0] : params
+                    const { seriesName, name, value } = format
+                    return `${seriesName}<br/>${name}&emsp;-&emsp;${value}`
+                }
+            }
+        }]
+    }
+    return option
+}
+
+
+// Get the timestamp of one timestamp of date
+const timestampOf = (d: Date) => d.getTime()
+
+/**
+* Get the x-axis of date 
+*/
+function getAxias(format: string, dateRange: Date[] | undefined): string[] {
+    if (!dateRange || !dateRange.length) {
+        // @since 0.0.9
+        // The dateRange is cleared, return empty data
+        return []
+    }
+    const xAxisData = []
+    const startTime = timestampOf(dateRange[0])
+    const endTime = timestampOf(dateRange[1])
+    for (let time = startTime; time <= endTime; time += MILL_PER_DAY) {
+        xAxisData.push(formatTime(time, format))
+    }
+    return xAxisData
+}
+
+async function processSubtitle(host: HostOptionInfo) {
+    let subtitle = host.toString()
+    if (!subtitle) {
+        return DEFAULT_SUB_TITLE
+    }
+    if (!host.merged) {
+        // If not merged, append the site name to the original subtitle
+        // @since 0.9.0
+        const hostAlias: HostAlias = await hostAliasService.get(host.host)
+        const siteName = hostAlias?.name
+        siteName && (subtitle += ` / ${siteName}`)
+    }
+    return subtitle
+}
+
+class ChartWrapper {
+    instance: ECharts
+
+    init(container: HTMLDivElement) {
+        this.instance = init(container)
+    }
+
+    async render(host: HostOptionInfo, dateRange: Date[], row: DataItem[]) {
+        // 1. x-axis data
+        let xAxisData: string[], allDates: string[]
+        if (!host || !dateRange || dateRange.length !== 2) {
+            xAxisData = []
+            allDates = []
+        } else {
+            xAxisData = getAxias('{m}/{d}', dateRange)
+            allDates = getAxias('{y}{m}{d}', dateRange)
+        }
+
+        // 2. subtitle
+        const subtitle = await processSubtitle(host)
+
+        // 3. series data
+        const focusData = []
+        const totalData = []
+        const timeData = []
+
+        const dateInfoMap = {}
+        row.forEach(row => dateInfoMap[row.date] = row)
+
+        allDates.forEach(date => {
+            const row = dateInfoMap[date] || {}
+            focusData.push(mill2Second(row.focus))
+            totalData.push(mill2Second(row.total))
+            timeData.push(row.time || 0)
+        })
+
+        const option: EcOption = optionOf(xAxisData, subtitle, [focusData, totalData, timeData])
+
+        this.instance?.setOption(option)
+    }
+}
+
+export default ChartWrapper