From 15f63145971a40d4bab1fc77899e3c0020df5f07 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 19 Jan 2024 00:39:09 +0800
Subject: [PATCH] perf: add dark theme support for charts

---
 .github/workflows/release-macos.yaml          |   4 +-
 .../src/components/content/ContentPane.vue    |   4 +-
 .../content_value/ContentServerStatus.vue     | 174 ++++++++++++++----
 .../components/dialogs/PreferencesDialog.vue  |   2 +-
 frontend/src/components/icons/Pub.vue         |  46 -----
 5 files changed, 147 insertions(+), 83 deletions(-)
 delete mode 100644 frontend/src/components/icons/Pub.vue

diff --git a/.github/workflows/release-macos.yaml b/.github/workflows/release-macos.yaml
index 8d1c794..8c0a392 100644
--- a/.github/workflows/release-macos.yaml
+++ b/.github/workflows/release-macos.yaml
@@ -104,8 +104,8 @@ jobs:
             --icon "Tiny RDM.app" 180 180 \
             --hide-extension "Tiny RDM.app" \
             --app-drop-link 480 180 \
-            --add-file "Repair" "dmg/fix-app" 430 290 \
-            --add-file "损坏修复" "dmg/fix-app_zh" 230 290 \
+            --add-file "Repair" "dmg/fix-app" 230 290 \
+            --add-file "损坏修复" "dmg/fix-app_zh" 430 290 \
             "bin/TinyRDM-${{ steps.normalise_platform.outputs.tag }}.dmg" \
             "bin"
 
diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index b1d95cd..9834fb3 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -12,12 +12,12 @@ import Detail from '@/components/icons/Detail.vue'
 import ContentValueWrapper from '@/components/content_value/ContentValueWrapper.vue'
 import ContentCli from '@/components/content_value/ContentCli.vue'
 import Monitor from '@/components/icons/Monitor.vue'
-import Pub from '@/components/icons/Pub.vue'
 import ContentSlog from '@/components/content_value/ContentSlog.vue'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 import ContentMonitor from '@/components/content_value/ContentMonitor.vue'
 import { decodeRedisKey } from '@/utils/key_convert.js'
 import ContentPubsub from '@/components/content_value/ContentPubsub.vue'
+import Subscribe from '@/components/icons/Subscribe.vue'
 
 const themeVars = useThemeVars()
 
@@ -198,7 +198,7 @@ watch(
                 <template #tab>
                     <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                         <n-icon size="16">
-                            <pub
+                            <subscribe
                                 :inverse="selectedSubTab === BrowserTabType.PubMessage.toString()"
                                 :stroke-color="themeVars.tabColor"
                                 stroke-width="4" />
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index f080456..0a66573 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -1,5 +1,19 @@
 <script setup>
-import { cloneDeep, flatMap, get, isEmpty, map, mapValues, pickBy, slice, split, sum, toArray, toNumber } from 'lodash'
+import {
+    cloneDeep,
+    flatMap,
+    get,
+    isEmpty,
+    map,
+    mapValues,
+    pickBy,
+    random,
+    slice,
+    split,
+    sum,
+    toArray,
+    toNumber,
+} from 'lodash'
 import { computed, onMounted, onUnmounted, reactive, ref, shallowRef, toRaw, watch } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Filter from '@/components/icons/Filter.vue'
@@ -119,7 +133,59 @@ const _updateChart = (info) => {
         dataset2 = dataset2.concat(output)
         dataset2 = slice(dataset2, Math.max(0, dataset2.length - statusHistory))
         networkRate.value = generateData(networkRate.value, timeLabels, [dataset1, dataset2])
-        // console.log(dataset1, dataset2)
+    }
+}
+
+/**
+ * for mock activity data only
+ * @private
+ */
+const _mockChart = () => {
+    const timeLabels = []
+    for (let i = 0; i < 5; i++) {
+        timeLabels.push(dayjs().add(5, 'seconds').format('hh:mm:ss'))
+    }
+
+    // commands per seconds
+    {
+        const dataset = []
+        for (let i = 0; i < 5; i++) {
+            dataset.push(random(10, 200))
+        }
+        cmdRate.value = generateData(cmdRate.value, timeLabels, [dataset])
+    }
+
+    // connected clients
+    {
+        const dataset = []
+        for (let i = 0; i < 5; i++) {
+            dataset.push(random(10, 20))
+        }
+        connectedClients.value = generateData(connectedClients.value, timeLabels, [dataset])
+    }
+
+    // memory usage
+    {
+        const dataset = []
+        for (let i = 0; i < 5; i++) {
+            dataset.push(random(120 * 1024 * 1024, 200 * 1024 * 1024))
+        }
+        memoryUsage.value = generateData(memoryUsage.value, timeLabels, [dataset])
+    }
+
+    // network input/output rate
+    {
+        const dataset1 = []
+        for (let i = 0; i < 5; i++) {
+            dataset1.push(random(100, 1500))
+        }
+
+        const dataset2 = []
+        for (let i = 0; i < 5; i++) {
+            dataset2.push(random(200, 3000))
+        }
+
+        networkRate.value = generateData(networkRate.value, timeLabels, [dataset1, dataset2])
     }
 }
 
@@ -172,6 +238,7 @@ onMounted(() => {
         onToggleRefresh(true)
     } else {
         setTimeout(refreshInfo, 5000)
+        // setTimeout(_mockChart, 1000)
     }
     refreshInfo()
 })
@@ -357,40 +424,83 @@ const networkRate = shallowRef({
     ],
 })
 
-const chartOption = {
-    responsive: true,
-    maintainAspectRatio: false,
-    events: [],
-    scales: {
-        y: {
-            beginAtZero: true,
-            stepSize: 1024,
-            suggestedMin: 0,
-            ticks: {
-                precision: 0,
+const chartOption = computed(() => {
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        events: [],
+        scales: {
+            x: {
+                grid: {
+                    color: themeVars.value.borderColor,
+                },
+                ticks: {
+                    color: themeVars.value.textColor3,
+                },
             },
-        },
-    },
-}
-
-const byteChartOption = {
-    responsive: true,
-    maintainAspectRatio: false,
-    events: [],
-    scales: {
-        y: {
-            beginAtZero: true,
-            suggestedMin: 0,
-            ticks: {
-                precision: 0,
-                // format display y axios tag
-                callback: function (value, index, values) {
-                    return formatBytes(value, 1)
+            y: {
+                beginAtZero: true,
+                stepSize: 1024,
+                suggestedMin: 0,
+                grid: {
+                    color: themeVars.value.borderColor,
+                },
+                ticks: {
+                    color: themeVars.value.textColor3,
+                    precision: 0,
                 },
             },
         },
-    },
-}
+        plugins: {
+            legend: {
+                labels: {
+                    color: themeVars.value.textColor2,
+                },
+            },
+        },
+    }
+})
+
+const byteChartOption = computed(() => {
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        events: [],
+        scales: {
+            x: {
+                grid: {
+                    color: themeVars.value.borderColor,
+                },
+                ticks: {
+                    color: themeVars.value.textColor3,
+                },
+            },
+            y: {
+                beginAtZero: true,
+                stepSize: 1024,
+                suggestedMin: 0,
+                grid: {
+                    color: themeVars.value.borderColor,
+                },
+                ticks: {
+                    color: themeVars.value.textColor3,
+                    precision: 0,
+                    // format display y axios tag
+                    callback: function (value, index, values) {
+                        return formatBytes(value, 1)
+                    },
+                },
+            },
+        },
+        plugins: {
+            legend: {
+                labels: {
+                    color: themeVars.value.textColor2,
+                },
+            },
+        },
+    }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index 02337ac..a79d72d 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -45,7 +45,7 @@ const keyOptions = computed(() => {
 const onSavePreferences = async () => {
     const success = await prefStore.savePreferences()
     if (success) {
-        $message.success(i18n.t('dialogue.handle_succ'))
+        // $message.success(i18n.t('dialogue.handle_succ'))
         dialogStore.closePreferencesDialog()
     }
 }
diff --git a/frontend/src/components/icons/Pub.vue b/frontend/src/components/icons/Pub.vue
deleted file mode 100644
index fe093a5..0000000
--- a/frontend/src/components/icons/Pub.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup>
-const props = defineProps({
-    inverse: {
-        type: Boolean,
-        default: false,
-    },
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-    strokeColor: {
-        type: String,
-        default: 'currentColor',
-    },
-})
-</script>
-
-<template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M33 38H22V30H36V22H44V38H39L36 41L33 38Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :fill="props.inverse ? 'currentColor' : 'none'"
-            :stroke-width="props.strokeWidth"
-            d="M4 6H36V30H17L13 34L9 30H4V6Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
-            :stroke-width="props.strokeWidth"
-            d="M12 22H18"
-            stroke-linecap="round" />
-        <path
-            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
-            :stroke-width="props.strokeWidth"
-            d="M12 14H24"
-            stroke-linecap="round" />
-    </svg>
-</template>
-
-<style lang="scss" scoped></style>