Refactor charts of background page

Author: sheepzh

.vscode/settings.json

@@ -16,6 +16,8 @@
         "countup",
         "daterange",
         "echarts",
+        "emsp",
+        "ensp",
         "filemanager",
         "Hengyang",
         "Kanban",
@@ -38,4 +40,4 @@
         // Ignore i18n resources
         "src/i18n/message/**/*.json",
     ],
-}
+}

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

@@ -18,11 +18,11 @@ 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 { getSecondaryTextColor } from "@util/style"
 import { EchartsWrapper } from "@hooks"
-import { ZRColor } from "echarts/types/dist/shared"
+import { getLineSeriesPalette, tooltipDot, tooltipFlexLine } from "@app/util/echarts"
+import { TopLevelFormatterParams } from "echarts/types/dist/shared"
 
 use([
     LineChart,
@@ -50,67 +50,25 @@ type ValueItem = LineSeriesOption["data"][0] & {
     _data: DimensionEntry
 }
 
-const THIS_COLOR: ZRColor = {
-    type: "linear",
-    x: 0, y: 0,
-    x2: 0, y2: 1,
-    colorStops: [
-        { offset: 0, color: 'rgb(55, 162, 255)' },
-        { offset: 1, color: 'rgb(116, 21, 219)' },
-    ],
-}
-const PREV_COLOR: ZRColor = {
-    type: "linear",
-    x: 0, y: 0,
-    x2: 0, y2: 1,
-    colorStops: [
-        { offset: 0, color: 'rgb(255, 0, 135)' },
-        { offset: 1, color: 'rgb(135, 0, 157)' },
-    ],
-}
+const [THIS_COLOR, PREV_COLOR] = getLineSeriesPalette()
 
-const createTooltipLine = (param: any, valueFormatter: ValueFormatter) => {
+const createTooltipLine = (param: any, valueFormatter: ValueFormatter): string => {
     const data = param.data as ValueItem
     const { _data: { value, date } } = data
-    const color = param.color as string
-    const p = document.createElement('p')
-    p.style.margin = "0"
-    p.style.padding = "0"
-    p.style.alignItems = "center"
-    p.style.display = "flex"
-
-    const dotEl = document.createElement('div')
-    dotEl.style.width = '8px'
-    dotEl.style.height = '8px'
-    dotEl.style.display = 'inline-flex'
-    dotEl.style.borderRadius = '4px'
-    dotEl.style.backgroundColor = color
-    dotEl.style.marginRight = '7px'
-    p.append(dotEl)
-
-    const dateEl = document.createElement('span')
-    dateEl.innerText = date
-    dateEl.style.marginRight = "7px"
-    p.appendChild(dateEl)
 
     const valStr = valueFormatter?.(value) || value?.toString() || "NaN"
-    const valEL = document.createElement('span')
-    valEL.innerText = valStr
-    valEL.style.fontWeight = "500"
-    p.appendChild(valEL)
-    return p
+
+    return tooltipFlexLine(
+        `${tooltipDot(param.color)} ${date}`,
+        `<b>${valStr}</b>`
+    )
 }
 
-const formatTooltip = (params: any[], valueFormatter: ValueFormatter) => {
-    const container = document.createElement('div')
-    container.style.height = "50px"
-    container.style.display = "flex"
-    container.style.flexDirection = "column"
-    container.style.justifyContent = "space-around"
+const formatTooltip = (params: TopLevelFormatterParams, valueFormatter: ValueFormatter) => {
+    if (!Array.isArray(params)) return ''
 
     const lines = params.map(param => createTooltipLine(param, valueFormatter))
-    lines.forEach(l => container.append(l))
-    return container
+    return lines.join('')
 }
 
 const generateOption = ({ entries, preEntries, title, valueFormatter }: BizOption) => {
@@ -141,7 +99,7 @@ const generateOption = ({ entries, preEntries, title, valueFormatter }: BizOptio
         tooltip: {
             trigger: 'axis',
             axisPointer: { type: "line" },
-            formatter: (params: any[]) => formatTooltip(params, valueFormatter),
+            formatter: (params: TopLevelFormatterParams) => formatTooltip(params, valueFormatter),
         },
         xAxis: {
             type: 'category',

src/app/components/Analysis/components/Trend/Filter.tsx

@@ -6,31 +6,25 @@
  */
 
 import type { ElementDatePickerShortcut } from "@src/element-ui/date"
-import type { CalendarMessage } from "@i18n/message/common/calendar"
 
 import { t } from "@app/locale"
 import { ElDatePicker } from "element-plus"
 import { defineComponent, ref, type PropType } from "vue"
 import { daysAgo } from "@util/time"
+import { EL_DATE_FORMAT } from "@i18n/element"
 
-function datePickerShortcut(msgKey: keyof CalendarMessage['range'], agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut {
+function datePickerShortcut(agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut {
     return {
-        text: t(msg => msg.calendar.range[msgKey]),
-        value: daysAgo(agoOfStart - 1 || 0, agoOfEnd || 0)
+        text: t(msg => msg.calendar.range.lastDays, { n: agoOfStart }),
+        value: daysAgo(agoOfStart - 1 || 0, agoOfEnd || 0),
     }
 }
 
-const DATE_FORMAT = t(msg => msg.calendar.dateFormat, {
-    y: 'YYYY',
-    m: 'MM',
-    d: 'DD'
-})
-
 const SHORTCUTS = [
-    datePickerShortcut('last7Days', 7),
-    datePickerShortcut('last15Days', 15),
-    datePickerShortcut('last30Days', 30),
-    datePickerShortcut("last90Days", 90)
+    datePickerShortcut(7),
+    datePickerShortcut(15),
+    datePickerShortcut(30),
+    datePickerShortcut(90),
 ]
 
 const _default = defineComponent({
@@ -47,7 +41,7 @@ const _default = defineComponent({
                 <ElDatePicker
                     modelValue={dateRange.value}
                     disabledDate={(date: Date) => date.getTime() > new Date().getTime()}
-                    format={DATE_FORMAT}
+                    format={EL_DATE_FORMAT}
                     type="daterange"
                     shortcuts={SHORTCUTS}
                     rangeSeparator="-"

src/app/components/Dashboard/DashboardCard.tsx

@@ -8,8 +8,15 @@
 import { ElCard, ElCol } from "element-plus"
 import { defineComponent } from "vue"
 
+const clzName = (noPadding: boolean) => {
+    const names = ['dashboard-card']
+    noPadding && names.push('no-padding')
+    return names.join(' ')
+}
+
 const _default = defineComponent({
     props: {
+        noPadding: Boolean,
         span: {
             type: Number,
             required: true
@@ -18,7 +25,7 @@ const _default = defineComponent({
     setup(props, ctx) {
         return () => (
             <ElCol span={props.span}>
-                <ElCard style={{ height: "100%" }} v-slots={ctx.slots} />
+                <ElCard class={clzName(props.noPadding)} style={{ height: "100%" }} v-slots={ctx.slots} />
             </ElCol>
         )
     }

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

@@ -6,14 +6,14 @@
  */
 import type { TitleComponentOption, TooltipComponentOption, GridComponentOption, VisualMapComponentOption } from "echarts/components"
 import { TitleComponent, TooltipComponent, GridComponent, VisualMapComponent } from "echarts/components"
-import { HeatmapChart, type HeatmapSeriesOption } from "echarts/charts"
+import { ScatterChart, ScatterSeriesOption, type HeatmapSeriesOption } from "echarts/charts"
 import { use, type ComposeOption } from "echarts/core"
 import { SVGRenderer } from "echarts/renderers"
 
 // Register echarts
 use([
     SVGRenderer,
-    HeatmapChart,
+    ScatterChart,
     TooltipComponent,
     GridComponent,
     VisualMapComponent,
@@ -30,6 +30,7 @@ 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"
+import { getStepColors } from "@app/util/echarts"
 
 type _Value = [
     x: number,
@@ -39,7 +40,7 @@ type _Value = [
 ]
 
 type EcOption = ComposeOption<
-    | HeatmapSeriesOption
+    | ScatterSeriesOption
     | TitleComponentOption
     | TooltipComponentOption
     | GridComponentOption
@@ -58,11 +59,7 @@ function formatTooltip(mills: number, date: string): string {
     const d = date.substring(6, 8)
     const dateStr = t(msg => msg.calendar.dateFormat, { y, m, d })
     const timeStr = formatPeriodCommon(mills)
-    return `${dateStr}</br>${timeStr}`
-}
-
-function getGridColors() {
-    return ['#9be9a8', '#40c263', '#30a04e', '#216039']
+    return `${dateStr}</br><b>${timeStr}</b>`
 }
 
 function getXAxisLabelMap(data: _Value[]): { [x: string]: string } {
@@ -105,11 +102,48 @@ const cvtHeatmapItem = (d: _Value): HeatmapItem => {
     return item
 }
 
-function optionOf(data: _Value[], weekDays: string[]): EcOption {
+type Piece = {
+    label: string
+    min: number
+    max: number
+    color?: string
+}
+
+const minOf = (min: number) => min * 60 * 1000
+const hourOf = (hour: number) => hour * 60 * 60 * 1000
+
+const ALL_PIECES: Piece[] = [
+    { min: 1, max: minOf(10), label: "<10m" },
+    { min: minOf(10), max: minOf(30), label: "<30m" },
+    { min: minOf(30), max: hourOf(1), label: "<1h" },
+    { min: hourOf(1), max: hourOf(2), label: "<2h" },
+    { min: hourOf(2), max: hourOf(4), label: "<4h" },
+    { min: hourOf(4), max: hourOf(7), label: "<7h" },
+    { min: hourOf(7), max: hourOf(12), label: "<12h" },
+    { min: hourOf(12), max: hourOf(18), label: "<18h" },
+    { min: hourOf(18), max: hourOf(24), label: ">=18h" },
+]
+
+const computePieces = (min: number, max: number): Piece[] => {
+    let pieces = ALL_PIECES.filter((p, i) => i === 0 || p.min <= max)
+    pieces = pieces.filter((p, i) => p.max > min || i === pieces.length - 1)
+
+    const colors = getStepColors(pieces.length)
+    return pieces.map((p, idx) => ({ ...p, color: colors[idx] }))
+}
+
+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
+    const gridWidth = 0.85
+    const colCount = new Set(data.map(v => v[0])).size
+    const gridCellSize = colCount ? w * gridWidth / colCount * 0.75 : 0
+
+    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,
@@ -125,7 +159,7 @@ function optionOf(data: _Value[], weekDays: string[]): EcOption {
                 return mills ? formatTooltip(mills as number, date) : undefined
             },
         },
-        grid: { height: '70%', width: '82%', left: '8%', top: '18%', },
+        grid: { height: '70%', left: '7%', width: `${gridWidth * 100}%`, top: '18%', },
         xAxis: {
             type: 'category',
             axisLine: { show: false },
@@ -145,22 +179,23 @@ function optionOf(data: _Value[], weekDays: string[]): EcOption {
             axisTick: { show: false, alignWithLabel: true },
         },
         visualMap: {
-            min: 0,
-            max: Math.max(...data.map(a => a[2])),
-            inRange: { color: getGridColors() },
+            type: 'piecewise',
             realtime: true,
             calculable: true,
             orient: 'vertical',
             right: '2%',
             top: 'center',
             dimension: 2,
-            textStyle: { color: textColor },
+            splitNumber: 6,
+            showLabel: true,
+            pieces: computePieces(minVal, maxVal),
+            textStyle: { color: getPrimaryTextColor() },
         },
         series: {
-            type: 'heatmap',
+            type: 'scatter',
             data: data.map(cvtHeatmapItem),
-            progressive: 5,
-            progressiveThreshold: 10,
+            symbol: 'circle',
+            symbolSize: gridCellSize,
         },
     }
 }
@@ -203,7 +238,7 @@ class Wrapper extends EchartsWrapper<BizOption, EcOption> {
             // Saturday to Sunday
             rotate(weekDays, 1)
         }
-        return optionOf(data, weekDays)
+        return optionOf(data, weekDays, this.getDom())
     }
 
     protected afterInit(): void {