Site analysis(#201)

Site analysis(#201)

Author: sheepzh

src/app/components/analysis/components/common/indicator.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { I18nKey } from "@app/locale"
+import type { PropType, VNode } from "vue"
+
+import { tN } from "@app/locale"
+import { defineComponent, h } from "vue"
+
+export type IndicatorProps = {
+    mainName: string
+    mainValue: string
+    subTips?: I18nKey
+    subValue?: string
+}
+
+function renderChildren(props: IndicatorProps): VNode[] {
+    const { mainName, subTips, mainValue, subValue } = props
+    const children = [
+        h('div', { class: 'indicator-name' }, mainName),
+        h('div', { class: 'indicator-value' }, mainValue || '-'),
+    ]
+    const subTipsLine = []
+    if (subTips || subValue) {
+        const subValueSpan = h('span', { class: 'indicator-sub-value' }, subValue || '-')
+        if (subTips) {
+            subTipsLine.push(...tN(subTips, { value: subValueSpan }))
+        } else {
+            subTipsLine.push(subValueSpan)
+        }
+    } else {
+        subTipsLine.push('')
+    }
+    children.push(h('div', { class: 'indicator-sub-tip' }, subTipsLine))
+    return children
+}
+
+const _default = defineComponent({
+    props: {
+        mainName: String,
+        mainValue: String,
+        subTips: Function as PropType<I18nKey>,
+        subValue: String,
+    },
+    setup(props) {
+        return () => h('div', { class: 'analysis-indicator-container' }, renderChildren(props))
+    }
+})
+
+export default _default

src/app/components/analysis/components/common/row-card.ts

@@ -0,0 +1,25 @@
+/**
+ * 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

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

@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { Ref, PropType, VNode } from "vue"
+
+import { ElOption, ElSelect, ElTag } from "element-plus"
+import { ref, h, defineComponent } from "vue"
+import statService, { HostSet } from "@service/stat-service"
+import { t } from "@app/locale"
+import SelectFilterItem from "@app/components/common/select-filter-item"
+import { labelOfHostInfo } from "../util"
+
+async function handleRemoteSearch(queryStr: string, trendDomainOptions: Ref<timer.site.SiteKey[]>, searching: Ref<boolean>) {
+    if (!queryStr) {
+        trendDomainOptions.value = []
+        return
+    }
+    searching.value = true
+    const domains: HostSet = await statService.listHosts(queryStr)
+    const options: timer.site.SiteKey[] = []
+    const { origin, merged, virtual } = domains
+    origin.forEach(host => options.push({ host }))
+    merged.forEach(host => options.push({ host, merged: true }))
+    virtual.forEach(host => options.push({ host, virtual: true }))
+    trendDomainOptions.value = options
+    searching.value = false
+}
+
+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 = '_'
+    merged && (prefix = 'm')
+    virtual && (prefix = 'v')
+    return `${prefix}${host || ''}`
+}
+
+function hostInfoOfKey(key: string): timer.site.SiteKey {
+    if (!key?.length) return undefined
+    const prefix = key.charAt(0)
+    return { host: key.substring(1), merged: prefix === 'm', virtual: prefix === 'v' }
+}
+
+const MERGED_TAG_TXT = t(msg => msg.analysis.common.merged)
+const VIRTUAL_TAG_TXT = t(msg => msg.analysis.common.virtual)
+function renderHostLabel(hostInfo: timer.site.SiteKey): VNode[] {
+    const result = [
+        h('span', {}, hostInfo.host)
+    ]
+    hostInfo.merged && result.push(
+        h(ElTag, { size: 'small' }, () => MERGED_TAG_TXT)
+    )
+    hostInfo.virtual && result.push(
+        h(ElTag, { size: 'small' }, () => VIRTUAL_TAG_TXT)
+    )
+    return result
+}
+
+const _default = defineComponent({
+    name: "TrendFilter",
+    props: {
+        site: Object as PropType<timer.site.SiteKey>,
+        timeFormat: String as PropType<timer.app.TimeFormat>
+    },
+    emits: {
+        siteChange: (_site: timer.site.SiteKey) => true,
+        timeFormatChange: (_format: timer.app.TimeFormat) => true,
+    },
+    setup(props, ctx) {
+        const domainKey: Ref<string> = ref('')
+        const trendSearching: Ref<boolean> = ref(false)
+        const trendDomainOptions: Ref<timer.site.SiteKey[]> = ref([])
+        const defaultSite: timer.site.SiteKey = props.site
+        const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
+        if (defaultSite) {
+            domainKey.value = keyOfHostInfo(defaultSite)
+            trendDomainOptions.value.push(defaultSite)
+        }
+
+        function handleSiteChange() {
+            const siteInfo: timer.site.SiteInfo = hostInfoOfKey(domainKey.value)
+            ctx.emit('siteChange', siteInfo)
+        }
+
+        return () => [
+            h(ElSelect, {
+                placeholder: HOST_PLACEHOLDER,
+                class: 'filter-item',
+                modelValue: domainKey.value,
+                filterable: true,
+                remote: true,
+                loading: trendSearching.value,
+                clearable: true,
+                remoteMethod: (query: string) => handleRemoteSearch(query, trendDomainOptions, trendSearching),
+                onChange: (key: string) => {
+                    domainKey.value = key
+                    handleSiteChange()
+                },
+                onClear: () => {
+                    domainKey.value = undefined
+                    handleSiteChange()
+                }
+            }, () => (trendDomainOptions.value || [])?.map(
+                hostInfo => h(ElOption, {
+                    value: keyOfHostInfo(hostInfo),
+                    label: labelOfHostInfo(hostInfo),
+                }, () => renderHostLabel(hostInfo))
+            )),
+            h(SelectFilterItem, {
+                historyName: 'timeFormat',
+                defaultValue: timeFormat.value,
+                options: TIME_FORMAT_LABELS,
+                onSelect: (newVal: timer.app.TimeFormat) => ctx.emit('timeFormatChange', timeFormat.value = newVal)
+            })
+        ]
+    }
+})
+
+export default _default

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

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+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 "./summary.sass"
+import { ElCol, ElRow } from "element-plus"
+import { t } from "@app/locale"
+import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
+
+type Summary = {
+    focus: number
+    visit: number
+    day: number
+    firstDay?: string
+}
+
+function computeSummary(site: timer.site.SiteKey, rows: timer.stat.Row[]): Summary {
+    if (!site) return undefined
+
+    const summary: Summary = { focus: 0, visit: 0, day: 0 }
+    summary.firstDay = rows?.[0]?.date
+    rows.forEach(({ focus, time: visit }) => {
+        summary.focus += focus
+        summary.visit += visit
+        focus && (summary.day += 1)
+    })
+    return summary
+}
+
+const DAYS_LABEL = t(msg => msg.analysis.summary.day)
+const FOCUS_LABEL = t(msg => msg.analysis.common.focusTotal)
+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" }, () => [
+        h(ElCol, { span: 6 }, () => h(Site, { site: siteInfo })),
+        h(ElCol, { span: 6 }, () => h(Indicator, {
+            mainName: DAYS_LABEL,
+            mainValue: day?.toString() || '-',
+            subTips: msg => msg.analysis.summary.firstDay,
+            subValue: firstDay ? `@${cvt2LocaleTime(firstDay)}` : ''
+        })),
+        h(ElCol, { span: 6 }, () => h(Indicator, {
+            mainName: FOCUS_LABEL,
+            mainValue: focus === undefined ? '-' : periodFormatter(focus, timeFormat, false),
+        })),
+        h(ElCol, { span: 6 }, () => h(Indicator, {
+            mainName: VISIT_LABEL,
+            mainValue: visit?.toString() || '-',
+        })),
+    ])
+}
+
+const _default = defineComponent({
+    props: {
+        site: Object as PropType<timer.site.SiteKey>,
+        timeFormat: String as PropType<timer.app.TimeFormat>,
+        rows: Array as PropType<timer.stat.Row[]>,
+    },
+    setup(props) {
+        const siteInfo: Ref<timer.site.SiteInfo> = ref()
+        const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
+        const summaryInfo: Ref<Summary> = ref(computeSummary(props.site, props.rows))
+
+        const querySiteInfo = async () => {
+            const siteKey = props.site
+            if (!siteKey) {
+                siteInfo.value = undefined
+            } else {
+                siteInfo.value = (await siteService.get(siteKey)) || siteKey
+            }
+        }
+
+        watch(() => props.timeFormat, () => timeFormat.value = props.timeFormat)
+        watch(() => props.site, querySiteInfo)
+        watch(() => props.rows, () => summaryInfo.value = computeSummary(props.site, props.rows))
+
+        querySiteInfo()
+
+        return () => h(RowCard, {
+            title: t(msg => msg.analysis.summary.title)
+        }, () => renderContent(siteInfo.value, summaryInfo.value, timeFormat.value))
+    }
+})
+
+export default _default

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

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { PropType, defineComponent, h } from "vue"
+import { labelOfHostInfo } from "../../util"
+import { t } from "@app/locale"
+
+const renderIcon = (iconUrl: string) => h('img', { src: iconUrl, width: 24, height: 24 })
+const renderTitle = (title: string) => h('h1', { class: 'site-alias' }, title)
+const renderSubtitle = (subtitle: string) => h('p', { class: 'site-host' }, subtitle)
+
+const EMPTY_DESC = t(msg => msg.analysis.common.emptyDesc)
+
+function renderChildren(site: timer.site.SiteInfo) {
+    if (!site) {
+        return renderTitle(EMPTY_DESC)
+    }
+    const result = []
+
+    const { iconUrl, alias } = site
+    const label = labelOfHostInfo(site)
+    const title: string = alias ? alias : label
+    const subtitle: string = alias ? label : undefined
+
+    iconUrl && result.push(renderIcon(iconUrl))
+    result.push(renderTitle(title))
+    subtitle && result.push(renderSubtitle(subtitle))
+    return result
+}
+
+const _default = defineComponent({
+    props: {
+        site: Object as PropType<timer.site.SiteInfo>,
+    },
+    setup(props) {
+        return () => h('div', { class: 'site-container' }, renderChildren(props.site))
+    }
+})
+
+export default _default

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

@@ -0,0 +1,22 @@
+
+.analysis-summary-container
+    height: 140px
+    >.el-col:not(:first-child)
+        border-left: 1px var(--el-border-color) var(--el-border-style)
+    .site-container
+        position: relative
+        top: 50%
+        transform: translateY(-50%)
+        text-align: center
+        padding: 0 25px
+        .site-alias
+            font-size: 26px
+            margin-block-start: 0.2em
+            margin-block-end: 0.5em
+        .site-host
+            font-size: 14px
+            color: var(--el-text-color-secondary)
+        .site-host,.site-alias
+            white-space: nowrap
+            overflow: hidden
+            text-overflow: ellipsis