refactor: 💄 reverse pie chart color on indexing
Co-authored-by: PrivateGER <privateger@codeberg.org>
This commit is contained in:
parent
856c8a26e4
commit
f69c6ef274
2 changed files with 8 additions and 1 deletions
|
@ -4,6 +4,7 @@
|
|||
v-tooltip="i18n.ts.meiliIndexCount"
|
||||
class="pie"
|
||||
:value="progress"
|
||||
:reverse="true"
|
||||
/>
|
||||
<div>
|
||||
<p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p>
|
||||
|
|
|
@ -29,11 +29,17 @@ import {} from "vue";
|
|||
|
||||
const props = defineProps<{
|
||||
value: number;
|
||||
reverse?: boolean;
|
||||
}>();
|
||||
|
||||
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(
|
||||
() => (1 - props.value) * (Math.PI * (r * 2))
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue