feat: charts

BBN-Holding · Mar 16, 2024 · 531b5c7 · 531b5c7
1 parent b86543c
commit 531b5c7
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 4 deletions.
diff --git a/pages/music/views/menu.ts b/pages/music/views/menu.ts
@@ -1,5 +1,5 @@
-import { API, count, HeavyList, LoadingSpinner, Navigation, placeholder, stupidErrorAlert } from "shared/mod.ts";
-import { Button, Entry, isMobile, ref } from "webgen/mod.ts";
+import { API, Chart, count, HeavyList, LoadingSpinner, Navigation, placeholder, stupidErrorAlert } from "shared/mod.ts";
+import { Button, Entry, Grid, isMobile, ref } from "webgen/mod.ts";
 import { DropType } from "../../../spec/music.ts";
 import { activeUser } from "../../_legacy/helper.ts";
 import { state } from "../state.ts";
@@ -43,6 +43,74 @@ export const musicMenu = Navigation({
             id: "payouts",
             title: ref`Payouts ${count(state.$payouts)}`,
             children: state.$payouts.map(payouts => payouts == "loading" ? [ LoadingSpinner() ] : [
+                Grid(
+                    Chart({
+                        type: 'bar',
+                        data: {
+                            labels: payouts.map(row => row.period.split(" to ")[ 0 ].split("Period ")[ 1 ].split("-").slice(0, 2).join("-")).reverse(),
+                            datasets: [
+                                {
+                                    label: 'Revenue by Month',
+                                    data: payouts.map(row => row.moneythisperiod.replace("£ ", "")).reverse(),
+                                }
+                            ]
+                        },
+                        options: {
+                            plugins: {
+                                title: {
+                                    display: true,
+                                    text: 'Revenue by Month',
+                                    color: 'white'
+                                },
+                                legend: {
+                                    display: false
+                                }
+                            },
+                            responsive: true,
+                            scales: {
+                                x: {
+                                    stacked: true,
+                                },
+                                y: {
+                                    stacked: true
+                                }
+                            }
+                        }
+                    }),
+                    Chart({
+                        type: 'bar',
+                        data: {
+                            labels: payouts.map(row => row.period.split(" to ")[ 0 ].split("Period ")[ 1 ].split("-").slice(0, 2).join("-")).reverse(),
+                            datasets: [
+                                {
+                                    label: 'Streams by Month',
+                                    data: payouts.map(row => row.streams).reverse()
+                                }
+                            ]
+                        },
+                        options: {
+                            plugins: {
+                                title: {
+                                    display: true,
+                                    text: 'Streams by Month',
+                                    color: 'white'
+                                },
+                                legend: {
+                                    display: false
+                                }
+                            },
+                            responsive: true,
+                            scales: {
+                                x: {
+                                    stacked: true,
+                                },
+                                y: {
+                                    stacked: true
+                                }
+                            }
+                        }
+                    })
+                ).setEvenColumns(2),
                 HeavyList(state.$payouts, (x) => Entry({
                     title: x.period,
                     subtitle: x.moneythisperiod,

diff --git a/pages/shared/components.ts b/pages/shared/components.ts
@@ -1,3 +1,16 @@
-import { Box, Custom, loadingWheel } from "webgen/mod.ts";
+import type { ChartConfiguration, ChartConfigurationCustomTypesPerDataset, ChartType, DefaultDataPoint, } from "https://esm.sh/chart.js/auto";
+import { Box, Custom, lazyInit, loadingWheel } from "webgen/mod.ts";
 
-export const LoadingSpinner = () => Box(Custom(loadingWheel() as Element as HTMLElement)).addClass("loading");
+export const LoadingSpinner = () => Box(Custom(loadingWheel() as Element as HTMLElement)).addClass("loading");
+
+const lazyChart = lazyInit(() => import("https://esm.sh/chart.js/auto"));
+
+export const Chart = <TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>
+    (config: ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>) => {
+    const canvas = document.createElement("canvas");
+
+    console.log(config);
+    lazyChart().then(chartjs => new chartjs.Chart(canvas, config));
+
+    return Box(Custom(canvas).addClass("chart"));
+};