ng-apexcharts
Version:
An angular implementation of ApexCharts
201 lines (195 loc) • 11.5 kB
JavaScript
import * as i0 from '@angular/core';
import { input, output, signal, viewChild, inject, NgZone, PLATFORM_ID, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { asapScheduler } from 'rxjs';
class ChartComponent {
constructor() {
this.chart = input();
this.annotations = input();
this.colors = input();
this.dataLabels = input();
this.series = input();
this.stroke = input();
this.labels = input();
this.legend = input();
this.markers = input();
this.noData = input();
this.fill = input();
this.tooltip = input();
this.plotOptions = input();
this.responsive = input();
this.xaxis = input();
this.yaxis = input();
this.forecastDataPoints = input();
this.grid = input();
this.states = input();
this.title = input();
this.subtitle = input();
this.theme = input();
this.autoUpdateSeries = input(true);
this.chartReady = output();
// If consumers need to capture the `chartInstance` for use, consumers
// can access the component instance through `viewChild` and use `computed`
// or `effect` on `component.chartInstance()` to monitor its changes and
// recompute effects or computations whenever `chartInstance` is updated.
this.chartInstance = signal(null);
this.chartElement = viewChild.required("chart");
this.ngZone = inject(NgZone);
this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
}
ngOnChanges(changes) {
if (!this.isBrowser)
return;
this.ngZone.runOutsideAngular(() => {
asapScheduler.schedule(() => this.hydrate(changes));
});
}
ngOnDestroy() {
this.destroy();
}
hydrate(changes) {
const shouldUpdateSeries = this.autoUpdateSeries() &&
Object.keys(changes).filter((c) => c !== "series").length === 0;
if (shouldUpdateSeries) {
this.updateSeries(this.series(), true);
return;
}
this.createElement();
}
async createElement() {
const { default: ApexCharts } = await import('apexcharts');
window.ApexCharts ||= ApexCharts;
const options = {};
const properties = [
"annotations",
"chart",
"colors",
"dataLabels",
"series",
"stroke",
"labels",
"legend",
"fill",
"tooltip",
"plotOptions",
"responsive",
"markers",
"noData",
"xaxis",
"yaxis",
"forecastDataPoints",
"grid",
"states",
"title",
"subtitle",
"theme",
];
properties.forEach((property) => {
const value = this[property]();
if (value) {
options[property] = value;
}
});
this.destroy();
const chartInstance = this.ngZone.runOutsideAngular(() => new ApexCharts(this.chartElement().nativeElement, options));
this.chartInstance.set(chartInstance);
this.render();
this.chartReady.emit({ chartObj: chartInstance });
}
render() {
return this.ngZone.runOutsideAngular(() => this.chartInstance()?.render());
}
updateOptions(options, redrawPaths, animate, updateSyncedCharts) {
return this.ngZone.runOutsideAngular(() => this.chartInstance()?.updateOptions(options, redrawPaths, animate, updateSyncedCharts));
}
updateSeries(newSeries, animate) {
return this.ngZone.runOutsideAngular(() => this.chartInstance()?.updateSeries(newSeries, animate));
}
appendSeries(newSeries, animate) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.appendSeries(newSeries, animate));
}
appendData(newData) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.appendData(newData));
}
highlightSeries(seriesName) {
return this.ngZone.runOutsideAngular(() => this.chartInstance()?.highlightSeries(seriesName));
}
toggleSeries(seriesName) {
return this.ngZone.runOutsideAngular(() => this.chartInstance()?.toggleSeries(seriesName));
}
showSeries(seriesName) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.showSeries(seriesName));
}
hideSeries(seriesName) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.hideSeries(seriesName));
}
resetSeries() {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.resetSeries());
}
zoomX(min, max) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.zoomX(min, max));
}
toggleDataPointSelection(seriesIndex, dataPointIndex) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.toggleDataPointSelection(seriesIndex, dataPointIndex));
}
destroy() {
this.chartInstance()?.destroy();
this.chartInstance.set(null);
}
setLocale(localeName) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.setLocale(localeName));
}
paper() {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.paper());
}
addXaxisAnnotation(options, pushToMemory, context) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.addXaxisAnnotation(options, pushToMemory, context));
}
addYaxisAnnotation(options, pushToMemory, context) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.addYaxisAnnotation(options, pushToMemory, context));
}
addPointAnnotation(options, pushToMemory, context) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.addPointAnnotation(options, pushToMemory, context));
}
removeAnnotation(id, options) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.removeAnnotation(id, options));
}
clearAnnotations(options) {
this.ngZone.runOutsideAngular(() => this.chartInstance()?.clearAnnotations(options));
}
dataURI(options) {
return this.chartInstance()?.dataURI(options);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.0", type: ChartComponent, isStandalone: true, selector: "apx-chart", inputs: { chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, stroke: { classPropertyName: "stroke", publicName: "stroke", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, noData: { classPropertyName: "noData", publicName: "noData", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, plotOptions: { classPropertyName: "plotOptions", publicName: "plotOptions", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, xaxis: { classPropertyName: "xaxis", publicName: "xaxis", isSignal: true, isRequired: false, transformFunction: null }, yaxis: { classPropertyName: "yaxis", publicName: "yaxis", isSignal: true, isRequired: false, transformFunction: null }, forecastDataPoints: { classPropertyName: "forecastDataPoints", publicName: "forecastDataPoints", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, states: { classPropertyName: "states", publicName: "states", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, autoUpdateSeries: { classPropertyName: "autoUpdateSeries", publicName: "autoUpdateSeries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartReady: "chartReady" }, viewQueries: [{ propertyName: "chartElement", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #chart></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ChartComponent, decorators: [{
type: Component,
args: [{
selector: "apx-chart",
template: `<div #chart></div>`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
}]
}] });
const declarations = [ChartComponent];
class NgApexchartsModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgApexchartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: NgApexchartsModule, imports: [ChartComponent], exports: [ChartComponent] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgApexchartsModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgApexchartsModule, decorators: [{
type: NgModule,
args: [{
imports: [declarations],
exports: [declarations],
}]
}] });
/*
* Public API Surface of ng-apexcharts
*/
/**
* Generated bundle index. Do not edit.
*/
export { ChartComponent, NgApexchartsModule };
//# sourceMappingURL=ng-apexcharts.mjs.map