build(deps): bump chart.js from 2.9.4 to 3.0.2 in /web (#696)
* build(deps): bump chart.js from 2.9.4 to 3.0.2 in /web Bumps [chart.js](https://github.com/chartjs/Chart.js) from 2.9.4 to 3.0.2. - [Release notes](https://github.com/chartjs/Chart.js/releases) - [Commits](https://github.com/chartjs/Chart.js/compare/v2.9.4...v3.0.2) Signed-off-by: dependabot[bot] <support@github.com> * web/elements/chart: upgrade to chart.js 3 Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
dependabot[bot]
@ -1,5 +1,5 @@
|
||||
import { customElement } from "lit-element";
|
||||
import Chart from "chart.js";
|
||||
import { ChartDataset } from "chart.js";
|
||||
import { AdminApi, LoginMetrics } from "authentik-api";
|
||||
import { AKChart } from "./Chart";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
@ -11,7 +11,7 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
|
||||
return new AdminApi(DEFAULT_CONFIG).adminMetricsList();
|
||||
}
|
||||
|
||||
getDatasets(data: LoginMetrics): Chart.ChartDataSets[] {
|
||||
getDatasets(data: LoginMetrics): ChartDataset[] {
|
||||
return [
|
||||
{
|
||||
label: "Failed Logins",
|
||||
@ -19,10 +19,10 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
|
||||
spanGaps: true,
|
||||
data: data.loginsFailedPer1h?.map((cord) => {
|
||||
return {
|
||||
x: cord.xCord,
|
||||
y: cord.yCord,
|
||||
x: cord.xCord || 0,
|
||||
y: cord.yCord || 0,
|
||||
};
|
||||
}),
|
||||
}) || [],
|
||||
},
|
||||
{
|
||||
label: "Successful Logins",
|
||||
@ -30,10 +30,10 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
|
||||
spanGaps: true,
|
||||
data: data.loginsPer1h?.map((cord) => {
|
||||
return {
|
||||
x: cord.xCord,
|
||||
y: cord.yCord,
|
||||
x: cord.xCord || 0,
|
||||
y: cord.yCord || 0,
|
||||
};
|
||||
}),
|
||||
}) || [],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@ -2,6 +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";
|
||||
|
||||
@customElement("ak-charts-application-authorize")
|
||||
export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
|
||||
@ -13,7 +14,7 @@ export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreApplicationsMetrics({ slug: this.applicationSlug });
|
||||
}
|
||||
|
||||
getDatasets(data: Coordinate[]): Chart.ChartDataSets[] {
|
||||
getDatasets(data: Coordinate[]): ChartDataset[] {
|
||||
return [
|
||||
{
|
||||
label: "Authorizations",
|
||||
@ -21,10 +22,10 @@ export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
|
||||
spanGaps: true,
|
||||
data: data.map((cord) => {
|
||||
return {
|
||||
x: cord.xCord,
|
||||
y: cord.yCord,
|
||||
x: cord.xCord || 0,
|
||||
y: cord.yCord || 0,
|
||||
};
|
||||
}),
|
||||
}) || [],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
import { css, CSSResult, html, LitElement, TemplateResult } from "lit-element";
|
||||
import Chart from "chart.js";
|
||||
import { Chart, ChartDataset, Tick, LineController, TimeScale, LinearScale, BarController, BarElement, ChartConfiguration, Legend } from "chart.js";
|
||||
import "chartjs-adapter-moment";
|
||||
|
||||
interface TickValue {
|
||||
value: number;
|
||||
major: boolean;
|
||||
}
|
||||
Chart.register(LineController, TimeScale, LinearScale, BarController, BarElement, Legend);
|
||||
|
||||
export abstract class AKChart<T> extends LitElement {
|
||||
|
||||
abstract apiRequest(): Promise<T>;
|
||||
abstract getDatasets(data: T): Chart.ChartDataSets[];
|
||||
abstract getDatasets(data: T): ChartDataset[];
|
||||
|
||||
chart?: Chart;
|
||||
|
||||
@ -39,46 +37,45 @@ export abstract class AKChart<T> extends LitElement {
|
||||
}
|
||||
|
||||
configureChart(data: T, ctx: CanvasRenderingContext2D): Chart {
|
||||
return new Chart(ctx, {
|
||||
const config = {
|
||||
type: "bar",
|
||||
data: {
|
||||
datasets: this.getDatasets(data),
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
spanGaps: true,
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
stacked: true,
|
||||
gridLines: {
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
},
|
||||
type: "time",
|
||||
offset: true,
|
||||
ticks: {
|
||||
callback: function (value, index: number, values) {
|
||||
const valueStamp = <TickValue>(<unknown>values[index]);
|
||||
const delta = Date.now() - valueStamp.value;
|
||||
const ago = Math.round(delta / 1000 / 3600);
|
||||
return `${ago} Hours ago`;
|
||||
},
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 8,
|
||||
x: {
|
||||
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`;
|
||||
},
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 8,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
stacked: true,
|
||||
gridLines: {
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
},
|
||||
stacked: true,
|
||||
grid: {
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
},
|
||||
],
|
||||
offset: true
|
||||
},
|
||||
y: {
|
||||
type: "linear",
|
||||
display: true,
|
||||
stacked: true,
|
||||
grid: {
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
return new Chart(ctx, config as ChartConfiguration);
|
||||
}
|
||||
|
||||
firstUpdated(): void {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { customElement, property } from "lit-element";
|
||||
import Chart from "chart.js";
|
||||
import { CoreApi, UserMetrics } from "authentik-api";
|
||||
import { AKChart } from "./Chart";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { ChartDataset } from "chart.js";
|
||||
|
||||
@customElement("ak-charts-user")
|
||||
export class UserChart extends AKChart<UserMetrics> {
|
||||
@ -16,7 +16,7 @@ export class UserChart extends AKChart<UserMetrics> {
|
||||
});
|
||||
}
|
||||
|
||||
getDatasets(data: UserMetrics): Chart.ChartDataSets[] {
|
||||
getDatasets(data: UserMetrics): ChartDataset[] {
|
||||
return [
|
||||
{
|
||||
label: "Failed Logins",
|
||||
@ -24,10 +24,10 @@ export class UserChart extends AKChart<UserMetrics> {
|
||||
spanGaps: true,
|
||||
data: data.loginsFailedPer1h?.map((cord) => {
|
||||
return {
|
||||
x: cord.xCord,
|
||||
y: cord.yCord,
|
||||
x: cord.xCord || 0,
|
||||
y: cord.yCord || 0,
|
||||
};
|
||||
}),
|
||||
}) || [],
|
||||
},
|
||||
{
|
||||
label: "Successful Logins",
|
||||
@ -35,10 +35,10 @@ export class UserChart extends AKChart<UserMetrics> {
|
||||
spanGaps: true,
|
||||
data: data.loginsPer1h?.map((cord) => {
|
||||
return {
|
||||
x: cord.xCord,
|
||||
y: cord.yCord,
|
||||
x: cord.xCord || 0,
|
||||
y: cord.yCord || 0,
|
||||
};
|
||||
}),
|
||||
}) || [],
|
||||
},
|
||||
{
|
||||
label: "Application authorizations",
|
||||
@ -46,10 +46,10 @@ export class UserChart extends AKChart<UserMetrics> {
|
||||
spanGaps: true,
|
||||
data: data.authorizationsPer1h?.map((cord) => {
|
||||
return {
|
||||
x: cord.xCord,
|
||||
y: cord.yCord,
|
||||
x: cord.xCord || 0,
|
||||
y: cord.yCord || 0,
|
||||
};
|
||||
}),
|
||||
}) || [],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user