web/admin: add dashboard with user creation/login statistics

closes #1867

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/charts/AdminModelPerDay.ts

@@ -0,0 +1,52 @@
+import { ChartData, Tick } from "chart.js";
+
+import { t } from "@lingui/macro";
+
+import { customElement, property } from "lit/decorators.js";
+
+import { Coordinate, EventActions, EventsApi } from "@goauthentik/api";
+
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AKChart } from "./Chart";
+
+@customElement("ak-charts-admin-model-per-day")
+export class AdminModelPerDay extends AKChart<Coordinate[]> {
+    @property()
+    action: EventActions = EventActions.ModelCreated;
+
+    @property({ attribute: false })
+    query?: { [key: string]: unknown } | undefined;
+
+    apiRequest(): Promise<Coordinate[]> {
+        return new EventsApi(DEFAULT_CONFIG).eventsEventsPerMonthList({
+            action: this.action,
+            query: JSON.stringify(this.query || {}),
+        });
+    }
+
+    timeTickCallback(tickValue: string | number, index: number, ticks: Tick[]): string {
+        const valueStamp = ticks[index];
+        const delta = Date.now() - valueStamp.value;
+        const ago = Math.round(delta / 1000 / 3600 / 24);
+        return t`${ago} days ago`;
+    }
+
+    getChartData(data: Coordinate[]): ChartData {
+        return {
+            datasets: [
+                {
+                    label: t`Objects created`,
+                    backgroundColor: "rgba(189, 229, 184, .5)",
+                    spanGaps: true,
+                    data:
+                        data.map((cord) => {
+                            return {
+                                x: cord.xCord || 0,
+                                y: cord.yCord || 0,
+                            };
+                        }) || [],
+                },
+            ],
+        };
+    }
+}

web/src/elements/charts/Chart.ts

@@ -5,6 +5,8 @@ import { ArcElement, BarElement } from "chart.js";
 import { LinearScale, TimeScale } from "chart.js";
 import "chartjs-adapter-moment";
 
+import { t } from "@lingui/macro";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -114,6 +116,13 @@ export abstract class AKChart<T> extends LitElement {
         ];
     }
 
+    timeTickCallback(tickValue: string | number, index: number, ticks: Tick[]): string {
+        const valueStamp = ticks[index];
+        const delta = Date.now() - valueStamp.value;
+        const ago = Math.round(delta / 1000 / 3600);
+        return t`${ago} hours ago`;
+    }
+
     getOptions(): ChartOptions {
         return {
             maintainAspectRatio: false,
@@ -122,15 +131,8 @@ export abstract class AKChart<T> extends LitElement {
                     type: "time",
                     display: true,
                     ticks: {
-                        callback: function (
-                            tickValue: string | number,
-                            index: number,
-                            ticks: Tick[],
-                        ): string {
-                            const valueStamp = ticks[index];
-                            const delta = Date.now() - valueStamp.value;
-                            const ago = Math.round(delta / 1000 / 3600);
-                            return `${ago} Hours ago`;
+                        callback: (tickValue: string | number, index: number, ticks: Tick[]) => {
+                            return this.timeTickCallback(tickValue, index, ticks);
                         },
                         autoSkip: true,
                         maxTicksLimit: 8,