From 5071b19e4f2fd63f2d8bae723065adee91270292 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Sat, 20 May 2023 22:25:44 +0900
Subject: [PATCH] chore: use `color-mix()`

---
 packages/frontend/.storybook/generate.tsx     |  1 +
 .../server-metric/cpu-mem.stories.impl.ts     | 41 +++++++++++++++++
 .../src/widgets/server-metric/cpu-mem.vue     | 44 ++++++++++++++++---
 3 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 packages/frontend/src/widgets/server-metric/cpu-mem.stories.impl.ts

diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx
index f44242210..cc720ce71 100644
--- a/packages/frontend/.storybook/generate.tsx
+++ b/packages/frontend/.storybook/generate.tsx
@@ -403,6 +403,7 @@ Promise.all([
 	glob('src/components/MkUserSetupDialog.vue'),
 	glob('src/components/MkUserSetupDialog.*.vue'),
 	glob('src/pages/user/home.vue'),
+	glob('src/widgets/server-metric/cpu-mem.vue'),
 ])
 	.then((globs) => globs.flat())
 	.then((components) => Promise.all(components.map((component) => {
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.stories.impl.ts b/packages/frontend/src/widgets/server-metric/cpu-mem.stories.impl.ts
new file mode 100644
index 000000000..788265bfb
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.stories.impl.ts
@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import cpu_mem from './cpu-mem.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				cpu_mem,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<cpu_mem v-bind="props" />',
+		};
+	},
+	args: {
+		stats: Array.from({ length: 50 }, (_, i) => ({
+			cpu: (i % 11) / 10,
+			mem: {
+				active: (i % 11) / 10,
+			},
+		})),
+		meta: {
+			mem: {
+				total: 1,
+			},
+		},
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof cpu_mem>;
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
index 80a8e427e..71e7b1805 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -1,10 +1,19 @@
 <template>
 <div class="lcfyofjk">
+	<!-- #15c5cd = oklch(75% 0.125 200) -->
+	<!-- #f38c8d = oklch(75% 0.125 20) -->
 	<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, #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="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
 				<polygon
@@ -36,8 +45,15 @@
 	<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 +89,24 @@
 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 +161,10 @@ function onStatsLog(statsLog) {
 		onStats(revStats);
 	}
 }
+
+if (stats.length) {
+	onStatsLog(stats.splice(0, stats.length).reverse());
+}
 </script>
 
 <style lang="scss" scoped>