mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-15 17:21:13 +10:00
dfa30c8a65
* First iteration on the new PieChart component * #128 Adds new admin home page * Fixes code after merging conflicts * Removes empty file * Uses real data for admin home page, and improves style * Reverts debugging code * Defines missing variable * Caches user stats data for admin home page * Typo * Styles improvements * Invalidates cache on signup/signin * Implements top 5 biggest games * Improves styling * Improves style * Using generateManifest to get the proper size * Reading data from cache * Removes unnecessary import * Improves caching mechanism for game sizes * Removes lint errors * Replaces piechart tooltip with colors in legend * Fixes caching * Fixes caching and slight improvement on pie chart colours * Fixes a few bugs related to caching * Fixes bug where app signin didn't refresh cache * feat: style improvements * fix: lint --------- Co-authored-by: DecDuck <declanahofmeyr@gmail.com>
32 lines
763 B
Vue
32 lines
763 B
Vue
<template>
|
|
<div
|
|
:class="[
|
|
'relative h-5 rounded-xl overflow-hidden',
|
|
CHART_COLOURS[backgroundColor].bg,
|
|
]"
|
|
>
|
|
<div
|
|
:style="{ width: `${percentage}%` }"
|
|
:class="['transition-all h-full', CHART_COLOURS[color].bg]"
|
|
/>
|
|
<span
|
|
class="absolute inset-0 flex items-center justify-center text-blue-200 text-sm font-bold font-display"
|
|
>
|
|
{{ $t("tasks.admin.progress", [Math.round(percentage * 10) / 10]) }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { type ChartColour, CHART_COLOURS } from "~/utils/colors";
|
|
const {
|
|
percentage,
|
|
color = "blue",
|
|
backgroundColor = "zinc",
|
|
} = defineProps<{
|
|
percentage: number;
|
|
color?: ChartColour;
|
|
backgroundColor?: ChartColour;
|
|
}>();
|
|
</script>
|