Semi

sheepzh · Jul 28, 2024 · aeba82e · aeba82e
1 parent afc1837
commit aeba82e
Showing 1 changed file with 33 additions and 12 deletions.
diff --git a/src/app/components/Dashboard/components/Calendar/Wrapper.ts b/src/app/components/Dashboard/components/Calendar/Wrapper.ts
@@ -32,8 +32,6 @@ import { REPORT_ROUTE } from "@app/router/constants"
 import { createTabAfterCurrent } from "@api/chrome/tab"
 import { getHeatColors } from "@app/util/echarts"
 
-const WEEK_NUM = 53
-
 type _Value = [
     x: number,
     y: number,
@@ -64,11 +62,6 @@ function formatTooltip(mills: number, date: string): string {
     return `${dateStr}</br>${timeStr}`
 }
 
-function getGridColors() {
-    return ['#9be9a8', '#40c263', '#30a04e', '#216039']
-
-}
-
 function getXAxisLabelMap(data: _Value[]): { [x: string]: string } {
     const allMonthLabel = t(msg => msg.calendar.months).split('|')
     const result = {}
@@ -109,15 +102,40 @@ const cvtHeatmapItem = (d: _Value): HeatmapItem => {
     return item
 }
 
+type Piece = {
+    label: string
+    min: number
+    max: number
+}
+
+const minOf = (min: number) => min * 60 * 1000
+const hourOf = (hour: number) => hour * 60 * 60 * 1000
+
+const ALL_PIECES: Piece[] = [
+    { min: minOf(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(5), label: "<5h" },
+    { min: hourOf(5), max: hourOf(12), label: "<12h" },
+    { min: hourOf(12), max: hourOf(24), label: ">=12h" },
+]
+
+const computePieces = (max: number): Piece[] => {
+    return ALL_PIECES.filter((p, i) => i === 0 || p.min <= max)
+}
+
 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.86
+    const gridWidth = 0.85
     const colCount = new Set(data.map(v => v[0])).size
     const gridCellSize = colCount ? w * gridWidth / colCount * 0.7 : 0
+
+    const maxVal = Math.max(...data.map(a => a[2]))
     return {
         title: {
             ...BASE_TITLE_OPTION,
@@ -153,16 +171,19 @@ function optionOf(data: _Value[], weekDays: string[], dom: HTMLElement): EcOptio
             axisTick: { show: false, alignWithLabel: true },
         },
         visualMap: {
-            min: 0,
-            max: Math.max(...data.map(a => a[2])),
-            inRange: { color: getHeatColors() },
+            type: 'piecewise',
+            inRange: {
+                color: getHeatColors(),
+            },
             realtime: true,
             calculable: true,
             orient: 'vertical',
             right: '2%',
             top: 'center',
             dimension: 2,
-            textStyle: { color: textColor },
+            splitNumber: 6,
+            showLabel: true,
+            pieces: computePieces(maxVal)
         },
         series: {
             type: 'scatter',