Support more charts of habit (#207)

.vscode/settings.json

@@ -6,7 +6,19 @@
     },
     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     "cSpell.words": [
+        "Auths",
         "echarts",
-        "Hengyang"
+        "Hengyang",
+        "Kanban"
+    ],
+    "cSpell.ignorePaths": [
+        "package-lock.json",
+        "node_modules",
+        "vscode-extension",
+        ".git/objects",
+        ".vscode",
+        ".vscode-insiders",
+        // Ignore i18n resources
+        "src/i18n/message/**/*.json",
     ],
 }

src/app/components/analysis/components/filter.ts

@@ -12,7 +12,7 @@ import { ref, h, defineComponent } from "vue"
 import statService, { HostSet } from "@service/stat-service"
 import siteService from "@service/site-service"
 import { t } from "@app/locale"
-import SelectFilterItem from "@app/components/common/select-filter-item"
+import TimeFormatFilterItem from "@app/components/common/time-format-filter-item"
 import { labelOfHostInfo } from "../util"
 
 const calcUniqueKey = ({ host, virtual, merged }: timer.site.SiteInfo) => `${host}${virtual ? 1 : 0}${merged ? 1 : 0}`
@@ -45,13 +45,6 @@ async function handleRemoteSearch(queryStr: string, trendDomainOptions: Ref<time
 
 const HOST_PLACEHOLDER = t(msg => msg.analysis.common.hostPlaceholder)
 
-const TIME_FORMAT_LABELS: { [key in timer.app.TimeFormat]: string } = {
-    default: t(msg => msg.timeFormat.default),
-    second: t(msg => msg.timeFormat.second),
-    minute: t(msg => msg.timeFormat.minute),
-    hour: t(msg => msg.timeFormat.hour)
-}
-
 function keyOfHostInfo(option: timer.site.SiteKey): string {
     const { merged, virtual, host } = option
     let prefix = '_'
@@ -135,10 +128,8 @@ const _default = defineComponent({
                     label: labelOfHostInfo(siteInfo),
                 }, () => renderHostLabel(siteInfo))
             )),
