diff --git a/src/app/components/analysis/components/trend/dimension/chart.ts b/src/app/components/analysis/components/trend/dimension/chart.ts index 5017b567..bbd527fa 100644 --- a/src/app/components/analysis/components/trend/dimension/chart.ts +++ b/src/app/components/analysis/components/trend/dimension/chart.ts @@ -1,6 +1,6 @@ /** * Copyright (c) 2023 Hengyang Zhang - * + * * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ @@ -20,7 +20,7 @@ const _default = defineComponent({ setup(props) { const elRef: Ref = ref() const wrapper: ChartWrapper = new ChartWrapper() - const render = () => wrapper.render(props.data, props.title, props.valueFormatter) + const render = () => wrapper.render({ entries: props.data, title: props.title, valueFormatter: props.valueFormatter }) watch(() => props.data, render) watch(() => props.valueFormatter, render) diff --git a/src/app/components/analysis/components/trend/dimension/wrapper.ts b/src/app/components/analysis/components/trend/dimension/wrapper.ts index ee8d7530..694e7936 100644 --- a/src/app/components/analysis/components/trend/dimension/wrapper.ts +++ b/src/app/components/analysis/components/trend/dimension/wrapper.ts @@ -6,7 +6,7 @@ */ import type { DimensionEntry } from "../../../util" -import type { ECharts, ComposeOption } from "echarts/core" +import type { ComposeOption } from "echarts/core" import type { LineSeriesOption } from "echarts/charts" import type { TitleComponentOption, @@ -15,7 +15,7 @@ import type { GridComponentOption, } from "echarts/components" -import { init, use } from "@echarts/core" +import { use } from "@echarts/core" import LineChart from "@echarts/chart/line" import SVGRenderer from "@echarts/svg-renderer" import TitleComponent from "@echarts/component/title" @@ -24,6 +24,7 @@ import GridComponent from '@echarts/component/grid' import { ValueFormatter } from "@app/components/analysis/util" import { getSecondaryTextColor } from "@util/style" +import { EchartsWrapper } from "@app/components/common/echarts-wrapper" use([ LineChart, @@ -41,66 +42,66 @@ type EcOption = ComposeOption< | GridComponentOption > -class ChartWrapper { - instance: ECharts - - init(container: HTMLDivElement) { - this.instance = init(container) - } +type BizOption = { + entries: DimensionEntry[] + title: string + valueFormatter: ValueFormatter +} - async render(entries: DimensionEntry[], title: string, valueFormatter: ValueFormatter) { - const xAxis = entries.map(r => r.date) - const yAxis = entries.map(r => r.value) +const generateOption = ({ entries, title, valueFormatter }: BizOption) => { + const xAxis = entries.map(r => r.date) + const yAxis = entries.map(r => r.value) - const secondaryTextColor = getSecondaryTextColor() - const option: EcOption = { - backgroundColor: 'rgba(0,0,0,0)', - title: { - text: title, - textStyle: { - color: secondaryTextColor, - fontSize: '14px', - fontWeight: 'normal', - }, - left: 'center', - top: '9%', - }, - grid: { - top: '30%', - bottom: '10px', - left: '5%', - right: '5%', + const secondaryTextColor = getSecondaryTextColor() + const option: EcOption = { + backgroundColor: 'rgba(0,0,0,0)', + title: { + text: title, + textStyle: { + color: secondaryTextColor, + fontSize: '14px', + fontWeight: 'normal', }, - tooltip: { - trigger: 'axis', - formatter(params: any) { - const format = params instanceof Array ? params[0] : params - const { name, value } = format - const valStr = valueFormatter?.(value) || value?.toString() || "NaN" - return `${name}
${valStr}` - }, + left: 'center', + top: '9%', + }, + grid: { + top: '30%', + bottom: '10px', + left: '5%', + right: '5%', + }, + tooltip: { + trigger: 'axis', + formatter(params: any) { + const format = params instanceof Array ? params[0] : params + const { name, value } = format + const valStr = valueFormatter?.(value) || value?.toString() || "NaN" + return `${name}
${valStr}` }, - xAxis: { - type: 'category', - data: xAxis, - show: false, - }, - yAxis: { - type: 'value', - axisLabel: { show: false }, - axisTick: { show: false }, - splitLine: { show: false }, - }, - series: { - data: yAxis, - type: 'line', - symbol: 'none', - areaStyle: {}, - smooth: true, - } + }, + xAxis: { + type: 'category', + data: xAxis, + show: false, + }, + yAxis: { + type: 'value', + axisLabel: { show: false }, + axisTick: { show: false }, + splitLine: { show: false }, + }, + series: { + data: yAxis, + type: 'line', + symbol: 'none', + areaStyle: {}, + smooth: true, } - this.instance?.setOption(option) } + return option } -export default ChartWrapper +export default class ChartWrapper extends EchartsWrapper { + generateOption = generateOption +} diff --git a/src/app/components/common/echarts-wrapper.ts b/src/app/components/common/echarts-wrapper.ts new file mode 100644 index 00000000..7dc31344 --- /dev/null +++ b/src/app/components/common/echarts-wrapper.ts @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { init, type ECharts } from "echarts" + +export abstract class EchartsWrapper { + private instance: ECharts + + init(container: HTMLDivElement) { + this.instance = init(container) + } + + async render(biz: BizOption) { + if (!this.instance) return + const option = await this.generateOption(biz) + this.instance.setOption(option, { notMerge: false }) + } + + protected getDom(): HTMLElement { + return this.instance?.getDom?.() + } + + protected abstract generateOption(biz: BizOption): Promise | EchartsOption +} \ No newline at end of file diff --git a/src/app/components/common/kanban/index.ts b/src/app/components/common/kanban/index.ts index 5dcb4409..9768f0e2 100644 --- a/src/app/components/common/kanban/index.ts +++ b/src/app/components/common/kanban/index.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import IndicatorCell from "./indicator-cell" import IndicatorRow from "./indicator-row" import Card from "./card" diff --git a/src/app/components/common/kanban/indicator-row.ts b/src/app/components/common/kanban/indicator-row.ts index 13bc4f9b..0a9c6aef 100644 --- a/src/app/components/common/kanban/indicator-row.ts +++ b/src/app/components/common/kanban/indicator-row.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { ElRow } from "element-plus" import { defineComponent, h } from "vue" import "./indicator-row.sass" diff --git a/src/app/components/common/time-format-filter-item.ts b/src/app/components/common/time-format-filter-item.ts index 1e50fe2a..01b65d98 100644 --- a/src/app/components/common/time-format-filter-item.ts +++ b/src/app/components/common/time-format-filter-item.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { PropType, defineComponent, h, ref } from "vue" import SelectFilterItem from "./select-filter-item" import { t } from "@app/locale" diff --git a/src/app/components/dashboard/components/calendar-heat-map.ts b/src/app/components/dashboard/components/calendar-heat-map.ts index 40414e8b..153b7d1f 100644 --- a/src/app/components/dashboard/components/calendar-heat-map.ts +++ b/src/app/components/dashboard/components/calendar-heat-map.ts @@ -190,7 +190,7 @@ function optionOf(data: _Value[], days: string[]): EcOption { /** * Click to jump to the report page - * + * * @since 1.1.1 */ function handleClick(value: _Value): void { diff --git a/src/app/components/dashboard/components/top-k-visit.ts b/src/app/components/dashboard/components/top-k-visit.ts index f2016fed..9686614b 100644 --- a/src/app/components/dashboard/components/top-k-visit.ts +++ b/src/app/components/dashboard/components/top-k-visit.ts @@ -5,13 +5,13 @@ * https://opensource.org/licenses/MIT */ -import type { ECharts, ComposeOption } from "echarts/core" +import type { ComposeOption } from "echarts/core" import type { PieSeriesOption } from "echarts/charts" import type { TitleComponentOption, TooltipComponentOption } from "echarts/components" import type { Ref } from "vue" import type { StatQueryParam } from "@service/stat-service" -import { init, use } from "@echarts/core" +import { use } from "@echarts/core" import PieChart from "@echarts/chart/pie" import TitleComponent from "@echarts/component/title" import TooltipComponent from "@echarts/component/tooltip" @@ -26,6 +26,7 @@ import { BASE_TITLE_OPTION } from "../common" import { t } from "@app/locale" import { getPrimaryTextColor } from "@util/style" import { generateSiteLabel } from "@util/site" +import { EchartsWrapper } from "@app/components/common/echarts-wrapper" const CONTAINER_ID = '__timer_dashboard_top_k_visit' const TOP_NUM = 6 @@ -45,7 +46,7 @@ type _Value = { alias?: string } -function optionOf(data: _Value[]): EcOption { +function generateOption(data: _Value[]): EcOption { const textColor = getPrimaryTextColor() return { title: { @@ -83,17 +84,8 @@ function optionOf(data: _Value[]): EcOption { } } -class ChartWrapper { - instance: ECharts - - init(container: HTMLDivElement) { - this.instance = init(container) - } - render(data: _Value[], loading: { close: () => void }) { - const option = optionOf(data) - this.instance.setOption(option) - loading.close() - } +class ChartWrapper extends EchartsWrapper<_Value[], EcOption> { + generateOption = generateOption } const _default = defineComponent({ @@ -120,7 +112,8 @@ const _default = defineComponent({ for (let realSize = top.length; realSize < TOP_NUM; realSize++) { data.push({ name: '', host: '', value: 0 }) } - chartWrapper.render(data, loading) + await chartWrapper.render(data) + loading.close() }) return () => h('div', { id: CONTAINER_ID, diff --git a/src/app/components/habit/components/context.ts b/src/app/components/habit/components/context.ts index a374facd..ea3637fe 100644 --- a/src/app/components/habit/components/context.ts +++ b/src/app/components/habit/components/context.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { Ref } from "vue" import { FilterOption } from "../type" import { provideWithNs, useProviderWithNs } from "@app/util/provider" diff --git a/src/app/components/habit/components/period/bar-wrapper.ts b/src/app/components/habit/components/period/bar-wrapper.ts index 6377781d..a37d46a8 100644 --- a/src/app/components/habit/components/period/bar-wrapper.ts +++ b/src/app/components/habit/components/period/bar-wrapper.ts @@ -5,12 +5,11 @@ * https://opensource.org/licenses/MIT */ -import type { ECharts } from "echarts/core" import type { ComposeOption } from "echarts/core" import type { BarSeriesOption } from "echarts/charts" import type { GridComponentOption, TooltipComponentOption } from "echarts/components" -import { use, init } from "@echarts/core" +import { use } from "@echarts/core" import BarChart from "@echarts/chart/bar" import SVGRenderer from "@echarts/svg-renderer" import TooltipComponent from "@echarts/component/tooltip" @@ -19,6 +18,7 @@ import { formatPeriodCommon, formatTime } from "@util/time" import { t } from "@app/locale" import { getPrimaryTextColor } from "@util/style" import { averageByDay } from "./common" +import { EchartsWrapper } from "@app/components/common/echarts-wrapper" use([BarChart, SVGRenderer, TooltipComponent, GridComponent]) @@ -28,6 +28,12 @@ type EcOption = ComposeOption< | TooltipComponentOption > +type BizOption = { + data: timer.period.Row[] + averageByDate: boolean + periodSize: number +} + function formatXAxis(ts: number) { const date = new Date(ts) if (date.getHours() === 0 && date.getMinutes() === 0) { @@ -71,7 +77,7 @@ const cvt2Item = (row: timer.period.Row, periodSize: number): BarItem => { return [x, getYAxisValue(milliseconds, periodSize), startTime, endTime, milliseconds] } -function generateOptions(data: timer.period.Row[], averageByDate: boolean, periodSize: number): EcOption { +function generateOption({ data, averageByDate, periodSize }: BizOption): EcOption { const periodData: timer.period.Row[] = averageByDate ? averageByDay(data, periodSize) : data const valueData: BarItem[] = periodData.map(i => cvt2Item(i, periodSize)) const xAxisMin = periodData[0]?.startTime?.getTime() @@ -111,19 +117,6 @@ function generateOptions(data: timer.period.Row[], averageByDate: boolean, perio }] } } - -export default class ChartWrapper { - instance: ECharts - - init(container: HTMLDivElement) { - this.instance = init(container) - } - - render(data: timer.period.Row[], averageByDate: boolean, periodSize: number) { - if (!this.instance) { - throw new Error("Instance not initialized") - } - const option: EcOption = generateOptions(data, averageByDate, periodSize) - this.instance.setOption(option) - } +export default class ChartWrapper extends EchartsWrapper { + generateOption = generateOption } \ No newline at end of file diff --git a/src/app/components/habit/components/period/bar.ts b/src/app/components/habit/components/period/bar.ts index c195a061..9ed466b7 100644 --- a/src/app/components/habit/components/period/bar.ts +++ b/src/app/components/habit/components/period/bar.ts @@ -27,7 +27,7 @@ const _default = defineComponent({ watch([filter, rows], () => { const { periodSize, average } = filter.value || {} - wrapper.render(rows.value, average, periodSize) + wrapper.render({ data: rows.value, averageByDate: average, periodSize }) }) return () => h('div', { diff --git a/src/app/components/habit/components/period/common.ts b/src/app/components/habit/components/period/common.ts index a8595390..7e81100d 100644 --- a/src/app/components/habit/components/period/common.ts +++ b/src/app/components/habit/components/period/common.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { PERIODS_PER_DATE, after, keyOf, rowOf, startOrderOfRow } from "@util/period" import { MILL_PER_DAY } from "@util/time" diff --git a/src/app/components/habit/components/period/context.ts b/src/app/components/habit/components/period/context.ts index efe0eede..bd856aec 100644 --- a/src/app/components/habit/components/period/context.ts +++ b/src/app/components/habit/components/period/context.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { provideWithNs, useProviderWithNs } from "@app/util/provider" import { Ref } from "vue" import { FilterOption } from "./filter" diff --git a/src/app/components/habit/components/period/filter.ts b/src/app/components/habit/components/period/filter.ts index 8be35095..bb26a75a 100644 --- a/src/app/components/habit/components/period/filter.ts +++ b/src/app/components/habit/components/period/filter.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import SelectFilterItem from '@app/components/common/select-filter-item'; import SwitchFilterItem from '@app/components/common/switch-filter-item'; import { t } from '@app/locale'; diff --git a/src/app/components/habit/components/period/index.ts b/src/app/components/habit/components/period/index.ts index 001c9b8b..315c6df4 100644 --- a/src/app/components/habit/components/period/index.ts +++ b/src/app/components/habit/components/period/index.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { KanbanCard, KanbanIndicatorCell } from "@app/components/common/kanban" import { t } from "@app/locale" import { PropType, Ref, defineComponent, h, watch, ref, computed, onMounted } from "vue" diff --git a/src/app/components/habit/components/site/common.ts b/src/app/components/habit/components/site/common.ts index d9a51704..e7710acb 100644 --- a/src/app/components/habit/components/site/common.ts +++ b/src/app/components/habit/components/site/common.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import type { TitleComponentOption } from "echarts/components" import { getSecondaryTextColor } from "@util/style" diff --git a/src/app/components/habit/components/site/contex.ts b/src/app/components/habit/components/site/context.ts similarity index 73% rename from src/app/components/habit/components/site/contex.ts rename to src/app/components/habit/components/site/context.ts index 0028a621..eb83a732 100644 --- a/src/app/components/habit/components/site/contex.ts +++ b/src/app/components/habit/components/site/context.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { provideWithNs, useProviderWithNs } from "@app/util/provider" import { Ref } from "vue" diff --git a/src/app/components/habit/components/site/focus-pie-wrapper.ts b/src/app/components/habit/components/site/focus-pie-wrapper.ts index 5005167e..780e9bf7 100644 --- a/src/app/components/habit/components/site/focus-pie-wrapper.ts +++ b/src/app/components/habit/components/site/focus-pie-wrapper.ts @@ -1,8 +1,15 @@ -import type { ECharts, ComposeOption } from "echarts/core" +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import type { ComposeOption } from "echarts/core" import type { GridComponentOption, TooltipComponentOption, TitleComponentOption } from "echarts/components" import type { PieSeriesOption } from "echarts/charts" -import { init, use } from "@echarts/core" +import { use } from "@echarts/core" import PieChart from "@echarts/chart/pie" import SVGRenderer from "@echarts/svg-renderer" import TooltipComponent from "@echarts/component/tooltip" @@ -12,6 +19,7 @@ import { mergeDate } from "@service/stat-service/merge" import { t } from "@app/locale" import { MIN_PERCENT_OF_PIE, formatFocusTooltip, generateTitleOption } from "./common" import { sum } from "@util/array" +import { EchartsWrapper } from "@app/components/common/echarts-wrapper" use([PieChart, SVGRenderer, TooltipComponent, GridComponent, TitleComponent]) @@ -22,7 +30,12 @@ type EcOption = ComposeOption< | PieSeriesOption > -const generateOption = (rows: timer.stat.Row[], timeFormat: timer.app.TimeFormat): EcOption => { +type BizOption = { + rows: timer.stat.Row[] + timeFormat: timer.app.TimeFormat +} + +const generateOption = ({ rows, timeFormat }: BizOption): EcOption => { rows = mergeDate(rows).sort((a, b) => b.focus - a.focus) const total = sum(rows.map(r => r.focus)) const realRows: timer.stat.Row[] = [] @@ -58,15 +71,6 @@ const generateOption = (rows: timer.stat.Row[], timeFormat: timer.app.TimeFormat } } -export default class FocusPieWrapper { - instance: ECharts - - init(container: HTMLDivElement) { - this.instance = init(container) - } - - render(rows: timer.stat.Row[], timeFormat: timer.app.TimeFormat) { - const option = generateOption(rows, timeFormat) - this.instance?.setOption(option, false, true) - } +export default class FocusPieWrapper extends EchartsWrapper { + generateOption = generateOption } diff --git a/src/app/components/habit/components/site/focus-pie.ts b/src/app/components/habit/components/site/focus-pie.ts index 60e2e686..0b5ee9c8 100644 --- a/src/app/components/habit/components/site/focus-pie.ts +++ b/src/app/components/habit/components/site/focus-pie.ts @@ -1,7 +1,14 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { Ref, defineComponent, h, onMounted, ref, watch } from "vue" import FocusPieWrapper from "./focus-pie-wrapper" import { useHabitFilter } from "../context" -import { useRows } from "./contex" +import { useRows } from "./context" const CONTAINER_STYLE: Partial = { width: "100%", @@ -16,7 +23,7 @@ const _default = defineComponent({ const rows = useRows() onMounted(() => wrapper.init(elRef.value)) - watch([rows, filter], () => wrapper.render(rows.value, filter.value?.timeFormat)) + watch([rows, filter], () => wrapper.render({ rows: rows.value, timeFormat: filter.value?.timeFormat })) return () => h("div", { style: CONTAINER_STYLE, diff --git a/src/app/components/habit/components/site/histogram-wrapper.ts b/src/app/components/habit/components/site/histogram-wrapper.ts index 1d4e151c..598e38de 100644 --- a/src/app/components/habit/components/site/histogram-wrapper.ts +++ b/src/app/components/habit/components/site/histogram-wrapper.ts @@ -1,8 +1,15 @@ -import type { ECharts, ComposeOption } from "echarts/core" +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import type { ComposeOption } from "echarts/core" import type { GridComponentOption, TooltipComponentOption, TitleComponentOption } from "echarts/components" import type { BarSeriesOption } from "echarts/charts" -import { init, use } from "@echarts/core" +import { use } from "@echarts/core" import BarChart from "@echarts/chart/bar" import SVGRenderer from "@echarts/svg-renderer" import TooltipComponent from "@echarts/component/tooltip" @@ -11,6 +18,7 @@ import TitleComponent from "@echarts/component/title" import { mergeDate } from "@service/stat-service/merge" import { t } from "@app/locale" import { SeriesDataItem, formatFocusTooltip, generateTitleOption } from "./common" +import { EchartsWrapper } from "@app/components/common/echarts-wrapper" use([BarChart, SVGRenderer, TooltipComponent, GridComponent, TitleComponent]) @@ -21,6 +29,11 @@ type EcOption = ComposeOption< | TitleComponentOption > +type BizOption = { + rows: timer.stat.Row[] + timeFormat: timer.app.TimeFormat +} + const MARGIN_LEFT_P = 8 const MARGIN_RIGHT_P = 4 const TOP_NUM = 7 @@ -96,15 +109,6 @@ async function generateOption(rows: timer.stat.Row[] = [], timeFormat: timer.app } } -export default class HistogramWrapper { - instance: ECharts - - init(container: HTMLDivElement) { - this.instance = init(container) - } - - async render(rows: timer.stat.Row[], timeFormat: timer.app.TimeFormat) { - const option = await generateOption(rows, timeFormat, this.instance.getDom()) - this.instance?.setOption(option, false, true) - } +export default class HistogramWrapper extends EchartsWrapper { + generateOption = ({ rows, timeFormat }: BizOption) => generateOption(rows, timeFormat, this.getDom()) } diff --git a/src/app/components/habit/components/site/histogram.ts b/src/app/components/habit/components/site/histogram.ts index 538a3520..431672ab 100644 --- a/src/app/components/habit/components/site/histogram.ts +++ b/src/app/components/habit/components/site/histogram.ts @@ -1,6 +1,13 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { Ref, defineComponent, h, onMounted, ref, watch } from "vue" import HistogramWrapper from "./histogram-wrapper" -import { useRows } from "./contex" +import { useRows } from "./context" import { useHabitFilter } from "../context" const CONTAINER_STYLE: Partial = { @@ -16,7 +23,7 @@ const _default = defineComponent({ const filter = useHabitFilter() onMounted(() => wrapper.init(elRef.value)) - watch([rows, filter], () => wrapper.render(rows.value, filter.value?.timeFormat)) + watch([rows, filter], () => wrapper.render({ rows: rows.value, timeFormat: filter.value?.timeFormat })) return () => h("div", { style: CONTAINER_STYLE, diff --git a/src/app/components/habit/components/site/index.ts b/src/app/components/habit/components/site/index.ts index a5d90aa3..3989d33f 100644 --- a/src/app/components/habit/components/site/index.ts +++ b/src/app/components/habit/components/site/index.ts @@ -1,3 +1,10 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { Ref, computed, defineComponent, h, onMounted, ref, watch } from "vue" import { t } from "@app/locale" import { sum } from "@util/array" @@ -11,7 +18,7 @@ import { FilterOption } from "../../type" import { formatTime, getDayLength, isSameDay } from "@util/time" import { periodFormatter } from "@app/util/time" import statService from "@service/stat-service" -import { initProvider } from "./contex" +import { initProvider } from "./context" type Summary = { focus: { diff --git a/src/app/components/habit/components/site/time-pie-wrapper.ts b/src/app/components/habit/components/site/time-pie-wrapper.ts index 05a7abd4..6c33431f 100644 --- a/src/app/components/habit/components/site/time-pie-wrapper.ts +++ b/src/app/components/habit/components/site/time-pie-wrapper.ts @@ -1,8 +1,15 @@ -import type { ECharts, ComposeOption } from "echarts/core" +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import type { ComposeOption } from "echarts/core" import type { GridComponentOption, TooltipComponentOption, TitleComponentOption } from "echarts/components" import type { PieSeriesOption } from "echarts/charts" -import { init, use } from "@echarts/core" +import { use } from "@echarts/core" import PieChart from "@echarts/chart/pie" import SVGRenderer from "@echarts/svg-renderer" import TooltipComponent from "@echarts/component/tooltip" @@ -12,6 +19,7 @@ import { mergeDate } from "@service/stat-service/merge" import { t } from "@app/locale" import { MIN_PERCENT_OF_PIE, formatTimeTooltip, generateTitleOption } from "./common" import { sum } from "@util/array" +import { EchartsWrapper } from "@app/components/common/echarts-wrapper" use([PieChart, SVGRenderer, TooltipComponent, GridComponent, TitleComponent]) @@ -58,15 +66,6 @@ const generateOption = (rows: timer.stat.Row[]): EcOption => { } } -export default class TimePieWrapper { - instance: ECharts - - init(container: HTMLDivElement) { - this.instance = init(container) - } - - async render(rows: timer.stat.Row[]) { - const option = generateOption(rows) - this.instance?.setOption(option, false, true) - } +export default class TimePieWrapper extends EchartsWrapper { + generateOption = generateOption } diff --git a/src/app/components/habit/components/site/time-pie.ts b/src/app/components/habit/components/site/time-pie.ts index 5118937d..dda92216 100644 --- a/src/app/components/habit/components/site/time-pie.ts +++ b/src/app/components/habit/components/site/time-pie.ts @@ -1,6 +1,13 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + import { Ref, defineComponent, h, onMounted, ref, watch } from "vue" import TimePieWrapper from "./time-pie-wrapper" -import { useRows } from "./contex" +import { useRows } from "./context" const CONTAINER_STYLE: Partial = { width: "100%",