habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build(deps): bump chart.js from 2.9.4 to 3.0.2 in /web (#696)

Browse Source 
* 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]
2021-04-05 11:28:22 +02:00
committed by GitHub
parent 3da23829d3
commit a6608c140e
9 changed files with 71 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {