diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8221f727..fb577554 100644
--- a/.vscode/settings.json
+++ b/.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",
     ],
 }
\ No newline at end of file
diff --git a/src/app/components/analysis/components/common/row-card.ts b/src/app/components/analysis/components/common/row-card.ts
deleted file mode 100644
index d8617f87..00000000
--- a/src/app/components/analysis/components/common/row-card.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) 2023 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import { ElCard } from "element-plus"
-import { defineComponent, h } from "vue"
-
-const _default = defineComponent({
-    props: {
-        title: String
-    },
-    setup(props, ctx) {
-        const slots = ctx.slots
-        const { default: default_ } = slots
-        return () => {
-            const title = h('div', { class: 'analysis-row-title' }, props.title)
-            return h(ElCard, { class: 'analysis-row-card' }, () => [title, h(default_, { class: 'analysis-row-body' })])
-        }
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/analysis/components/filter.ts b/src/app/components/analysis/components/filter.ts
index 2f9e99a0..8431601b 100644
--- a/src/app/components/analysis/components/filter.ts
+++ b/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)
             })
         ]
diff --git a/src/app/components/analysis/components/summary/index.ts b/src/app/components/analysis/components/summary/index.ts
index d47d9ae2..8c497313 100644
--- a/src/app/components/analysis/components/summary/index.ts
+++ b/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))
     }
diff --git a/src/app/components/analysis/components/summary/summary.sass b/src/app/components/analysis/components/summary/summary.sass
index db9ea8be..0d312b56 100644
--- a/src/app/components/analysis/components/summary/summary.sass
+++ b/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%
diff --git a/src/app/components/analysis/components/trend/dimension/index.ts b/src/app/components/analysis/components/trend/dimension/index.ts
index 984137ae..fe1d2e9d 100644
--- a/src/app/components/analysis/components/trend/dimension/index.ts
+++ b/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,7 +24,7 @@ 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)}` : '',
@@ -32,7 +32,7 @@ const renderMax = ({ maxLabel, maxValue, valueFormatter: formatter, maxDate }: R
 
 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,
diff --git a/src/app/components/analysis/components/trend/filter.ts b/src/app/components/analysis/components/trend/filter.ts
index 518ae924..6beb76e2 100644
--- a/src/app/components/analysis/components/trend/filter.ts
+++ b/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(),
diff --git a/src/app/components/analysis/components/trend/index.ts b/src/app/components/analysis/components/trend/index.ts
index 1cc474c6..8ea2fa2f 100644
--- a/src/app/components/analysis/components/trend/index.ts
+++ b/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),
             ])
-        ])
+        })
     }
 })
 
diff --git a/src/app/components/analysis/components/trend/style.sass b/src/app/components/analysis/components/trend/style.sass
index 18b95eef..8388ec05 100644
--- a/src/app/components/analysis/components/trend/style.sass
+++ b/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
diff --git a/src/app/components/analysis/components/trend/total.ts b/src/app/components/analysis/components/trend/total.ts
index 1bf2ee4e..0e0e41cb 100644
--- a/src/app/components/analysis/components/trend/total.ts
+++ b/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]
diff --git a/src/app/components/analysis/style.sass b/src/app/components/analysis/style.sass
index f8b15cea..96cd4b66 100644
--- a/src/app/components/analysis/style.sass
+++ b/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
diff --git a/src/app/components/common/kanban/card.sass b/src/app/components/common/kanban/card.sass
new file mode 100644
index 00000000..910f5213
--- /dev/null
+++ b/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)
diff --git a/src/app/components/common/kanban/card.ts b/src/app/components/common/kanban/card.ts
new file mode 100644
index 00000000..c23dcac6
--- /dev/null
+++ b/src/app/components/common/kanban/card.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { ElCard } from "element-plus"
+import { defineComponent, h } from "vue"
+import "./card.sass"
+
+const _default = defineComponent({
+    props: {
+        title: String
+    },
+    setup(props, ctx) {
+        const { default: default_, filter } = ctx.slots
+        return () => h(ElCard, { class: 'kanban-card' }, () => [
+            h('div', { class: 'kanban-card-title' }, props.title),
+            filter ? h('div', { class: 'kanban-card-filter-wrapper' }, h(filter)) : null,
+            h(default_, { class: 'kanban-card-body' }),
+        ])
+    },
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/common/kanban/index.ts b/src/app/components/common/kanban/index.ts
new file mode 100644
index 00000000..5dcb4409
--- /dev/null
+++ b/src/app/components/common/kanban/index.ts
@@ -0,0 +1,7 @@
+import IndicatorCell from "./indicator-cell"
+import IndicatorRow from "./indicator-row"
+import Card from "./card"
+
+export const KanbanIndicatorCell = IndicatorCell
+export const KanbanCard = Card
+export const KanbanIndicatorRow = IndicatorRow
\ No newline at end of file
diff --git a/src/app/components/common/kanban/indicator-cell.sass b/src/app/components/common/kanban/indicator-cell.sass
new file mode 100644
index 00000000..da2c79b2
--- /dev/null
+++ b/src/app/components/common/kanban/indicator-cell.sass
@@ -0,0 +1,25 @@
+.kanban-indicator-cell-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)
+    .kanban-indicator-cell-sub-info
+        vertical-align: sub
+        margin-left: 2px
diff --git a/src/app/components/analysis/components/common/indicator.ts b/src/app/components/common/kanban/indicator-cell.ts
similarity index 52%
rename from src/app/components/analysis/components/common/indicator.ts
rename to src/app/components/common/kanban/indicator-cell.ts
index f40fc10f..403ce6b3 100644
--- a/src/app/components/analysis/components/common/indicator.ts
+++ b/src/app/components/common/kanban/indicator-cell.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2023 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -10,32 +10,40 @@ import type { PropType, VNode } from "vue"
 
 import { tN } from "@app/locale"
 import { defineComponent, h } from "vue"
+import "./indicator-cell.sass"
+import { ElIcon, ElTooltip } from "element-plus"
+import { InfoFilled } from "@element-plus/icons-vue"
 
 export type IndicatorProps = {
     mainName: string
     mainValue: string
     subTips?: I18nKey
     subValue?: string
+    subInfo?: string
 }
 
 function renderChildren(props: IndicatorProps): VNode[] {
-    const { mainName, subTips, mainValue, subValue } = props
+    const { mainName, subTips, mainValue, subValue, subInfo } = props
     const children = [
-        h('div', { class: 'indicator-name' }, mainName),
-        h('div', { class: 'indicator-value' }, mainValue || '-'),
+        h('div', { class: 'kanban-indicator-cell-name' }, mainName),
+        h('div', { class: 'kanban-indicator-cell-val' }, mainValue || '-'),
     ]
     const subTipsLine = []
     if (subTips || subValue) {
-        const subValueSpan = h('span', { class: 'indicator-sub-value' }, subValue || '-')
+        const subValueSpan = h('span', { class: 'kanban-indicator-cell-sub-val' }, subValue || '-')
         if (subTips) {
             subTipsLine.push(...tN(subTips, { value: subValueSpan }))
         } else {
             subTipsLine.push(subValueSpan)
         }
+        if (subInfo) {
+            const tooltip = h(ElTooltip, { content: subInfo, placement: "bottom" }, () => h(ElIcon, () => h(InfoFilled)))
+            subTipsLine.push(h('span', { class: 'kanban-indicator-cell-sub-info' }, tooltip))
+        }
     } else {
         subTipsLine.push('')
     }
-    children.push(h('div', { class: 'indicator-sub-tip' }, subTipsLine))
+    children.push(h('div', { class: 'kanban-indicator-cell-sub-tip' }, subTipsLine))
     return children
 }
 
@@ -45,9 +53,10 @@ const _default = defineComponent({
         mainValue: String,
         subTips: Function as PropType<I18nKey>,
         subValue: String,
+        subInfo: String,
     },
     setup(props) {
-        return () => h('div', { class: 'analysis-indicator-container' }, renderChildren(props))
+        return () => h('div', { class: 'kanban-indicator-cell-container' }, renderChildren(props))
     }
 })
 
diff --git a/src/app/components/common/kanban/indicator-row.sass b/src/app/components/common/kanban/indicator-row.sass
new file mode 100644
index 00000000..05304fe8
--- /dev/null
+++ b/src/app/components/common/kanban/indicator-row.sass
@@ -0,0 +1,5 @@
+.kanban-indicator-row
+    height: 140px
+    margin-bottom: 0px !important
+    >.el-col:not(:first-child)
+        border-left: 1px var(--el-border-color) var(--el-border-style)
diff --git a/src/app/components/common/kanban/indicator-row.ts b/src/app/components/common/kanban/indicator-row.ts
new file mode 100644
index 00000000..13bc4f9b
--- /dev/null
+++ b/src/app/components/common/kanban/indicator-row.ts
@@ -0,0 +1,11 @@
+import { ElRow } from "element-plus"
+import { defineComponent, h } from "vue"
+import "./indicator-row.sass"
+
+const _default = defineComponent({
+    setup: (_, ctx) => {
+        return () => h(ElRow, { class: "kanban-indicator-row" }, ctx.slots)
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/common/time-format-filter-item.ts b/src/app/components/common/time-format-filter-item.ts
new file mode 100644
index 00000000..1e50fe2a
--- /dev/null
+++ b/src/app/components/common/time-format-filter-item.ts
@@ -0,0 +1,31 @@
+import { PropType, defineComponent, h, ref } from "vue"
+import SelectFilterItem from "./select-filter-item"
+import { t } from "@app/locale"
+
+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)
+}
+
+const _default = defineComponent({
+    emits: {
+        change: (_: timer.app.TimeFormat) => true
+    },
+    props: {
+        defaultValue: String as PropType<timer.app.TimeFormat>
+    },
+    setup: ({ defaultValue }, ctx) => {
+        const timeFormat = ref(defaultValue || 'default')
+
+        return () => h(SelectFilterItem, {
+            historyName: 'timeFormat',
+            defaultValue: timeFormat.value,
+            options: TIME_FORMAT_LABELS,
+            onSelect: (newVal: timer.app.TimeFormat) => ctx.emit('change', timeFormat.value = newVal)
+        })
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/dashboard/components/indicator/index.ts b/src/app/components/dashboard/components/indicator/index.ts
index b76b6697..cef41648 100644
--- a/src/app/components/dashboard/components/indicator/index.ts
+++ b/src/app/components/dashboard/components/indicator/index.ts
@@ -9,11 +9,11 @@ import PeriodDatabase from "@db/period-database"
 import statService from "@service/stat-service"
 import { getStartOfDay, MILL_PER_DAY, MILL_PER_MINUTE } from "@util/time"
 import { defineComponent, h, ref, Ref } from "vue"
-import { groupBy } from "@util/array"
 import NumberGrow from "@app/components/common/number-grow"
 import "./style"
 import { tN } from "@app/locale"
 import IndicatorHeaderIcon from "./header-icon"
+import { calcMostPeriodOf2Hours } from "@util/period"
 
 const CONTAINER_ID = "__timer-indicator-container"
 
@@ -36,7 +36,7 @@ function calculateInstallDays(installTime: Date, now: Date): number {
 }
 
 async function query(): Promise<_Value> {
-    const allData: timer.stat.Row[] = await statService.select({ exlcusiveVirtual: true })
+    const allData: timer.stat.Row[] = await statService.select({ exclusiveVirtual: true })
     const hostSet = new Set<string>()
     let visits = 0
     let browsingTime = 0
@@ -46,29 +46,7 @@ async function query(): Promise<_Value> {
         browsingTime += focus
     })
     const periodInfos: timer.period.Result[] = await periodDatabase.getAll()
-    const periodCount = periodInfos?.length || 0
-    // Order [0, 95]
-    const averageTimePerPeriod: { [order: number]: number } = groupBy(periodInfos,
-        p => p.order,
-        (grouped: timer.period.Result[]) => {
-            const periodMills = grouped.map(p => p.milliseconds)
-            if (!periodCount) {
-                return 0
-            }
-            return Math.floor(periodMills.reduce((a, b) => a + b, 0) / periodCount)
-        }
-    )
-    // Merged per 2 hours
-    const averageTimePer2Hours: { [idx: number]: number } = groupBy(Object.entries(averageTimePerPeriod),
-        ([order]) => Math.floor(parseInt(order) / 8),
-        averages => averages.map(a => a[1]).reduce((a, b) => a + b, 0)
-    )
-    // The two most frequent online hours
-    const most2Hour: number = parseInt(
-        Object.entries(averageTimePer2Hours)
-            .sort((a, b) => a[1] - b[1])
-            .reverse()[0]?.[0]
-    )
+    const most2Hour = calcMostPeriodOf2Hours(periodInfos)
 
     const result: _Value = {
         sites: hostSet?.size || 0,
diff --git a/src/app/components/habit/component/chart/index.ts b/src/app/components/habit/component/chart/index.ts
deleted file mode 100644
index 6d43c245..00000000
--- a/src/app/components/habit/component/chart/index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { Ref } from "vue"
-
-import ChartWrapper from "./wrapper"
-import { defineComponent, h, onMounted, ref } from "vue"
-
-export type HabitChartInstance = {
-    render(data: timer.period.Row[], averageByDate: boolean, periodSize: number): void
-}
-
-const _default = defineComponent({
-    name: "HabitChart",
-    setup(_, ctx) {
-        const elRef: Ref<HTMLDivElement> = ref()
-        const wrapper: ChartWrapper = new ChartWrapper()
-        onMounted(() => wrapper.init(elRef.value))
-        const instance: HabitChartInstance = {
-            render: (data, averageByDate, periodSize) => wrapper.render(data, averageByDate, periodSize)
-        }
-        ctx.expose(instance)
-        return () => h('div', {
-            class: 'chart-container',
-            ref: elRef
-        })
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/habit/component/filter.ts b/src/app/components/habit/component/filter.ts
deleted file mode 100644
index d086b99e..00000000
--- a/src/app/components/habit/component/filter.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Copyright (c) 2021 Hengyang Zhang
- * 
- * This software is released under the MIT License.
- * https://opensource.org/licenses/MIT
- */
-
-import type { Ref, PropType } from "vue"
-import type { HabitMessage } from "@i18n/message/app/habit"
-import type { CalendarMessage } from "@i18n/message/common/calendar"
-
-import { ref, h, defineComponent } from "vue"
-import { daysAgo } from "@util/time"
-import { t } from "@app/locale"
-import SwitchFilterItem from "@app/components/common/switch-filter-item"
-import { ElementDatePickerShortcut } from "@src/element-ui/date"
-import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
-import SelectFilterItem from "@app/components/common/select-filter-item"
-
-type ShortCutProp = [label: keyof CalendarMessage['range'], dayAgo: number]
-
-const shortcutProps: ShortCutProp[] = [
-    ["last24Hours", 1],
-    ["last3Days", 3],
-    ["last7Days", 7],
-    ["last15Days", 15],
-    ["last30Days", 30],
-    ["last60Days", 60]
-]
-
-function datePickerShortcut(msg: keyof CalendarMessage['range'], agoOfStart: number): ElementDatePickerShortcut {
-    return {
-        text: t(messages => messages.calendar.range[msg]),
-        value: daysAgo(agoOfStart, 0)
-    }
-}
-
-const SHORTCUTS: ElementDatePickerShortcut[] = shortcutProps.map(([label, dayAgo]) => datePickerShortcut(label, dayAgo))
-const AVERAGE_LABEL = t(msg => msg.habit.average.label)
-
-// [value, label]
-type _SizeOption = [number, keyof HabitMessage['sizes']]
-
-function allOptions(): Record<number, string> {
-    const allOptions = {}
-    const allSizes: _SizeOption[] = [
-        [1, 'fifteen'],
-        [2, 'halfHour'],
-        [4, 'hour'],
-        [8, 'twoHour'],
-    ]
-    allSizes.forEach(([size, msg]) => allOptions[size] = t(root => root.habit.sizes[msg]))
-    return allOptions
-}
-
-const emits = {
-    change: (_option: HabitFilterOption) => true
-}
-
-const _default = defineComponent({
-    name: "HabitFilter",
-    props: {
-        periodSize: Number as PropType<number>,
-        dateRange: Object as PropType<[Date, Date]>,
-        averageByDate: Boolean,
-    },
-    emits,
-    setup(props, ctx) {
-        const periodSize: Ref<number> = ref(props.periodSize || 1)
-        // @ts-ignore
-        const dateRange: Ref<[Date, Date]> = ref(props.dateRange || [null, null])
-        const averageByDate: Ref<boolean> = ref(props.averageByDate || false)
-        function handleChange() {
-            ctx.emit("change", {
-                periodSize: periodSize.value,
-                dateRange: dateRange.value,
-                averageByDate: averageByDate.value
-            })
-        }
-        return () => [
-            // Size select
-            h(SelectFilterItem, {
-                historyName: 'periodSize',
-                defaultValue: periodSize.value?.toString?.(),
-                options: allOptions(),
-                onSelect(val: string) {
-                    const newPeriodSize = parseInt(val)
-                    if (isNaN(newPeriodSize)) {
-                        return
-                    }
-                    periodSize.value = newPeriodSize
-                    handleChange()
-                },
-            }),
-            // Date range picker
-            h(DateRangeFilterItem, {
-                clearable: false,
-                disabledDate: (date: Date) => date.getTime() > new Date().getTime(),
-                defaultRange: dateRange.value,
-                shortcuts: SHORTCUTS,
-                onChange: (newVal: [Date, Date]) => {
-                    dateRange.value = newVal
-                    handleChange()
-                }
-            }),
-            // Average by date
-            h(SwitchFilterItem, {
-                historyName: 'average',
-                label: AVERAGE_LABEL,
-                defaultValue: averageByDate.value,
-                onChange: (newVal: boolean) => {
-                    averageByDate.value = newVal
-                    handleChange()
-                }
-            })
-        ]
-    }
-})
-
-export default _default
\ No newline at end of file
diff --git a/src/app/components/habit/components/context.ts b/src/app/components/habit/components/context.ts
new file mode 100644
index 00000000..a374facd
--- /dev/null
+++ b/src/app/components/habit/components/context.ts
@@ -0,0 +1,13 @@
+import { Ref } from "vue"
+import { FilterOption } from "../type"
+import { provideWithNs, useProviderWithNs } from "@app/util/provider"
+
+type Context = {
+    filter: Ref<FilterOption>
+}
+
+const NAMESPACE = 'habit'
+
+export const initProvider = (filter: Ref<FilterOption>) => provideWithNs<Context>(NAMESPACE, { filter })
+
+export const useHabitFilter = (): Ref<FilterOption> => useProviderWithNs<Context>(NAMESPACE, "filter").filter
\ No newline at end of file
diff --git a/src/app/components/habit/components/filter.ts b/src/app/components/habit/components/filter.ts
new file mode 100644
index 00000000..1ff0b49b
--- /dev/null
+++ b/src/app/components/habit/components/filter.ts
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { Ref, PropType } from "vue"
+import type { CalendarMessage } from "@i18n/message/common/calendar"
+
+import { ref, h, defineComponent, watch } from "vue"
+import { daysAgo } from "@util/time"
+import { t } from "@app/locale"
+import { ElementDatePickerShortcut } from "@src/element-ui/date"
+import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
+import TimeFormatFilterItem from "@app/components/common/time-format-filter-item"
+import { FilterOption } from "../type"
+
+type ShortCutProp = [label: keyof CalendarMessage['range'], dayAgo: number]
+
+const shortcutProps: ShortCutProp[] = [
+    ["last24Hours", 1],
+    ["last3Days", 3],
+    ["last7Days", 7],
+    ["last15Days", 15],
+    ["last30Days", 30],
+    ["last60Days", 60]
+]
+
+function datePickerShortcut(msg: keyof CalendarMessage['range'], agoOfStart: number): ElementDatePickerShortcut {
+    return {
+        text: t(messages => messages.calendar.range[msg]),
+        value: daysAgo(agoOfStart, 0)
+    }
+}
+
+const SHORTCUTS: ElementDatePickerShortcut[] = shortcutProps.map(([label, dayAgo]) => datePickerShortcut(label, dayAgo))
+
+const _default = defineComponent({
+    name: "HabitFilter",
+    props: {
+        defaultValue: Object as PropType<FilterOption>,
+    },
+    emits: {
+        change: (_option: FilterOption) => true
+    },
+    setup(props, ctx) {
+        const dateRange: Ref<[Date, Date]> = ref(props.defaultValue?.dateRange || [null, null])
+        const timeFormat: Ref<timer.app.TimeFormat> = ref(props.defaultValue?.timeFormat)
+
+        watch(
+            [dateRange, timeFormat],
+            () => ctx.emit("change", {
+                dateRange: dateRange.value,
+                timeFormat: timeFormat.value,
+            })
+        )
+
+        return () => [
+            h(DateRangeFilterItem, {
+                clearable: false,
+                disabledDate: (date: Date) => date.getTime() > new Date().getTime(),
+                defaultRange: dateRange.value,
+                shortcuts: SHORTCUTS,
+                onChange: (newVal: [Date, Date]) => dateRange.value = newVal
+            }),
+            h(TimeFormatFilterItem, {
+                defaultValue: props.defaultValue?.timeFormat,
+                onChange: (newVal: timer.app.TimeFormat) => timeFormat.value = newVal
+            }),
+        ]
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/habit/component/chart/wrapper.ts b/src/app/components/habit/components/period/bar-wrapper.ts
similarity index 55%
rename from src/app/components/habit/component/chart/wrapper.ts
rename to src/app/components/habit/components/period/bar-wrapper.ts
index d71b8d94..6377781d 100644
--- a/src/app/components/habit/component/chart/wrapper.ts
+++ b/src/app/components/habit/components/period/bar-wrapper.ts
@@ -8,53 +8,26 @@
 import type { ECharts } from "echarts/core"
 import type { ComposeOption } from "echarts/core"
 import type { BarSeriesOption } from "echarts/charts"
-import type { GridComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption } from "echarts/components"
+import type { GridComponentOption, TooltipComponentOption } from "echarts/components"
 
 import { use, init } from "@echarts/core"
 import BarChart from "@echarts/chart/bar"
 import SVGRenderer from "@echarts/svg-renderer"
-import TitleComponent from "@echarts/component/title"
 import TooltipComponent from "@echarts/component/tooltip"
-import ToolboxComponent from "@echarts/component/toolbox"
 import GridComponent from "@echarts/component/grid"
-
-use([BarChart, SVGRenderer, TitleComponent, TooltipComponent, ToolboxComponent, GridComponent])
-
-import { formatPeriodCommon, formatTime, MILL_PER_DAY } from "@util/time"
+import { formatPeriodCommon, formatTime } from "@util/time"
 import { t } from "@app/locale"
-import { getPrimaryTextColor, getSecondaryTextColor } from "@util/style"
-import { after, keyOf, PERIODS_PER_DATE, rowOf, startOrderOfRow } from "@util/period"
+import { getPrimaryTextColor } from "@util/style"
+import { averageByDay } from "./common"
+
+use([BarChart, SVGRenderer, TooltipComponent, GridComponent])
 
 type EcOption = ComposeOption<
     | BarSeriesOption
     | GridComponentOption
-    | TitleComponentOption
-    | ToolboxComponentOption
     | TooltipComponentOption
 >
 
-function averageByDay(data: timer.period.Row[], periodSize: number): timer.period.Row[] {
-    const rangeStart = data[0]?.startTime
-    const rangeEnd = data[data.length - 1]?.endTime
-    const dateNum = (rangeEnd.getTime() - rangeStart.getTime()) / MILL_PER_DAY
-    const map: Map<number, number> = new Map()
-    data.forEach(item => {
-        const key = Math.floor(startOrderOfRow(item) / periodSize)
-        const val = map.get(key) || 0
-        map.set(key, val + item.milliseconds)
-    })
-    const result = []
-    let period = keyOf(new Date(), 0)
-    for (let i = 0; i < PERIODS_PER_DATE / periodSize; i++) {
-        const key = period.order / periodSize
-        const val = map.get(key) || 0
-        const averageMill = Math.round(val / dateNum)
-        result.push(rowOf(after(period, periodSize - 1), periodSize, averageMill))
-        period = after(period, periodSize)
-    }
-    return result
-}
-
 function formatXAxis(ts: number) {
     const date = new Date(ts)
     if (date.getHours() === 0 && date.getMinutes() === 0) {
@@ -64,7 +37,7 @@ function formatXAxis(ts: number) {
     }
 }
 
-function formatTimeOfEchart(params: any, averageByDate: boolean): string {
+function formatTimeOfEcharts(params: any, averageByDate: boolean): string {
     const format = params instanceof Array ? params[0] : params
     const { value, data } = format
     const milliseconds = data?.[4] || 0
@@ -74,15 +47,14 @@ function formatTimeOfEchart(params: any, averageByDate: boolean): string {
     return `${formatPeriodCommon(Math.floor(milliseconds))}<br/>${start}-${end}`
 }
 
-const TITLE = t(msg => msg.habit.chart.title)
-const Y_AXIAS_MIN = t(msg => msg.habit.chart.yAxisMin)
-const Y_AXIAS_HOUR = t(msg => msg.habit.chart.yAxisHour)
+const Y_AXIS_MIN = t(msg => msg.habit.period.yAxisMin)
+const Y_AXIS_HOUR = t(msg => msg.habit.period.yAxisHour)
 
-function getYAxiasName(periodSize: number) {
-    return periodSize === 8 ? Y_AXIAS_HOUR : Y_AXIAS_MIN
+function getYAxisName(periodSize: number) {
+    return periodSize === 8 ? Y_AXIS_HOUR : Y_AXIS_MIN
 }
 
-function getYAxiasValue(milliseconds: number, periodSize: number) {
+function getYAxisValue(milliseconds: number, periodSize: number) {
     const seconds = Math.floor(milliseconds / 1000)
     const minutes = Number.parseFloat((seconds / 60).toFixed(1))
     const hours = Number.parseFloat((minutes / 60).toFixed(1))
@@ -96,7 +68,7 @@ const cvt2Item = (row: timer.period.Row, periodSize: number): BarItem => {
     const endTime = row.endTime.getTime()
     const x = (startTime + endTime) / 2
     const milliseconds = row.milliseconds
-    return [x, getYAxiasValue(milliseconds, periodSize), startTime, endTime, milliseconds]
+    return [x, getYAxisValue(milliseconds, periodSize), startTime, endTime, milliseconds]
 }
 
 function generateOptions(data: timer.period.Row[], averageByDate: boolean, periodSize: number): EcOption {
@@ -106,28 +78,16 @@ function generateOptions(data: timer.period.Row[], averageByDate: boolean, perio
     const xAxisMax = periodData[periodData.length - 1]?.endTime?.getTime()
     const xAxisAxisLabelFormatter = averageByDate ? '{HH}:{mm}' : formatXAxis
     const textColor = getPrimaryTextColor()
-    const secondaryTextColor = getSecondaryTextColor()
+
     return {
-        title: {
-            text: TITLE,
-            textStyle: { color: textColor },
-            left: 'center'
-        },
         tooltip: {
-            formatter: (params: any) => formatTimeOfEchart(params, averageByDate)
+            formatter: (params: any) => formatTimeOfEcharts(params, averageByDate)
         },
-        toolbox: {
-            show: true,
-            feature: {
-                saveAsImage: {
-                    show: true,
-                    title: t(msg => msg.habit.chart.saveAsImageTitle),
-                    name: TITLE, // file name
-                    excludeComponents: ['toolbox'],
-                    pixelRatio: 1,
-                    iconStyle: { borderColor: secondaryTextColor }
-                }
-            }
+        grid: {
+            top: 35,
+            bottom: 30,
+            left: 100,
+            right: 100,
         },
         xAxis: {
             axisLabel: { formatter: xAxisAxisLabelFormatter, color: textColor },
@@ -137,7 +97,7 @@ function generateOptions(data: timer.period.Row[], averageByDate: boolean, perio
             max: xAxisMax
         },
         yAxis: {
-            name: getYAxiasName(periodSize),
+            name: getYAxisName(periodSize),
             nameTextStyle: { color: textColor },
             type: 'value',
             axisLabel: { color: textColor },
diff --git a/src/app/components/habit/components/period/bar.ts b/src/app/components/habit/components/period/bar.ts
new file mode 100644
index 00000000..c195a061
--- /dev/null
+++ b/src/app/components/habit/components/period/bar.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { Ref } from "vue"
+
+import BarWrapper from "./bar-wrapper"
+import { defineComponent, h, onMounted, ref, watch } from "vue"
+import { usePeriodFilter, usePeriodRows } from "./context"
+
+const CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
+    width: "100%",
+    height: "100%",
+}
+
+const _default = defineComponent({
+    setup() {
+        const rows = usePeriodRows()
+        const filter = usePeriodFilter()
+
+        const elRef: Ref<HTMLDivElement> = ref()
+        const wrapper: BarWrapper = new BarWrapper()
+        onMounted(() => wrapper.init(elRef.value))
+
+        watch([filter, rows], () => {
+            const { periodSize, average } = filter.value || {}
+            wrapper.render(rows.value, average, periodSize)
+        })
+
+        return () => h('div', {
+            style: CONTAINER_STYLE,
+            ref: elRef
+        })
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/habit/components/period/common.ts b/src/app/components/habit/components/period/common.ts
new file mode 100644
index 00000000..a8595390
--- /dev/null
+++ b/src/app/components/habit/components/period/common.ts
@@ -0,0 +1,25 @@
+import { PERIODS_PER_DATE, after, keyOf, rowOf, startOrderOfRow } from "@util/period"
+import { MILL_PER_DAY } from "@util/time"
+
+export function averageByDay(data: timer.period.Row[], periodSize: number): timer.period.Row[] {
+    if (!data?.length) return []
+    const rangeStart = data[0]?.startTime
+    const rangeEnd = data[data.length - 1]?.endTime
+    const dateNum = (rangeEnd.getTime() - rangeStart.getTime()) / MILL_PER_DAY
+    const map: Map<number, number> = new Map()
+    data.forEach(item => {
+        const key = Math.floor(startOrderOfRow(item) / periodSize)
+        const val = map.get(key) || 0
+        map.set(key, val + item.milliseconds)
+    })
+    const result = []
+    let period = keyOf(new Date(), 0)
+    for (let i = 0; i < PERIODS_PER_DATE / periodSize; i++) {
+        const key = period.order / periodSize
+        const val = map.get(key) || 0
+        const averageMill = Math.round(val / dateNum)
+        result.push(rowOf(after(period, periodSize - 1), periodSize, averageMill))
+        period = after(period, periodSize)
+    }
+    return result
+}
\ No newline at end of file
diff --git a/src/app/components/habit/components/period/context.ts b/src/app/components/habit/components/period/context.ts
new file mode 100644
index 00000000..efe0eede
--- /dev/null
+++ b/src/app/components/habit/components/period/context.ts
@@ -0,0 +1,25 @@
+import { provideWithNs, useProviderWithNs } from "@app/util/provider"
+import { Ref } from "vue"
+import { FilterOption } from "./filter"
+
+type Context = {
+    keyRange: Ref<timer.period.KeyRange>
+    rows: Ref<timer.period.Row[]>
+    filter: Ref<FilterOption>
+}
+
+const NAMESPACE = 'habitPeriod'
+
+export const initProvider = (
+    keyRange: Ref<timer.period.KeyRange>,
+    rows: Ref<timer.period.Row[]>,
+    filter: Ref<FilterOption>,
+) => provideWithNs<Context>(NAMESPACE, {
+    keyRange, rows, filter
+})
+
+export const usePeriodRange = (): Ref<timer.period.KeyRange> => useProviderWithNs<Context>(NAMESPACE, "keyRange").keyRange
+
+export const usePeriodRows = (): Ref<timer.period.Row[]> => useProviderWithNs<Context>(NAMESPACE, "rows").rows
+
+export const usePeriodFilter = (): Ref<FilterOption> => useProviderWithNs<Context>(NAMESPACE, "filter").filter
diff --git a/src/app/components/habit/components/period/filter.ts b/src/app/components/habit/components/period/filter.ts
new file mode 100644
index 00000000..8be35095
--- /dev/null
+++ b/src/app/components/habit/components/period/filter.ts
@@ -0,0 +1,71 @@
+import SelectFilterItem from '@app/components/common/select-filter-item';
+import SwitchFilterItem from '@app/components/common/switch-filter-item';
+import { t } from '@app/locale';
+import { HabitMessage } from '@i18n/message/app/habit';
+import { PropType, defineComponent, h, ref, watch } from 'vue';
+
+// [value, label]
+type _SizeOption = [number, keyof HabitMessage['period']['sizes']];
+
+function allOptions(): Record<number, string> {
+    const allOptions = {};
+    const allSizes: _SizeOption[] = [
+        [1, 'fifteen'],
+        [2, 'halfHour'],
+        [4, 'hour'],
+        [8, 'twoHour'],
+    ];
+    allSizes.forEach(
+        ([size, msg]) => (allOptions[size] = t((root) => root.habit.period.sizes[msg]))
+    );
+    return allOptions;
+}
+
+const AVERAGE_LABEL = t((msg) => msg.habit.period.averageLabel);
+
+export type FilterOption = {
+    periodSize: number;
+    average: boolean;
+};
+
+const _default = defineComponent({
+    props: {
+        defaultValue: Object as PropType<FilterOption>,
+    },
+    emits: {
+        change: (_newVal: FilterOption) => true,
+    },
+    setup(prop, ctx) {
+        const periodSize = ref(prop.defaultValue?.periodSize || 1);
+        const average = ref(prop.defaultValue?.average || false);
+        watch([periodSize, average], () =>
+            ctx.emit('change', {
+                periodSize: periodSize.value,
+                average: average.value,
+            })
+        );
+
+        return () => [
+            // Size select
+            h(SelectFilterItem, {
+                historyName: 'periodSize',
+                defaultValue: periodSize.value?.toString?.(),
+                options: allOptions(),
+                onSelect(val: string) {
+                    const newPeriodSize = parseInt(val);
+                    if (isNaN(newPeriodSize)) return;
+                    periodSize.value = newPeriodSize;
+                },
+            }),
+            // Average by date
+            h(SwitchFilterItem, {
+                historyName: 'average',
+                label: AVERAGE_LABEL,
+                defaultValue: average.value,
+                onChange: (newVal: boolean) => (average.value = newVal),
+            }),
+        ];
+    },
+});
+
+export default _default;
diff --git a/src/app/components/habit/components/period/index.ts b/src/app/components/habit/components/period/index.ts
new file mode 100644
index 00000000..001c9b8b
--- /dev/null
+++ b/src/app/components/habit/components/period/index.ts
@@ -0,0 +1,157 @@
+import { KanbanCard, KanbanIndicatorCell } from "@app/components/common/kanban"
+import { t } from "@app/locale"
+import { PropType, Ref, defineComponent, h, watch, ref, computed, onMounted } from "vue"
+import Filter, { FilterOption } from "./filter"
+import BarChart from "./bar"
+import "./style.sass"
+import { merge } from "@service/components/period-calculator"
+import { periodFormatter } from "@app/util/time"
+import periodService from "@service/period-service"
+import { useHabitFilter } from "../context"
+import { daysAgo, formatTime, isSameDay } from "@util/time"
+import { MAX_PERIOD_ORDER, keyBefore, keyOf } from "@util/period"
+import { initProvider } from "./context"
+import { averageByDay } from "./common"
+
+type Summary = {
+    favorite: {
+        period: string
+        average: number
+    }
+    longestIdle: {
+        length: string
+        period: string
+    }
+}
+
+const computeSummary = (rows: timer.period.Row[], periodSize: number): Summary => {
+    const averaged = averageByDay(rows, periodSize)
+    const favoriteRow = averaged.sort((b, a) => a.milliseconds - b.milliseconds)[0]
+    let favoritePeriod = '-'
+    if (favoriteRow) {
+        const start = favoriteRow.startTime
+        const end = favoriteRow.endTime
+        favoritePeriod = `${formatTime(start, "{h}:{i}")}-${formatTime(end, "{h}:{i}")}`
+    }
+
+    let maxIdle: [timer.period.Row, timer.period.Row, number] = [, , 0]
+
+    let idleStart: timer.period.Row = null, idleEnd: timer.period.Row = null
+    rows.forEach(r => {
+        if (r.milliseconds) {
+            if (!idleStart) return
+            const newEmptyTs = idleEnd.endTime.getTime() - idleStart.endTime.getTime()
+            if (newEmptyTs > maxIdle[2]) {
+                maxIdle = [idleStart, idleEnd, newEmptyTs]
+            }
+            idleStart = idleEnd = null
+        } else {
+            idleEnd = r
+            !idleStart && (idleStart = idleEnd)
+        }
+    })
+
+    const [start, end] = maxIdle
+
+    let idleLength = '-'
+    let idlePeriod = null
+    if (start && end) {
+        idleLength = periodFormatter(end.endTime.getTime() - start.startTime.getTime(), 'hour')
+        const format = t(msg => msg.calendar.simpleTimeFormat)
+        const startTime = formatTime(start.startTime, format)
+        const endTime = formatTime(end.endTime, format)
+        idlePeriod = startTime + '-' + endTime
+    }
+
+    return {
+        favorite: {
+            period: favoritePeriod,
+            average: favoriteRow?.milliseconds,
+        },
+        longestIdle: {
+            length: idleLength,
+            period: idlePeriod,
+        }
+    }
+}
+
+const renderIndicator = (summary: Summary, timeFormat: timer.app.TimeFormat) => {
+    const {
+        favorite: { period: favoritePeriod = null, average = null },
+        longestIdle: { period: idlePeriod, length: idleLength },
+    } = summary || {}
+    return h('div', { class: "col0" }, [
+        h('div', { class: 'indicator-wrapper' }, h(KanbanIndicatorCell, {
+            mainName: t(msg => msg.habit.period.busiest),
+            mainValue: favoritePeriod,
+            subTips: msg => msg.habit.common.focusAverage,
+            subValue: average === null ? '-' : periodFormatter(average, timeFormat),
+        })),
+        h('div', { class: 'indicator-wrapper' }, h(KanbanIndicatorCell, {
+            mainName: t(msg => msg.habit.period.idle),
+            mainValue: idleLength,
+            subTips: () => idlePeriod,
+        }))
+    ])
+}
+
+function computeParam(dateRange: [Date, Date]): timer.period.KeyRange {
+    if (dateRange.length !== 2) dateRange = daysAgo(1, 0)
+    const endDate = typeof dateRange[1] === 'object' ? dateRange[1] : null
+    const startDate = typeof dateRange[0] === 'object' ? dateRange[0] : null
+    const now = new Date()
+    const endIsToday = isSameDay(now, endDate)
+
+    let periodEnd: timer.period.Key, periodStart: timer.period.Key
+    if (endIsToday) {
+        periodEnd = keyOf(now)
+        periodStart = keyOf(startDate, periodEnd.order)
+        periodEnd = keyBefore(periodEnd, 1)
+    } else {
+        periodEnd = keyOf(endDate, MAX_PERIOD_ORDER)
+        periodStart = keyOf(startDate, 0)
+    }
+    return [periodStart, periodEnd]
+}
+
+const _default = defineComponent({
+    props: {
+        result: Array as PropType<timer.period.Result[]>,
+        range: Object as PropType<timer.period.KeyRange>,
+    },
+    setup: () => {
+        const globalFilter = useHabitFilter()
+        const periodRange = computed(() => computeParam(globalFilter.value?.dateRange))
+        const rows: Ref<timer.period.Row[]> = ref([])
+        const filter: Ref<FilterOption> = ref({ periodSize: 1, average: false })
+
+        initProvider(periodRange, rows, filter)
+
+        const fetchRows = async () => {
+            const results = await periodService.list({ periodRange: periodRange.value })
+            const [start, end] = periodRange.value || []
+            const periodSize = filter.value?.periodSize
+            rows.value = merge(results, { start, end, periodSize })
+        }
+
+        watch([periodRange, filter], fetchRows)
+        onMounted(fetchRows)
+
+        const summary = computed(() => computeSummary(rows.value, filter.value?.periodSize))
+
+        return () => h(KanbanCard, {
+            title: t(msg => msg.habit.period.title)
+        }, {
+            filter: () => h(Filter, {
+                defaultValue: filter.value,
+                onChange: newVal => filter.value = newVal
+            }),
+            default: () => h('div', { class: "habit-period-content" }, [
+                renderIndicator(summary.value, globalFilter.value?.timeFormat),
+                h('div', { class: 'col1' }, h(BarChart)),
+            ])
+        })
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/habit/components/period/style.sass b/src/app/components/habit/components/period/style.sass
new file mode 100644
index 00000000..743c6500
--- /dev/null
+++ b/src/app/components/habit/components/period/style.sass
@@ -0,0 +1,17 @@
+.habit-period-content
+    height: 300px
+    display: flex
+    >div
+        display: flex
+    >div:not(:first-child)
+        border-left: var(--timer-kanban-border)
+    .col0
+        flex: 1 1 0
+        flex-direction: column
+        .indicator-wrapper
+            flex: 1
+            width: 100%
+        .indicator-wrapper:not(:first-child)
+            border-top: var(--timer-kanban-border)
+    .col1
+        flex: 3 1 0
diff --git a/src/app/components/habit/components/site/common.ts b/src/app/components/habit/components/site/common.ts
new file mode 100644
index 00000000..d9a51704
--- /dev/null
+++ b/src/app/components/habit/components/site/common.ts
@@ -0,0 +1,45 @@
+import type { TitleComponentOption } from "echarts/components"
+
+import { getSecondaryTextColor } from "@util/style"
+import { generateSiteLabel } from "@util/site"
+import { periodFormatter } from "@app/util/time"
+
+export const generateTitleOption = (text: string): TitleComponentOption => {
+    const secondaryTextColor = getSecondaryTextColor()
+    return {
+        text,
+        textStyle: {
+            color: secondaryTextColor,
+            fontSize: '14px',
+            fontWeight: 'normal',
+        },
+        left: 'center',
+        top: '2%',
+    }
+}
+
+export type SeriesDataItem = {
+    value: number
+    row: timer.stat.Row
+}
+
+export const formatFocusTooltip = (params: [any] | any, timeFormat: timer.app.TimeFormat, splitLine?: boolean): string => {
+    const param = (Array.isArray(params) ? params[0] : params) as { data: SeriesDataItem }
+    const { data } = param || {}
+    const { row } = data || {}
+    const { host, alias, focus = 0 } = row || {}
+    const siteLabel = host ? generateSiteLabel(host, alias) : (alias || 'Unknown')
+    return `${siteLabel}${splitLine ? '<br/>' : ' '}${periodFormatter(focus, timeFormat)}`
+}
+
+export const formatTimeTooltip = (params: [any] | any): string => {
+    const param = (Array.isArray(params) ? params[0] : params) as { data: SeriesDataItem }
+    const { data } = param || {}
+    const { row, value } = data || {}
+    const { host, alias } = row || {}
+    const siteLabel = host ? generateSiteLabel(host, alias) : (alias || 'Unknown')
+    return `${siteLabel}<br/>${value}`
+}
+
+// Not show percentages less than 3 degrees
+export const MIN_PERCENT_OF_PIE = 3 / 360
\ No newline at end of file
diff --git a/src/app/components/habit/components/site/contex.ts b/src/app/components/habit/components/site/contex.ts
new file mode 100644
index 00000000..0028a621
--- /dev/null
+++ b/src/app/components/habit/components/site/contex.ts
@@ -0,0 +1,12 @@
+import { provideWithNs, useProviderWithNs } from "@app/util/provider"
+import { Ref } from "vue"
+
+type Context = {
+    rows: Ref<timer.stat.Row[]>
+}
+
+const NAMESPACE = 'habitSite'
+
+export const initProvider = (rows: Ref<timer.stat.Row[]>) => provideWithNs<Context>(NAMESPACE, { rows })
+
+export const useRows = (): Ref<timer.stat.Row[]> => useProviderWithNs<Context>(NAMESPACE, "rows").rows
\ No newline at end of file
diff --git a/src/app/components/habit/components/site/focus-pie-wrapper.ts b/src/app/components/habit/components/site/focus-pie-wrapper.ts
new file mode 100644
index 00000000..5005167e
--- /dev/null
+++ b/src/app/components/habit/components/site/focus-pie-wrapper.ts
@@ -0,0 +1,72 @@
+import type { ECharts, 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 PieChart from "@echarts/chart/pie"
+import SVGRenderer from "@echarts/svg-renderer"
+import TooltipComponent from "@echarts/component/tooltip"
+import GridComponent from "@echarts/component/grid"
+import TitleComponent from "@echarts/component/title"
+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"
+
+use([PieChart, SVGRenderer, TooltipComponent, GridComponent, TitleComponent])
+
+type EcOption = ComposeOption<
+    | GridComponentOption
+    | TooltipComponentOption
+    | TitleComponentOption
+    | PieSeriesOption
+>
+
+const generateOption = (rows: timer.stat.Row[], timeFormat: timer.app.TimeFormat): EcOption => {
+    rows = mergeDate(rows).sort((a, b) => b.focus - a.focus)
+    const total = sum(rows.map(r => r.focus))
+    const realRows: timer.stat.Row[] = []
+    const tailRows: timer.stat.Row[] = []
+    rows.forEach(r => {
+        if (r.focus > MIN_PERCENT_OF_PIE * total) {
+            realRows.push(r)
+        } else {
+            tailRows.push(r)
+        }
+    })
+    const leftFocus = sum(tailRows.map(r => r.focus))
+    if (leftFocus) {
+        const alias = t(msg => msg.habit.site.otherLabel, { count: tailRows.length || 0 })
+        realRows.push({ host: null, alias, focus: leftFocus, time: 0, mergedHosts: [], virtual: false })
+    }
+    const title = t(msg => msg.habit.site.focusPieTitle)
+    return {
+        title: generateTitleOption(title),
+        series: [{
+            type: "pie",
+            center: ["50%", "60%"],
+            startAngle: 90,
+            data: realRows.map(row => ({ value: row.focus, row })),
+            label: {
+                show: false,
+            }
+        }],
+        tooltip: {
+            show: true,
+            formatter: (params: [any]) => formatFocusTooltip(params, timeFormat, true)
+        },
+    }
+}
+
+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)
+    }
+}
diff --git a/src/app/components/habit/components/site/focus-pie.ts b/src/app/components/habit/components/site/focus-pie.ts
new file mode 100644
index 00000000..60e2e686
--- /dev/null
+++ b/src/app/components/habit/components/site/focus-pie.ts
@@ -0,0 +1,28 @@
+import { Ref, defineComponent, h, onMounted, ref, watch } from "vue"
+import FocusPieWrapper from "./focus-pie-wrapper"
+import { useHabitFilter } from "../context"
+import { useRows } from "./contex"
+
+const CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
+    width: "100%",
+    height: "100%",
+}
+
+const _default = defineComponent({
+    setup() {
+        const elRef: Ref<HTMLDivElement> = ref()
+        const wrapper: FocusPieWrapper = new FocusPieWrapper()
+        const filter = useHabitFilter()
+        const rows = useRows()
+
+        onMounted(() => wrapper.init(elRef.value))
+        watch([rows, filter], () => wrapper.render(rows.value, filter.value?.timeFormat))
+
+        return () => h("div", {
+            style: CONTAINER_STYLE,
+            ref: elRef,
+        })
+    },
+})
+
+export default _default
diff --git a/src/app/components/habit/components/site/histogram-wrapper.ts b/src/app/components/habit/components/site/histogram-wrapper.ts
new file mode 100644
index 00000000..1d4e151c
--- /dev/null
+++ b/src/app/components/habit/components/site/histogram-wrapper.ts
@@ -0,0 +1,110 @@
+import type { ECharts, 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 BarChart from "@echarts/chart/bar"
+import SVGRenderer from "@echarts/svg-renderer"
+import TooltipComponent from "@echarts/component/tooltip"
+import GridComponent from "@echarts/component/grid"
+import TitleComponent from "@echarts/component/title"
+import { mergeDate } from "@service/stat-service/merge"
+import { t } from "@app/locale"
+import { SeriesDataItem, formatFocusTooltip, generateTitleOption } from "./common"
+
+use([BarChart, SVGRenderer, TooltipComponent, GridComponent, TitleComponent])
+
+type EcOption = ComposeOption<
+    | BarSeriesOption
+    | GridComponentOption
+    | TooltipComponentOption
+    | TitleComponentOption
+>
+
+const MARGIN_LEFT_P = 8
+const MARGIN_RIGHT_P = 4
+const TOP_NUM = 7
+
+async function generateOption(rows: timer.stat.Row[] = [], timeFormat: timer.app.TimeFormat, dom: HTMLElement): Promise<EcOption> {
+    const merged = mergeDate(rows)
+    const top10 = merged.sort((a, b) => b.focus - a.focus).splice(0, TOP_NUM).reverse()
+    const max = top10[top10.length - 1]?.focus ?? 0
+    const hosts = top10.map(r => r.alias || r.host)
+
+    const domW = dom.getBoundingClientRect().width
+    const chartW = domW * (100 - MARGIN_LEFT_P - MARGIN_RIGHT_P) / 100
+
+    const title = t(msg => msg.habit.site.histogramTitle, { n: TOP_NUM })
+
+    return {
+        title: generateTitleOption(title),
+        grid: {
+            left: `${MARGIN_LEFT_P}%`,
+            containLabel: true,
+            right: `${MARGIN_RIGHT_P}%`,
+            top: "12%",
+            bottom: '4%',
+        },
+        tooltip: {
+            trigger: "axis",
+            axisPointer: { type: "shadow" },
+            formatter: (val: [any]) => formatFocusTooltip(val, timeFormat, true),
+        },
+        xAxis: {
+            type: "value",
+            minInterval: 1,
+            axisLabel: { show: false },
+            splitLine: { show: false },
+            min: 0,
+            max: max,
+        },
+        yAxis: {
+            type: "category",
+            data: hosts,
+            axisLabel: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+            },
+        },
+        series: [{
+            type: "bar",
+            data: top10.map(row => {
+                const { focus: value = 0 } = row || {}
+                const labelW = (value / max) * chartW - 8
+                return {
+                    value, row,
+                    label: { show: labelW >= 50, width: labelW },
+                }
+            }),
+            label: {
+                position: 'insideRight',
+                overflow: "truncate",
+                ellipsis: '...',
+                minMargin: 5,
+                formatter: (param: any) => {
+                    const { row } = (param?.data || {}) as SeriesDataItem
+                    const { host, alias } = row
+                    return alias || host
+                },
+            }
+        }]
+    }
+}
+
+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)
+    }
+}
diff --git a/src/app/components/habit/components/site/histogram.ts b/src/app/components/habit/components/site/histogram.ts
new file mode 100644
index 00000000..538a3520
--- /dev/null
+++ b/src/app/components/habit/components/site/histogram.ts
@@ -0,0 +1,28 @@
+import { Ref, defineComponent, h, onMounted, ref, watch } from "vue"
+import HistogramWrapper from "./histogram-wrapper"
+import { useRows } from "./contex"
+import { useHabitFilter } from "../context"
+
+const CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
+    width: "100%",
+    height: "100%",
+}
+
+const _default = defineComponent({
+    setup() {
+        const elRef: Ref<HTMLDivElement> = ref()
+        const wrapper: HistogramWrapper = new HistogramWrapper()
+        const rows = useRows()
+        const filter = useHabitFilter()
+
+        onMounted(() => wrapper.init(elRef.value))
+        watch([rows, filter], () => wrapper.render(rows.value, filter.value?.timeFormat))
+
+        return () => h("div", {
+            style: CONTAINER_STYLE,
+            ref: elRef,
+        })
+    },
+})
+
+export default _default
diff --git a/src/app/components/habit/components/site/index.ts b/src/app/components/habit/components/site/index.ts
new file mode 100644
index 00000000..a5d90aa3
--- /dev/null
+++ b/src/app/components/habit/components/site/index.ts
@@ -0,0 +1,114 @@
+import { Ref, computed, defineComponent, h, onMounted, ref, watch } from "vue"
+import { t } from "@app/locale"
+import { sum } from "@util/array"
+import { KanbanCard, KanbanIndicatorCell } from "@app/components/common/kanban"
+import HistogramChart from "./histogram"
+import FocusPieChart from "./focus-pie"
+import TimePieChart from "./time-pie"
+import "./style.sass"
+import { useHabitFilter } from "../context"
+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"
+
+type Summary = {
+    focus: {
+        total: number
+        average: number
+    }
+    count: {
+        site: number
+        time: number
+        siteAverage: number
+    }
+    exclusiveToday4Average: boolean
+}
+
+const computeAverageLen = (dateRange: [Date, Date] = [null, null]): [number, boolean, string] => {
+    const [start, end] = dateRange
+    if (!end) return [0, false, null]
+    if (isSameDay(start, end)) return [1, false, null]
+    const dateDiff = getDayLength(start, end)
+    const endIsTody = isSameDay(end, new Date())
+    if (endIsTody) {
+        return [dateDiff - 1, true, formatTime(end, "{y}{m}{d}")]
+    } else {
+        return [dateDiff, false, null]
+    }
+}
+
+const computeSummary = (rows: timer.stat.Row[] = [], filter: FilterOption): Summary => {
+    const [averageLen, exclusiveToday4Average, exclusiveDate] = computeAverageLen(filter?.dateRange)
+    const totalFocus = sum(rows.map(r => r.focus))
+    const totalFocus4Average = exclusiveDate ? sum(rows.filter(r => r.date !== exclusiveDate).map(r => r.focus)) : totalFocus
+    const totalTime = sum(rows.map(r => r.time))
+    const totalSite = new Set(rows.map(row => row.host)).size
+    const totalSite4Average = exclusiveDate ? rows.filter(r => r.date !== exclusiveDate).length : rows.length
+
+    return {
+        focus: {
+            total: totalFocus,
+            average: averageLen ? totalFocus4Average / averageLen : 0,
+        },
+        count: {
+            time: totalTime,
+            site: totalSite,
+            siteAverage: averageLen ? totalSite4Average / averageLen : 0,
+        },
+        exclusiveToday4Average,
+    }
+}
+
+const renderIndicator = (summary: Summary, timeFormat: timer.app.TimeFormat) => {
+    const {
+        focus: { total: focusTotal, average: focusAverage } = {},
+        count: { time, site, siteAverage },
+        exclusiveToday4Average,
+    } = summary
+    return h('div', { class: "col0" }, [
+        h('div', { class: 'indicator-wrapper' }, h(KanbanIndicatorCell, {
+            mainName: t(msg => msg.analysis.common.focusTotal),
+            mainValue: focusTotal ? periodFormatter(focusTotal, timeFormat) : '-',
+            subTips: msg => msg.habit.common.focusAverage,
+            subValue: focusAverage ? periodFormatter(focusAverage, timeFormat) : '-',
+            subInfo: exclusiveToday4Average ? t(msg => msg.habit.site.exclusiveToday) : null,
+        })),
+        h('div', { class: 'indicator-wrapper' }, h(KanbanIndicatorCell, {
+            mainName: t(msg => msg.habit.site.countTotal),
+            mainValue: [time ? `${time}` : '-', site ? `${site}` : '-'].join(" / "),
+            subTips: msg => msg.habit.site.siteAverage,
+            subValue: siteAverage?.toFixed(0) || '-',
+            subInfo: exclusiveToday4Average ? t(msg => msg.habit.site.exclusiveToday) : null,
+        }))
+    ])
+}
+
+const _default = defineComponent({
+    setup: () => {
+        const rows: Ref<timer.stat.Row[]> = ref([])
+        initProvider(rows)
+
+        const filter = useHabitFilter()
+        const summary = computed(() => computeSummary(rows.value, filter.value))
+
+        const fetchRows = async () => {
+            rows.value = await statService.select({ exclusiveVirtual: true, date: filter.value?.dateRange }, true)
+        }
+
+        onMounted(fetchRows)
+        watch(filter, fetchRows)
+
+        return () => h(KanbanCard, {
+            title: t(msg => msg.habit.site.title)
+        }, () => h('div', { class: "habit-site-content" }, [
+            renderIndicator(summary.value, filter.value?.timeFormat),
+            h('div', { class: 'col1' }, h(HistogramChart)),
+            h('div', { class: 'col2' }, h(FocusPieChart)),
+            h('div', { class: 'col3' }, h(TimePieChart)),
+        ]))
+    }
+})
+
+export default _default
\ No newline at end of file
diff --git a/src/app/components/habit/components/site/style.sass b/src/app/components/habit/components/site/style.sass
new file mode 100644
index 00000000..c9d8cc36
--- /dev/null
+++ b/src/app/components/habit/components/site/style.sass
@@ -0,0 +1,21 @@
+.habit-site-content
+    height: 254px
+    display: flex
+    >div
+        display: flex
+    >div:not(:first-child)
+        border-left: var(--timer-kanban-border)
+    .col0
+        flex: 4 1 0
+        flex-direction: column
+        .indicator-wrapper
+            flex: 1
+            width: 100%
+        .indicator-wrapper:not(:first-child)
+            border-top: var(--timer-kanban-border)
+    .col1
+        flex: 6 1 0
+    .col2
+        flex: 3 1 0
+    .col3
+        flex: 3 1 0
diff --git a/src/app/components/habit/components/site/time-pie-wrapper.ts b/src/app/components/habit/components/site/time-pie-wrapper.ts
new file mode 100644
index 00000000..05a7abd4
--- /dev/null
+++ b/src/app/components/habit/components/site/time-pie-wrapper.ts
@@ -0,0 +1,72 @@
+import type { ECharts, 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 PieChart from "@echarts/chart/pie"
+import SVGRenderer from "@echarts/svg-renderer"
+import TooltipComponent from "@echarts/component/tooltip"
+import GridComponent from "@echarts/component/grid"
+import TitleComponent from "@echarts/component/title"
+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"
+
+use([PieChart, SVGRenderer, TooltipComponent, GridComponent, TitleComponent])
+
+type EcOption = ComposeOption<
+    | GridComponentOption
+    | TooltipComponentOption
+    | TitleComponentOption
+    | PieSeriesOption
+>
+
+const generateOption = (rows: timer.stat.Row[]): EcOption => {
+    rows = mergeDate(rows).sort((a, b) => b.time - a.time)
+    const total = sum(rows.map(r => r.time))
+    const realRows: timer.stat.Row[] = []
+    const tailRows: timer.stat.Row[] = []
+    rows.forEach(r => {
+        if (r.time > MIN_PERCENT_OF_PIE * total) {
+            realRows.push(r)
+        } else {
+            tailRows.push(r)
+        }
+    })
+    const leftTime = sum(tailRows.map(r => r.time))
+    if (leftTime) {
+        const alias = t(msg => msg.habit.site.otherLabel, { count: tailRows.length || 0 })
+        realRows.push({ host: null, alias, focus: 0, time: leftTime, mergedHosts: [], virtual: false })
+    }
+    const title = t(msg => msg.habit.site.visitPieTitle)
+    return {
+        title: generateTitleOption(title),
+        series: [{
+            type: "pie",
+            center: ["50%", "60%"],
+            startAngle: 90,
+            data: realRows.map(row => ({ value: row.time, row })),
+            label: {
+                show: false,
+            }
+        }],
+        tooltip: {
+            show: true,
+            formatter: (params: [any]) => formatTimeTooltip(params)
+        },
+    }
+}
+
+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)
+    }
+}
diff --git a/src/app/components/habit/components/site/time-pie.ts b/src/app/components/habit/components/site/time-pie.ts
new file mode 100644
index 00000000..5118937d
--- /dev/null
+++ b/src/app/components/habit/components/site/time-pie.ts
@@ -0,0 +1,26 @@
+import { Ref, defineComponent, h, onMounted, ref, watch } from "vue"
+import TimePieWrapper from "./time-pie-wrapper"
+import { useRows } from "./contex"
+
+const CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
+    width: "100%",
+    height: "100%",
+}
+
+const _default = defineComponent({
+    setup() {
+        const elRef: Ref<HTMLDivElement> = ref()
+        const wrapper: TimePieWrapper = new TimePieWrapper()
+        const rows = useRows()
+
+        onMounted(() => wrapper.init(elRef.value))
+        watch([rows], () => wrapper.render(rows.value))
+
+        return () => h("div", {
+            style: CONTAINER_STYLE,
+            ref: elRef,
+        })
+    },
+})
+
+export default _default
diff --git a/src/app/components/habit/habit.d.ts b/src/app/components/habit/habit.d.ts
deleted file mode 100644
index 89c77520..00000000
--- a/src/app/components/habit/habit.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare type HabitFilterOption = {
-    periodSize: number
-    dateRange: [Date, Date]
-    averageByDate: boolean
-}
\ No newline at end of file
diff --git a/src/app/components/habit/index.ts b/src/app/components/habit/index.ts
index 07d32d7c..ad4544b0 100644
--- a/src/app/components/habit/index.ts
+++ b/src/app/components/habit/index.ts
@@ -1,25 +1,28 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import type { Ref } from "vue"
+import type { FilterOption } from "./type"
 
-import { defineComponent, h, ref, onMounted } from "vue"
+import { defineComponent, h, ref, onMounted, computed, watch } from "vue"
 import periodService from "@service/period-service"
+import statService from "@service/stat-service"
 import { daysAgo, isSameDay } from "@util/time"
 import ContentContainer from "@app/components/common/content-container"
-import HabitChart, { HabitChartInstance } from "./component/chart"
-import HabitFilter from "./component/filter"
+import HabitFilter from "./components/filter"
+import Site from "./components/site"
+import Period from "./components/period"
 import { keyOf, MAX_PERIOD_ORDER, keyBefore } from "@util/period"
+import { initProvider } from "./components/context"
 
-function computeParam(periodSize: Ref<number>, dateRange: Ref<[Date, Date]>, averageByDate: Ref<boolean>) {
-    let dateRangeVal = dateRange.value
-    if (dateRangeVal.length !== 2) dateRangeVal = daysAgo(1, 0)
-    const endDate = typeof dateRangeVal[1] === 'object' ? dateRangeVal[1] : null
-    const startDate = typeof dateRangeVal[0] === 'object' ? dateRangeVal[0] : null
+function computeParam(dateRange: [Date, Date]): timer.period.KeyRange {
+    if (dateRange.length !== 2) dateRange = daysAgo(1, 0)
+    const endDate = typeof dateRange[1] === 'object' ? dateRange[1] : null
+    const startDate = typeof dateRange[0] === 'object' ? dateRange[0] : null
     const now = new Date()
     const endIsToday = isSameDay(now, endDate)
 
@@ -32,50 +35,38 @@ function computeParam(periodSize: Ref<number>, dateRange: Ref<[Date, Date]>, ave
         periodEnd = keyOf(endDate, MAX_PERIOD_ORDER)
         periodStart = keyOf(startDate, 0)
     }
-
-    const remainder = (periodEnd.order + 1) % periodSize.value
-    if (remainder) {
-        periodEnd = keyBefore(periodEnd, remainder)
-        periodStart = keyBefore(periodStart, remainder)
-    }
-
-    return {
-        dateRange: dateRange.value,
-        // Must query one by one, if average
-        periodSize: averageByDate.value ? 1 : periodSize.value,
-        periodStart,
-        periodEnd
-    }
+    return [periodStart, periodEnd]
 }
 
 const _default = defineComponent({
     setup() {
-        const chart: Ref<HabitChartInstance> = ref()
-        const periodSize: Ref<number> = ref(1)
-        const dateRange: Ref<[Date, Date]> = ref(daysAgo(1, 0))
-        const averageByDate: Ref<boolean> = ref(false)
+        const filter: Ref<FilterOption> = ref({
+            dateRange: daysAgo(7, 0),
+            timeFormat: "default",
+        })
+        const periodRange = computed(() => computeParam(filter.value?.dateRange))
+        const periodResults: Ref<timer.period.Result[]> = ref([])
+        const rows: Ref<timer.stat.Row[]> = ref([])
+
+        initProvider(filter)
 
-        async function queryAndRender() {
-            const queryParam = computeParam(periodSize, dateRange, averageByDate)
-            const result = await periodService.list(queryParam)
-            chart.value.render?.(result, averageByDate.value, periodSize.value)
+        async function fetchData() {
+            periodResults.value = await periodService.list({ periodRange: periodRange.value })
+            rows.value = await statService.select({ exclusiveVirtual: true, date: filter.value?.dateRange }, true)
         }
 
-        onMounted(queryAndRender)
+        watch(filter, fetchData)
+        onMounted(fetchData)
 
         return () => h(ContentContainer, {}, {
             filter: () => h(HabitFilter, {
-                periodSize: periodSize.value,
-                dateRange: dateRange.value,
-                averageByDate: averageByDate.value,
-                onChange(newVal: HabitFilterOption) {
-                    periodSize.value = newVal.periodSize
-                    dateRange.value = newVal.dateRange
-                    averageByDate.value = newVal.averageByDate
-                    queryAndRender()
-                }
+                defaultValue: filter.value,
+                onChange: newVal => newVal && (filter.value = { ...newVal }),
             }),
-            content: () => h(HabitChart, { ref: chart })
+            default: () => [
+                h(Site),
+                h(Period),
+            ]
         })
     }
 })
diff --git a/src/app/components/habit/type.d.ts b/src/app/components/habit/type.d.ts
new file mode 100644
index 00000000..15df48fb
--- /dev/null
+++ b/src/app/components/habit/type.d.ts
@@ -0,0 +1,4 @@
+export type FilterOption = {
+    timeFormat: timer.app.TimeFormat
+    dateRange: [Date, Date]
+}
\ No newline at end of file
diff --git a/src/app/components/report/filter/index.ts b/src/app/components/report/filter/index.ts
index a6732105..f8c66720 100644
--- a/src/app/components/report/filter/index.ts
+++ b/src/app/components/report/filter/index.ts
@@ -15,7 +15,7 @@ import { h, defineComponent, ref, } from "vue"
 import { t } from "@app/locale"
 import InputFilterItem from '@app/components/common/input-filter-item'
 import SwitchFilterItem from "@app/components/common/switch-filter-item"
-import SelectFilterItem from "@app/components/common/select-filter-item"
+import TimeFormatFilterItem from "@app/components/common/time-format-filter-item"
 import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
 import { daysAgo } from "@util/time"
 import { ElButton } from "element-plus"
@@ -25,12 +25,6 @@ import statService from "@service/stat-service"
 const hostPlaceholder = t(msg => msg.report.hostPlaceholder)
 const mergeDateLabel = t(msg => msg.report.mergeDate)
 const mergeHostLabel = t(msg => msg.report.mergeDomain)
-const timeFormatLabels: { [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)
-}
 // Batch Delete
 const batchDeleteButtonText = t(msg => msg.report.batchDelete.buttonText)
 // Date range
@@ -103,11 +97,9 @@ const _default = defineComponent({
                     handleChange()
                 }
             }),
-            h(SelectFilterItem, {
-                historyName: 'timeFormat',
+            h(TimeFormatFilterItem, {
                 defaultValue: timeFormat.value,
-                options: timeFormatLabels,
-                onSelect(newVal: timer.app.TimeFormat) {
+                onChange: newVal => {
                     timeFormat.value = newVal
                     handleChange()
                 }
diff --git a/src/app/styles/index.sass b/src/app/styles/index.sass
index 59c1455d..46713c4f 100644
--- a/src/app/styles/index.sass
+++ b/src/app/styles/index.sass
@@ -143,3 +143,4 @@ a
   --el-menu-item-height: 48px
   --el-menu-active-color: var(--el-menu-text-color)
   --el-menu-item-active-bg-color: var(--el-color-primary)
+  --timer-kanban-border: 1px var(--el-border-color) var(--el-border-style)
diff --git a/src/app/util/provider.ts b/src/app/util/provider.ts
new file mode 100644
index 00000000..b31ce6c1
--- /dev/null
+++ b/src/app/util/provider.ts
@@ -0,0 +1,12 @@
+import { inject, provide } from "vue"
+
+export const provideWithNs = <T = Record<string, any>>(namespace: string, ctx: T) => {
+    Object.entries(ctx).forEach(([key, val]) => provide(`${namespace}_${key}`, val))
+}
+
+export const useProviderWithNs = <T = Record<string, any>>(namespace: string, ...keys: (keyof T)[]): Partial<T> => {
+    const result: Partial<T> = {}
+    Array.from(new Set(keys || [])).forEach(key => result[key] = inject(`${namespace}_${key as string}`))
+    return result
+}
+
diff --git a/src/common/backup/gist/compressor.ts b/src/common/backup/gist/compressor.ts
index bd340ecd..6684b2ee 100644
--- a/src/common/backup/gist/compressor.ts
+++ b/src/common/backup/gist/compressor.ts
@@ -18,7 +18,7 @@ function calcGroupKey(row: timer.stat.RowBase): string {
 
 /**
  * Compress row array to gist row
- * 
+ *
  * @param rows row array
  */
 function compress(rows: timer.stat.RowBase[]): GistData {
@@ -36,10 +36,10 @@ function compress(rows: timer.stat.RowBase[]): GistData {
 
 /**
  * Divide rows to buckets
- * 
+ *
  * @returns [bucket, data][]
  */
-export function devide2Buckets(rows: timer.stat.RowBase[]): [string, GistData][] {
+export function divide2Buckets(rows: timer.stat.RowBase[]): [string, GistData][] {
     const grouped: { [yearAndPart: string]: GistData } = groupBy(rows.filter(r => !!r), calcGroupKey, compress)
     return Object.entries(grouped)
 }
@@ -63,7 +63,7 @@ export function calcAllBuckets(startDate: string, endDate: string) {
 
 /**
  * Gist data 2 rows
- * 
+ *
  * @param filename yearMonth
  * @param gistData gistData
  * @returns rows
diff --git a/src/common/backup/gist/coordinator.ts b/src/common/backup/gist/coordinator.ts
index c337f3cd..bfaeb0fc 100644
--- a/src/common/backup/gist/coordinator.ts
+++ b/src/common/backup/gist/coordinator.ts
@@ -9,18 +9,18 @@ import type { Gist, GistForm, File, FileForm } from "@api/gist"
 
 import { getJsonFileContent, findTarget, getGist, createGist, updateGist, testToken } from "@api/gist"
 import { SOURCE_CODE_PAGE } from "@util/constant/url"
-import { calcAllBuckets, devide2Buckets, gistData2Rows } from "./compressor"
+import { calcAllBuckets, divide2Buckets, gistData2Rows } from "./compressor"
 import MonthIterator from "@util/month-iterator"
 import { formatTime } from "@util/time"
 
 const TIMER_META_GIST_DESC = "Used for timer to save meta info. Don't change this description :)"
 const TIMER_DATA_GIST_DESC = "Used for timer to save stat data. Don't change this description :)"
 
-const READEME_FILE_NAME = "README.md"
+const README_FILE_NAME = "README.md"
 const CLIENT_FILE_NAME = "clients.json"
 
 const INIT_README_MD: FileForm = {
-    filename: READEME_FILE_NAME,
+    filename: README_FILE_NAME,
     content: `Created by [TIMER](${SOURCE_CODE_PAGE}) automatically, please DO NOT edit this gist!`
 }
 
@@ -30,7 +30,7 @@ const INIT_CLIENT_JSON: FileForm = {
 }
 
 /**
- * Local cache of gist 
+ * Local cache of gist
  */
 type Cache = {
     /**
@@ -65,7 +65,7 @@ export default class GistCoordinator implements timer.backup.Coordinator<Cache>
             return
         }
         const files: { [filename: string]: FileForm } = {}
-        files[READEME_FILE_NAME] = INIT_README_MD
+        files[README_FILE_NAME] = INIT_README_MD
         files[CLIENT_FILE_NAME] = {
             filename: CLIENT_FILE_NAME,
             content: JSON.stringify(clients)
@@ -105,7 +105,7 @@ export default class GistCoordinator implements timer.backup.Coordinator<Cache>
 
     async upload(context: timer.backup.CoordinatorContext<Cache>, rows: timer.stat.RowBase[]): Promise<void> {
         const cid = context.cid
-        const buckets = devide2Buckets(rows)
+        const buckets = divide2Buckets(rows)
         const gist = await this.getStatGist(context)
         const files2Update: { [filename: string]: FileForm } = {}
         for (const [bucket, gistData] of buckets) {
@@ -177,7 +177,7 @@ export default class GistCoordinator implements timer.backup.Coordinator<Cache>
         }
         // 3. Create new one
         const files = {}
-        files[READEME_FILE_NAME] = INIT_README_MD
+        files[README_FILE_NAME] = INIT_README_MD
         const gist2Create: GistForm = { description: TIMER_DATA_GIST_DESC, files, public: false }
         const created = await createGist(auth, gist2Create)
         const newId = created?.id
diff --git a/src/common/backup/processor.ts b/src/common/backup/processor.ts
index 62a5950b..df708325 100644
--- a/src/common/backup/processor.ts
+++ b/src/common/backup/processor.ts
@@ -26,7 +26,7 @@ export type AuthCheckResult = {
     errorMsg?: string
 }
 
-class CoordinatorContextWrapper<Cache> implements timer.backup.CoordinatorContext<Cache>{
+class CoordinatorContextWrapper<Cache> implements timer.backup.CoordinatorContext<Cache> {
     auth: string
     ext?: timer.backup.TypeExt
     cache: Cache
@@ -128,7 +128,7 @@ async function syncFull(
 }
 
 function filterClient(c: timer.backup.Client, excludeLocal: boolean, localClientId: string, start: string, end: string) {
-    // Excluse local client
+    // Exclude local client
     if (excludeLocal && c.id === localClientId) return false
     // Judge range
     if (start && c.maxDate && c.maxDate < start) return false
diff --git a/src/database/stat-database/filter.ts b/src/database/stat-database/filter.ts
index e6ad54ca..bbde3cb7 100644
--- a/src/database/stat-database/filter.ts
+++ b/src/database/stat-database/filter.ts
@@ -24,12 +24,12 @@ type _FilterResult = {
 }
 
 function filterHost(host: string, condition: _StatCondition): boolean {
-    const paramHost = (condition.host || '').trim()
-    const exlcusiveVirtual = condition.exlcusiveVirtual
+    const paramHost = condition.host?.trim() || ''
+    const exclusiveVirtual = condition.exclusiveVirtual
     if (!paramHost) return true
     if (!!condition.fullHost && host !== paramHost) return false
     if (!condition.fullHost && !host.includes(paramHost)) return false
-    if (exlcusiveVirtual && judgeVirtualFast(host)) return false
+    if (exclusiveVirtual && judgeVirtualFast(host)) return false
     return true
 }
 
@@ -54,12 +54,12 @@ function filterNumberRange(val: number, range: number[]): boolean {
 
 /**
  * Filter by query parameters
- * 
+ *
  * @param date date of item
  * @param host  host of item
  * @param val  val of item
  * @param condition  query parameters
- * @return true if valid, or false  
+ * @return true if valid, or false
  */
 function filterByCond(result: _FilterResult, condition: _StatCondition): boolean {
     const { host, date, value } = result
diff --git a/src/database/stat-database/index.ts b/src/database/stat-database/index.ts
index 53b74679..d8b50452 100644
--- a/src/database/stat-database/index.ts
+++ b/src/database/stat-database/index.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -16,7 +16,7 @@ import { filter } from "./filter"
 export type StatCondition = {
     /**
      * Date
-     * {y}{m}{d} 
+     * {y}{m}{d}
      */
     date?: Date | [Date, Date?]
     /**
@@ -25,28 +25,28 @@ export type StatCondition = {
     host?: string
     /**
      * Focus range, milliseconds
-     * 
+     *
      * @since 0.0.9
      */
     focusRange?: number[]
     /**
      * Time range
-     * 
+     *
      * @since 0.0.9
      */
     timeRange?: number[]
     /**
-     * Whether to enable full host search, default is false 
-     * 
+     * Whether to enable full host search, default is false
+     *
      * @since 0.0.8
      */
     fullHost?: boolean
     /**
-     * Whether to exlcusive virtual sites
-     * 
-     * @since 1.6.1 
+     * Whether to exclusive virtual sites
+     *
+     * @since 1.6.1
      */
-    exlcusiveVirtual?: boolean
+    exclusiveVirtual?: boolean
 }
 
 function mergeMigration(exist: timer.stat.Result | undefined, another: any) {
@@ -56,7 +56,7 @@ function mergeMigration(exist: timer.stat.Result | undefined, another: any) {
 
 /**
  * Generate the key in local storage by host and date
- * 
+ *
  * @param host host
  * @param date date
  */
@@ -105,7 +105,7 @@ class StatDatabase extends BaseDatabase {
 
     /**
      * Batch accumulate
-     * 
+     *
      * @param data data: {host=>waste_per_day}
      * @param date date
      * @since 0.1.8
@@ -134,7 +134,7 @@ class StatDatabase extends BaseDatabase {
 
     /**
      * Select
-     * 
+     *
      * @param condition     condition
      */
     async select(condition?: StatCondition): Promise<timer.stat.Row[]> {
@@ -148,9 +148,9 @@ class StatDatabase extends BaseDatabase {
 
     /**
      * Count by condition
-     * 
-     * @param condition 
-     * @returns count 
+     *
+     * @param condition
+     * @returns count
      * @since 1.0.2
      */
     async count(condition: StatCondition): Promise<number> {
@@ -161,8 +161,8 @@ class StatDatabase extends BaseDatabase {
 
     /**
      * Get by host and date
-     * 
-     * @since 0.0.5 
+     *
+     * @since 0.0.5
      */
     async get(host: string, date: Date | string): Promise<timer.stat.Result> {
         const key = generateKey(host, date)
@@ -172,7 +172,7 @@ class StatDatabase extends BaseDatabase {
 
     /**
      * Delete the record
-     * 
+     *
      * @param host host
      * @param date date
      * @since 0.0.5
@@ -184,7 +184,7 @@ class StatDatabase extends BaseDatabase {
 
     /**
      * Delete by key
-     *  
+     *
      * @param rows     site rows, the host and date mustn't be null
      * @since 0.0.9
      */
@@ -195,7 +195,7 @@ class StatDatabase extends BaseDatabase {
 
     /**
      * Force update data
-     * 
+     *
      * @since 1.4.3
      */
     forceUpdate(row: timer.stat.RowBase): Promise<void> {
@@ -205,7 +205,7 @@ class StatDatabase extends BaseDatabase {
     }
 
     /**
-     * @param host host 
+     * @param host host
      * @param start start date, inclusive
      * @param end end date, inclusive
      * @since 0.0.7
@@ -227,7 +227,7 @@ class StatDatabase extends BaseDatabase {
 
     /**
      * Delete the record
-     * 
+     *
      * @param host host
      * @since 0.0.5
      */
diff --git a/src/i18n/message/app/habit-resource.json b/src/i18n/message/app/habit-resource.json
index 371c723a..21fccfe9 100644
--- a/src/i18n/message/app/habit-resource.json
+++ b/src/i18n/message/app/habit-resource.json
@@ -1,87 +1,99 @@
 {
     "zh_CN": {
-        "sizes": {
-            "fifteen": "每十五分钟统计一次",
-            "halfHour": "每半小时统计一次",
-            "hour": "每一小时统计一次",
-            "twoHour": "每两小时统计一次"
+        "common": {
+            "focusAverage": "平均每天 {value}"
         },
-        "average": {
-            "label": "平均每天"
-        },
-        "chart": {
-            "title": "上网习惯统计",
-            "saveAsImageTitle": "保存",
+        "period": {
+            "title": "不同时段的访问习惯",
+            "busiest": "每天最繁忙时段",
+            "idle": "最长空闲时段",
             "yAxisMin": "浏览时长 / 分钟",
-            "yAxisHour": "浏览时长 / 小时"
+            "yAxisHour": "浏览时长 / 小时",
+            "averageLabel": "平均每天",
+            "sizes": {
+                "fifteen": "每十五分钟统计一次",
+                "halfHour": "每半小时统计一次",
+                "hour": "每一小时统计一次",
+                "twoHour": "每两小时统计一次"
+            }
+        },
+        "site": {
+            "title": "网站访问习惯",
+            "focusPieTitle": "浏览时间占比",
+            "visitPieTitle": "访问次数占比",
+            "otherLabel": "其他{count}个网站",
+            "histogramTitle": "最长访问 TOP {n}",
+            "exclusiveToday": "今天的数据不计入平均值",
+            "countTotal": "总计访问次数/网站数",
+            "siteAverage": "平均每天访问 {value} 个网站"
         }
     },
     "zh_TW": {
-        "sizes": {
-            "fifteen": "按十五分鐘統計",
-            "halfHour": "按半小時統計",
-            "hour": "按一小時統計",
-            "twoHour": "按兩小時統計"
-        },
-        "average": {
-            "label": "平均每天"
-        },
-        "chart": {
-            "title": "上網習慣統計",
-            "saveAsImageTitle": "保存",
+        "period": {
             "yAxisMin": "瀏覽時長 / 分鐘",
-            "yAxisHour": "瀏覽時長 / 小時"
+            "yAxisHour": "瀏覽時長 / 小時",
+            "averageLabel": "平均每天",
+            "sizes": {
+                "fifteen": "按十五分鐘統計",
+                "halfHour": "按半小時統計",
+                "hour": "按一小時統計",
+                "twoHour": "按兩小時統計"
+            }
         }
     },
     "en": {
-        "sizes": {
-            "fifteen": "Per 15 minutes",
-            "halfHour": "Per half hour",
-            "hour": "Per one hour",
-            "twoHour": "Per two hours"
-        },
-        "average": {
-            "label": "Daily average"
+        "common": {
+            "focusAverage": "Average {value} per day"
         },
-        "chart": {
-            "title": "Time-phased Statistics of Browsing Time",
-            "saveAsImageTitle": "Snapshot",
+        "period": {
+            "title": "Habit of time periods",
+            "busiest": "Busiest time of day",
+            "idle": "Longest idle period",
             "yAxisMin": "Browsing Time / minute",
-            "yAxisHour": "Browsing Time / hour"
+            "yAxisHour": "Browsing Time / hour",
+            "averageLabel": "Daily average",
+            "sizes": {
+                "fifteen": "Per 15 minutes",
+                "halfHour": "Per half hour",
+                "hour": "Per one hour",
+                "twoHour": "Per two hours"
+            }
+        },
+        "site": {
+            "title": "Habit of websites",
+            "focusPieTitle": "Percentage of browsing time",
+            "visitPieTitle": "Percentage of visits",
+            "otherLabel": "Other {count} sites",
+            "histogramTitle": "TOP {n} most visited",
+            "exclusiveToday": "Today's data is not included in the average",
+            "countTotal": "Total visits/sites",
+            "siteAverage": "Average visits to {value} websites per day"
         }
     },
     "ja": {
-        "sizes": {
-            "fifteen": "15分で統計",
-            "halfHour": "30分で統計",
-            "hour": "1時間ごとの統計",
-            "twoHour": "2時間ごとの統計"
-        },
-        "average": {
-            "label": "1日平均"
-        },
-        "chart": {
-            "title": "時系列の統計を閲覧する",
-            "saveAsImageTitle": "ダウンロード",
+        "period": {
             "yAxisMin": "閲覧時間/分",
-            "yAxisHour": "閲覧時間/時間"
+            "yAxisHour": "閲覧時間/時間",
+            "averageLabel": "1日平均",
+            "sizes": {
+                "fifteen": "15分で統計",
+                "halfHour": "30分で統計",
+                "hour": "1時間ごとの統計",
+                "twoHour": "2時間ごとの統計"
+            }
         }
     },
     "pt_PT": {
-        "sizes": {
-            "fifteen": "Por 15 minutos",
-            "halfHour": "Por meia hora",
-            "hour": "Por 1 hora",
-            "twoHour": "Por 2 horas"
-        },
-        "average": {
-            "label": "Média diária"
-        },
-        "chart": {
-            "title": "Estatísticas do tempo de navegação",
-            "saveAsImageTitle": "Capturas",
+        "period": {
             "yAxisMin": "Tempo de Navegação / Minutos",
-            "yAxisHour": "Tempo de Navegação / Hora"
+            "yAxisHour": "Tempo de Navegação / Hora",
+            "averageLabel": "Média diária",
+            "sizes": {
+                "fifteen": "Por 15 minutos",
+                "halfHour": "Por meia hora",
+                "hour": "Por 1 hora",
+                "twoHour": "Por 2 horas"
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/i18n/message/app/habit.ts b/src/i18n/message/app/habit.ts
index 5f3958a9..19e03e08 100644
--- a/src/i18n/message/app/habit.ts
+++ b/src/i18n/message/app/habit.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -8,20 +8,32 @@
 import resource from './habit-resource.json'
 
 export type HabitMessage = {
-    sizes: {
-        fifteen: string
-        halfHour: string
-        hour: string
-        twoHour: string
-    },
-    average: {
-        label: string
-    },
-    chart: {
+    common: {
+        focusAverage: string
+    }
+    period: {
         title: string
-        saveAsImageTitle: string
+        busiest: string
+        idle: string
         yAxisMin: string
         yAxisHour: string
+        averageLabel: string
+        sizes: {
+            fifteen: string
+            halfHour: string
+            hour: string
+            twoHour: string
+        }
+    }
+    site: {
+        title: string
+        focusPieTitle: string
+        visitPieTitle: string
+        otherLabel: string
+        histogramTitle: string
+        exclusiveToday: string
+        countTotal: string
+        siteAverage: string
     }
 }
 
diff --git a/src/i18n/message/app/help-us.ts b/src/i18n/message/app/help-us.ts
index dc0851a8..0a3ed59a 100644
--- a/src/i18n/message/app/help-us.ts
+++ b/src/i18n/message/app/help-us.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2022 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
diff --git a/src/i18n/message/common/calendar-resource.json b/src/i18n/message/common/calendar-resource.json
index 8aa45a4f..da2983b7 100644
--- a/src/i18n/message/common/calendar-resource.json
+++ b/src/i18n/message/common/calendar-resource.json
@@ -4,6 +4,7 @@
         "months": "一月|二月|三月|四月|五月|六月|七月|八月|九月|十月|十一月|十二月",
         "dateFormat": "{y}/{m}/{d}",
         "timeFormat": "{y}/{m}/{d} {h}:{i}:{s}",
+        "simpleTimeFormat": "{m}/{d} {h}:{i}",
         "label": {
             "startDate": "开始日期",
             "endDate": "结束日期"
@@ -25,6 +26,7 @@
         "months": "一月|二月|三月|四月|五月|六月|七月|八月|九月|十月|十一月|十二月",
         "dateFormat": "{y}/{m}/{d}",
         "timeFormat": "{y}/{m}/{d} {h}:{i}:{s}",
+        "simpleTimeFormat": "{m}/{d} {h}:{i}",
         "label": {
             "startDate": "開始日期",
             "endDate": "結束日期"
@@ -46,6 +48,7 @@
         "months": "Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec",
         "dateFormat": "{m}/{d}/{y}",
         "timeFormat": "{m}/{d}/{y} {h}:{i}:{s}",
+        "simpleTimeFormat": "{m}/{d} {h}:{i}",
         "label": {
             "startDate": "Start date",
             "endDate": "End date"
@@ -67,6 +70,7 @@
         "months": "Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Set|Oct|Nov|Dec",
         "dateFormat": "{y}/{m}/{d}",
         "timeFormat": "{y}/{m}/{d} {h}:{i}:{s}",
+        "simpleTimeFormat": "{m}/{d} {h}:{i}",
         "label": {
             "startDate": "開始日",
             "endDate": "終了日"
@@ -88,6 +92,7 @@
         "months": "Jan|Fev|Mar|Abr|Maio|Jun|Jul|Ago|Set|Out|Nov|Dez",
         "dateFormat": "{d}/{m}/{y}",
         "timeFormat": "{d}/{m}/{y} {h}:{i}:{s}",
+        "simpleTimeFormat": "{d}/{m} {h}:{i}",
         "label": {
             "startDate": "Data de início",
             "endDate": "Data de fim"
diff --git a/src/i18n/message/common/calendar.ts b/src/i18n/message/common/calendar.ts
index 44be6873..50ecc238 100644
--- a/src/i18n/message/common/calendar.ts
+++ b/src/i18n/message/common/calendar.ts
@@ -12,6 +12,7 @@ export type CalendarMessage = {
     months: string
     dateFormat: string
     timeFormat: string
+    simpleTimeFormat: string
     label: {
         startDate: string
         endDate: string
diff --git a/src/popup/components/chart/option.ts b/src/popup/components/chart/option.ts
index 6e6237b6..23520f81 100644
--- a/src/popup/components/chart/option.ts
+++ b/src/popup/components/chart/option.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
diff --git a/src/popup/components/footer/index.ts b/src/popup/components/footer/index.ts
index a2c58cbc..e9e0d2db 100644
--- a/src/popup/components/footer/index.ts
+++ b/src/popup/components/footer/index.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -16,7 +16,7 @@ import TypeSelectWrapper from "./select/type-select"
 import statService from "@service/stat-service"
 import { t } from "@popup/locale"
 import { locale } from "@i18n"
-import { getDayLenth, getMonthTime, getWeekDay, getWeekTime, MILL_PER_DAY } from "@util/time"
+import { getDayLength, getMonthTime, getWeekDay, getWeekTime, MILL_PER_DAY } from "@util/time"
 import optionService from "@service/option-service"
 
 type FooterParam = StatQueryParam & {
@@ -121,7 +121,7 @@ class FooterWrapper {
             mergeHost: queryParam.mergeHost,
             type,
             date,
-            dateLength: date instanceof Array ? getDayLenth(date[0], date[1]) : 1,
+            dateLength: date instanceof Array ? getDayLength(date[0], date[1]) : 1,
             chartTitle: queryParam.chartTitle
         }
         this.totalInfoWrapper.updateTotal(data, type)
diff --git a/src/service/components/period-calculator.ts b/src/service/components/period-calculator.ts
index 206478b1..1f554645 100644
--- a/src/service/components/period-calculator.ts
+++ b/src/service/components/period-calculator.ts
@@ -5,6 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { sum } from "@util/array"
 import { keyOf, startOfKey, lastKeyOfLastDate, indexOf, after, compare, rowOf } from "@util/period"
 
 /**
@@ -53,7 +54,7 @@ export function getMaxDivisiblePeriod(period: timer.period.Key, periodWindowSize
 }
 
 export type MergeConfig = {
-    windowSize: number
+    periodSize: number
     /**
      * Inclusive
      */
@@ -66,17 +67,17 @@ export type MergeConfig = {
 
 export function merge(periods: timer.period.Result[], config: MergeConfig): timer.period.Row[] {
     const result: timer.period.Row[] = []
-    let { start, end, windowSize } = config
+    let { start, end, periodSize } = config
     const map: Map<number, number> = new Map()
     periods.forEach(p => map.set(indexOf(p), p.milliseconds))
-    let millSum = 0, periodNum = 0
+    let mills = []
     for (; compare(start, end) <= 0; start = after(start, 1)) {
-        const mill = map.get(indexOf(start))
-        mill && (millSum += mill)
-        periodNum++
-        if (periodNum === windowSize) {
-            result.push(rowOf(start, windowSize, millSum))
-            periodNum = millSum = 0
+        mills.push(map.get(indexOf(start)) ?? 0)
+        const isEndOfWindow = (start.order % periodSize) === periodSize - 1
+        if (isEndOfWindow) {
+            const isFullWindow = mills.length === periodSize
+            isFullWindow && result.push(rowOf(start, periodSize, sum(mills)))
+            mills = []
         }
     }
     return result
diff --git a/src/service/period-service.ts b/src/service/period-service.ts
index 51d0ca49..3cd886b6 100644
--- a/src/service/period-service.ts
+++ b/src/service/period-service.ts
@@ -6,19 +6,16 @@
  */
 
 import PeriodDatabase from "@db/period-database"
-import { after, compare, getDateString, keyOf } from "@util/period"
-import { MILL_PER_DAY } from "@util/time"
-import { calculate, merge, getMaxDivisiblePeriod } from "./components/period-calculator"
+import { after, compare, getDateString } from "@util/period"
+import { calculate } from "./components/period-calculator"
 
 const periodDatabase = new PeriodDatabase(chrome.storage.local)
 
 export type PeriodQueryParam = {
-    periodSize?: number
     /**
-     * Must
+     * Required
      */
-    periodStart: timer.period.Key
-    periodEnd: timer.period.Key
+    periodRange: timer.period.KeyRange
 }
 
 function add(timestamp: number, milliseconds: number): Promise<void> {
@@ -35,36 +32,11 @@ function dateStrBetween(startDate: timer.period.Key, endDate: timer.period.Key):
     return result
 }
 
-/**
- * preprocess the param
- * 
- * @param param param
- */
-function preprocessParam(param?: PeriodQueryParam): PeriodQueryParam {
-    const now = Date.now()
-    const defaultParam: PeriodQueryParam = { periodSize: 1, periodStart: keyOf(now - MILL_PER_DAY), periodEnd: keyOf(now) }
-    if (param) {
-        param.periodSize && (defaultParam.periodSize = param.periodSize)
-        param.periodStart && (defaultParam.periodStart = param.periodStart)
-        param.periodEnd && (defaultParam.periodEnd = param.periodEnd)
-    }
-    return defaultParam
-}
 
-async function list(inParam?: PeriodQueryParam): Promise<timer.period.Row[]> {
-    const param = preprocessParam(inParam)
-    const start = param.periodStart
-    const end = param.periodEnd
+async function list(param?: PeriodQueryParam): Promise<timer.period.Result[]> {
+    const [start, end] = param?.periodRange || []
     const allDates = dateStrBetween(start, end)
-    const originData: timer.period.Result[] = await periodDatabase.getBatch(allDates)
-
-    const windowSize = param.periodSize
-    if (windowSize <= 0) return []
-    const maxPeriod = getMaxDivisiblePeriod(end, windowSize)
-    // Get ride of the latest ones can't be merged into one window
-    const realData = originData.filter(data => compare(data, maxPeriod) <= 0 && compare(data, start) >= 0)
-    const mergeConfig = { start, end: maxPeriod, windowSize }
-    return merge(realData, mergeConfig)
+    return periodDatabase.getBatch(allDates)
 }
 
 class PeriodService {
diff --git a/src/service/stat-service/index.ts b/src/service/stat-service/index.ts
index b80f904b..e1eac20c 100644
--- a/src/service/stat-service/index.ts
+++ b/src/service/stat-service/index.ts
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
@@ -29,9 +29,9 @@ export type SortDirect = 'ASC' | 'DESC'
 export type StatQueryParam = StatCondition & {
     /**
      * Inclusive remote data
-     * 
+     *
      * If true the date range MUST NOT be unlimited
-     * 
+     *
      * @since 1.2.0
      */
     inclusiveRemote?: boolean
@@ -98,7 +98,7 @@ class StatService {
 
     /**
      * Query hosts
-     * 
+     *
      * @param fuzzyQuery the part of host
      * @since 0.0.8
      */
@@ -134,7 +134,7 @@ class StatService {
 
     /**
      * Count the items
-     * 
+     *
      * @param condition condition to count
      * @since 1.0.2
      */
@@ -239,8 +239,8 @@ class StatService {
     }
 
     /**
-     * Aable to read remote backup data
-     * 
+     * Enable to read remote backup data
+     *
      * @since 1.2.0
      * @returns T/F
      */
diff --git a/src/service/stat-service/merge.ts b/src/service/stat-service/merge.ts
index 8594a2b4..99d52f26 100644
--- a/src/service/stat-service/merge.ts
+++ b/src/service/stat-service/merge.ts
@@ -15,15 +15,12 @@ const mergeRuleDatabase = new MergeRuleDatabase(storage)
 function merge(map: Record<string, timer.stat.Row>, origin: timer.stat.Row, key: string): timer.stat.Row {
     let exist: timer.stat.Row = map[key]
     !exist && (exist = map[key] = {
-        host: origin.host,
-        date: origin.date,
+        ...origin,
         focus: 0,
         time: 0,
         mergedHosts: [],
         composition: { focus: [], time: [] },
-        cid: origin.cid,
-        cname: origin.cname,
-        virtual: false
+        virtual: false,
     })
 
     exist.time += origin.time
diff --git a/src/service/stat-service/remote.ts b/src/service/stat-service/remote.ts
index 7e14be1b..147a0141 100644
--- a/src/service/stat-service/remote.ts
+++ b/src/service/stat-service/remote.ts
@@ -52,8 +52,8 @@ export async function processRemote(param: StatCondition, origin: timer.stat.Row
 }
 
 /**
- * Aable to read remote backup data
- * 
+ * Enabled to read remote backup data
+ *
  * @since 1.2.0
  * @returns T/F
  */
diff --git a/src/util/array.ts b/src/util/array.ts
index b63ee61b..ac1450f4 100644
--- a/src/util/array.ts
+++ b/src/util/array.ts
@@ -7,7 +7,7 @@
 
 /**
  * Group by
- * 
+ *
  * @param arr original array
  * @param keyFunc key generator
  * @returns grouped map
@@ -36,9 +36,9 @@ export function groupBy<T, R>(
 
 /**
  * Rotate the array without new one returned
- * 
+ *
  * @param arr the targe array
- * @param count count to rotate, must be positive, or 1 is default 
+ * @param count count to rotate, must be positive, or 1 is default
  * @param rightOrLeft rotate right or left, true means left, false means right, default is false
  */
 export function rotate<T>(arr: T[], count?: number, rightOrLeft?: boolean): void {
@@ -58,11 +58,20 @@ export function rotate<T>(arr: T[], count?: number, rightOrLeft?: boolean): void
 
 /**
  * Summarize
- * 
- * @param arr target arr 
+ *
+ * @param arr target arr
  */
 export function sum(arr: number[]): number {
-    return arr?.reduce?.((a, b) => (a || 0) + (b || 0), 0) || 0
+    return arr?.reduce?.((a, b) => (a || 0) + (b || 0), 0) ?? 0
+}
+
+/**
+ * @since 2.1.0
+ * @returns null if arr is empty or null
+ */
+export function average(arr: number[]): number {
+    if (!arr?.length) return null
+    return sum(arr) / arr.length
 }
 
 export function allMatch<T>(arr: T[], predicate: (t: T) => boolean): boolean {
@@ -71,4 +80,4 @@ export function allMatch<T>(arr: T[], predicate: (t: T) => boolean): boolean {
 
 export function anyMatch<T>(arr: T[], predicate: (t: T) => boolean): boolean {
     return !!arr?.filter?.(e => predicate?.(e))?.length
-}
\ No newline at end of file
+}
diff --git a/src/util/period.ts b/src/util/period.ts
index 6b2c4c96..064ce5d3 100644
--- a/src/util/period.ts
+++ b/src/util/period.ts
@@ -5,6 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { groupBy } from "./array"
 import { MILL_PER_DAY } from "./time"
 
 export const MINUTES_PER_PERIOD = 15
@@ -36,11 +37,11 @@ export function indexOf(key: timer.period.Key): number {
         | order
 }
 
-export function compare(a: timer.period.Key, b: timer.period.Key) {
+export function compare(a: timer.period.Key, b: timer.period.Key): number {
     return indexOf(a) - indexOf(b)
 }
 
-export function keyBefore(key: timer.period.Key, orderCount: number) {
+export function keyBefore(key: timer.period.Key, orderCount: number): timer.period.Key {
     let order = key.order
     let decomposition = 0
 
@@ -57,7 +58,7 @@ export function keyBefore(key: timer.period.Key, orderCount: number) {
     }
 }
 
-export function after(key: timer.period.Key, orderCount: number) {
+export function after(key: timer.period.Key, orderCount: number): timer.period.Key {
     const date = new Date(key.year, key.month - 1, key.date, 0, (key.order + orderCount) * MINUTES_PER_PERIOD, 1)
     return keyOf(date)
 }
@@ -66,7 +67,7 @@ export function startOfKey(key: timer.period.Key): Date {
     return new Date(key.year, key.month - 1, key.date, 0, MINUTES_PER_PERIOD * key.order)
 }
 
-export function lastKeyOfLastDate(key: timer.period.Key) {
+export function lastKeyOfLastDate(key: timer.period.Key): timer.period.Key {
     return keyBefore(key, key.order + 1)
 }
 
@@ -74,11 +75,11 @@ export function getDateString(key: timer.period.Key) {
     return `${key.year}${key.month < 10 ? '0' : ''}${key.month}${key.date < 10 ? '0' : ''}${key.date}`
 }
 
-export function rowOf(key: timer.period.Key, duration?: number, milliseconds?: number): timer.period.Row {
+export function rowOf(endKey: timer.period.Key, duration?: number, milliseconds?: number): timer.period.Row {
     duration = duration || 1
     milliseconds = milliseconds || 0
-    const date = getDateString(key)
-    const endStart = startOfKey(key)
+    const date = getDateString(endKey)
+    const endStart = startOfKey(endKey)
     const endTime = new Date(endStart.getTime() + MILLS_PER_PERIOD)
     const startTime = duration === 1 ? endStart : new Date(endStart.getTime() - (duration - 1) * MILLS_PER_PERIOD)
     return { startTime, endTime, milliseconds, date }
@@ -86,4 +87,35 @@ export function rowOf(key: timer.period.Key, duration?: number, milliseconds?: n
 
 export function startOrderOfRow(row: timer.period.Row): number {
     return (row.startTime.getHours() * 60 + row.startTime.getMinutes()) / MINUTES_PER_PERIOD
+}
+
+/**
+ * @param rows period rows
+ * @returns [0, 12)
+ */
+export function calcMostPeriodOf2Hours(rows: timer.period.Result[]): number {
+    const periodCount = rows?.length ?? 0
+    // Order [0, 95]
+    const averageTimePerPeriod: { [order: number]: number } = groupBy(rows,
+        p => p.order,
+        (grouped: timer.period.Result[]) => {
+            const periodMills = grouped.map(p => p.milliseconds)
+            if (!periodCount) {
+                return 0
+            }
+            return Math.floor(periodMills.reduce((a, b) => a + b, 0) / periodCount)
+        }
+    )
+    // Merged per 2 hours
+    const averageTimePer2Hours: { [idx: number]: number } = groupBy(Object.entries(averageTimePerPeriod),
+        ([order]) => Math.floor(parseInt(order) / 8),
+        averages => averages.map(a => a[1]).reduce((a, b) => a + b, 0)
+    )
+    // The two most frequent online hours
+    const most2Hour: number = parseInt(
+        Object.entries(averageTimePer2Hours)
+            .sort((a, b) => a[1] - b[1])
+            .reverse()[0]?.[0]
+    )
+    return most2Hour
 }
\ No newline at end of file
diff --git a/src/util/stat.ts b/src/util/stat.ts
index c64092bd..4e932a89 100644
--- a/src/util/stat.ts
+++ b/src/util/stat.ts
@@ -16,7 +16,10 @@ export function createZeroResult(): timer.stat.Result {
 }
 
 export function mergeResult(a: timer.stat.Result, b: timer.stat.Result): timer.stat.Result {
-    return { focus: a.focus + b.focus, time: a.time + b.time }
+    return {
+        focus: (a?.focus ?? 0) + (b?.focus ?? 0),
+        time: (a?.time ?? 0) + (b?.time ?? 0),
+    }
 }
 
 export function resultOf(focus: number, time: number): timer.stat.Result {
diff --git a/src/util/time.ts b/src/util/time.ts
index 8cf409b7..0c5e48a2 100644
--- a/src/util/time.ts
+++ b/src/util/time.ts
@@ -1,19 +1,19 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 /**
  * Copyright (c) 2017-present PanJiaChen
- * 
+ *
  * This function is released under the MIT License.
  * https://opensource.org/licenses/MIT
- * 
+ *
  * Created by PanJiaChen on 16/11/18.
  * @see https://github.com/PanJiaChen/vue-element-admin/blob/HEAD/src/utils/index.js
- * 
+ *
  * Parse the time to string
  */
 export function formatTime(time: Date | string | number, cFormat?: string) {
@@ -76,14 +76,14 @@ export function formatPeriod(milliseconds: number, message: { hourMsg: string, m
 }
 
 /**
- * e.g. 
- * 
+ * e.g.
+ *
  * 100h0m0s
  * 20h10m59s
  * 20h0m1s
  * 10m20s
  * 30s
- * 
+ *
  * @return (xx+h)(xx+m)xx+s
  */
 export function formatPeriodCommon(milliseconds: number): string {
@@ -97,7 +97,7 @@ export function formatPeriodCommon(milliseconds: number): string {
 
 /**
  * Milliseconds per day
- * 
+ *
  * @since 0.0.8
  */
 export const MILL_PER_DAY = 3600 * 1000 * 24
@@ -122,7 +122,7 @@ export function isSameDay(a: Date, b: Date): boolean {
  * Get the start time and end time of this week
  * @param now the specific time
  * @returns [startTime, endTime]
- * 
+ *
  * @since 0.6.0
  */
 export function getWeekTime(now: Date, isChinese: boolean): [Date, Date] {
@@ -134,7 +134,7 @@ export function getWeekTime(now: Date, isChinese: boolean): [Date, Date] {
 
 /**
  * Get the start time {@param weekCount} weeks ago
- * 
+ *
  * @param now the specific time
  * @param weekCount weekCount
  * @since 1.0.0
@@ -158,10 +158,10 @@ export function getWeekDay(now: Date, isChinese: boolean): number {
 
 /**
  * Get the start time and end time of this month
- * 
+ *
  * @param target the specific time
  * @returns [startTime, endTime]
- * 
+ *
  * @since 0.6.0
  */
 export function getMonthTime(target: Date): [Date, Date] {
@@ -175,7 +175,7 @@ export function getMonthTime(target: Date): [Date, Date] {
 
 /**
  * Get the start time of this day
- * 
+ *
  * @param target the specific time
  * @returns the start of this day
  * @since 1.0.0
@@ -189,7 +189,7 @@ export function getStartOfDay(target: Date) {
 
 /**
  * The birthday of this extension
- * 
+ *
  * @since 1.2.0
  */
 export function getBirthday(): Date {
@@ -204,13 +204,13 @@ export function getBirthday(): Date {
 export const BIRTHDAY = '20220303'
 
 /**
- * Calc the day lenth
- * @returns 
+ * Calc the day length
+ * @returns
  *  1 if 2022-06-09 00:00:00 to 2022-06-09 00:00:01
  *  0 if 2022-06-10 00:00:00 to 2022-06-09 00:00:01
  *  2 if 2022-11-10 08:00:00 to 2022-11-11 00:00:01
  */
-export function getDayLenth(dateStart: Date, dateEnd: Date): number {
+export function getDayLength(dateStart: Date, dateEnd: Date): number {
     let cursor = new Date(dateStart)
     let dateDiff = 0
     do {
@@ -223,8 +223,8 @@ export function getDayLenth(dateStart: Date, dateEnd: Date): number {
 
 /**
  * Calc the dates between {@param dateStart} and {@param dateEnd}
- * 
- * @returns 
+ *
+ * @returns
  *  [20220609]              if 2022-06-09 00:00:00 to 2022-06-09 00:00:01
  *  []                      if 2022-06-10 00:00:00 to 2022-06-09 00:00:01
  *  [20221110, 20221111]    if 2022-11-10 08:00:00 to 2022-11-11 00:00:01
diff --git a/test/background/backup/gist/compressor.test.ts b/test/background/backup/gist/compressor.test.ts
index a0837364..5c566c20 100644
--- a/test/background/backup/gist/compressor.test.ts
+++ b/test/background/backup/gist/compressor.test.ts
@@ -1,6 +1,6 @@
-import { devide2Buckets, gistData2Rows } from "@src/common/backup/gist/compressor"
+import { divide2Buckets, gistData2Rows } from "@src/common/backup/gist/compressor"
 
-test('devide 1', () => {
+test('divide 1', () => {
     const rows: timer.stat.Row[] = [{
         host: 'www.baidu.com',
         date: '20220801',
@@ -17,9 +17,9 @@ test('devide 1', () => {
         mergedHosts: [],
         virtual: false,
     }]
-    const devided = devide2Buckets(rows)
-    expect(devided.length).toEqual(1)
-    const [bucket, gistData] = devided[0]
+    const divided = divide2Buckets(rows)
+    expect(divided.length).toEqual(1)
+    const [bucket, gistData] = divided[0]
     expect(bucket).toEqual('202208')
     const expectData: GistData = {
         "01": {
diff --git a/test/database/timer-database.test.ts b/test/database/stat-database.test.ts
similarity index 98%
rename from test/database/timer-database.test.ts
rename to test/database/stat-database.test.ts
index 53a6cbf9..60299019 100644
--- a/test/database/timer-database.test.ts
+++ b/test/database/stat-database.test.ts
@@ -12,7 +12,7 @@ const beforeYesterday = new Date(now.getTime() - MILL_PER_DAY * 2)
 const baidu = 'www.baidu.com'
 const google = 'www.google.com.hk'
 
-describe('timer-database', () => {
+describe('stat-database', () => {
     beforeEach(async () => storage.local.clear())
 
     test('1', async () => {
@@ -69,7 +69,7 @@ describe('timer-database', () => {
         cond.host = google
         expect((await db.select(cond)).length).toEqual(3)
 
-        // By daterange
+        // By date range
         cond = {}
         cond.date = [now, now]
         const expectedResult: timer.stat.Row[] = [
@@ -124,7 +124,7 @@ describe('timer-database', () => {
         cond.host = google
         const list = await db.select(cond)
         expect(list.length).toEqual(1)
-        // Add one item of baidu again again 
+        // Add one item of baidu again again
         await db.accumulate(baidu, now, resultOf(1, 1))
         // But delete google
         await db.delete(list)
diff --git a/test/service/period-calculator.test.ts b/test/service/period-calculator.test.ts
index 686bccb3..6becf50e 100644
--- a/test/service/period-calculator.test.ts
+++ b/test/service/period-calculator.test.ts
@@ -90,14 +90,14 @@ test('merge', () => {
         resultOf(new Date(2020, 4, 20), 20, 20),
     ]
 
-    let result = merge(toMerge, { windowSize: 1, start: keyOf(start, 0), end: keyOf(end, 3) })
+    let result = merge(toMerge, { periodSize: 1, start: keyOf(start, 0), end: keyOf(end, 3) })
     expect(result.length).toEqual(30 * PERIODS_PER_DATE + 4)
     expect(result.filter(p => p.date === '20200506' && p.milliseconds > 0).length).toEqual(3)
     let milliseconds = result.filter(p => p.date === '20200506').map(p => p.milliseconds).reduce((a, b) => a + b, 0)
     expect(milliseconds).toEqual(60)
 
-    result = merge(toMerge, { windowSize: 4, start: keyOf(new Date(2020, 4, 11), 0), end: keyOf(end, 3) })
+    result = merge(toMerge, { periodSize: 4, start: keyOf(new Date(2020, 4, 11), 0), end: keyOf(end, 3) })
     expect(result.length).toEqual(20 * PERIODS_PER_DATE / 4 + 4 / 4)
-    result = merge(toMerge, { windowSize: 2, start: keyOf(start, 0), end: keyOf(end, 3) })
+    result = merge(toMerge, { periodSize: 2, start: keyOf(start, 0), end: keyOf(end, 3) })
     expect(result.length).toEqual(30 * PERIODS_PER_DATE / 2 + 4 / 2)
 })
\ No newline at end of file
diff --git a/test/util/array.test.ts b/test/util/array.test.ts
index bd150ce2..f11f4e70 100644
--- a/test/util/array.test.ts
+++ b/test/util/array.test.ts
@@ -5,7 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { groupBy, rotate, sum } from "@util/array"
+import { allMatch, anyMatch, average, groupBy, rotate, sum } from "@util/array"
 
 describe("util/array", () => {
 
@@ -48,4 +48,23 @@ describe("util/array", () => {
         arr = undefined
         expect(0).toEqual(sum(arr))
     })
+
+    test("average", () => {
+        expect(average([10, 1])).toEqual(11 / 2)
+        expect(average(null)).toBeNull()
+        expect(average([])).toBeNull()
+        expect(average([null])).toEqual(0)
+    })
+
+    test("allMatch", () => {
+        const arr = [100, 20, 30]
+        expect(allMatch(arr, a => a >= 20)).toBeTruthy()
+        expect(allMatch(arr, a => a > 20)).toBeFalsy()
+    })
+
+    test("anyMatch", () => {
+        const arr = [100, 20, 30]
+        expect(anyMatch(arr, a => a >= 100)).toBeTruthy()
+        expect(anyMatch(arr, a => a > 100)).toBeFalsy()
+    })
 })
diff --git a/types/timer/period.d.ts b/types/timer/period.d.ts
index 5ee2f0dd..9cd8b829 100644
--- a/types/timer/period.d.ts
+++ b/types/timer/period.d.ts
@@ -9,6 +9,7 @@ declare namespace timer.period {
          */
         order: number
     }
+    type KeyRange = [Key, Key]
     type Result = Key & {
         /**
          * 1~900000
diff --git a/types/timer/stat.d.ts b/types/timer/stat.d.ts
index 6af0fbbc..919db0e2 100644
--- a/types/timer/stat.d.ts
+++ b/types/timer/stat.d.ts
@@ -17,7 +17,7 @@ declare namespace timer.stat {
 
     /**
      * The stat result of host
-     * 
+     *
      * @since 0.0.1
      */
     type Result = {
@@ -26,7 +26,7 @@ declare namespace timer.stat {
 
     /**
      * A set of results
-     * 
+     *
      * @since 0.3.3
      */
     type ResultSet = { [host: string]: Result }
@@ -48,15 +48,14 @@ declare namespace timer.stat {
     type Row = RowBase & {
         /**
          * The merged domains
-         * 
          * Can't be empty if merged
-         * 
+         *
          * @since 0.1.5
          */
         mergedHosts: Row[]
         /**
          * Whether virtual host
-         * 
+         *
          * @since 1.6.0
          */
         virtual: boolean
@@ -66,7 +65,6 @@ declare namespace timer.stat {
         composition?: RemoteComposition
         /**
          * Icon url
-         * 
          * Must be undefined if merged
          */
         iconUrl?: string
@@ -75,11 +73,11 @@ declare namespace timer.stat {
          */
         alias?: string
         /**
-         * The id of client where the remote data is storaged
+         * The id of client where the remote data is stored
          */
         cid?: string
         /**
-         * The name of client where the remote data is storaged
+         * The name of client where the remote data is stored
          */
         cname?: string
     }