Angular 17

.github/workflows/ci.yml

@@ -25,6 +25,7 @@ jobs:
       - run: npm run build:lib
       - run: npm run build:schematics
       - run: npm run test:ci
-      - run: npm run test:schematics
       - run: npm run build:prod
       - run: npm run e2e
+        env:
+          CI: true

.github/workflows/release.yml

@@ -29,9 +29,9 @@ jobs:
       - run: npm ci
 
       - run: npm run test:ci
-      - run: |
-          npm run e2e
-
+      - run: npm run e2e
+        env:
+          CI: true
         # build docs
       - run: npm run build:prod -- --base-href /ng2-charts/next/
         if: ${{ github.event.release.prerelease }}

.gitignore

@@ -52,4 +52,5 @@ Thumbs.db
 /Web.config
 
 .angular
-.nx
+
+.nx/cache

.prettierignore

@@ -6,3 +6,5 @@
 
 # Ignore this file or it will break markdown formatting
 /apps/ng2-charts-demo/src/app/app.component.html
+
+/.nx/cache

apps/ng2-charts-demo/jest.config.ts

@@ -8,7 +8,7 @@ export default {
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/apps/ng2-charts',
   transform: {
-    '^.+\\.(ts|mjs|html)$': [
+    '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',
       {
         tsconfig: '<rootDir>/tsconfig.spec.json',

apps/ng2-charts-demo/playwright.config.ts

@@ -22,7 +22,7 @@ export default defineConfig({
     use: { ...devices["Desktop Chrome"] }
   }],
   webServer: {
-    command: "nx serve-static",
+    command: "npm run serve-static",
     url: baseURL,
     reuseExistingServer: !process.env.CI
   },

apps/ng2-charts-demo/project.json

@@ -7,20 +7,24 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
+      "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/ng2-charts-demo",
         "index": "apps/ng2-charts-demo/src/index.html",
-        "main": "apps/ng2-charts-demo/src/main.ts",
+        "browser": "apps/ng2-charts-demo/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/ng2-charts-demo/tsconfig.app.json",
         "assets": [
           "apps/ng2-charts-demo/src/favicon.ico",
           "apps/ng2-charts-demo/src/assets"
         ],
         "styles": ["apps/ng2-charts-demo/src/styles.scss"],
-        "scripts": []
+        "scripts": [],
+        "loader": {
+          ".html": "text",
+          ".ts": "text"
+        }
       },
       "configurations": {
         "production": {
@@ -39,9 +43,7 @@
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true
@@ -53,22 +55,22 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "ng2-charts-demo:build:production"
+          "buildTarget": "ng2-charts-demo:build:production"
         },
         "development": {
-          "browserTarget": "ng2-charts-demo:build:development"
+          "buildTarget": "ng2-charts-demo:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "ng2-charts-demo:build"
+        "buildTarget": "ng2-charts-demo:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": [
@@ -81,20 +83,14 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/ng2-charts-demo/jest.config.ts",
-        "passWithNoTests": true
-      },
-      "configurations": {
-        "ci": {
-          "ci": true,
-          "codeCoverage": true
-        }
+        "jestConfig": "apps/ng2-charts-demo/jest.config.ts"
       }
     },
     "serve-static": {
       "executor": "@nx/web:file-server",
       "options": {
-        "buildTarget": "ng2-charts-demo:build"
+        "buildTarget": "ng2-charts-demo:build",
+        "staticFilePath": "dist/apps/ng2-charts-demo/browser"
       }
     },
     "e2e": {
@@ -105,10 +101,8 @@
       },
       "configurations": {
         "update-snapshots": {
-          "options": {
-            "skipInstall": true,
-            "updateSnapshots": "all"
-          }
+          "skipInstall": true,
+          "updateSnapshots": true
         }
       }
     }

apps/ng2-charts-demo/src/.gitignore

@@ -0,0 +1 @@
+*.txt

apps/ng2-charts-demo/src/app/app.component.html

@@ -68,7 +68,7 @@ <h2>API</h2>
           In order to use ***ng2-charts*** you need to import `NgChartsModule`:
 
           ```typescript
-          import {{ '{' }} NgChartsModule } from 'ng2-charts';
+          import {{ '{' }} NgChartsModule &#125; from 'ng2-charts';
 
           // In your App's module:
           imports: [
@@ -79,23 +79,23 @@ <h2>API</h2>
           When you import `NgChartsModule` you can pass a global configuration object to it:
 
           ```typescript
-          import {{ '{' }} NgChartsModule } from 'ng2-charts';
+          import {{ '{' }} NgChartsModule &#125; from 'ng2-charts';
 
           // In your App's module:
           imports: [
-            NgChartsModule.forRoot({{ '{' }} defaults: {{ '{' }} ... } })
+            NgChartsModule.forRoot({{ '{' }} defaults: {{ '{' }} ... &#125; &#125;)
           ]
           ```
           Alternatively, include a provider in your module, or one of the parent modules:
 
           ```typescript
-          import {{ '{' }} NgChartsModule, NgChartsConfiguration } from 'ng2-charts';
+          import {{ '{' }} NgChartsModule, NgChartsConfiguration &#125; from 'ng2-charts';
 
           imports: [
             NgChartsModule
           ],
           providers: [
-            {{ '{' }} provide: NgChartsConfiguration, useValue: {{ '{' }} generateColors: false }}
+            {{ '{' }} provide: NgChartsConfiguration, useValue: {{ '{' }} generateColors: false &#125;&#125;
           ]
           ```
 
@@ -129,12 +129,12 @@ <h2>API</h2>
           points and labels
 
           ### Chart instance
-          You can get access to the chart instance by using the `@ViewChild` annotation and a suitable selector for
+          You can get access to the chart instance by using the `&#64;ViewChild` annotation and a suitable selector for
           the directive (see the Angular [docs](https://angular.io/api/core/ViewChild)). For example, to get the chart
           instance and call the `toBase64Image()` method, you can add the following to the parent component:
 
           ```typescript
-          @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+          &#64;ViewChild(BaseChartDirective) chart?: BaseChartDirective;
 
           public someAction(): void {{ '{' }}
             this.chart?.toBase64Image();
@@ -159,37 +159,37 @@ <h2>API</h2>
           private _selectedTheme: Theme = 'light-theme';
           public get selectedTheme() {{ '{' }}
               return this._selectedTheme;
-            }
+            &#125;
             public set selectedTheme(value) {{ '{' }}
               this._selectedTheme = value;
               let overrides: ChartOptions;
               if (this.selectedTheme === 'dark-theme') {{ '{' }}
                 overrides = {{ '{' }}
                   scales: {{ '{' }}
                     x: [{{ '{' }}
-                      ticks: {{ '{' }} fontColor: 'white' },
-                      gridLines: {{ '{' }} color: 'rgba(255,255,255,0.1)' }
-                    }],
+                      ticks: {{ '{' }} fontColor: 'white' &#125;,
+                      gridLines: {{ '{' }} color: 'rgba(255,255,255,0.1)' &#125;
+                    &#125;],
                     y: [{{ '{' }}
-                      ticks: {{ '{' }} fontColor: 'white' },
-                      gridLines: {{ '{' }} color: 'rgba(255,255,255,0.1)' }
-                    }]
-                  }
-                };
-              } else {{ '{' }}
+                      ticks: {{ '{' }} fontColor: 'white' &#125;,
+                      gridLines: {{ '{' }} color: 'rgba(255,255,255,0.1)' &#125;
+                    &#125;]
+                  &#125;
+                &#125;;
+              &#125; else {{ '{' }}
                 overrides = {{ '{' }}
                   scales: undefined
-                };
-              }
+                &#125;;
+              &#125;
 
               this.themeService.setColorschemesOptions(overrides);
-          }
+          &#125;
 
-          constructor(private themeService: ThemeService) {{ '{' }} }
+          constructor(private themeService: ThemeService) {{ '{' }} &#125;
 
           setCurrentTheme(theme: Theme) {{ '{' }}
             this.selectedTheme = theme;
-          }
+          &#125;
           ```
 
           The `overrides` object has the same type as the chart options object `ChartOptions`, and wherever a simple

apps/ng2-charts-demo/src/app/app.component.spec.ts

@@ -22,7 +22,7 @@ import { BubbleChartComponent } from './bubble-chart/bubble-chart.component';
 import { ScatterChartComponent } from './scatter-chart/scatter-chart.component';
 import { FinancialChartComponent } from './financial-chart/financial-chart.component';
 
-export function hljsLanguages(): { [name: string]: () => Promise<any> } {
+export function hljsLanguages(): { [name: string]: () => Promise<unknown> } {
   return {
     typescript: () => import('highlight.js/lib/languages/typescript'),
     // html: import('highlight.js/lib/languages/html'),

apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.html

@@ -3,7 +3,6 @@
   class="chart"
   [data]="barChartData"
   [options]="barChartOptions"
-  [plugins]="barChartPlugins"
   [type]="barChartType"
   (chartHover)="chartHovered($event)"
   (chartClick)="chartClicked($event)"

apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
+import { Chart, ChartConfiguration, ChartData, ChartEvent, ChartType } from "chart.js";
 import { BaseChartDirective } from 'ng2-charts';
 
 import DataLabelsPlugin from 'chartjs-plugin-datalabels';
@@ -12,6 +12,10 @@ import DataLabelsPlugin from 'chartjs-plugin-datalabels';
 export class BarChartComponent {
   @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
 
+  constructor() {
+    Chart.register(DataLabelsPlugin);
+  }
+
   public barChartOptions: ChartConfiguration['options'] = {
     // We use these empty structures as placeholders for dynamic theming.
     scales: {
@@ -31,7 +35,6 @@ export class BarChartComponent {
     },
   };
   public barChartType: ChartType = 'bar';
-  public barChartPlugins = [DataLabelsPlugin];
 
   public barChartData: ChartData<'bar'> = {
     labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],

apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.ts

@@ -92,7 +92,7 @@ export class BubbleChartComponent {
 
   public randomize(): void {
     const numberOfPoints = this.rand(5) + 5;
-    this.bubbleChartData.datasets[0].data = new Array(numberOfPoints).map((r) =>
+    this.bubbleChartData.datasets[0].data = new Array(numberOfPoints).map(() =>
       this.randomPoint(30)
     );
   }