web/admin: refactor chart component to allow setting of general chart data
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
225099b1a1
commit
ded6b6f937
|
@ -1,5 +1,5 @@
|
|||
import { customElement } from "lit-element";
|
||||
import { ChartDataset } from "chart.js";
|
||||
import { ChartData } from "chart.js";
|
||||
import { AdminApi, LoginMetrics } from "authentik-api";
|
||||
import { AKChart } from "./Chart";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
|
@ -11,8 +11,9 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
|
|||
return new AdminApi(DEFAULT_CONFIG).adminMetricsList();
|
||||
}
|
||||
|
||||
getDatasets(data: LoginMetrics): ChartDataset[] {
|
||||
return [
|
||||
getChartData(data: LoginMetrics): ChartData {
|
||||
return {
|
||||
datasets: [
|
||||
{
|
||||
label: "Failed Logins",
|
||||
backgroundColor: "rgba(201, 25, 11, .5)",
|
||||
|
@ -35,7 +36,8 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
|
|||
};
|
||||
}) || [],
|
||||
},
|
||||
];
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@ import { customElement, property } from "lit-element";
|
|||
import { Coordinate, CoreApi } from "authentik-api";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { AKChart } from "./Chart";
|
||||
import { ChartDataset } from "chart.js";
|
||||
import { ChartData } from "chart.js";
|
||||
|
||||
@customElement("ak-charts-application-authorize")
|
||||
export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
|
||||
|
@ -14,8 +14,9 @@ export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
|
|||
return new CoreApi(DEFAULT_CONFIG).coreApplicationsMetrics({ slug: this.applicationSlug });
|
||||
}
|
||||
|
||||
getDatasets(data: Coordinate[]): ChartDataset[] {
|
||||
return [
|
||||
getChartData(data: Coordinate[]): ChartData {
|
||||
return {
|
||||
datasets: [
|
||||
{
|
||||
label: "Authorizations",
|
||||
backgroundColor: "rgba(189, 229, 184, .5)",
|
||||
|
@ -27,7 +28,8 @@ export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
|
|||
};
|
||||
}) || [],
|
||||
},
|
||||
];
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { css, CSSResult, html, LitElement, TemplateResult } from "lit-element";
|
||||
import { Chart, ChartDataset, Tick, LineController, TimeScale, LinearScale, BarController, BarElement, ChartConfiguration, Legend } from "chart.js";
|
||||
import { Chart, ChartDataset, Tick, LineController, TimeScale, LinearScale, BarController, BarElement, ChartConfiguration, Legend, ChartData } from "chart.js";
|
||||
import "chartjs-adapter-moment";
|
||||
|
||||
Chart.register(LineController, TimeScale, LinearScale, BarController, BarElement, Legend);
|
||||
|
@ -7,7 +7,7 @@ Chart.register(LineController, TimeScale, LinearScale, BarController, BarElement
|
|||
export abstract class AKChart<T> extends LitElement {
|
||||
|
||||
abstract apiRequest(): Promise<T>;
|
||||
abstract getDatasets(data: T): ChartDataset[];
|
||||
abstract getChartData(data: T): ChartData;
|
||||
|
||||
chart?: Chart;
|
||||
|
||||
|
@ -39,9 +39,7 @@ export abstract class AKChart<T> extends LitElement {
|
|||
configureChart(data: T, ctx: CanvasRenderingContext2D): Chart {
|
||||
const config = {
|
||||
type: "bar",
|
||||
data: {
|
||||
datasets: this.getDatasets(data),
|
||||
},
|
||||
data: this.getChartData(data),
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
|
|
|
@ -2,7 +2,7 @@ import { customElement, property } from "lit-element";
|
|||
import { CoreApi, UserMetrics } from "authentik-api";
|
||||
import { AKChart } from "./Chart";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { ChartDataset } from "chart.js";
|
||||
import { ChartData } from "chart.js";
|
||||
|
||||
@customElement("ak-charts-user")
|
||||
export class UserChart extends AKChart<UserMetrics> {
|
||||
|
@ -16,8 +16,9 @@ export class UserChart extends AKChart<UserMetrics> {
|
|||
});
|
||||
}
|
||||
|
||||
getDatasets(data: UserMetrics): ChartDataset[] {
|
||||
return [
|
||||
getChartData(data: UserMetrics): ChartData {
|
||||
return {
|
||||
datasets: [
|
||||
{
|
||||
label: "Failed Logins",
|
||||
backgroundColor: "rgba(201, 25, 11, .5)",
|
||||
|
@ -51,7 +52,8 @@ export class UserChart extends AKChart<UserMetrics> {
|
|||
};
|
||||
}) || [],
|
||||
},
|
||||
];
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Reference in New Issue