BREAKING Tree shakable standalone library

The library is standalone and tree-shakable, so it introduces the following breaking changes: - All usage of `NgChartsModule` must be replaced by `provideNgCharts()` (and `withDefaultRegisterables()` and optionally `withColorGenerator()`)
valor-software · Jan 30, 2024 · da5b2b3 · da5b2b3
1 parent b945381
commit da5b2b3
Show file tree

Hide file tree

Showing 48 changed files with 368 additions and 429 deletions.
diff --git a/README.md b/README.md
@@ -49,16 +49,35 @@ or with yarn:
 yarn add  chart.js --save
 ```
 
-3. Import the `NgChartsModule` in your app main module:
+3. Import the directive in your standalone component:
 
 ```typescript
-import { NgChartsModule } from 'ng2-charts';
+import { BaseChartDirective } from 'ng2-charts';
 
-// In your App's module:
-imports: [NgChartsModule];
+@Component({
+  standalone: true,
+  imports: [BaseChartDirective],
+})
+export class MyComponent { }
 ```
 
-### Angular version compability table
+4. Provide a configuration, typically in your `main.ts`:
+
+```typescript
+import {
+  provideCharts,
+  withColorGenerator,
+  withDefaultRegisterables,
+} from 'ng2-charts';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideCharts(withDefaultRegisterables(), withColorGenerator()),
+  ],
+}).catch((err) => console.error(err));
+```
+
+### Angular version compatibility table
 
 <table role="table">
  <tbody><tr>

diff --git a/apps/ng2-charts-demo/src/app/app.component.html b/apps/ng2-charts-demo/src/app/app.component.html
@@ -65,38 +65,37 @@ <h2>Installation</h2>
         <h2>API</h2>
         <markdown ngPreserveWhitespaces>
           ### Usage
-          In order to use ***ng2-charts*** you need to import `NgChartsModule`:
+          In order to use ***ng2-charts*** you need to import the directive in your standalone component:
 
           ```typescript
-          import {{ '{' }} NgChartsModule &#125; from 'ng2-charts';
+          import &#123; BaseChartDirective &#125; from 'ng2-charts';
 
-          // In your App's module:
-          imports: [
-            NgChartsModule
-          ]
+          &#64;Component(&#123;
+            standalone: true,
+            imports: [BaseChartDirective],
+          &#125;)
+          export class MyComponent &#123; &#125;
           ```
           ### Global configuration
-          When you import `NgChartsModule` you can pass a global configuration object to it:
+          You also need to provide a global configuration in your `main.ts` (or wherever that makes sense if you are lazy-loading things):
 
           ```typescript
