151 lines
19 KiB
JavaScript
151 lines
19 KiB
JavaScript
|
import { Directive, ElementRef, EventEmitter, Input, NgZone, Output, } from '@angular/core';
|
||
|
|
import { Chart, } from 'chart.js';
|
||
|
|
import { ThemeService } from './theme.service';
|
||
|
|
import { distinctUntilChanged } from 'rxjs/operators';
|
||
|
|
import { merge } from 'lodash-es';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "./theme.service";
|
||
|
|
export class BaseChartDirective {
|
||
|
|
constructor(element, zone, themeService) {
|
||
|
|
this.zone = zone;
|
||
|
|
this.themeService = themeService;
|
||
|
|
this.type = 'bar';
|
||
|
|
this.plugins = [];
|
||
|
|
this.chartClick = new EventEmitter();
|
||
|
|
this.chartHover = new EventEmitter();
|
||
|
|
this.subs = [];
|
||
|
|
this.themeOverrides = {};
|
||
|
|
this.ctx = element.nativeElement.getContext('2d');
|
||
|
|
this.subs.push(this.themeService.colorschemesOptions
|
||
|
|
.pipe(distinctUntilChanged())
|
||
|
|
.subscribe((r) => this.themeChanged(r)));
|
||
|
|
}
|
||
|
|
ngOnChanges(changes) {
|
||
|
|
const requireRender = ['type'];
|
||
|
|
const propertyNames = Object.getOwnPropertyNames(changes);
|
||
|
|
if (propertyNames.some((key) => requireRender.includes(key)) ||
|
||
|
|
propertyNames.every((key) => changes[key].isFirstChange())) {
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const config = this.getChartConfiguration();
|
||
|
|
// Using assign to avoid changing the original object reference
|
||
|
|
if (this.chart) {
|
||
|
|
Object.assign(this.chart.config.data, config.data);
|
||
|
|
if (this.chart.config.plugins) {
|
||
|
|
Object.assign(this.chart.config.plugins, config.plugins);
|
||
|
|
}
|
||
|
|
if (this.chart.config.options) {
|
||
|
|
Object.assign(this.chart.config.options, config.options);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.update();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
if (this.chart) {
|
||
|
|
this.chart.destroy();
|
||
|
|
this.chart = void 0;
|
||
|
|
}
|
||
|
|
this.subs.forEach((s) => s.unsubscribe());
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
if (this.chart) {
|
||
|
|
this.chart.destroy();
|
||
|
|
}
|
||
|
|
return this.zone.runOutsideAngular(() => (this.chart = new Chart(this.ctx, this.getChartConfiguration())));
|
||
|
|
}
|
||
|
|
update(duration) {
|
||
|
|
if (this.chart) {
|
||
|
|
this.zone.runOutsideAngular(() => this.chart?.update(duration));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
hideDataset(index, hidden) {
|
||
|
|
if (this.chart) {
|
||
|
|
this.chart.getDatasetMeta(index).hidden = hidden;
|
||
|
|
this.update();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
isDatasetHidden(index) {
|
||
|
|
return this.chart?.getDatasetMeta(index)?.hidden;
|
||
|
|
}
|
||
|
|
toBase64Image() {
|
||
|
|
return this.chart?.toBase64Image();
|
||
|
|
}
|
||
|
|
themeChanged(options) {
|
||
|
|
this.themeOverrides = options;
|
||
|
|
if (this.chart) {
|
||
|
|
if (this.chart.config.options) {
|
||
|
|
Object.assign(this.chart.config.options, this.getChartOptions());
|
||
|
|
}
|
||
|
|
this.update();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getChartOptions() {
|
||
|
|
return merge({
|
||
|
|
onHover: (event, active) => {
|
||
|
|
if (!this.chartHover.observed && !this.chartHover.observers?.length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.zone.run(() => this.chartHover.emit({ event, active }));
|
||
|
|
},
|
||
|
|
onClick: (event, active) => {
|
||
|
|
if (!this.chartClick.observed && !this.chartClick.observers?.length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.zone.run(() => this.chartClick.emit({ event, active }));
|
||
|
|
},
|
||
|
|
}, this.themeOverrides, this.options, {
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
display: this.legend,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
getChartConfiguration() {
|
||
|
|
return {
|
||
|
|
type: this.type,
|
||
|
|
data: this.getChartData(),
|
||
|
|
options: this.getChartOptions(),
|
||
|
|
plugins: this.plugins,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
getChartData() {
|
||
|
|
return this.data
|
||
|
|
? this.data
|
||
|
|
: {
|
||
|
|
labels: this.labels || [],
|
||
|
|
datasets: this.datasets || [],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: BaseChartDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
||
|
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: { type: "type", legend: "legend", data: "data", options: "options", plugins: "plugins", labels: "labels", datasets: "datasets" }, outputs: { chartClick: "chartClick", chartHover: "chartHover" }, exportAs: ["base-chart"], usesOnChanges: true, ngImport: i0 }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: BaseChartDirective, decorators: [{
|
||
|
|
type: Directive,
|
||
|
|
args: [{
|
||
|
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
||
|
|
selector: 'canvas[baseChart]',
|
||
|
|
exportAs: 'base-chart',
|
||
|
|
}]
|
||
|
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.ThemeService }]; }, propDecorators: { type: [{
|
||
|
|
type: Input
|
||
|
|
}], legend: [{
|
||
|
|
type: Input
|
||
|
|
}], data: [{
|
||
|
|
type: Input
|
||
|
|
}], options: [{
|
||
|
|
type: Input
|
||
|
|
}], plugins: [{
|
||
|
|
type: Input
|
||
|
|
}], labels: [{
|
||
|
|
type: Input
|
||
|
|
}], datasets: [{
|
||
|
|
type: Input
|
||
|
|
}], chartClick: [{
|
||
|
|
type: Output
|
||
|
|
}], chartHover: [{
|
||
|
|
type: Output
|
||
|
|
}] } });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1jaGFydC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL25nMi1jaGFydHMvc3JjL2xpYi9iYXNlLWNoYXJ0LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFHTixNQUFNLEdBRVAsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNMLEtBQUssR0FNTixNQUFNLFVBQVUsQ0FBQztBQUVsQixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFdEQsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLFdBQVcsQ0FBQzs7O0FBT2xDLE1BQU0sT0FBTyxrQkFBa0I7SUF1QzdCLFlBQ0UsT0FBbUIsRUFDWCxJQUFZLEVBQ1osWUFBMEI7UUFEMUIsU0FBSSxHQUFKLElBQUksQ0FBUTtRQUNaLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBcENwQixTQUFJLEdBQ2xCLEtBQWMsQ0FBQztRQUlELFlBQU8sR0FBb0IsRUFBRSxDQUFDO1FBYTdCLGVBQVUsR0FHdEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNQLGVBQVUsR0FHdEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUtoQixTQUFJLEdBQW1CLEVBQUUsQ0FBQztRQUMxQixtQkFBYyxHQUFrQyxFQUFFLENBQUM7UUFPekQsSUFBSSxDQUFDLEdBQUcsR0FBRyxPQUFPLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNsRCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FDWixJQUFJLENBQUMsWUFBWSxDQUFDLG1CQUFtQjthQUNsQyxJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQzthQUM1QixTQUFTLENB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
|