chore: use color-mix()

This commit is contained in:
Acid Chicken (硫酸鶏) 2023-05-20 22:25:44 +09:00
parent ca75afe065
commit 5071b19e4f
No known key found for this signature in database
GPG key ID: 3E87B98A3F6BAB99
3 changed files with 79 additions and 7 deletions

View file

@ -403,6 +403,7 @@ Promise.all([
glob('src/components/MkUserSetupDialog.vue'), glob('src/components/MkUserSetupDialog.vue'),
glob('src/components/MkUserSetupDialog.*.vue'), glob('src/components/MkUserSetupDialog.*.vue'),
glob('src/pages/user/home.vue'), glob('src/pages/user/home.vue'),
glob('src/widgets/server-metric/cpu-mem.vue'),
]) ])
.then((globs) => globs.flat()) .then((globs) => globs.flat())
.then((components) => Promise.all(components.map((component) => { .then((components) => Promise.all(components.map((component) => {

View file

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

View file

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