@yelon/chart
Version:
Cache the dictionary, city data etc.
247 lines (241 loc) • 9.51 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Injectable, ChangeDetectorRef, NgZone, DestroyRef, EventEmitter, Output, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { Subject, filter, fromEvent, debounceTime } from 'rxjs';
import { YunzaiConfigService } from '@yelon/util/config';
import { LazyService } from '@yelon/util/other';
import { __decorate } from 'tslib';
import { Platform } from '@angular/cdk/platform';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ZoneOutside } from '@yelon/util/decorator';
import { NzSkeletonComponent, NzSkeletonModule } from 'ng-zorro-antd/skeleton';
import { CommonModule } from '@angular/common';
class ChartEChartsService {
cogSrv = inject(YunzaiConfigService);
lazySrv = inject(LazyService);
_cog;
loading = false;
loaded = false;
notify$ = new Subject();
get cog() {
return this._cog;
}
set cog(val) {
this._cog = this.cogSrv.merge('chart', {
theme: '',
echartsLib: 'https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.0/echarts.min.js'
}, val);
}
constructor() {
this.cog = { theme: '' };
}
libLoad() {
if (this.loading) {
if (this.loaded) {
this.notify$.next();
}
return this;
}
this.loading = true;
this.lazySrv
.load(this.cog.echartsLib)
.then(() => {
const extensions = this.cog.echartsExtensions;
if (Array.isArray(extensions) && extensions.length > 0) {
return this.lazySrv.load(extensions).then(() => true);
}
return Promise.resolve(true);
})
.then(() => {
this.loaded = true;
this.notify$.next();
});
return this;
}
get notify() {
return this.notify$.asObservable();
}
ngOnDestroy() {
this.notify$.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [] });
class ChartEChartsComponent {
srv = inject(ChartEChartsService);
cdr = inject(ChangeDetectorRef);
ngZone = inject(NgZone);
platform = inject(Platform);
node;
destroy$ = inject(DestroyRef);
_chart = null;
_theme;
_initOpt;
_option;
_width = '100%';
_height = '400px';
set width(val) {
this._width = typeof val === 'number' ? `${val}px` : `${val}`;
}
set height(val) {
this._height = typeof val === 'number' ? `${val}px` : `${val}`;
}
set theme(value) {
this._theme = value;
if (this._chart) {
this.install();
}
}
set initOpt(value) {
this._initOpt = value;
if (this._chart) {
this.install();
}
}
set option(value) {
this._option = value;
if (this._chart) {
this.setOption(value, true);
}
}
on = [];
events = new EventEmitter();
get chart() {
return this._chart;
}
loaded = false;
constructor() {
this.srv.notify
.pipe(takeUntilDestroyed(), filter(() => !this.loaded))
.subscribe(() => this.load());
this.theme = this.srv.cog.echartsTheme;
}
emit(type, other) {
this.events.emit({ type, chart: this.chart, ...other });
}
load() {
this.ngZone.run(() => {
this.loaded = true;
this.cdr.detectChanges();
});
this.emit('ready');
this.install();
}
install() {
this.destroy();
const chart = (this._chart = window.echarts.init(this.node.nativeElement, this._theme, this._initOpt));
this.emit('init');
this.setOption(this._option);
// on
this.on.forEach(item => {
if (item.query != null) {
chart.on(item.eventName, item.query, event => item.handler({ event, chart }));
}
else {
chart.on(item.eventName, event => item.handler({ event, chart }));
}
});
return this;
}
destroy() {
if (this._chart) {
this._chart.dispose();
this.emit('destroy');
}
return this;
}
setOption(option, notMerge = false, lazyUpdate = false) {
if (this._chart) {
this._chart.setOption(option, notMerge, lazyUpdate);
this.emit('set-option', { option });
}
return this;
}
ngOnInit() {
if (!this.platform.isBrowser) {
return;
}
if (window.echarts) {
this.load();
}
else {
this.srv.libLoad();
}
fromEvent(window, 'resize')
.pipe(takeUntilDestroyed(this.destroy$), filter(() => !!this._chart), debounceTime(200))
.subscribe(() => this._chart.resize());
}
ngOnDestroy() {
this.on.forEach(item => this._chart?.off(item.eventName));
this.destroy();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ChartEChartsComponent, isStandalone: true, selector: "chart-echarts, [chart-echarts]", inputs: { width: "width", height: "height", theme: "theme", initOpt: "initOpt", option: "option", on: "on" }, outputs: { events: "events" }, host: { properties: { "style.display": "'inline-block'", "style.width": "_width", "style.height": "_height" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["container"], descendants: true, static: true }], exportAs: ["chartECharts"], ngImport: i0, template: `
(!loaded) {
<nz-skeleton />
}
<div #container [style.width]="_width" [style.height]="_height"></div>
`, isInline: true, dependencies: [{ kind: "component", type: NzSkeletonComponent, selector: "nz-skeleton", inputs: ["nzActive", "nzLoading", "nzRound", "nzTitle", "nzAvatar", "nzParagraph"], exportAs: ["nzSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
__decorate([
ZoneOutside()
], ChartEChartsComponent.prototype, "load", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsComponent, decorators: [{
type: Component,
args: [{
selector: 'chart-echarts, [chart-echarts]',
exportAs: 'chartECharts',
template: `
(!loaded) {
<nz-skeleton />
}
<div #container [style.width]="_width" [style.height]="_height"></div>
`,
host: {
'[style.display]': `'inline-block'`,
'[style.width]': `_width`,
'[style.height]': `_height`
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
imports: [NzSkeletonComponent]
}]
}], ctorParameters: () => [], propDecorators: { node: [{
type: ViewChild,
args: ['container', { static: true }]
}], width: [{
type: Input
}], height: [{
type: Input
}], theme: [{
type: Input
}], initOpt: [{
type: Input
}], option: [{
type: Input
}], on: [{
type: Input
}], events: [{
type: Output
}], load: [] } });
const COMPONENTS = [ChartEChartsComponent];
class ChartEChartsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsModule, imports: [CommonModule, NzSkeletonModule, ChartEChartsComponent], exports: [ChartEChartsComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsModule, imports: [CommonModule, NzSkeletonModule, COMPONENTS] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartEChartsModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, NzSkeletonModule, ...COMPONENTS],
exports: COMPONENTS
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ChartEChartsComponent, ChartEChartsModule, ChartEChartsService };
//# sourceMappingURL=chart-echarts.mjs.map