-          import {{ '{' }} NgChartsModule &#125; from 'ng2-charts';
-
-          // In your App's module:
-          imports: [
-            NgChartsModule.forRoot({{ '{' }} defaults: {{ '{' }} ... &#125; &#125;)
-          ]
+          import &#123;
+            provideCharts,
+            withColorGenerator,
+            withDefaultRegisterables,
+          &#125; from 'ng2-charts';
+
+          bootstrapApplication(AppComponent, &#123;
+            providers: [
+              provideCharts(withDefaultRegisterables(), withColorGenerator()),
+            ],
+          &#125;).catch((err) => console.error(err));
           ```
-          Alternatively, include a provider in your module, or one of the parent modules:
+          Alternatively, include a minimal configuration to reduce the bundle size, eg:
 
           ```typescript
-          import {{ '{' }} NgChartsModule, NgChartsConfiguration &#125; from 'ng2-charts';
-
-          imports: [
-            NgChartsModule
-          ],
-          providers: [
-            {{ '{' }} provide: NgChartsConfiguration, useValue: {{ '{' }} generateColors: false &#125;&#125;
-          ]
+          provideCharts(&#123; registerables: [BarController, Legend, Colors] &#125;)
           ```
 
           ### Chart types
@@ -148,7 +147,7 @@ <h2>API</h2>
 
           ### Dynamic Theming
 
-          The `NgChartsModule` provides a service called `ThemeService` which allows clients to set a structure
+          The `ThemeService` allows clients to set a structure
           specifying colors override settings. This service may be called when the dynamic theme changes, with colors
           which fit the theme. The structure is interpreted as an override, so in order to reset any existing option
           or customization you will have to define `undefined` properties explicitly. For example:

diff --git a/apps/ng2-charts-demo/src/app/app.component.spec.ts b/apps/ng2-charts-demo/src/app/app.component.spec.ts
@@ -1,71 +1,22 @@
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
-import { MaterialModule } from './material/material.module';
 import { MarkdownModule } from 'ngx-markdown';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { LineChartComponent } from './line-chart/line-chart.component';
-import { BarChartComponent } from './bar-chart/bar-chart.component';
-import { PieChartComponent } from './pie-chart/pie-chart.component';
-import { PolarAreaChartComponent } from './polar-area-chart/polar-area-chart.component';
-import { RadarChartComponent } from './radar-chart/radar-chart.component';
-import { DynamicChartComponent } from './dynamic-chart/dynamic-chart.component';
-import { ChartHostComponent } from './chart-host/chart-host.component';
-import { DoughnutChartComponent } from './doughnut-chart/doughnut-chart.component';
-import { NgChartsModule } from 'ng2-charts';
-
 import 'highlight.js';
-import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs';
-
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-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<unknown> } {
-  return {
-    typescript: () => import('highlight.js/lib/languages/typescript'),
-    // html: import('highlight.js/lib/languages/html'),
-    // scss: import('highlight.js/lib/languages/scss'),
-    xml: () => import('highlight.js/lib/languages/xml'),
-  };
-}
+import { highlightProvider } from '../main';
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        AppComponent,
-        LineChartComponent,
-        BarChartComponent,
-        PieChartComponent,
-        PolarAreaChartComponent,
-        RadarChartComponent,
-        DynamicChartComponent,
-        DoughnutChartComponent,
-        BubbleChartComponent,
-        ScatterChartComponent,
-        ChartHostComponent,
-        FinancialChartComponent,
-      ],
       imports: [
         NoopAnimationsModule,
         RouterTestingModule,
-        NgChartsModule,
-        MaterialModule,
         HttpClientModule,
         MarkdownModule.forRoot({ loader: HttpClient }),
-        HighlightModule,
-      ],
-      providers: [
-        {
-          provide: HIGHLIGHT_OPTIONS,
-          useValue: {
-            coreLibraryLoader: () => import('highlight.js/lib/core'),
-            languages: hljsLanguages(),
-          },
-        },
       ],
+      providers: [highlightProvider],
     }).compileComponents();
   }));
 

diff --git a/apps/ng2-charts-demo/src/app/app.component.ts b/apps/ng2-charts-demo/src/app/app.component.ts
@@ -12,17 +12,53 @@ import {
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatTabGroup } from '@angular/material/tabs';
-import { Subscription, filter } from 'rxjs';
+import { MatTabGroup, MatTabsModule } from '@angular/material/tabs';
+import { filter, Subscription } from 'rxjs';
 import { Chart, ChartOptions } from 'chart.js';
 import { ThemeService } from 'ng2-charts';
+import { ChartHostComponent } from './chart-host/chart-host.component';
+import { BarChartComponent } from './bar-chart/bar-chart.component';
+import { LineChartComponent } from './line-chart/line-chart.component';
+import { DoughnutChartComponent } from './doughnut-chart/doughnut-chart.component';
+import { RadarChartComponent } from './radar-chart/radar-chart.component';
+import { PieChartComponent } from './pie-chart/pie-chart.component';
+import { PolarAreaChartComponent } from './polar-area-chart/polar-area-chart.component';
+import { BubbleChartComponent } from './bubble-chart/bubble-chart.component';
+import { FinancialChartComponent } from './financial-chart/financial-chart.component';
+import { DynamicChartComponent } from './dynamic-chart/dynamic-chart.component';
+import { ScatterChartComponent } from './scatter-chart/scatter-chart.component';
+import { MatToolbar } from '@angular/material/toolbar';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { FormsModule } from '@angular/forms';
+import { MatAnchor } from '@angular/material/button';
+import { MarkdownComponent } from 'ngx-markdown';
 
 const darkThemeClass = 'dark-theme';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    BarChartComponent,
+    BubbleChartComponent,
+    ChartHostComponent,
+    DoughnutChartComponent,
+    DynamicChartComponent,
+    FinancialChartComponent,
+    FormsModule,
+    LineChartComponent,
+    MarkdownComponent,
+    MatAnchor,
+    MatSlideToggle,
+    MatTabsModule,
+    MatToolbar,
+    PieChartComponent,
+    PolarAreaChartComponent,
+    RadarChartComponent,
+    ScatterChartComponent,
+  ],
 })
 export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
   public isDarkTheme = false;
@@ -88,7 +124,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
     private renderer: Renderer2,
     private themeService: ThemeService,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
   ) {
     // For consistent rendering across CI and local envs
     Chart.defaults.set('font', { family: 'Arial' });
@@ -105,14 +141,14 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
               this.tabGroup.selectedIndex = index;
             }
           }
-        })
+        }),
     );
   }
 
   ngAfterViewInit(): void {
     if (this.tabElements) {
       this.tabLabels = this.tabElements.map((r) =>
-        r.nativeElement.getAttribute('label').replace(/ /g, '')
+        r.nativeElement.getAttribute('label').replace(/ /g, ''),
       );
     }
   }

diff --git a/apps/ng2-charts-demo/src/app/app.module.ts b/apps/ng2-charts-demo/src/app/app.module.ts
diff --git a/apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.spec.ts
@@ -1,16 +1,14 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { BarChartComponent } from './bar-chart.component';
-import { NgChartsModule } from 'ng2-charts';
+import {provideCharts, withDefaultRegisterables} from "ng2-charts";
 
 describe('BarChartComponent', () => {
   let component: BarChartComponent;
   let fixture: ComponentFixture<BarChartComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [BarChartComponent],
-      imports: [NgChartsModule],
+      providers: [provideCharts(withDefaultRegisterables())],
     }).compileComponents();
   }));
 

diff --git a/apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.ts b/apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.ts
@@ -1,13 +1,15 @@
 import { Component, ViewChild } from '@angular/core';
 import { Chart, ChartConfiguration, ChartData, ChartEvent, ChartType } from "chart.js";
 import { BaseChartDirective } from 'ng2-charts';
-
 import DataLabelsPlugin from 'chartjs-plugin-datalabels';
+import { MatButton } from '@angular/material/button';
 
 @Component({
-  selector: 'app-bar-chart',
-  templateUrl: './bar-chart.component.html',
-  styleUrls: ['./bar-chart.component.scss'],
+    selector: 'app-bar-chart',
+    templateUrl: './bar-chart.component.html',
+    styleUrls: ['./bar-chart.component.scss'],
+    standalone: true,
+    imports: [MatButton, BaseChartDirective],
 })
 export class BarChartComponent {
   @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;