worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

enhance(client): cpu-memメトリクスウィジェットの色変更

Browse source
This commit is contained in:
NoriDev 2023-06-14 20:37:37 +09:00
parent 9793da2973
commit a27c3e2a2c
2 changed files with 39 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View file

@ -56,6 +56,7 @@
- 더 보기! 메뉴에 도움말 추가
- 노트를 자세히 볼 때 역할 배지를 표시하도록
- 일부 제어판 페이지의 헤더 개선
- cpu-mem 통계 위젯의 색상 변경
- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
- Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
- Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

41
packages/frontend/src/widgets/server-metric/cpu-mem.vue
View file

@ -3,8 +3,19 @@
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
<defs>
<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
<!--
<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-->
<stop offset="0%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 0%)"></stop>
<stop offset="12.5%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 12.5%)"></stop>
<stop offset="25%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 25%)"></stop>
<stop offset="37.5%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 37.5%)"></stop>
<stop offset="50%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 50%)"></stop>
<stop offset="62.5%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 62.5%)"></stop>
<stop offset="75%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 75%)"></stop>
<stop offset="87.5%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 87.5%)"></stop>
<stop offset="100%" stop-color="color-mix(in oklch decreasing hue, #b1ddff, #ffbcdc 100%)"></stop>
</linearGradient>
<mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
<polygon
@ -36,8 +47,19 @@
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
<defs>
<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
<!--
<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-->
<stop offset="0%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 0%)"></stop>
<stop offset="12.5%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 12.5%)"></stop>
<stop offset="25%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 25%)"></stop>
<stop offset="37.5%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 37.5%)"></stop>
<stop offset="50%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 50%)"></stop>
<stop offset="62.5%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 62.5%)"></stop>
<stop offset="75%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 75%)"></stop>
<stop offset="87.5%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 87.5%)"></stop>
<stop offset="100%" stop-color="color-mix(in oklch decreasing hue, #15c5cd, #f38c8d 100%)"></stop>
</linearGradient>
<mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
<polygon
@ -73,14 +95,23 @@
import { onMounted, onBeforeUnmount } from 'vue';
import { v4 as uuid } from 'uuid';
const props = defineProps<{
type Stat = {
cpu: number;
mem: {
active: number;
};
};
const props = withDefaults(defineProps<{
stats?: Stat[]
connection: any,
meta: any
}>();
}>(), {
stats: () => [] as Stat[],
});
let viewBoxX: number = $ref(50);
let viewBoxY: number = $ref(30);
let stats: any[] = $ref([]);
let stats: Stat[] = $ref(props.stats);
const cpuGradientId = uuid();
const cpuMaskId = uuid();
const memGradientId = uuid();
@ -135,6 +166,10 @@ function onStatsLog(statsLog) {
onStats(revStats);
}
}
if (stats.length) {
onStatsLog(stats.splice(0, stats.length).reverse());
}
</script>
<style lang="scss" scoped>