authentik/web/src/pages/admin-overview/charts/FlowStatusChart.ts

import { t } from "@lingui/macro";
import { customElement } from "lit-element";
import { FlowsApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../../api/Config";
import "../../../elements/forms/ConfirmationForm";
import { AKChart } from "../../../elements/charts/Chart";
import { ChartData, ChartOptions } from "chart.js";

interface FlowMetrics {
    count: number;
    cached: number;
}

@customElement("ak-admin-status-chart-flow")
export class PolicyStatusChart extends AKChart<FlowMetrics> {

    getChartType(): string {
        return "doughnut";
    }

    getOptions(): ChartOptions {
        return {
            plugins: {
                legend: {
                    display: false,
                },
            },
            maintainAspectRatio: false,
        };
    }

    async apiRequest(): Promise<FlowMetrics> {
        const api = new FlowsApi(DEFAULT_CONFIG);
        const cached = (await api.flowsInstancesCacheInfo()).count || 0;
        const count = (await api.flowsInstancesList({
            pageSize: 1
        })).pagination.count;
        this.centerText = count.toString();
        return {
            count: count - cached,
            cached: cached,
        };
    }

    getChartData(data: FlowMetrics): ChartData {
        return {
            labels: [
                t`Total flows`,
                t`Cached flows`,
            ],
            datasets: [
                {
                    backgroundColor: [
                        "#2b9af3",
                        "#3e8635",
                    ],
                    spanGaps: true,
                    data: [
                        data.count,
                        data.cached,
                    ],
                },
            ]
        };
    }

}