scichart-angular
Version:
Angular wrapper for SciChart JS
201 lines (192 loc) • 9.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ViewChild, EventEmitter, Input, Output } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { SciChartSurfaceBase, DefaultSciChartLoader, generateGuid, chartBuilder } from 'scichart';
class ScichartAngularService {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScichartAngularService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScichartAngularService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScichartAngularService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class ScichartFallbackComponent {
constructor() {
this.title = 'scichart-fallback';
this.style = {
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0,
textAlign: "center",
background: SciChartSurfaceBase.DEFAULT_THEME.sciChartBackground
};
}
ngAfterViewInit() {
const loader = new DefaultSciChartLoader();
const loaderDiv = loader.addChartLoader(this.rootRef.nativeElement, SciChartSurfaceBase.DEFAULT_THEME);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScichartFallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ScichartFallbackComponent, isStandalone: true, selector: "scichart-fallback", viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["rootRef"], descendants: true }], ngImport: i0, template: `
<div #rootRef [ngStyle]="style"></div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScichartFallbackComponent, decorators: [{
type: Component,
args: [{
selector: 'scichart-fallback',
standalone: true,
imports: [CommonModule],
template: `
<div #rootRef [ngStyle]="style"></div>
`,
}]
}], propDecorators: { rootRef: [{
type: ViewChild,
args: ['rootRef']
}] } });
const createChartRoot = () => {
// check if SSR
if (typeof window === "undefined") {
return null;
}
const internalRootElement = document.createElement("div");
// generate or provide a unique root element id to avoid chart rendering collisions
internalRootElement.id = `chart-root-${generateGuid()}`;
internalRootElement.style.width = "100%";
internalRootElement.style.height = "100%";
return internalRootElement;
};
function createChartFromConfig(config) {
return async (chartRoot) => {
// Potentially should return 2D, 3D, or Pie Chart
const chart = (await chartBuilder.buildChart(chartRoot, config));
if ("sciChartSurface" in chart) {
// 2D Chart
return { sciChartSurface: chart.sciChartSurface };
}
else if ("sciChart3DSurface" in chart) {
// 3D Chart
return { sciChartSurface: chart.sciChart3DSurface };
}
else {
// Pie Chart
return { sciChartSurface: chart };
}
};
}
const wrongInitResultMessage = `"initChart" function should resolve to an object with "sciChartSurface" property ({ sciChartSurface })`;
const conflictingConfigsMessage = `Only one of "initChart" or "config" props is required!`;
class ScichartAngularComponent {
constructor() {
this.title = 'lib-scichart-angular';
this.config = ''; //TODO: type the config
this.innerContainerStyles = null;
this.onInit = new EventEmitter();
this.onDelete = new EventEmitter();
this.innerContainerStylesMerged = {
height: '100%',
width: '100%',
};
this.isInitialized = false;
this.hasCustomFallback = false;
this.isCancelled = false;
this.chartRoot = createChartRoot();
this.sciChartSurfaceRef = null;
this.initResultRef = null;
}
ngOnInit() {
if (this.innerContainerStyles) {
this.innerContainerStylesMerged = { ...this.innerContainerStylesMerged, ...this.innerContainerStyles };
}
}
ngAfterViewInit() {
const rootElement = this.innerContainerRef.nativeElement;
rootElement.appendChild(this.chartRoot);
const fallbackElement = this.fallbackContainer.nativeElement;
if (fallbackElement.childNodes.length > 0) {
this.hasCustomFallback = true;
}
const initializationFunction = this.initChart
? (this.initChart)
: createChartFromConfig(this.config);
const runInit = async () => new Promise((resolve, reject) => initializationFunction(this.chartRoot)
.then((initResult) => {
if (!initResult.sciChartSurface) {
throw new Error(wrongInitResultMessage);
}
this.sciChartSurfaceRef = initResult.sciChartSurface;
this.initResultRef = initResult;
if (!this.isCancelled) {
this.isInitialized = true;
}
resolve(initResult);
})
.catch(reject));
runInit().then(initResult => {
if (this.onInit && this.isInitialized) {
this.onInit.emit(initResult);
}
});
}
ngOnDestroy() {
this.isCancelled = true;
if (this.onDelete && this.isInitialized) {
this.onDelete.emit(this.initResultRef);
}
this.sciChartSurfaceRef?.delete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScichartAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ScichartAngularComponent, isStandalone: true, selector: "scichart-angular", inputs: { initChart: "initChart", config: "config", innerContainerStyles: "innerContainerStyles" }, outputs: { onInit: "onInit", onDelete: "onDelete" }, viewQueries: [{ propertyName: "innerContainerRef", first: true, predicate: ["innerContainerRef"], descendants: true }, { propertyName: "fallbackContainer", first: true, predicate: ["fallbackContainer"], descendants: true }], ngImport: i0, template: `
<div style="position: relative; height: 100%; width: 100%;">
<div #innerContainerRef [ngStyle]="innerContainerStylesMerged"></div>
<ng-content *ngIf="isInitialized"></ng-content>
<div *ngIf="!isInitialized" #fallbackContainer>
<ng-content select="[fallback]"></ng-content>
</div>
<scichart-fallback *ngIf="!hasCustomFallback && !isInitialized"></scichart-fallback>
</div>
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ScichartFallbackComponent, selector: "scichart-fallback" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScichartAngularComponent, decorators: [{
type: Component,
args: [{ selector: 'scichart-angular', standalone: true, imports: [CommonModule, ScichartFallbackComponent], template: `
<div style="position: relative; height: 100%; width: 100%;">
<div #innerContainerRef [ngStyle]="innerContainerStylesMerged"></div>
<ng-content *ngIf="isInitialized"></ng-content>
<div *ngIf="!isInitialized" #fallbackContainer>
<ng-content select="[fallback]"></ng-content>
</div>
<scichart-fallback *ngIf="!hasCustomFallback && !isInitialized"></scichart-fallback>
</div>
` }]
}], propDecorators: { innerContainerRef: [{
type: ViewChild,
args: ['innerContainerRef']
}], fallbackContainer: [{
type: ViewChild,
args: ['fallbackContainer']
}], initChart: [{
type: Input
}], config: [{
type: Input
}], innerContainerStyles: [{
type: Input
}], onInit: [{
type: Output
}], onDelete: [{
type: Output
}] } });
/*
* Public API Surface of scichart-angular
*/
/**
* Generated bundle index. Do not edit.
*/
export { ScichartAngularComponent, ScichartAngularService };
//# sourceMappingURL=scichart-angular.mjs.map