Merge pull request #347 from ltetreault-va/master

Make apx-chart inputs compatible with Angular strict templates
apexcharts · Aug 8, 2024 · 19aff05 · 19aff05
2 parents a4e34f0 + 56d53cc
commit 19aff05
Show file tree

Hide file tree

Showing 5 changed files with 2,007 additions and 2,208 deletions.
diff --git a/angular.json b/angular.json
@@ -43,7 +43,7 @@
             },
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.less"],

diff --git a/package.json b/package.json
@@ -9,40 +9,40 @@
     "lint": "ng lint",
     "build:pkg": "ng build ng-apexcharts --configuration production",
     "build:schematics": "tsc -p ./projects/ng-apexcharts/schematics/tsconfig.json --outDir dist/ng-apexcharts/schematics",
-    "copyfile:lincense": "copyfiles ./LICENSE ./dist/ng-apexcharts",
+    "copyfile:license": "copyfiles ./LICENSE ./dist/ng-apexcharts",
     "copyfile:schema": "copyfiles -f ./projects/ng-apexcharts/schematics/ng-add/schema.json ./dist/ng-apexcharts/schematics/ng-add",
     "copyfile:collection": "copyfiles -f ./projects/ng-apexcharts/schematics/collection.json ./dist/ng-apexcharts/schematics",
     "copyfile": "concurrently -c cyan,green 'npm run copyfile:*'",
     "package": "concurrently -c cyan,green 'npm run build:*' && npm run copyfile"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.1",
-    "@angular/common": "^18.0.1",
-    "@angular/compiler": "^18.0.1",
-    "@angular/core": "^18.0.1",
-    "@angular/forms": "^18.0.1",
-    "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@angular/platform-server": "^18.0.1",
-    "@angular/router": "^18.0.1",
-    "@angular/ssr": "^18.0.1",
-    "@schematics/angular": "^18.0.2",
+    "@angular/animations": "^18.0.4",
+    "@angular/common": "^18.0.4",
+    "@angular/compiler": "^18.0.4",
+    "@angular/core": "^18.0.4",
+    "@angular/forms": "^18.0.4",
+    "@angular/platform-browser": "^18.0.4",
+    "@angular/platform-browser-dynamic": "^18.0.4",
+    "@angular/platform-server": "^18.0.4",
+    "@angular/router": "^18.0.4",
+    "@angular/ssr": "^18.0.4",
+    "@schematics/angular": "^18.0.4",
     "apexcharts": "^3.49.0",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.1",
+    "@angular-devkit/build-angular": "^18.0.4",
     "@angular-eslint/builder": "18.0.1",
     "@angular-eslint/eslint-plugin": "18.0.1",
     "@angular-eslint/eslint-plugin-template": "18.0.1",
     "@angular-eslint/schematics": "18.0.1",
     "@angular-eslint/template-parser": "18.0.1",
-    "@angular/cli": "^18.0.2",
-    "@angular/compiler-cli": "^18.0.1",
-    "@angular/language-service": "^18.0.1",
+    "@angular/cli": "^18.0.4",
+    "@angular/compiler-cli": "^18.0.4",
+    "@angular/language-service": "^18.0.4",
     "@types/jasmine": "~3.5.10",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~20.0.0",

diff --git a/projects/ng-apexcharts/package.json b/projects/ng-apexcharts/package.json
@@ -3,8 +3,8 @@
   "version": "1.11.0",
   "description": "An angular implementation of ApexCharts",
   "peerDependencies": {
-    "@angular/common": "^18.0.1",
-    "@angular/core": "^18.0.1",
+    "@angular/common": "^18.0.4",
+    "@angular/core": "^18.0.4",
     "rxjs": "^6.5.5 || ^7.4.0",
     "apexcharts": "^3.49.1"
   },

diff --git a/projects/ng-apexcharts/src/lib/chart/chart.component.ts b/projects/ng-apexcharts/src/lib/chart/chart.component.ts
@@ -1,30 +1,33 @@
+import { isPlatformBrowser } from "@angular/common";
 import {
+  ChangeDetectionStrategy,
   Component,
   ElementRef,
+  EventEmitter,
+  inject,
   Input,
-  Output,
+  NgZone,
   OnChanges,
   OnDestroy,
-  SimpleChanges,
-  ViewChild,
-  NgZone,
-  ChangeDetectionStrategy,
-  EventEmitter,
-  inject,
+  Output,
   PLATFORM_ID,
   signal,
+  SimpleChanges,
+  ViewChild,
 } from "@angular/core";
+import { asapScheduler } from "rxjs";
 import {
   ApexAnnotations,
   ApexAxisChartSeries,
   ApexChart,
   ApexDataLabels,
   ApexFill,
+  ApexForecastDataPoints,
   ApexGrid,
   ApexLegend,
-  ApexNonAxisChartSeries,
   ApexMarkers,
   ApexNoData,
+  ApexNonAxisChartSeries,
   ApexPlotOptions,
   ApexResponsive,
   ApexStates,
@@ -34,10 +37,7 @@ import {
   ApexTooltip,
   ApexXAxis,
   ApexYAxis,
-  ApexForecastDataPoints,
 } from "../model/apex-types";
-import { BehaviorSubject, asapScheduler } from "rxjs";
-import { isPlatformBrowser } from "@angular/common";
 
 declare global {
   interface Window {
@@ -52,28 +52,28 @@ declare global {
   standalone: true,
 })
 export class ChartComponent implements OnChanges, OnDestroy {
-  @Input() chart: ApexChart;
-  @Input() annotations: ApexAnnotations;
-  @Input() colors: any[];
-  @Input() dataLabels: ApexDataLabels;
-  @Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;
-  @Input() stroke: ApexStroke;
-  @Input() labels: string[];
-  @Input() legend: ApexLegend;
-  @Input() markers: ApexMarkers;
-  @Input() noData: ApexNoData;
-  @Input() fill: ApexFill;
-  @Input() tooltip: ApexTooltip;
-  @Input() plotOptions: ApexPlotOptions;
-  @Input() responsive: ApexResponsive[];
-  @Input() xaxis: ApexXAxis;
-  @Input() yaxis: ApexYAxis | ApexYAxis[];
-  @Input() forecastDataPoints: ApexForecastDataPoints;
-  @Input() grid: ApexGrid;
-  @Input() states: ApexStates;
-  @Input() title: ApexTitleSubtitle;
-  @Input() subtitle: ApexTitleSubtitle;
-  @Input() theme: ApexTheme;
+  @Input() chart?: ApexChart;
+  @Input() annotations?: ApexAnnotations;
+  @Input() colors?: any[];
+  @Input() dataLabels?: ApexDataLabels;
+  @Input() series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
+  @Input() stroke?: ApexStroke;
+  @Input() labels?: string[];
+  @Input() legend?: ApexLegend;
+  @Input() markers?: ApexMarkers;
+  @Input() noData?: ApexNoData;
+  @Input() fill?: ApexFill;
+  @Input() tooltip?: ApexTooltip;
+  @Input() plotOptions?: ApexPlotOptions;
+  @Input() responsive?: ApexResponsive[];
+  @Input() xaxis?: ApexXAxis;
+  @Input() yaxis?: ApexYAxis | ApexYAxis[];
+  @Input() forecastDataPoints?: ApexForecastDataPoints;
+  @Input() grid?: ApexGrid;
+  @Input() states?: ApexStates;
+  @Input() title?: ApexTitleSubtitle;
+  @Input() subtitle?: ApexTitleSubtitle;
+  @Input() theme?: ApexTheme;
 
   @Input() autoUpdateSeries = true;