lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: add dark theme support for charts

This commit is contained in:
Lykin 2024-01-19 00:39:09 +08:00
parent 06853f7c75
commit 15f6314597
5 changed files with 147 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/release-macos.yaml vendored
View File

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

4
frontend/src/components/content/ContentPane.vue
View File

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

174
frontend/src/components/content_value/ContentServerStatus.vue
View File

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

2
frontend/src/components/dialogs/PreferencesDialog.vue
View File

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

46
frontend/src/components/icons/Pub.vue
View File

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