From da5b2b3dd346095b7f52a633d306d4cdf7562950 Mon Sep 17 00:00:00 2001 From: Adrien Crivelli Date: Tue, 30 Jan 2024 12:59:08 +0800 Subject: [PATCH] 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()`) --- README.md | 29 +++++-- .../src/app/app.component.html | 45 ++++++----- .../src/app/app.component.spec.ts | 53 +------------ apps/ng2-charts-demo/src/app/app.component.ts | 46 +++++++++-- apps/ng2-charts-demo/src/app/app.module.ts | 77 ------------------- .../app/bar-chart/bar-chart.component.spec.ts | 6 +- .../src/app/bar-chart/bar-chart.component.ts | 10 ++- .../bubble-chart.component.spec.ts | 8 +- .../bubble-chart/bubble-chart.component.ts | 10 ++- .../chart-host/chart-host.component.spec.ts | 29 +------ .../app/chart-host/chart-host.component.ts | 10 ++- .../doughnut-chart.component.spec.ts | 8 +- .../doughnut-chart.component.ts | 9 ++- .../dynamic-chart.component.spec.ts | 8 +- .../dynamic-chart/dynamic-chart.component.ts | 9 ++- .../financial-chart.component.spec.ts | 32 +------- .../financial-chart.component.ts | 8 +- .../line-chart/line-chart.component.spec.ts | 8 +- .../app/line-chart/line-chart.component.ts | 11 ++- .../src/app/material/material.module.ts | 29 ------- .../app/pie-chart/pie-chart.component.spec.ts | 9 +-- .../src/app/pie-chart/pie-chart.component.ts | 10 ++- .../polar-area-chart.component.spec.ts | 8 +- .../polar-area-chart.component.ts | 9 ++- .../radar-chart/radar-chart.component.spec.ts | 8 +- .../app/radar-chart/radar-chart.component.ts | 9 ++- .../scatter-chart.component.spec.ts | 8 +- .../scatter-chart/scatter-chart.component.ts | 9 ++- apps/ng2-charts-demo/src/main.ts | 51 ++++++++++-- .../src/ng-add/index.spec.ts | 1 - .../ng2-charts-schematics/src/ng-add/index.ts | 2 - .../src/ng-add/setup-project.ts | 1 - ...ame@dasherize__.component.spec.ts.template | 2 - ...ame@dasherize__.component.spec.ts.template | 2 - ...ame@dasherize__.component.spec.ts.template | 2 - ...ame@dasherize__.component.spec.ts.template | 2 - ...ame@dasherize__.component.spec.ts.template | 2 - ...ame@dasherize__.component.spec.ts.template | 2 - ...ame@dasherize__.component.spec.ts.template | 2 - ...ame@dasherize__.component.spec.ts.template | 2 - libs/ng2-charts/README.md | 50 ++++++++++-- libs/ng2-charts/src/index.ts | 2 +- .../src/lib/base-chart.directive.spec.ts | 15 ++-- .../src/lib/base-chart.directive.ts | 42 ++++++---- libs/ng2-charts/src/lib/get-colors.ts | 3 +- libs/ng2-charts/src/lib/ng-charts.module.ts | 52 ------------- libs/ng2-charts/src/lib/ng-charts.provider.ts | 46 +++++++++++ libs/ng2-charts/src/lib/theme.service.spec.ts | 1 - 48 files changed, 368 insertions(+), 429 deletions(-) delete mode 100644 apps/ng2-charts-demo/src/app/app.module.ts delete mode 100644 apps/ng2-charts-demo/src/app/material/material.module.ts delete mode 100644 libs/ng2-charts/src/lib/ng-charts.module.ts create mode 100644 libs/ng2-charts/src/lib/ng-charts.provider.ts diff --git a/README.md b/README.md index 00df3b68..cd80ef6c 100644 --- 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 diff --git a/apps/ng2-charts-demo/src/app/app.component.html b/apps/ng2-charts-demo/src/app/app.component.html index 3b372ef6..db5330c2 100644 --- a/apps/ng2-charts-demo/src/app/app.component.html +++ b/apps/ng2-charts-demo/src/app/app.component.html @@ -65,38 +65,37 @@

Installation

API

### 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 } from 'ng2-charts'; + import { BaseChartDirective } from 'ng2-charts'; - // In your App's module: - imports: [ - NgChartsModule - ] + @Component({ + standalone: true, + imports: [BaseChartDirective], + }) + export class MyComponent { } ``` ### 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 } from 'ng2-charts'; - - // In your App's module: - imports: [ - NgChartsModule.forRoot({{ '{' }} defaults: {{ '{' }} ... } }) - ] + import { + provideCharts, + withColorGenerator, + withDefaultRegisterables, + } from 'ng2-charts'; + + bootstrapApplication(AppComponent, { + providers: [ + provideCharts(withDefaultRegisterables(), withColorGenerator()), + ], + }).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 } from 'ng2-charts'; - - imports: [ - NgChartsModule - ], - providers: [ - {{ '{' }} provide: NgChartsConfiguration, useValue: {{ '{' }} generateColors: false }} - ] + provideCharts({ registerables: [BarController, Legend, Colors] }) ``` ### Chart types @@ -148,7 +147,7 @@

API

