mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-11 04:52:06 +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>
46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<h2 v-if="title" class="text-lg mb-4 w-full">{{ title }}</h2>
|
|
<div class="flex flex-col xl:flex-row gap-4">
|
|
<div class="relative flex grow max-w-[12rem]">
|
|
<svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
|
|
<PieChartPieSlice
|
|
v-for="slice in slices"
|
|
:key="`${slice.percentage}-${slice.totalPercentage}`"
|
|
:slice="slice"
|
|
/>
|
|
</svg>
|
|
<div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
|
|
</div>
|
|
<ul class="flex flex-col gap-y-1 justify-center text-left">
|
|
<li
|
|
v-for="slice in slices"
|
|
:key="slice.value"
|
|
class="text-sm inline-flex items-center gap-x-1"
|
|
>
|
|
<span
|
|
class="size-3 inline-block rounded-sm"
|
|
:class="CHART_COLOURS[slice.color].bg"
|
|
/>
|
|
{{
|
|
$t("common.labelValueColon", {
|
|
label: slice.label,
|
|
value: slice.value,
|
|
})
|
|
}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { generateSlices } from "~/components/PieChart/utils";
|
|
import type { SliceData } from "~/components/PieChart/types";
|
|
|
|
const { data, title = undefined } = defineProps<{
|
|
data: SliceData[];
|
|
title?: string | undefined;
|
|
}>();
|
|
|
|
const slices = generateSlices(data);
|
|
</script>
|