Optimized analysis (#268)

Author: sheepzh

src/app/components/Analysis/components/Summary/CalendarChart.tsx

@@ -116,7 +116,6 @@ function optionOf(data: _Value[], weekDays: string[], timeFormat: timer.app.Time
             axisLabel: {
                 formatter: (x: string) => xAxisLabelMap[x] || '',
                 interval: 0,
-                margin: 0,
                 color: textColor,
             },
         },

src/app/components/Analysis/index.tsx

@@ -18,6 +18,7 @@ import './style.sass'
 import { judgeVirtualFast } from "@util/pattern"
 import { initProvider } from "./context"
 import { useRequest } from "@app/hooks/useRequest"
+import { ElLoadingService } from "element-plus"
 
 type _Queries = {
     host: string
@@ -52,13 +53,23 @@ const _default = defineComponent(() => {
     const siteFromQuery = getSiteFromQuery()
     const site: Ref<timer.site.SiteKey> = ref(siteFromQuery)
     const timeFormat: Ref<timer.app.TimeFormat> = ref('default')
+    const contentId = `analysis-content-` + Date.now()
 
-    const { data: rows, refresh } = useRequest(async () => {
+    const { data: rows, refresh, loading } = useRequest(async () => {
         const siteKey = site.value
         if (!siteKey) return []
         return await query(siteKey)
     })
 
+    let loadingService: { close: () => void }
+    watch(loading, () => {
+        if (loading.value) {
+            loadingService = ElLoadingService({ target: `#${contentId}`, text: "Loading data..." })
+        } else {
+            loadingService?.close?.()
+        }
+    })
+
     initProvider(site, timeFormat, rows)
 
     watch(site, refresh)
@@ -72,8 +83,10 @@ const _default = defineComponent(() => {
                 onTimeFormatChange={val => timeFormat.value = val}
             />
         }}>
-            <Summary />
-            <Trend />
+            <div id={contentId}>
+                <Summary />
+                <Trend />
+            </div>
         </ContentContainer>
     )
 })

src/app/components/common/kanban/IndicatorCell.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 } 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 renderSub(props: IndicatorProps): VNode {
+    const { subTips, subValue, subInfo } = props
+    if (!subTips && !subValue) {
+        return null
+    }
+
+    const subTipsLine = []
+    const subValueSpan = <span class="kanban-indicator-cell-sub-val">{subValue ?? '-'}</span>
+    if (subTips) {
+        subTipsLine.push(...tN(subTips, { value: subValueSpan }))
+    } else {
+        subTipsLine.push(subValueSpan)
+    }
+    subInfo && subTipsLine.push(
+        <span class="kanban-indicator-cell-sub-info">
+            <ElTooltip content={subInfo} placement="bottom">
+                <ElIcon><InfoFilled /></ElIcon>
+            </ElTooltip>
+        </span>
+    )
+    return <div class="kanban-indicator-cell-sub-tip">{subTipsLine}</div>
+}
+
+const _default = defineComponent({
+    props: {
+        mainName: String,
+        mainValue: String,
+        subTips: Function as PropType<I18nKey>,
+        subValue: String,
+        subInfo: String,
+    },
+    setup(props) {
+        const { mainName, mainValue } = props
+        return () => (
+            <div class="kanban-indicator-cell-container">
+                <div class="kanban-indicator-cell-name">{mainName}</div>
+                <div class="kanban-indicator-cell-val">{mainValue ?? '-'}</div>
+                {renderSub(props)}
+            </div>
+        )
+    }
+})
+
+export default _default

…omponents/common/kanban/indicator-row.ts …omponents/common/kanban/IndicatorRow.tsxsrc/app/components/common/kanban/indicator-row.ts renamed to src/app/components/common/kanban/IndicatorRow.tsx src/app/components/common/kanban/indicator-row.ts renamed to src/app/components/common/kanban/IndicatorRow.tsx

@@ -5,8 +5,8 @@
  * https://opensource.org/licenses/MIT
  */
 
-import IndicatorCell from "./indicator-cell"
-import IndicatorRow from "./indicator-row"
+import IndicatorCell from "./IndicatorCell"
+import IndicatorRow from "./IndicatorRow"
 import Card from "./card"
 
 export const KanbanIndicatorCell = IndicatorCell

src/app/components/common/kanban/index.ts

@@ -18,8 +18,10 @@
         font-size: 12px
         word-break: break-word
         color: var(--el-text-color-secondary)
+        display: flex
+        align-items: center
     .kanban-indicator-cell-sub-val,.indicator-ring-growth-value
         color: var(--el-text-color-primary)
     .kanban-indicator-cell-sub-info
-        vertical-align: sub
+        margin-top: 1px
         margin-left: 2px