@thachnuida/ngx-uplot
Version:
Angular wrapper for uplot.
158 lines (151 loc) • 6.69 kB
JavaScript
import { __rest } from 'tslib';
import * as i0 from '@angular/core';
import { Injectable, Component, Input, NgModule } from '@angular/core';
import * as _uPlot from 'uplot';
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
if (!Object.is) {
// eslint-disable-next-line
Object.defineProperty(Object, "is", { value: (x, y) => (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y)
});
}
class NgxUplotService {
constructor() { }
optionsUpdateState(_lhs, _rhs) {
if (!_lhs)
return 'create';
const { width: lhsWidth, height: lhsHeight } = _lhs, lhs = __rest(_lhs, ["width", "height"]);
const { width: rhsWidth, height: rhsHeight } = _rhs, rhs = __rest(_rhs, ["width", "height"]);
let state = 'keep';
if (lhsHeight !== rhsHeight || lhsWidth !== rhsWidth) {
state = 'update';
}
if (Object.keys(lhs).length !== Object.keys(rhs).length) {
return 'create';
}
for (const k of Object.keys(lhs)) {
if (!Object.is(lhs[k], rhs[k])) {
state = 'create';
break;
}
}
return state;
}
dataMatch(lhs, rhs) {
if (!lhs)
return false;
if (lhs.length !== rhs.length) {
return false;
}
return lhs.every((lhsOneSeries, seriesIdx) => {
const rhsOneSeries = rhs[seriesIdx];
if (lhsOneSeries.length !== rhsOneSeries.length) {
return false;
}
return lhsOneSeries.every((value, valueIdx) => value === rhsOneSeries[valueIdx]);
});
}
}
NgxUplotService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxUplotService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
const uPlot = _uPlot.default ? _uPlot.default : _uPlot;
class NgxUplotComponent {
constructor(_element, service) {
this._element = _element;
this.service = service;
/**
* Flag controlling whether to reset the scales on data change. Defaults to true.
*/
this.resetScales = true;
}
ngOnChanges(changes) {
if (changes['options']) {
this.addChartSize();
const optionState = this.service.optionsUpdateState(changes['options'].previousValue, this.options);
if (this.chartElm || optionState === 'create') {
this.create();
}
else if (optionState === 'update') {
this.chartElm.setSize({ width: this.options.width, height: this.options.height });
}
}
if (changes['data']) {
if (!this.chartElm) {
this.create();
}
else if (!this.service.dataMatch(changes['data'].previousValue, this.data)) {
if (this.resetScales) {
this.chartElm.setData(this.data, true);
}
else {
this.chartElm.setData(this.data, false);
this.chartElm.redraw();
}
}
}
}
addChartSize() {
if (!this.options.width) {
this.options.width = this._element.nativeElement.clientWidth;
}
if (!this.options.height) {
this.options.height = this._element.nativeElement.clientHeight || 600;
}
}
ngOnDestroy() {
this.destroy();
}
destroy() {
if (this.chartElm) {
this.chartElm.destroy();
}
}
create() {
this.destroy();
if (this.options && this.data) {
this.chartElm = new uPlot(this.options, this.data, this._element.nativeElement);
}
}
}
NgxUplotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotComponent, deps: [{ token: i0.ElementRef }, { token: NgxUplotService }], target: i0.ɵɵFactoryTarget.Component });
NgxUplotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: NgxUplotComponent, selector: "ngx-uplot", inputs: { options: "options", data: "data", resetScales: "resetScales" }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true, styles: [":host{display:block}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-uplot', template: ``, styles: [":host{display:block}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NgxUplotService }]; }, propDecorators: { options: [{
type: Input
}], data: [{
type: Input
}], resetScales: [{
type: Input
}] } });
class NgxUplotModule {
}
NgxUplotModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxUplotModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotModule, declarations: [NgxUplotComponent], exports: [NgxUplotComponent] });
NgxUplotModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgxUplotModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxUplotComponent
],
imports: [],
exports: [
NgxUplotComponent
]
}]
}] });
/*
* Public API Surface of ngx-uplot
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxUplotComponent, NgxUplotModule, NgxUplotService };
//# sourceMappingURL=thachnuida-ngx-uplot.mjs.map