Add total and reformat main page to scale if charts are less or more than 4

This commit is contained in:
qowevisa 2024-12-01 17:23:22 +02:00
parent a90d18cad6
commit 5716d1ebc4
2 changed files with 19 additions and 9 deletions

View File

@ -146,6 +146,7 @@ export interface StatsType {
export interface StatsTypeCurrencyChart {
label: string;
elements: StatsType[];
total: number;
}
// {{{ Settings section

View File

@ -9,6 +9,7 @@
type ChartConfiguration,
} from "chart.js";
import type { StatsTypeCurrencyChart } from "$lib/entities";
import { NumberToFPA } from "$lib/util/fpa";
Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
@ -33,7 +34,7 @@
labels: chart.elements.map((type) => type.name),
datasets: [
{
label: "Chart Dataset",
label: chart.label,
data: chart.elements.map((type) => type.value / 100),
backgroundColor: chart.elements.map((type) => type.color),
},
@ -66,15 +67,23 @@
{/if}
<!-- Render canvas elements for charts -->
<div class="w-1/2 grid grid-cols-2 gap-4">
<div class="flex items-center justify-center">
<div
class="{configs.length > 4
? 'grid-cols-4'
: 'grid-cols-2'} w-fit grid gap-4"
>
{#each configs as _, index}
<div class="flex flex-col">
<div class="type-chart">
<canvas bind:this={canvases[index]}></canvas>
<span class="flex justify-center">{data[index].label}</span>
<span class="flex justify-center"
>{`Total: ${NumberToFPA(data[index].total)} ${data[index].label}`}</span
>
</div>
</div>
{/each}
</div>
</div>
<style lang="postcss">