### 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 index 69df2762..b3549dd1 100644 --- 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 } { - 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 index 4b1966f8..634abb99 100644 --- a/apps/ng2-charts-demo/src/app/app.component.ts +++ b/apps/ng2-charts-demo/src/app/app.component.ts @@ -12,10 +12,26 @@ 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'; @@ -23,6 +39,26 @@ const darkThemeClass = 'dark-theme'; 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 deleted file mode 100644 index 760a11ca..00000000 --- a/apps/ng2-charts-demo/src/app/app.module.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { NgChartsModule } from 'ng2-charts'; -import { Route, RouterModule } from '@angular/router'; -import { HttpClient, HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { MarkdownModule } from 'ngx-markdown'; - -import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs'; - -import { AppComponent } from './app.component'; -import { MaterialModule } from './material/material.module'; -import { LineChartComponent } from './line-chart/line-chart.component'; -import { BarChartComponent } from './bar-chart/bar-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 { DynamicChartComponent } from './dynamic-chart/dynamic-chart.component'; -import { ChartHostComponent } from './chart-host/chart-host.component'; -import { BubbleChartComponent } from './bubble-chart/bubble-chart.component'; -import { ScatterChartComponent } from './scatter-chart/scatter-chart.component'; -import { FinancialChartComponent } from './financial-chart/financial-chart.component'; - -import { LanguageFn } from 'highlight.js'; -import { FormsModule } from '@angular/forms'; - -const routes: Route[] = []; - -export function hljsLanguages(): { [name: string]: Partial } { - 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'), - }; -} - -@NgModule({ - declarations: [ - AppComponent, - LineChartComponent, - BarChartComponent, - DoughnutChartComponent, - RadarChartComponent, - PieChartComponent, - PolarAreaChartComponent, - DynamicChartComponent, - ChartHostComponent, - BubbleChartComponent, - ScatterChartComponent, - FinancialChartComponent, - ], - imports: [ - BrowserModule, - FormsModule, - NgChartsModule, - MaterialModule, - HighlightModule, - HttpClientModule, - BrowserAnimationsModule, - MarkdownModule.forRoot({ loader: HttpClient }), - RouterModule.forRoot(routes, {}), - ], - providers: [ - { - provide: HIGHLIGHT_OPTIONS, - useValue: { - coreLibraryLoader: () => import('highlight.js/lib/core'), - languages: hljsLanguages(), - }, - }, - ], - bootstrap: [AppComponent], -}) -export class AppModule {} 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 index 4adbe959..1c7f8043 100644 --- 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,7 +1,6 @@ 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; @@ -9,8 +8,7 @@ describe('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 index d4dde038..b88b15b1 100644 --- 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; diff --git a/apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.spec.ts index 2fb6e380..3750d52c 100644 --- a/apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.spec.ts @@ -1,7 +1,6 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { BubbleChartComponent } from './bubble-chart.component'; -import { NgChartsModule } from 'ng2-charts'; +import {provideCharts, withDefaultRegisterables} from "ng2-charts"; describe('BubbleChartComponent', () => { let component: BubbleChartComponent; @@ -9,8 +8,7 @@ describe('BubbleChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [BubbleChartComponent], - imports: [NgChartsModule], + providers: [provideCharts(withDefaultRegisterables())], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.ts b/apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.ts index 5eabbcdb..768bcf80 100644 --- a/apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/bubble-chart/bubble-chart.component.ts @@ -1,10 +1,14 @@ import { Component } from '@angular/core'; import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js'; +import { MatButton } from '@angular/material/button'; +import {BaseChartDirective} from "ng2-charts"; @Component({ - selector: 'app-bubble-chart', - templateUrl: './bubble-chart.component.html', - styleUrls: ['./bubble-chart.component.scss'], + selector: 'app-bubble-chart', + templateUrl: './bubble-chart.component.html', + styleUrls: ['./bubble-chart.component.scss'], + standalone: true, + imports: [MatButton, BaseChartDirective], }) export class BubbleChartComponent { public bubbleChartOptions: ChartConfiguration['options'] = { diff --git a/apps/ng2-charts-demo/src/app/chart-host/chart-host.component.spec.ts b/apps/ng2-charts-demo/src/app/chart-host/chart-host.component.spec.ts index 096c781c..c488dc98 100644 --- a/apps/ng2-charts-demo/src/app/chart-host/chart-host.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/chart-host/chart-host.component.spec.ts @@ -1,19 +1,7 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { ChartHostComponent } from './chart-host.component'; -import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs'; -import { MaterialModule } from '../material/material.module'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { LanguageFn } from 'highlight.js'; - -export function hljsLanguages(): { [name: string]: Partial } { - 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('ChartHostComponent', () => { let component: ChartHostComponent; @@ -21,17 +9,8 @@ describe('ChartHostComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ChartHostComponent], - imports: [NoopAnimationsModule, MaterialModule, HighlightModule], - providers: [ - { - provide: HIGHLIGHT_OPTIONS, - useValue: { - coreLibraryLoader: () => import('highlight.js/lib/core'), - languages: hljsLanguages(), - }, - }, - ], + imports: [NoopAnimationsModule], + providers: [highlightProvider], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/chart-host/chart-host.component.ts b/apps/ng2-charts-demo/src/app/chart-host/chart-host.component.ts index 0fb7aabb..974e9a96 100644 --- a/apps/ng2-charts-demo/src/app/chart-host/chart-host.component.ts +++ b/apps/ng2-charts-demo/src/app/chart-host/chart-host.component.ts @@ -5,7 +5,6 @@ import { Input } from '@angular/core'; import { BaseChartDirective } from 'ng2-charts'; - import barTs from '../bar-chart/bar-chart.component.txt'; import barHtml from '../bar-chart/bar-chart.component.html'; import doughnutTs from '../doughnut-chart/doughnut-chart.component.txt'; @@ -26,6 +25,9 @@ import scatterTs from '../scatter-chart/scatter-chart.component.txt'; import scatterHtml from '../scatter-chart/scatter-chart.component.html'; import financialTs from '../financial-chart/financial-chart.component.txt'; import financialHtml from '../financial-chart/financial-chart.component.html'; +import { Highlight } from 'ngx-highlightjs'; +import { MatCard, MatCardContent } from '@angular/material/card'; +import { MatTabGroup, MatTab } from '@angular/material/tabs'; export const chartTypes: { [type: string]: { heading: string, ts: string, html: string } } = { bar: { @@ -82,8 +84,10 @@ export const chartTypes: { [type: string]: { heading: string, ts: string, html: }; @Component({ - selector: 'app-chart-host', - templateUrl: './chart-host.component.html' + selector: 'app-chart-host', + templateUrl: './chart-host.component.html', + standalone: true, + imports: [MatTabGroup, MatTab, MatCard, MatCardContent, Highlight] }) export class ChartHostComponent implements AfterContentInit { @Input() chartType: keyof typeof chartTypes = 'bar'; diff --git a/apps/ng2-charts-demo/src/app/doughnut-chart/doughnut-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/doughnut-chart/doughnut-chart.component.spec.ts index 9605d89c..4c898029 100644 --- a/apps/ng2-charts-demo/src/app/doughnut-chart/doughnut-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/doughnut-chart/doughnut-chart.component.spec.ts @@ -1,7 +1,6 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { DoughnutChartComponent } from './doughnut-chart.component'; -import { NgChartsModule } from 'ng2-charts'; +import {provideCharts, withDefaultRegisterables} from "ng2-charts"; describe('DoughnutChartComponent', () => { let component: DoughnutChartComponent; @@ -9,8 +8,7 @@ describe('DoughnutChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [DoughnutChartComponent], - imports: [NgChartsModule], + providers: [provideCharts(withDefaultRegisterables())], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/doughnut-chart/doughnut-chart.component.ts b/apps/ng2-charts-demo/src/app/doughnut-chart/doughnut-chart.component.ts index 2152cea0..a30b82d4 100644 --- a/apps/ng2-charts-demo/src/app/doughnut-chart/doughnut-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/doughnut-chart/doughnut-chart.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; import { ChartData, ChartEvent, ChartType } from 'chart.js'; +import {BaseChartDirective} from "ng2-charts"; @Component({ - selector: 'app-doughnut-chart', - templateUrl: './doughnut-chart.component.html', - styleUrls: ['./doughnut-chart.component.scss'], + selector: 'app-doughnut-chart', + templateUrl: './doughnut-chart.component.html', + styleUrls: ['./doughnut-chart.component.scss'], + standalone: true, + imports:[ BaseChartDirective] }) export class DoughnutChartComponent { // Doughnut diff --git a/apps/ng2-charts-demo/src/app/dynamic-chart/dynamic-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/dynamic-chart/dynamic-chart.component.spec.ts index 7408381a..a21582f8 100644 --- a/apps/ng2-charts-demo/src/app/dynamic-chart/dynamic-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/dynamic-chart/dynamic-chart.component.spec.ts @@ -1,7 +1,6 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { DynamicChartComponent } from './dynamic-chart.component'; -import { NgChartsModule } from 'ng2-charts'; +import {provideCharts, withDefaultRegisterables} from "ng2-charts"; describe('DynamicChartComponent', () => { let component: DynamicChartComponent; @@ -9,8 +8,7 @@ describe('DynamicChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [DynamicChartComponent], - imports: [NgChartsModule], + providers: [provideCharts(withDefaultRegisterables())], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/dynamic-chart/dynamic-chart.component.ts b/apps/ng2-charts-demo/src/app/dynamic-chart/dynamic-chart.component.ts index 677713a7..3cf792cf 100644 --- a/apps/ng2-charts-demo/src/app/dynamic-chart/dynamic-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/dynamic-chart/dynamic-chart.component.ts @@ -1,11 +1,14 @@ import { Component, ViewChild } from '@angular/core'; import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js'; import { BaseChartDirective } from 'ng2-charts'; +import { MatButton } from '@angular/material/button'; @Component({ - selector: 'app-dynamic-chart', - templateUrl: './dynamic-chart.component.html', - styleUrls: ['./dynamic-chart.component.scss'], + selector: 'app-dynamic-chart', + templateUrl: './dynamic-chart.component.html', + styleUrls: ['./dynamic-chart.component.scss'], + standalone: true, + imports: [MatButton, BaseChartDirective], }) export class DynamicChartComponent { @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined; diff --git a/apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.spec.ts index de972f9c..10e7ca92 100644 --- a/apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.spec.ts @@ -1,20 +1,8 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { HttpClient, HttpClientModule } from '@angular/common/http'; - -import { MarkdownModule } from 'ngx-markdown'; -import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs'; - +import { HttpClientModule } from '@angular/common/http'; import { FinancialChartComponent } from './financial-chart.component'; -import { NgChartsModule } from 'ng2-charts'; - -export function hljsLanguages(): { [name: string]: () => Promise } { - 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'; +import {provideCharts, withDefaultRegisterables} from "ng2-charts"; describe('FinancialChartComponent', () => { let component: FinancialChartComponent; @@ -22,22 +10,10 @@ describe('FinancialChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [FinancialChartComponent], imports: [ HttpClientModule, - NgChartsModule, - MarkdownModule.forRoot({ loader: HttpClient }), - HighlightModule, - ], - providers: [ - { - provide: HIGHLIGHT_OPTIONS, - useValue: { - coreLibraryLoader: () => import('highlight.js/lib/core'), - languages: hljsLanguages(), - }, - }, ], + providers: [provideCharts(withDefaultRegisterables()),highlightProvider], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.ts b/apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.ts index bdcd620d..b4f6e6f8 100644 --- a/apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.ts @@ -10,10 +10,14 @@ import { OhlcController, OhlcElement, } from 'chartjs-chart-financial'; +import { MatButton } from '@angular/material/button'; +import { MarkdownComponent } from 'ngx-markdown'; @Component({ - selector: 'app-financial-chart', - templateUrl: './financial-chart.component.html', + selector: 'app-financial-chart', + templateUrl: './financial-chart.component.html', + standalone: true, + imports: [MarkdownComponent, MatButton, BaseChartDirective], }) export class FinancialChartComponent { barCount = 60; diff --git a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.spec.ts index b6861ae5..21d97643 100644 --- a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.spec.ts @@ -1,7 +1,6 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { LineChartComponent } from './line-chart.component'; -import { NgChartsModule } from 'ng2-charts'; +import {provideCharts, withDefaultRegisterables} from "ng2-charts"; describe('LineChartComponent', () => { let component: LineChartComponent; @@ -9,8 +8,7 @@ describe('LineChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [LineChartComponent], - imports: [NgChartsModule], + providers: [provideCharts(withDefaultRegisterables())], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts b/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts index 1498b2c3..78c8f6f0 100644 --- a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.ts @@ -1,13 +1,16 @@ import { Component, ViewChild } from '@angular/core'; import { Chart, ChartConfiguration, ChartEvent, ChartType } from 'chart.js'; import { BaseChartDirective } from 'ng2-charts'; - import Annotation from 'chartjs-plugin-annotation'; +import { MatButton } from '@angular/material/button'; +import { NgFor } from '@angular/common'; @Component({ - selector: 'app-line-chart', - templateUrl: './line-chart.component.html', - styleUrls: ['./line-chart.component.scss'], + selector: 'app-line-chart', + templateUrl: './line-chart.component.html', + styleUrls: ['./line-chart.component.scss'], + standalone: true, + imports: [NgFor, MatButton, BaseChartDirective], }) export class LineChartComponent { private newLabel? = 'New label'; diff --git a/apps/ng2-charts-demo/src/app/material/material.module.ts b/apps/ng2-charts-demo/src/app/material/material.module.ts deleted file mode 100644 index 0f71339a..00000000 --- a/apps/ng2-charts-demo/src/app/material/material.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MatGridListModule } from '@angular/material/grid-list'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { MatButtonModule } from '@angular/material/button'; -import { MatTabsModule } from '@angular/material/tabs'; -import { MatCardModule } from '@angular/material/card'; -import { MatTableModule } from '@angular/material/table'; -import { MatDividerModule } from '@angular/material/divider'; -import { MatSlideToggleModule } from '@angular/material/slide-toggle'; - -const modules = [ - CommonModule, - MatToolbarModule, - MatTabsModule, - MatButtonModule, - MatGridListModule, - MatCardModule, - MatTableModule, - MatDividerModule, - MatSlideToggleModule, -]; - -@NgModule({ - declarations: [], - imports: modules, - exports: modules, -}) -export class MaterialModule {} diff --git a/apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.spec.ts index e5abf6a8..fbcb7142 100644 --- a/apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.spec.ts @@ -1,8 +1,6 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { PieChartComponent } from './pie-chart.component'; -import { NgChartsModule } from 'ng2-charts'; -import { MatDividerModule } from '@angular/material/divider'; +import {provideCharts, withDefaultRegisterables} from "ng2-charts"; describe('PieChartComponent', () => { let component: PieChartComponent; @@ -10,8 +8,7 @@ describe('PieChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [PieChartComponent], - imports: [NgChartsModule, MatDividerModule], + providers: [provideCharts(withDefaultRegisterables())], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.ts b/apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.ts index 10f3fee6..1568aeb3 100644 --- a/apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.ts @@ -1,11 +1,15 @@ import { Component, ViewChild } from '@angular/core'; import { ChartConfiguration, ChartData, ChartEvent, ChartType } from "chart.js"; import { BaseChartDirective } from 'ng2-charts'; +import { MatButton } from '@angular/material/button'; +import { MatDivider } from '@angular/material/divider'; @Component({ - selector: 'app-pie-chart', - templateUrl: './pie-chart.component.html', - styleUrls: ['./pie-chart.component.scss'], + selector: 'app-pie-chart', + templateUrl: './pie-chart.component.html', + styleUrls: ['./pie-chart.component.scss'], + standalone: true, + imports: [MatDivider, MatButton, BaseChartDirective], }) export class PieChartComponent { @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined; diff --git a/apps/ng2-charts-demo/src/app/polar-area-chart/polar-area-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/polar-area-chart/polar-area-chart.component.spec.ts index dff6df89..487a7f47 100644 --- a/apps/ng2-charts-demo/src/app/polar-area-chart/polar-area-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/polar-area-chart/polar-area-chart.component.spec.ts @@ -1,7 +1,6 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { PolarAreaChartComponent } from './polar-area-chart.component'; -import { NgChartsModule } from 'ng2-charts'; +import {provideCharts, withDefaultRegisterables} from "ng2-charts"; describe('PolarAreaChartComponent', () => { let component: PolarAreaChartComponent; @@ -9,8 +8,7 @@ describe('PolarAreaChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [PolarAreaChartComponent], - imports: [NgChartsModule], + providers: [provideCharts(withDefaultRegisterables())], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/polar-area-chart/polar-area-chart.component.ts b/apps/ng2-charts-demo/src/app/polar-area-chart/polar-area-chart.component.ts index 9e5c835f..217fdd3a 100644 --- a/apps/ng2-charts-demo/src/app/polar-area-chart/polar-area-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/polar-area-chart/polar-area-chart.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; import { ChartData, ChartEvent, ChartType } from 'chart.js'; +import {BaseChartDirective} from "ng2-charts"; @Component({ - selector: 'app-polar-area-chart', - templateUrl: './polar-area-chart.component.html', - styleUrls: ['./polar-area-chart.component.scss'], + selector: 'app-polar-area-chart', + templateUrl: './polar-area-chart.component.html', + styleUrls: ['./polar-area-chart.component.scss'], + standalone: true, + imports:[BaseChartDirective] }) export class PolarAreaChartComponent { // PolarArea diff --git a/apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.spec.ts index 2e0aaa55..d279ff86 100644 --- a/apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.spec.ts @@ -1,7 +1,6 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { RadarChartComponent } from './radar-chart.component'; -import { NgChartsModule } from 'ng2-charts'; +import {provideCharts, withDefaultRegisterables} from "ng2-charts"; describe('RadarChartComponent', () => { let component: RadarChartComponent; @@ -9,8 +8,7 @@ describe('RadarChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [RadarChartComponent], - imports: [NgChartsModule], + providers: [provideCharts(withDefaultRegisterables())], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.ts b/apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.ts index cdaa7f61..3afce240 100644 --- a/apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js'; +import {BaseChartDirective} from "ng2-charts"; @Component({ - selector: 'app-radar-chart', - templateUrl: './radar-chart.component.html', - styleUrls: ['./radar-chart.component.scss'], + selector: 'app-radar-chart', + templateUrl: './radar-chart.component.html', + styleUrls: ['./radar-chart.component.scss'], + standalone: true, + imports:[BaseChartDirective] }) export class RadarChartComponent { // Radar diff --git a/apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.spec.ts b/apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.spec.ts index 6740e1c8..2d7d690c 100644 --- a/apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.spec.ts +++ b/apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.spec.ts @@ -1,7 +1,6 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { ScatterChartComponent } from './scatter-chart.component'; -import { NgChartsModule } from 'ng2-charts'; +import { provideCharts, withDefaultRegisterables } from 'ng2-charts'; describe('ScatterChartComponent', () => { let component: ScatterChartComponent; @@ -9,8 +8,7 @@ describe('ScatterChartComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ScatterChartComponent], - imports: [NgChartsModule], + providers: [provideCharts(withDefaultRegisterables())], }).compileComponents(); })); diff --git a/apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.ts b/apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.ts index b2910158..d2f0ce50 100644 --- a/apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.ts +++ b/apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js'; +import {BaseChartDirective} from "ng2-charts"; @Component({ - selector: 'app-scatter-chart', - templateUrl: './scatter-chart.component.html', - styleUrls: ['./scatter-chart.component.scss'], + selector: 'app-scatter-chart', + templateUrl: './scatter-chart.component.html', + styleUrls: ['./scatter-chart.component.scss'], + standalone: true, + imports:[BaseChartDirective] }) export class ScatterChartComponent { // scatter diff --git a/apps/ng2-charts-demo/src/main.ts b/apps/ng2-charts-demo/src/main.ts index d9a2e7e4..3723c0af 100644 --- a/apps/ng2-charts-demo/src/main.ts +++ b/apps/ng2-charts-demo/src/main.ts @@ -1,13 +1,52 @@ import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { provideRouter, Route } from '@angular/router'; +import { provideMarkdown } from 'ngx-markdown'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { + HttpClient, + provideHttpClient, + withInterceptorsFromDi, +} from '@angular/common/http'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { LanguageFn } from 'highlight.js'; +import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; +import { + provideCharts, + withColorGenerator, + withDefaultRegisterables, +} from 'ng2-charts'; + +const routes: Route[] = []; + +function hljsLanguages(): { [name: string]: Partial } { + return { + typescript: () => import('highlight.js/lib/languages/typescript'), + xml: () => import('highlight.js/lib/languages/xml'), + }; +} if (environment.production) { enableProdMode(); } -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +export const highlightProvider = { + provide: HIGHLIGHT_OPTIONS, + useValue: { + coreLibraryLoader: () => import('highlight.js/lib/core'), + languages: hljsLanguages(), + }, +} as const; + +bootstrapApplication(AppComponent, { + providers: [ + provideMarkdown({ loader: HttpClient }), + provideAnimations(), + provideCharts(withDefaultRegisterables(), withColorGenerator()), + highlightProvider, + provideHttpClient(withInterceptorsFromDi()), + provideAnimations(), + provideRouter(routes), + ], +}).catch((err) => console.error(err)); diff --git a/libs/ng2-charts-schematics/src/ng-add/index.spec.ts b/libs/ng2-charts-schematics/src/ng-add/index.spec.ts index 57ad4eeb..b24015d5 100644 --- a/libs/ng2-charts-schematics/src/ng-add/index.spec.ts +++ b/libs/ng2-charts-schematics/src/ng-add/index.spec.ts @@ -1,6 +1,5 @@ import { Tree } from '@angular-devkit/schematics'; import { SchematicTestRunner } from '@angular-devkit/schematics/testing'; - import { createTestApp } from '../utils/testing'; import * as messages from './messages'; diff --git a/libs/ng2-charts-schematics/src/ng-add/index.ts b/libs/ng2-charts-schematics/src/ng-add/index.ts index 3c650c89..42962e24 100644 --- a/libs/ng2-charts-schematics/src/ng-add/index.ts +++ b/libs/ng2-charts-schematics/src/ng-add/index.ts @@ -8,9 +8,7 @@ import { NodePackageInstallTask, RunSchematicTask, } from '@angular-devkit/schematics/tasks'; - import { getWorkspace } from '@schematics/angular/utility/workspace'; - import { Schema } from './schema'; import * as messages from './messages'; import { addPackageToPackageJson } from '../utils/package-config'; diff --git a/libs/ng2-charts-schematics/src/ng-add/setup-project.ts b/libs/ng2-charts-schematics/src/ng-add/setup-project.ts index 42c74458..cbb1e571 100644 --- a/libs/ng2-charts-schematics/src/ng-add/setup-project.ts +++ b/libs/ng2-charts-schematics/src/ng-add/setup-project.ts @@ -1,5 +1,4 @@ import { chain, Rule } from '@angular-devkit/schematics'; - import { Schema } from './schema'; import { addChartsModuleToAppModule } from './steps/add-ng2-charts-module'; diff --git a/libs/ng2-charts-schematics/src/ng-generate/bar/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/libs/ng2-charts-schematics/src/ng-generate/bar/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 5666dbe6..da032fde 100644 --- a/libs/ng2-charts-schematics/src/ng-generate/bar/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/libs/ng2-charts-schematics/src/ng-generate/bar/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,4 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgChartsModule } from 'ng2-charts'; - import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; describe('<%= classify(name) %>Component', () => { diff --git a/libs/ng2-charts-schematics/src/ng-generate/bubble/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/libs/ng2-charts-schematics/src/ng-generate/bubble/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 5666dbe6..da032fde 100644 --- a/libs/ng2-charts-schematics/src/ng-generate/bubble/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/libs/ng2-charts-schematics/src/ng-generate/bubble/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,4 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgChartsModule } from 'ng2-charts'; - import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; describe('<%= classify(name) %>Component', () => { diff --git a/libs/ng2-charts-schematics/src/ng-generate/doughnut/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/libs/ng2-charts-schematics/src/ng-generate/doughnut/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 5666dbe6..da032fde 100644 --- a/libs/ng2-charts-schematics/src/ng-generate/doughnut/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/libs/ng2-charts-schematics/src/ng-generate/doughnut/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,4 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgChartsModule } from 'ng2-charts'; - import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; describe('<%= classify(name) %>Component', () => { diff --git a/libs/ng2-charts-schematics/src/ng-generate/line/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/libs/ng2-charts-schematics/src/ng-generate/line/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 5666dbe6..da032fde 100644 --- a/libs/ng2-charts-schematics/src/ng-generate/line/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/libs/ng2-charts-schematics/src/ng-generate/line/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,4 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgChartsModule } from 'ng2-charts'; - import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; describe('<%= classify(name) %>Component', () => { diff --git a/libs/ng2-charts-schematics/src/ng-generate/pie/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/libs/ng2-charts-schematics/src/ng-generate/pie/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 5666dbe6..da032fde 100644 --- a/libs/ng2-charts-schematics/src/ng-generate/pie/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/libs/ng2-charts-schematics/src/ng-generate/pie/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,4 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgChartsModule } from 'ng2-charts'; - import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; describe('<%= classify(name) %>Component', () => { diff --git a/libs/ng2-charts-schematics/src/ng-generate/polar-area/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/libs/ng2-charts-schematics/src/ng-generate/polar-area/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 5666dbe6..da032fde 100644 --- a/libs/ng2-charts-schematics/src/ng-generate/polar-area/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/libs/ng2-charts-schematics/src/ng-generate/polar-area/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,4 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgChartsModule } from 'ng2-charts'; - import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; describe('<%= classify(name) %>Component', () => { diff --git a/libs/ng2-charts-schematics/src/ng-generate/radar/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/libs/ng2-charts-schematics/src/ng-generate/radar/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 5666dbe6..da032fde 100644 --- a/libs/ng2-charts-schematics/src/ng-generate/radar/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/libs/ng2-charts-schematics/src/ng-generate/radar/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,4 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgChartsModule } from 'ng2-charts'; - import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; describe('<%= classify(name) %>Component', () => { diff --git a/libs/ng2-charts-schematics/src/ng-generate/scatter/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/libs/ng2-charts-schematics/src/ng-generate/scatter/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 5666dbe6..da032fde 100644 --- a/libs/ng2-charts-schematics/src/ng-generate/scatter/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/libs/ng2-charts-schematics/src/ng-generate/scatter/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,4 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgChartsModule } from 'ng2-charts'; - import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; describe('<%= classify(name) %>Component', () => { diff --git a/libs/ng2-charts/README.md b/libs/ng2-charts/README.md index 1d23f659..cd80ef6c 100644 --- a/libs/ng2-charts/README.md +++ b/libs/ng2-charts/README.md @@ -49,21 +49,40 @@ 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
- + @@ -73,6 +92,7 @@ imports: [NgChartsModule]; + @@ -82,6 +102,7 @@ imports: [NgChartsModule]; + @@ -91,6 +112,7 @@ imports: [NgChartsModule]; + @@ -100,6 +122,7 @@ imports: [NgChartsModule]; + @@ -109,6 +132,7 @@ imports: [NgChartsModule]; + @@ -118,6 +142,7 @@ imports: [NgChartsModule]; + @@ -127,6 +152,7 @@ imports: [NgChartsModule]; + @@ -136,6 +162,7 @@ imports: [NgChartsModule]; + @@ -145,6 +172,17 @@ imports: [NgChartsModule]; + + + + + + + + + + +
ng2-chart versionng2-chart version
v3.x v4.x v5.xv6.x
✓
✓ ✓
✓ ✓
✓
17✓✓
diff --git a/libs/ng2-charts/src/index.ts b/libs/ng2-charts/src/index.ts index e12d6518..f4ca0f21 100644 --- a/libs/ng2-charts/src/index.ts +++ b/libs/ng2-charts/src/index.ts @@ -2,7 +2,7 @@ * Public API Surface of ng2-charts */ -export * from './lib/ng-charts.module'; +export * from './lib/ng-charts.provider'; export * from './lib/base-chart.directive'; export * from './lib/theme.service'; export * from './lib/base-colors'; diff --git a/libs/ng2-charts/src/lib/base-chart.directive.spec.ts b/libs/ng2-charts/src/lib/base-chart.directive.spec.ts index 21cb05f4..942ebd4b 100644 --- a/libs/ng2-charts/src/lib/base-chart.directive.spec.ts +++ b/libs/ng2-charts/src/lib/base-chart.directive.spec.ts @@ -1,4 +1,5 @@ import { BaseChartDirective } from './base-chart.directive'; +import { provideCharts, withDefaultRegisterables } from './ng-charts.provider'; import { By } from '@angular/platform-browser'; import { ComponentFixture, @@ -7,7 +8,7 @@ import { tick, } from '@angular/core/testing'; import { Component } from '@angular/core'; -import { Chart, ChartData, ChartDataset, registerables } from "chart.js"; +import { ChartData, ChartDataset } from 'chart.js'; @Component({ template: @@ -17,6 +18,8 @@ import { Chart, ChartData, ChartDataset, registerables } from "chart.js"; ' [labels]="labels"' + ' (chartClick)="click()"' + ' (chartHover)="hover()">', + standalone: true, + imports:[BaseChartDirective] }) class TestComponent { public data?: ChartData; @@ -33,11 +36,9 @@ describe('BaseChartDirective', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestComponent, BaseChartDirective], + providers: [provideCharts(withDefaultRegisterables())], }); - Chart.register(...registerables); - fixture = TestBed.createComponent(TestComponent); element = fixture.componentInstance; directive = fixture.debugElement @@ -97,7 +98,7 @@ describe('BaseChartDirective', () => { expect(directive.chart?.data.labels?.length).toBe(3); expect( - directive.chart?.data?.labels && directive.chart?.data?.labels[0] + directive.chart?.data?.labels && directive.chart?.data?.labels[0], ).not.toEqual('Answers'); }); @@ -112,7 +113,7 @@ describe('BaseChartDirective', () => { { clientX: canvas.getBoundingClientRect().left + 50, clientY: canvas.getBoundingClientRect().top + 50, - } + }, ); canvas.dispatchEvent(event); @@ -133,7 +134,7 @@ describe('BaseChartDirective', () => { { clientX: canvas.getBoundingClientRect().left + 50, clientY: canvas.getBoundingClientRect().top + 50, - } + }, ); canvas.dispatchEvent(event); diff --git a/libs/ng2-charts/src/lib/base-chart.directive.ts b/libs/ng2-charts/src/lib/base-chart.directive.ts index 967d660c..a9cd9a77 100644 --- a/libs/ng2-charts/src/lib/base-chart.directive.ts +++ b/libs/ng2-charts/src/lib/base-chart.directive.ts @@ -2,10 +2,12 @@ import { Directive, ElementRef, EventEmitter, + Inject, Input, NgZone, OnChanges, OnDestroy, + Optional, Output, SimpleChanges, } from '@angular/core'; @@ -14,26 +16,31 @@ import { ChartConfiguration, ChartEvent, ChartType, - DefaultDataPoint, - Plugin, UpdateMode -} from "chart.js"; - + DefaultDataPoint, defaults, + Plugin, + UpdateMode, +} from 'chart.js'; import { ThemeService } from './theme.service'; import { Subscription } from 'rxjs'; import { distinctUntilChanged } from 'rxjs/operators'; - import { merge } from 'lodash-es'; +import { + NG_CHARTS_CONFIGURATION, + NgChartsConfiguration, +} from './ng-charts.provider'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector selector: 'canvas[baseChart]', exportAs: 'base-chart', + standalone: true, }) export class BaseChartDirective< - TType extends ChartType = ChartType, - TData = DefaultDataPoint, - TLabel = unknown -> implements OnDestroy, OnChanges + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown, + > + implements OnDestroy, OnChanges { @Input() public type: ChartConfiguration['type'] = 'bar' as TType; @@ -71,13 +78,22 @@ export class BaseChartDirective< public constructor( element: ElementRef, private zone: NgZone, - private themeService: ThemeService + private themeService: ThemeService, + @Optional() @Inject(NG_CHARTS_CONFIGURATION) config?: NgChartsConfiguration, ) { + if (config?.registerables) { + Chart.register(...config.registerables); + } + + if (config?.defaults) { + defaults.set(config.defaults); + } + this.ctx = element.nativeElement.getContext('2d'); this.subs.push( this.themeService.colorschemesOptions .pipe(distinctUntilChanged()) - .subscribe((r) => this.themeChanged(r)) + .subscribe((r) => this.themeChanged(r)), ); } @@ -122,7 +138,7 @@ export class BaseChartDirective< } return this.zone.runOutsideAngular( - () => (this.chart = new Chart(this.ctx, this.getChartConfiguration())) + () => (this.chart = new Chart(this.ctx, this.getChartConfiguration())), ); } @@ -188,7 +204,7 @@ export class BaseChartDirective< display: this.legend, }, }, - } + }, ); } diff --git a/libs/ng2-charts/src/lib/get-colors.ts b/libs/ng2-charts/src/lib/get-colors.ts index b18b8866..0c6be870 100644 --- a/libs/ng2-charts/src/lib/get-colors.ts +++ b/libs/ng2-charts/src/lib/get-colors.ts @@ -1,7 +1,8 @@ import { baseColors } from './base-colors'; import { Color, ScriptableContext } from "chart.js"; +import {AnyObject} from "chart.js/dist/types/basic"; -export const builtInDefaults = { +export const builtInDefaults :AnyObject= { plugins: { colors: { enabled: false } }, datasets: { line: { diff --git a/libs/ng2-charts/src/lib/ng-charts.module.ts b/libs/ng2-charts/src/lib/ng-charts.module.ts deleted file mode 100644 index cf13ae59..00000000 --- a/libs/ng2-charts/src/lib/ng-charts.module.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { - Injectable, - ModuleWithProviders, - NgModule, - Optional, -} from '@angular/core'; -import { BaseChartDirective } from './base-chart.directive'; -import { - Chart, - registerables, - ChartComponentLike, - Defaults, - defaults, -} from 'chart.js'; -import { merge } from 'lodash-es'; -import { builtInDefaults } from './get-colors'; - -@Injectable({ providedIn: 'root' }) -export class NgChartsConfiguration { - public plugins?: ChartComponentLike[]; - public defaults?: Partial; - public generateColors = true; -} - -Chart.register(...registerables); - -@NgModule({ - imports: [], - declarations: [BaseChartDirective], - exports: [BaseChartDirective], -}) -export class NgChartsModule { - constructor(@Optional() config?: NgChartsConfiguration) { - if (config?.plugins) Chart.register(...config.plugins); - - const ngChartsDefaults = merge( - config?.generateColors ? builtInDefaults : {}, - config?.defaults || {} - ); - - defaults.set(ngChartsDefaults); - } - - public static forRoot( - config?: NgChartsConfiguration - ): ModuleWithProviders { - return { - ngModule: NgChartsModule, - providers: [{ provide: NgChartsConfiguration, useValue: config }], - }; - } -} diff --git a/libs/ng2-charts/src/lib/ng-charts.provider.ts b/libs/ng2-charts/src/lib/ng-charts.provider.ts new file mode 100644 index 00000000..086724ba --- /dev/null +++ b/libs/ng2-charts/src/lib/ng-charts.provider.ts @@ -0,0 +1,46 @@ +import { InjectionToken } from '@angular/core'; +import { ChartComponentLike, registerables } from 'chart.js'; +import { merge } from 'lodash-es'; +import { builtInDefaults } from './get-colors'; +import { AnyObject } from 'chart.js/dist/types/basic'; + +export const NG_CHARTS_CONFIGURATION = + new InjectionToken('Configuration for ngCharts'); + +export type NgChartsConfiguration = { + /** + * Any registerable that can be used with `Chart.register()`, such as plugins, controllers, scales, and elements. + */ + registerables?: readonly ChartComponentLike[]; + + /** + * Default configuration that can be used with `defaults.set()`. + */ + defaults?: AnyObject; +}; + +/** + * Provide all the default registerable as defined by Chart.js + */ +export function withDefaultRegisterables(): NgChartsConfiguration { + return { registerables: registerables }; +} + +/** + * Provide predefined default colors (which are exported as `baseColors`), and then, if there are more + * datasets than colors, colors are generated randomly. + */ +export function withColorGenerator(): NgChartsConfiguration { + return { defaults: builtInDefaults }; +} + +/** + * Provide configuration for ngCharts. In most cases, you have to pass it some registerables. So either + * `withDefaultRegisterables()`, or a custom list of registerables tailored to your needs to reduce bundle size. + */ +export function provideCharts( + ...configurations: readonly NgChartsConfiguration[] +) { + const config: NgChartsConfiguration = merge({}, ...configurations); + return { provide: NG_CHARTS_CONFIGURATION, useValue: config }; +} diff --git a/libs/ng2-charts/src/lib/theme.service.spec.ts b/libs/ng2-charts/src/lib/theme.service.spec.ts index b203ca65..14aed244 100644 --- a/libs/ng2-charts/src/lib/theme.service.spec.ts +++ b/libs/ng2-charts/src/lib/theme.service.spec.ts @@ -1,5 +1,4 @@ import { TestBed } from '@angular/core/testing'; - import { ThemeService } from './theme.service'; describe('ThemeService', () => {