From a27c3e2a2c3a77898e0092e558cbe2a978ec0b03 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 14 Jun 2023 20:37:37 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20cpu-mem=E3=83=A1=E3=83=88?=
 =?UTF-8?q?=E3=83=AA=E3=82=AF=E3=82=B9=E3=82=A6=E3=82=A3=E3=82=B8=E3=82=A7?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E3=81=AE=E8=89=B2=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 .../src/widgets/server-metric/cpu-mem.vue     | 41 +++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 15676b8271..73892ad823 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -56,6 +56,7 @@
 - 더 보기! 메뉴에 도움말 추가
 - 노트를 자세히 볼 때 역할 배지를 표시하도록
 - 일부 제어판 페이지의 헤더 개선
+- cpu-mem 통계 위젯의 색상 변경
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
index 80a8e427e1..09268bbb06 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -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>