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

View file

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

View file

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