perf: add dark theme support for charts

.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 "Repair" "dmg/fix-app" 230 290 \
-            --add-file "损坏修复" "dmg/fix-app_zh" 230 290 \
+            --add-file "损坏修复" "dmg/fix-app_zh" 430 290 \
             "bin/TinyRDM-${{ steps.normalise_platform.outputs.tag }}.dmg" \
             "bin"
 

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" />

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,31 +424,66 @@ const networkRate = shallowRef({
     ],
 })
 
-const chartOption = {
+const chartOption = 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,
                 },
             },
         },
-}
+        plugins: {
+            legend: {
+                labels: {
+                    color: themeVars.value.textColor2,
+                },
+            },
+        },
+    }
+})
 
-const byteChartOption = {
+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) {
@@ -390,7 +492,15 @@ const byteChartOption = {
                 },
             },
         },
-}
+        plugins: {
+            legend: {
+                labels: {
+                    color: themeVars.value.textColor2,
+                },
+            },
+        },
+    }
+})
 </script>
 
 <template>

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()
     }
 }

frontend/src/components/icons/Pub.vue

@@ -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>