Semi

src/app/components/Analysis/components/Summary/Calendar/Wrapper.ts

@@ -14,10 +14,6 @@ import {
     EffectScatterSeriesOption
 } from "echarts"
 import { formatTime, getAllDatesBetween, getWeeksAgo, parseTime } from "@util/time"
-import { EffectScatterChart } from "echarts/charts"
-import { SVGRenderer } from "echarts/renderers"
-import { use } from "echarts/core"
-import { GridComponent, TitleComponent, TooltipComponent, VisualMapComponent } from "echarts/components"
 import { groupBy, rotate } from "@util/array"
 import { t } from "@app/locale"
 import { getRegularTextColor, getSecondaryTextColor } from "@util/style"
@@ -43,15 +39,6 @@ type _Value = [
     string,
 ]
 
-use([
-    SVGRenderer,
-    EffectScatterChart,
-    TooltipComponent,
-    GridComponent,
-    VisualMapComponent,
-    TitleComponent,
-])
-
 const WEEK_NUM = 26
 
 type EffectScatterItem = EffectScatterSeriesOption["data"][number]

src/app/components/Analysis/components/Trend/Dimension/Wrapper.ts

@@ -14,24 +14,12 @@ import type {
     GridComponentOption,
 } from "echarts/components"
 
-import { use } from "echarts/core"
-import { LineChart } from "echarts/charts"
-import { SVGRenderer } from "echarts/renderers"
-import { TitleComponent, TooltipComponent, GridComponent } from "echarts/components"
 import { ValueFormatter } from "@app/components/Analysis/util"
 import { getRegularTextColor } from "@util/style"
 import { EchartsWrapper } from "@hooks"
 import { getLineSeriesPalette, tooltipDot, tooltipFlexLine } from "@app/util/echarts"
 import { TopLevelFormatterParams } from "echarts/types/dist/shared"
 
-use([
-    LineChart,
-    TitleComponent,
-    TooltipComponent,
-    GridComponent,
-    SVGRenderer,
-])
-
 type EcOption = ComposeOption<
     | LineSeriesOption
     | TitleComponentOption

src/app/components/Dashboard/components/Calendar/Wrapper.ts

@@ -4,28 +4,17 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import type { TitleComponentOption, TooltipComponentOption, GridComponentOption, VisualMapComponentOption } from "echarts/components"
-import { TitleComponent, TooltipComponent, GridComponent, VisualMapComponent } from "echarts/components"
-import { ScatterChart, ScatterSeriesOption, type HeatmapSeriesOption } from "echarts/charts"
-import { use, type ComposeOption } from "echarts/core"
-import { SVGRenderer } from "echarts/renderers"
-
-// Register echarts
-use([
-    SVGRenderer,
-    ScatterChart,
-    TooltipComponent,
-    GridComponent,
-    VisualMapComponent,
-    TitleComponent,
-])
+import type {
+    ComposeOption,
+    TooltipComponentOption, GridComponentOption, VisualMapComponentOption,
+    ScatterSeriesOption, HeatmapSeriesOption,
+} from "echarts"
 
 import { EchartsWrapper } from "@hooks"
 import { formatPeriodCommon, getAllDatesBetween, MILL_PER_HOUR, MILL_PER_MINUTE } from "@util/time"
-import { groupBy, rotate, sum } from "@util/array"
+import { groupBy, rotate } from "@util/array"
 import { t } from "@app/locale"
 import { getPrimaryTextColor } from "@util/style"
-import { BASE_TITLE_OPTION } from "../../common"
 import { getAppPageUrl } from "@util/constant/url"
 import { REPORT_ROUTE } from "@app/router/constants"
 import { createTabAfterCurrent } from "@api/chrome/tab"
