natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

refactor: 💄 reverse pie chart color on indexing 

Co-authored-by: PrivateGER <privateger@codeberg.org>
This commit is contained in:
ThatOneCalculator 2023-06-12 01:58:32 -07:00
parent 856c8a26e4
commit f69c6ef274
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/widgets/server-metric/meilisearch.vue
View File

@ -4,6 +4,7 @@
v-tooltip="i18n.ts.meiliIndexCount" v-tooltip="i18n.ts.meiliIndexCount"
class="pie" class="pie"
:value="progress" :value="progress"
:reverse="true"
/> />
<div> <div>
<p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p> <p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p>

8
packages/client/src/widgets/server-metric/pie.vue
View File

@ -29,11 +29,17 @@ import {} from "vue";
const props = defineProps<{ const props = defineProps<{
value: number; value: number;
reverse?: boolean;
}>(); }>();
const r = 0.45; const r = 0.45;
const color = $computed(() => `hsl(${180 - props.value * 180}, 80%, 70%)`); const color = $computed(
() =>
`hsl(${
props.reverse ? 180 + props.value * 180 : 180 - props.value * 180
}, 80%, 70%)`
);
const strokeDashoffset = $computed( const strokeDashoffset = $computed(
() => (1 - props.value) * (Math.PI * (r * 2)) () => (1 - props.value) * (Math.PI * (r * 2))
); );