{"version":3,"file":"ng-apexcharts.mjs","sources":["../../../projects/ng-apexcharts/src/lib/chart/chart.component.ts","../../../projects/ng-apexcharts/src/lib/ng-apexcharts.module.ts","../../../projects/ng-apexcharts/src/public_api.ts","../../../projects/ng-apexcharts/src/ng-apexcharts.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n Input,\n OnChanges,\n OnDestroy,\n SimpleChanges,\n ViewChild,\n NgZone,\n ChangeDetectionStrategy,\n} from \"@angular/core\";\nimport {\n ApexAnnotations,\n ApexAxisChartSeries,\n ApexChart,\n ApexDataLabels,\n ApexFill,\n ApexGrid,\n ApexLegend,\n ApexNonAxisChartSeries,\n ApexMarkers,\n ApexNoData,\n ApexPlotOptions,\n ApexResponsive,\n ApexStates,\n ApexStroke,\n ApexTheme,\n ApexTitleSubtitle,\n ApexTooltip,\n ApexXAxis,\n ApexYAxis,\n ApexForecastDataPoints,\n} from \"../model/apex-types\";\nimport { asapScheduler } from \"rxjs\";\n\nimport ApexCharts from \"apexcharts\";\n\n@Component({\n selector: \"apx-chart\",\n template: `
`,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ChartComponent implements OnChanges, OnDestroy {\n @Input() chart: ApexChart;\n @Input() annotations: ApexAnnotations;\n @Input() colors: any[];\n @Input() dataLabels: ApexDataLabels;\n @Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;\n @Input() stroke: ApexStroke;\n @Input() labels: string[];\n @Input() legend: ApexLegend;\n @Input() markers: ApexMarkers;\n @Input() noData: ApexNoData;\n @Input() fill: ApexFill;\n @Input() tooltip: ApexTooltip;\n @Input() plotOptions: ApexPlotOptions;\n @Input() responsive: ApexResponsive[];\n @Input() xaxis: ApexXAxis;\n @Input() yaxis: ApexYAxis | ApexYAxis[];\n @Input() forecastDataPoints: ApexForecastDataPoints;\n @Input() grid: ApexGrid;\n @Input() states: ApexStates;\n @Input() title: ApexTitleSubtitle;\n @Input() subtitle: ApexTitleSubtitle;\n @Input() theme: ApexTheme;\n\n @Input() autoUpdateSeries = true;\n\n @ViewChild(\"chart\", { static: true }) private chartElement: ElementRef;\n private chartObj: any;\n\n constructor(private ngZone: NgZone) {\n\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n asapScheduler.schedule(() => {\n if (\n this.autoUpdateSeries &&\n Object.keys(changes).filter((c) => c !== \"series\").length === 0\n ) {\n this.updateSeries(this.series, true);\n return;\n }\n\n this.createElement();\n });\n }\n\n ngOnDestroy() {\n if (this.chartObj) {\n this.chartObj.destroy();\n }\n }\n\n private createElement() {\n const options: any = {};\n\n if (this.annotations) {\n options.annotations = this.annotations;\n }\n if (this.chart) {\n options.chart = this.chart;\n }\n if (this.colors) {\n options.colors = this.colors;\n }\n if (this.dataLabels) {\n options.dataLabels = this.dataLabels;\n }\n if (this.series) {\n options.series = this.series;\n }\n if (this.stroke) {\n options.stroke = this.stroke;\n }\n if (this.labels) {\n options.labels = this.labels;\n }\n if (this.legend) {\n options.legend = this.legend;\n }\n if (this.fill) {\n options.fill = this.fill;\n }\n if (this.tooltip) {\n options.tooltip = this.tooltip;\n }\n if (this.plotOptions) {\n options.plotOptions = this.plotOptions;\n }\n if (this.responsive) {\n options.responsive = this.responsive;\n }\n if (this.markers) {\n options.markers = this.markers;\n }\n if (this.noData) {\n options.noData = this.noData;\n }\n if (this.xaxis) {\n options.xaxis = this.xaxis;\n }\n if (this.yaxis) {\n options.yaxis = this.yaxis;\n }\n if (this.forecastDataPoints) {\n options.forecastDataPoints = this.forecastDataPoints;\n }\n if (this.grid) {\n options.grid = this.grid;\n }\n if (this.states) {\n options.states = this.states;\n }\n if (this.title) {\n options.title = this.title;\n }\n if (this.subtitle) {\n options.subtitle = this.subtitle;\n }\n if (this.theme) {\n options.theme = this.theme;\n }\n\n if (this.chartObj) {\n this.chartObj.destroy();\n }\n\n this.ngZone.runOutsideAngular(() => {\n this.chartObj = new ApexCharts(this.chartElement.nativeElement, options);\n });\n\n this.render();\n }\n\n public render(): Promise