@@ -41,7 +30,6 @@ type _Value = [
 
 type EcOption = ComposeOption<
     | ScatterSeriesOption
-    | TitleComponentOption
     | TooltipComponentOption
     | GridComponentOption
     | VisualMapComponentOption
@@ -84,12 +72,6 @@ function getXAxisLabelMap(data: _Value[]): { [x: string]: string } {
     return result
 }
 
-const titleText = (totalHours: number) => t(msg => totalHours
-    ? msg.dashboard.heatMap.title0
-    : msg.dashboard.heatMap.title1,
-    { hour: totalHours }
-)
-
 type HeatmapItem = HeatmapSeriesOption["data"][number]
 
 const cvtHeatmapItem = (d: _Value): HeatmapItem => {
@@ -133,8 +115,6 @@ const computePieces = (min: number, max: number): Piece[] => {
 }
 
 function optionOf(data: _Value[], weekDays: string[], dom: HTMLElement): EcOption {
-    const totalMills = sum(data?.map(d => d[2] ?? 0))
-    const totalHours = Math.floor(totalMills / MILL_PER_HOUR)
     const xAxisLabelMap = getXAxisLabelMap(data)
     const textColor = getPrimaryTextColor()
     const w = dom?.getBoundingClientRect?.()?.width
@@ -145,11 +125,6 @@ function optionOf(data: _Value[], weekDays: string[], dom: HTMLElement): EcOptio
     const maxVal = Math.max(...data.map(a => a[2]))
     const minVal = Math.min(...data.map(a => a[2]).filter(v => v))
     return {
-        title: {
-            ...BASE_TITLE_OPTION,
-            text: titleText(totalHours),
-            textStyle: { fontSize: '14px', color: textColor }
-        },
         tooltip: {
             borderWidth: 0,
             formatter: (params: any) => {
@@ -222,7 +197,12 @@ function handleClick(value: _Value): void {
 }
 
 class Wrapper extends EchartsWrapper<BizOption, EcOption> {
-    protected generateOption({ startTime, endTime, value }: BizOption): EcOption | Promise<EcOption> {
+    protected isSizeSensitize: boolean = true
+
+    protected generateOption(option: BizOption): EcOption | Promise<EcOption> {
+        if (!option) return {}
+
+        const { startTime, endTime, value } = option
         const allDates = getAllDatesBetween(startTime, endTime)
         const data: _Value[] = []
         allDates.forEach((date, index) => {
@@ -242,7 +222,8 @@ class Wrapper extends EchartsWrapper<BizOption, EcOption> {
     }
 
     protected afterInit(): void {
-        this.instance.on("click", (params: { value: _Value }) => handleClick(params.value as _Value))
+        const supportClick = !window.matchMedia("(any-pointer:coarse)").matches
+        supportClick && this.instance.on("click", (params: any) => handleClick(params.value as _Value))
     }
 }
 

src/app/components/Dashboard/components/Calendar/index.tsx

@@ -4,16 +4,29 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import { useEcharts } from "@hooks"
+import { useEcharts, useRequest } from "@hooks"
 import { locale } from "@i18n"
 import statService from "@service/stat-service"
-import { getWeeksAgo } from "@util/time"
+import { getWeeksAgo, MILL_PER_HOUR } from "@util/time"
 import { defineComponent } from "vue"
 import Wrapper, { BizOption } from "./Wrapper"
 import { groupBy, sum } from "@util/array"
+import { t } from "@app/locale"
+import ChartTitle from "../../ChartTitle"
 
 const WEEK_NUM = 53
 
+const titleText = (option: BizOption) => {
+    const { value } = option || {}
+    const totalMills = sum(Object.values(value || {}))
+    const totalHours = Math.floor(totalMills / MILL_PER_HOUR)
+    return t(msg => totalHours
+        ? msg.dashboard.heatMap.title0
+        : msg.dashboard.heatMap.title1,
+        { hour: totalHours }
+    )
+}
+
 const fetchData = async (): Promise<BizOption> => {
     const endTime = new Date()
     const startTime: Date = getWeeksAgo(endTime, locale === "zh_CN", WEEK_NUM)
@@ -27,9 +40,15 @@ const fetchData = async (): Promise<BizOption> => {
 }
 
 const _default = defineComponent(() => {
-    const { elRef } = useEcharts(Wrapper, fetchData)
+    const { data } = useRequest<void, BizOption>(fetchData)
+    const { elRef } = useEcharts(Wrapper, data)
 
-    return () => <div class="calendar-container" ref={elRef} />
+    return () => (
+        <div class="calendar-container">
+            <ChartTitle text={titleText(data.value)} />
+            <div ref={elRef} style={{ flex: 1 }} />
+        </div>
+    )
 })
 
 export default _default