-            h(SelectFilterItem, {
-                historyName: 'timeFormat',
+            h(TimeFormatFilterItem, {
                 defaultValue: timeFormat.value,
-                options: TIME_FORMAT_LABELS,
                 onSelect: (newVal: timer.app.TimeFormat) => ctx.emit('timeFormatChange', timeFormat.value = newVal)
             })
         ]

src/app/components/analysis/components/summary/index.ts

@@ -9,10 +9,9 @@ import type { PropType, Ref, VNode } from "vue"
 import { defineComponent, h, ref, watch } from "vue"
 import siteService from "@service/site-service"
 import Site from "./site"
-import RowCard from "../common/row-card"
-import Indicator from "../common/indicator"
+import { KanbanIndicatorCell, KanbanCard, KanbanIndicatorRow } from "@app/components/common/kanban"
 import "./summary.sass"
-import { ElCol, ElRow } from "element-plus"
+import { ElCol } from "element-plus"
 import { t } from "@app/locale"
 import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
 
@@ -42,19 +41,19 @@ const VISIT_LABEL = t(msg => msg.analysis.common.visitTotal)
 
 function renderContent(siteInfo: timer.site.SiteInfo, summary: Summary, timeFormat: timer.app.TimeFormat): VNode {
     const { day, firstDay, focus, visit } = summary || {}
-    return h(ElRow, { class: "analysis-summary-container" }, () => [
+    return h(KanbanIndicatorRow, {}, () => [
         h(ElCol, { span: 6 }, () => h(Site, { site: siteInfo })),
-        h(ElCol, { span: 6 }, () => h(Indicator, {
+        h(ElCol, { span: 6 }, () => h(KanbanIndicatorCell, {
             mainName: DAYS_LABEL,
             mainValue: day?.toString() || '-',
             subTips: msg => msg.analysis.summary.firstDay,
             subValue: firstDay ? `@${cvt2LocaleTime(firstDay)}` : ''
         })),
-        h(ElCol, { span: 6 }, () => h(Indicator, {
+        h(ElCol, { span: 6 }, () => h(KanbanIndicatorCell, {
             mainName: FOCUS_LABEL,
             mainValue: focus === undefined ? '-' : periodFormatter(focus, timeFormat, false),
         })),
-        h(ElCol, { span: 6 }, () => h(Indicator, {
+        h(ElCol, { span: 6 }, () => h(KanbanIndicatorCell, {
             mainName: VISIT_LABEL,
             mainValue: visit?.toString() || '-',
         })),
@@ -87,7 +86,7 @@ const _default = defineComponent({
 
         querySiteInfo()
 
-        return () => h(RowCard, {
+        return () => h(KanbanCard, {
             title: t(msg => msg.analysis.summary.title)
         }, () => renderContent(siteInfo.value, summaryInfo.value, timeFormat.value))
     }

src/app/components/analysis/components/summary/summary.sass

@@ -1,9 +1,4 @@
-
-.analysis-summary-container
-    height: 140px
-    margin-bottom: 0px !important
-    >.el-col:not(:first-child)
-        border-left: 1px var(--el-border-color) var(--el-border-style)
+.kanban-indicator-row
     .site-container
         position: relative
         top: 50%

src/app/components/analysis/components/trend/dimension/index.ts

@@ -10,7 +10,7 @@ import type { PropType } from "vue"
 
 import { computeRingText, formatValue } from "@app/components/analysis/util"
 import { defineComponent, h } from "vue"
-import Indicator from "../../common/indicator"
+import { KanbanIndicatorCell } from "@app/components/common/kanban"
 import Chart from "./chart"
 import { cvt2LocaleTime } from "@app/util/time"
 
@@ -24,15 +24,15 @@ type RenderProps = {
 }
 
 const renderMax = ({ maxLabel, maxValue, valueFormatter: formatter, maxDate }: RenderProps) =>
-    h('div', { class: 'analysis-trend-dimension-indicator-item' }, h(Indicator, {
+    h('div', { class: 'analysis-trend-dimension-indicator-item' }, h(KanbanIndicatorCell, {
         mainName: maxLabel,
         mainValue: formatter ? formatter(maxValue) : maxValue?.toString() || '-',
         subValue: maxDate ? `@${cvt2LocaleTime(maxDate)}` : '',
     }))
 
 const renderAverage = ({ averageLabel, valueFormatter, average }: RenderProps) => {
     const currentAverage = average?.[0]
-    return h('div', { class: 'analysis-trend-dimension-indicator-item' }, h(Indicator, {
+    return h('div', { class: 'analysis-trend-dimension-indicator-item' }, h(KanbanIndicatorCell, {
         mainName: averageLabel,
         mainValue: formatValue(currentAverage, valueFormatter),
         subTips: msg => msg.analysis.common.ringGrowth,

src/app/components/analysis/components/trend/filter.ts

@@ -42,7 +42,7 @@ const _default = defineComponent({
             d: 'DD'
         })
         const dateRange: Ref<[Date, Date]> = ref(props.dateRange)
-        return () => h('div', { class: 'analysis-trend-filter' }, [
+        return () => h('div', [
             h(ElDatePicker, {
                 modelValue: dateRange.value,
                 disabledDate: (date: Date) => date.getTime() > new Date().getTime(),

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

@@ -8,14 +8,13 @@ import type { DimensionEntry, ValueFormatter } from "@app/components/analysis/ut
 import type { PropType, Ref, ComputedRef } from "vue"
 
 import { defineComponent, h, ref, watch, computed } from "vue"
-import RowCard from "../common/row-card"
+import { KanbanCard } from "@app/components/common/kanban"
 import Filter from "./filter"
 import Total from "./total"
 import Dimension from "./dimension"
 import { t } from "@app/locale"
 import './style.sass'
-import { MILL_PER_DAY, daysAgo, getAllDatesBetween, getDayLenth } from "@util/time"
-import { ElRow } from "element-plus"
+import { MILL_PER_DAY, daysAgo, getAllDatesBetween, getDayLength } from "@util/time"
 import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
 import { groupBy } from "@util/array"
 
@@ -95,7 +94,7 @@ function computeIndicatorSet(rows: timer.stat.Row[], dateRange: [Date, Date]): [
 function lastRange(dateRange: [Date, Date]): [Date, Date] {
     const [start, end] = dateRange || []
     if (!start || !end) return undefined
-    const dayLength = getDayLenth(start, end)
+    const dayLength = getDayLength(start, end)
     const newEnd = new Date(start.getTime() - MILL_PER_DAY)
     const newStart = new Date(start.getTime() - MILL_PER_DAY * dayLength)
     return [newStart, newEnd]
@@ -195,7 +194,7 @@ const _default = defineComponent({
         const indicators: Ref<IndicatorSet> = ref()
         const lastIndicators: Ref<IndicatorSet> = ref()
         const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
-        const rangeLength: ComputedRef<number> = computed(() => getDayLenth(dateRange.value?.[0], dateRange.value?.[1]))
+        const rangeLength: ComputedRef<number> = computed(() => getDayLength(dateRange.value?.[0], dateRange.value?.[1]))
 
         const compute = () => handleDataChange(
             { dateRange: dateRange.value, rows: props.rows },
@@ -207,20 +206,19 @@ const _default = defineComponent({
         watch(() => props.timeFormat, () => timeFormat.value = props.timeFormat)
 
         compute()
-        return () => h(RowCard, {
+        return () => h(KanbanCard, {
             title: t(msg => msg.analysis.trend.title),
-            class: 'analysis-trend-container',
-        }, () => [
-            h(Filter, {
+        }, {
+            filter: () => h(Filter, {
                 dateRange: dateRange.value,
                 onDateRangeChange: (newVal: [Date, Date]) => dateRange.value = newVal,
             }),
-            h(ElRow, { class: 'analysis-trend-content' }, () => [
+            default: () => h('div', { class: 'analysis-trend-content' }, [
                 renderTotal(indicators.value, lastIndicators.value, timeFormat.value, rangeLength.value),
                 renderFocusTrend(indicators.value, lastIndicators.value, timeFormat.value, focusData.value),
                 renderVisitTrend(indicators.value, lastIndicators.value, visitData.value),
             ])
-        ])
+        })
     }
 })
 

src/app/components/analysis/components/trend/style.sass

@@ -1,10 +1,5 @@
-$divider: 1px var(--el-border-color) var(--el-border-style)
 
-.analysis-trend-container
-    .analysis-trend-filter
-        padding-top: 10px
-        padding-bottom: 14px
-        border-bottom: $divider
+.kanban-card
     .analysis-trend-content
         height: 380px
         display: flex
@@ -21,20 +16,20 @@ $divider: 1px var(--el-border-color) var(--el-border-style)
         width: 100%
         flex: 1
     >div:not(:first-child)
-        border-top: $divider
+        border-top: var(--timer-kanban-border)
 .analysis-trend-dimension-container
     display: flex
     height: 100%
     flex-direction: column
-    border-left: $divider
+    border-left: var(--timer-kanban-border)
     .analysis-trend-dimension-indicator-container
         display: flex
         flex: 1 1 0
-        border-bottom: $divider
+        border-bottom: var(--timer-kanban-border)
         .analysis-trend-dimension-indicator-item
             flex: 1 0 0
         >.analysis-trend-dimension-indicator-item:first-child
-            border-right: $divider
+            border-right: var(--timer-kanban-border)
     .analysis-trend-dimension-chart-container
         display: flex
         flex: 2 1 0

src/app/components/analysis/components/trend/total.ts

@@ -8,10 +8,10 @@
 import type { RingValue } from "@app/components/analysis/util"
 import type { PropType } from "vue"
 import type { I18nKey } from "@app/locale"
-import type { IndicatorProps } from "../common/indicator"
+import type { IndicatorProps } from "@app/components/common/kanban/indicator-cell"
 
 import { defineComponent, h } from "vue"
-import Indicator from "../common/indicator"
+import { KanbanIndicatorCell } from "@app/components/common/kanban"
 import { t } from "@app/locale"
 import { periodFormatter } from "@app/util/time"
 import { computeRingText } from "@app/components/analysis/util"
@@ -35,7 +35,7 @@ const computeDayValue = (props: Props) => {
     return `${thisActiveDay?.toString() || '-'}/${rangeLength?.toString() || '-'}`
 }
 
-const renderIndicator = (props: IndicatorProps) => h('div', h(Indicator, props))
+const renderIndicator = (props: IndicatorProps) => h('div', h(KanbanIndicatorCell, props))
 
 const computeFocusText = (focusRing: RingValue, format: timer.app.TimeFormat) => {
     const current = focusRing?.[0]

src/app/components/analysis/style.sass

@@ -1,39 +1,3 @@
-.analysis-row-card
-    margin-bottom: 15px
-    >.el-card__body
-        position: relative
-        .analysis-row-title
-            position: absolute
-            top: 5px
-            left: 10px
-            font-size: 12px
-            color: var(--el-text-color-regular)
-            z-index: 1000
-        .analysis-row-body
-            padding-left: 5px
-
-.analysis-indicator-container
-    position: relative
-    top: 50%
-    transform: translateY(-50%)
-    padding-left: 40px
-    padding-top: 10px
-    padding-bottom: 10px
-    .indicator-name
-        font-size: 14px
-        color: var(--el-text-color-secondary)
-    .indicator-value
-        font-size: 24px
-        margin-block-end: 0.6em
-        margin-block-start: 0.25em
-    .indicator-sub-tip
-        height: 17px
-        line-height: 17px
-        font-size: 12px
-        word-break: break-word
-        color: var(--el-text-color-secondary)
-    .indicator-sub-value,.indicator-ring-growth-value
-        color: var(--el-text-color-primary)
 .filter-container
     .select-trigger
         width: 240px

src/app/components/common/kanban/card.sass

@@ -0,0 +1,41 @@
+
+.kanban-card
+    margin-bottom: 15px
+    >.el-card__body
+        position: relative
+        .kanban-card-title
+            position: absolute
+            top: 5px
+            left: 10px
+            font-size: 12px
+            color: var(--el-text-color-regular)
+            z-index: 1000
+        .kanban-card-body
+            padding-left: 5px
+    .kanban-card-filter-wrapper
+        padding-top: 10px
+        padding-bottom: 14px
+        border-bottom: 1px var(--el-border-color) var(--el-border-style)
+
+.analysis-indicator-container
+    position: relative
+    top: 50%
+    transform: translateY(-50%)
+    padding-left: 40px
+    padding-top: 10px
+    padding-bottom: 10px
+    .kanban-indicator-cell-name
+        font-size: 14px
+        color: var(--el-text-color-secondary)
+    .kanban-indicator-cell-val
+        font-size: 24px
+        margin-block-end: 0.6em
+        margin-block-start: 0.25em
+    .kanban-indicator-cell-sub-tip
+        height: 17px
+        line-height: 17px
+        font-size: 12px
+        word-break: break-word
+        color: var(--el-text-color-secondary)
+    .kanban-indicator-cell-sub-val,.indicator-ring-growth-value
+        color: var(--el-text-color-primary)