trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Jens Langhammer 2021-05-05 22:15:11 +02:00
parent 225099b1a1
commit ded6b6f937
4 changed files with 87 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/elements/charts/AdminLoginsChart.ts
View File

@ -1,5 +1,5 @@
import { customElement } from "lit-element"; import { customElement } from "lit-element";
import { ChartDataset } from "chart.js"; import { ChartData } from "chart.js";
import { AdminApi, LoginMetrics } from "authentik-api"; import { AdminApi, LoginMetrics } from "authentik-api";
import { AKChart } from "./Chart"; import { AKChart } from "./Chart";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
@ -11,31 +11,33 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
return new AdminApi(DEFAULT_CONFIG).adminMetricsList(); return new AdminApi(DEFAULT_CONFIG).adminMetricsList();
} }
getDatasets(data: LoginMetrics): ChartDataset[] { getChartData(data: LoginMetrics): ChartData {
return [ return {
{ datasets: [
label: "Failed Logins", {
backgroundColor: "rgba(201, 25, 11, .5)", label: "Failed Logins",
spanGaps: true, backgroundColor: "rgba(201, 25, 11, .5)",
data: data.loginsFailedPer1h?.map((cord) => { spanGaps: true,
return { data: data.loginsFailedPer1h?.map((cord) => {
x: cord.xCord || 0, return {
y: cord.yCord || 0, x: cord.xCord || 0,
}; y: cord.yCord || 0,
}) || [], };
}, }) || [],
{ },
label: "Successful Logins", {
backgroundColor: "rgba(189, 229, 184, .5)", label: "Successful Logins",
spanGaps: true, backgroundColor: "rgba(189, 229, 184, .5)",
data: data.loginsPer1h?.map((cord) => { spanGaps: true,
return { data: data.loginsPer1h?.map((cord) => {
x: cord.xCord || 0, return {
y: cord.yCord || 0, x: cord.xCord || 0,
}; y: cord.yCord || 0,
}) || [], };
}, }) || [],
]; },
]
};
} }
} }

32
web/src/elements/charts/ApplicationAuthorizeChart.ts
View File

@ -2,7 +2,7 @@ import { customElement, property } from "lit-element";
import { Coordinate, CoreApi } from "authentik-api"; import { Coordinate, CoreApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { AKChart } from "./Chart"; import { AKChart } from "./Chart";
import { ChartDataset } from "chart.js"; import { ChartData } from "chart.js";
@customElement("ak-charts-application-authorize") @customElement("ak-charts-application-authorize")
export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> { export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
@ -14,20 +14,22 @@ export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
return new CoreApi(DEFAULT_CONFIG).coreApplicationsMetrics({ slug: this.applicationSlug }); return new CoreApi(DEFAULT_CONFIG).coreApplicationsMetrics({ slug: this.applicationSlug });
} }
getDatasets(data: Coordinate[]): ChartDataset[] { getChartData(data: Coordinate[]): ChartData {
return [ return {
{ datasets: [
label: "Authorizations", {
backgroundColor: "rgba(189, 229, 184, .5)", label: "Authorizations",
spanGaps: true, backgroundColor: "rgba(189, 229, 184, .5)",
data: data.map((cord) => { spanGaps: true,
return { data: data.map((cord) => {
x: cord.xCord || 0, return {
y: cord.yCord || 0, x: cord.xCord || 0,
}; y: cord.yCord || 0,
}) || [], };
}, }) || [],
]; },
]
};
} }
} }

8
web/src/elements/charts/Chart.ts
View File

@ -1,5 +1,5 @@
import { css, CSSResult, html, LitElement, TemplateResult } from "lit-element"; 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"; import "chartjs-adapter-moment";
Chart.register(LineController, TimeScale, LinearScale, BarController, BarElement, Legend); 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 { export abstract class AKChart<T> extends LitElement {
abstract apiRequest(): Promise<T>; abstract apiRequest(): Promise<T>;
abstract getDatasets(data: T): ChartDataset[]; abstract getChartData(data: T): ChartData;
chart?: Chart; chart?: Chart;
@ -39,9 +39,7 @@ export abstract class AKChart<T> extends LitElement {
configureChart(data: T, ctx: CanvasRenderingContext2D): Chart { configureChart(data: T, ctx: CanvasRenderingContext2D): Chart {
const config = { const config = {
type: "bar", type: "bar",
data: { data: this.getChartData(data),
datasets: this.getDatasets(data),
},
options: { options: {
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {

76
web/src/elements/charts/UserChart.ts
View File

@ -2,7 +2,7 @@ import { customElement, property } from "lit-element";
import { CoreApi, UserMetrics } from "authentik-api"; import { CoreApi, UserMetrics } from "authentik-api";
import { AKChart } from "./Chart"; import { AKChart } from "./Chart";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { ChartDataset } from "chart.js"; import { ChartData } from "chart.js";
@customElement("ak-charts-user") @customElement("ak-charts-user")
export class UserChart extends AKChart<UserMetrics> { export class UserChart extends AKChart<UserMetrics> {
@ -16,42 +16,44 @@ export class UserChart extends AKChart<UserMetrics> {
}); });
} }
getDatasets(data: UserMetrics): ChartDataset[] { getChartData(data: UserMetrics): ChartData {
return [ return {
{ datasets: [
label: "Failed Logins", {
backgroundColor: "rgba(201, 25, 11, .5)", label: "Failed Logins",
spanGaps: true, backgroundColor: "rgba(201, 25, 11, .5)",
data: data.loginsFailedPer1h?.map((cord) => { spanGaps: true,
return { data: data.loginsFailedPer1h?.map((cord) => {
x: cord.xCord || 0, return {
y: cord.yCord || 0, x: cord.xCord || 0,
}; y: cord.yCord || 0,
}) || [], };
}, }) || [],
{ },
label: "Successful Logins", {
backgroundColor: "rgba(189, 229, 184, .5)", label: "Successful Logins",
spanGaps: true, backgroundColor: "rgba(189, 229, 184, .5)",
data: data.loginsPer1h?.map((cord) => { spanGaps: true,
return { data: data.loginsPer1h?.map((cord) => {
x: cord.xCord || 0, return {
y: cord.yCord || 0, x: cord.xCord || 0,
}; y: cord.yCord || 0,
}) || [], };
}, }) || [],
{ },
label: "Application authorizations", {
backgroundColor: "rgba(43, 154, 243, .5)", label: "Application authorizations",
spanGaps: true, backgroundColor: "rgba(43, 154, 243, .5)",
data: data.authorizationsPer1h?.map((cord) => { spanGaps: true,
return { data: data.authorizationsPer1h?.map((cord) => {
x: cord.xCord || 0, return {
y: cord.yCord || 0, x: cord.xCord || 0,
}; y: cord.yCord || 0,
}) || [], };
}, }) || [],
]; },
]
};
} }
} }