graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-24 20:33:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore: use color-mix()

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/frontend/.storybook/generate.tsx
View file

@ -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) => {

41
packages/frontend/src/widgets/server-metric/cpu-mem.stories.impl.ts Normal file
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>;

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

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