ngx-echarts - npm Package Compare versions

Comparing version 17.0.1 to 17.1.0

lib/ngx-echarts.directive.d.ts

@@ -97,3 +97,3 @@ import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxEchartsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxEchartsDirective, "echarts, [echarts]", ["echarts"], { "options": { "alias": "options"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "initOpts": { "alias": "initOpts"; "required": false; }; "merge": { "alias": "merge"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingType": { "alias": "loadingType"; "required": false; }; "loadingOpts": { "alias": "loadingOpts"; "required": false; }; }, { "chartInit": "chartInit"; "optionsError": "optionsError"; "chartClick": "chartClick"; "chartDblClick": "chartDblClick"; "chartMouseDown": "chartMouseDown"; "chartMouseMove": "chartMouseMove"; "chartMouseUp": "chartMouseUp"; "chartMouseOver": "chartMouseOver"; "chartMouseOut": "chartMouseOut"; "chartGlobalOut": "chartGlobalOut"; "chartContextMenu": "chartContextMenu"; "chartHighlight": "chartHighlight"; "chartDownplay": "chartDownplay"; "chartSelectChanged": "chartSelectChanged"; "chartLegendSelectChanged": "chartLegendSelectChanged"; "chartLegendSelected": "chartLegendSelected"; "chartLegendUnselected": "chartLegendUnselected"; "chartLegendLegendSelectAll": "chartLegendLegendSelectAll"; "chartLegendLegendInverseSelect": "chartLegendLegendInverseSelect"; "chartLegendScroll": "chartLegendScroll"; "chartDataZoom": "chartDataZoom"; "chartDataRangeSelected": "chartDataRangeSelected"; "chartGraphRoam": "chartGraphRoam"; "chartGeoRoam": "chartGeoRoam"; "chartTreeRoam": "chartTreeRoam"; "chartTimelineChanged": "chartTimelineChanged"; "chartTimelinePlayChanged": "chartTimelinePlayChanged"; "chartRestore": "chartRestore"; "chartDataViewChanged": "chartDataViewChanged"; "chartMagicTypeChanged": "chartMagicTypeChanged"; "chartGeoSelectChanged": "chartGeoSelectChanged"; "chartGeoSelected": "chartGeoSelected"; "chartGeoUnselected": "chartGeoUnselected"; "chartAxisAreaSelected": "chartAxisAreaSelected"; "chartBrush": "chartBrush"; "chartBrushEnd": "chartBrushEnd"; "chartBrushSelected": "chartBrushSelected"; "chartGlobalCursorTaken": "chartGlobalCursorTaken"; "chartRendered": "chartRendered"; "chartFinished": "chartFinished"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxEchartsDirective, "echarts, [echarts]", ["echarts"], { "options": { "alias": "options"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "initOpts": { "alias": "initOpts"; "required": false; }; "merge": { "alias": "merge"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingType": { "alias": "loadingType"; "required": false; }; "loadingOpts": { "alias": "loadingOpts"; "required": false; }; }, { "chartInit": "chartInit"; "optionsError": "optionsError"; "chartClick": "chartClick"; "chartDblClick": "chartDblClick"; "chartMouseDown": "chartMouseDown"; "chartMouseMove": "chartMouseMove"; "chartMouseUp": "chartMouseUp"; "chartMouseOver": "chartMouseOver"; "chartMouseOut": "chartMouseOut"; "chartGlobalOut": "chartGlobalOut"; "chartContextMenu": "chartContextMenu"; "chartHighlight": "chartHighlight"; "chartDownplay": "chartDownplay"; "chartSelectChanged": "chartSelectChanged"; "chartLegendSelectChanged": "chartLegendSelectChanged"; "chartLegendSelected": "chartLegendSelected"; "chartLegendUnselected": "chartLegendUnselected"; "chartLegendLegendSelectAll": "chartLegendLegendSelectAll"; "chartLegendLegendInverseSelect": "chartLegendLegendInverseSelect"; "chartLegendScroll": "chartLegendScroll"; "chartDataZoom": "chartDataZoom"; "chartDataRangeSelected": "chartDataRangeSelected"; "chartGraphRoam": "chartGraphRoam"; "chartGeoRoam": "chartGeoRoam"; "chartTreeRoam": "chartTreeRoam"; "chartTimelineChanged": "chartTimelineChanged"; "chartTimelinePlayChanged": "chartTimelinePlayChanged"; "chartRestore": "chartRestore"; "chartDataViewChanged": "chartDataViewChanged"; "chartMagicTypeChanged": "chartMagicTypeChanged"; "chartGeoSelectChanged": "chartGeoSelectChanged"; "chartGeoSelected": "chartGeoSelected"; "chartGeoUnselected": "chartGeoUnselected"; "chartAxisAreaSelected": "chartAxisAreaSelected"; "chartBrush": "chartBrush"; "chartBrushEnd": "chartBrushEnd"; "chartBrushSelected": "chartBrushSelected"; "chartGlobalCursorTaken": "chartGlobalCursorTaken"; "chartRendered": "chartRendered"; "chartFinished": "chartFinished"; }, never, never, true, never>;
 }

lib/ngx-echarts.module.d.ts

@@ -1,5 +0,7 @@
-import { ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, Provider } from '@angular/core';
 import { NgxEchartsDirective, NgxEchartsConfig, NGX_ECHARTS_CONFIG, ThemeOption } from './ngx-echarts.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./ngx-echarts.directive";
+declare const provideEcharts: () => Provider;
+declare const provideEchartsCore: (config: NgxEchartsConfig) => Provider;
 export declare class NgxEchartsModule {
@@ -9,5 +11,5 @@ static forRoot(config: NgxEchartsConfig): ModuleWithProviders<NgxEchartsModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxEchartsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxEchartsModule, [typeof i1.NgxEchartsDirective], never, [typeof i1.NgxEchartsDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxEchartsModule, never, [typeof i1.NgxEchartsDirective], [typeof i1.NgxEchartsDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgxEchartsModule>;
 }
-export { NgxEchartsDirective, NGX_ECHARTS_CONFIG, ThemeOption };
+export { NgxEchartsDirective, NGX_ECHARTS_CONFIG, ThemeOption, provideEcharts, provideEchartsCore };

package.json

 {
   "name": "ngx-echarts",
-  "version": "17.0.1",
+  "version": "17.1.0",
   "author": "Xie, Ziyu",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -26,4 +26,7 @@ # ngx-echarts
 - [Usage](#usage)
+  - [Standalone](#standalone)
+  - [NgModule](#ngmodule)
+  - [Directive](#directive)
 - [API](#api)
-    - [Directive](#directive)
+    - [Directive](#directive-1)
     - [ECharts API](#echarts-api)
@@ -35,4 +38,4 @@ - [ECharts Instance](#echarts-instance)
 - [Custom Build](#custom-build)
+  - [Treeshaking Custom Build](#treeshaking-custom-build)
   - [Legacy Custom Build](#legacy-custom-build)
-  - [Treeshaking Custom Build](#treeshaking-custom-build)
 - [Custom Locale](#custom-locale)
@@ -47,4 +50,4 @@ - [Demo](#demo)
 
-- `v17.0.1` for Angular 17
-- `v16.1.2` for Angular 16
+- `v17.1.0` for Angular 17
+- `v16.2.0` for Angular 16
 - `v15.0.3` for Angular 15
@@ -62,2 +65,6 @@ - `v14.0.0` for Angular 14
 
+- 2023.11.10: v17.1.0 / v16.2.0:
+
+  - Feat: Exported standalone `NgxEchartsDirective`, `provideEcharts` and `provideEchartsCore`
+
 - 2023.11.08: v17.0.1:
@@ -105,6 +112,2 @@
 
-- 2021.08.05: v7.0.2:
-
-  - [PR #322](https://github.com/xieziyu/ngx-echarts/pull/322): Add initOpts locale property (by [augustoicaro](https://github.com/augustoicaro))
-
 - 2021.05.17: v7.0.0:
@@ -180,104 +183,102 @@
 
-1. Firstly, import `NgxEchartsModule` in your app module (or any other proper angular module):
+## Standalone
 
-  ```typescript
-  import { NgxEchartsModule } from 'ngx-echarts';
+import `NgxEchartsDirective` and `provideEcharts`. Or you can use `provideEchartsCore` to do treeshaking custom build.
 
-  @NgModule({
-    imports: [
-      NgxEchartsModule.forRoot({
-        /**
-         * This will import all modules from echarts.
-         * If you only need custom modules,
-         * please refer to [Custom Build] section.
-         */
-        echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
-      }),
-    ],
-  })
-  export class AppModule {}
-  ```
+```typescript
+import { NgxEchartsDirective, provideEcharts } from 'ngx-echarts';
 
-  The echarts library will be imported **only when it gets called the first time** thanks to the function that uses the native import.
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, NgxEchartsDirective],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  providers: [
+    provideEcharts(),
+  ]
+})
+export class AppComponent {}
+```
 
-  You can also directly pass the echarts instead which will slow down initial rendering because it will load the whole echarts into your main bundle.
+## NgModule
 
-  ```typescript
-  import * as echarts from 'echarts';
-  import { NgxEchartsModule } from 'ngx-echarts';
+import `NgxEchartsModule`:
 
-  @NgModule({
-    imports: [
-      NgxEchartsModule.forRoot({ echarts }),
-    ],
-  })
-  export class AppModule {}
-  ```
+```typescript
+import { NgxEchartsModule } from 'ngx-echarts';
 
-  When using NgxEchartsModule in a **standalone component**, we can use token `NGX_ECHARTS_CONFIG` to provide echarts
+@NgModule({
+  imports: [
+    NgxEchartsModule.forRoot({
+      /**
+       * This will import all modules from echarts.
+       * If you only need custom modules,
+       * please refer to [Custom Build] section.
+       */
+      echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
+    }),
+  ],
+})
+export class AppModule {}
+```
 
-  ```typescript
-  import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
+The echarts library will be imported **only when it gets called the first time** thanks to the function that uses the native import.
 
-  @Component({
-    standalone: true,
-    selector: 'my-chart',
-    template: `
-      <div echarts [options]="chartOptions" class="demo-chart"></div>
-    `,
-    imports: [NgxEchartsModule],
-    providers: [
-      {
-        provide: NGX_ECHARTS_CONFIG,
-        useFactory: () => ({ echarts: () => import('echarts') })
-      },
-    ]
-  })
-  export class MyChartComponent {
-    // logic
-  }
-  ```
+You can also directly pass the echarts instead which will slow down initial rendering because it will load the whole echarts into your main bundle.
 
-2. Then: use `echarts` directive in a div which has **pre-defined height**. (From v2.0, it has default height: 400px)
+```typescript
+import * as echarts from 'echarts';
+import { NgxEchartsModule } from 'ngx-echarts';
 
-   - Simple example:
+@NgModule({
+  imports: [
+    NgxEchartsModule.forRoot({ echarts }),
+  ],
+})
+export class AppModule {}
+```
 
-     - html:
+## Directive
 
-     ```html
-     <div echarts [options]="chartOption" class="demo-chart"></div>
-     ```
+use `echarts` directive in a div which has **pre-defined height**. (From v2.0, it has default height: 400px)
 
-     - scss:
+- html:
 
-     ```css
-     .demo-chart {
-       height: 400px;
-     }
-     ```
+```html
+<div echarts [options]="chartOption" class="demo-chart"></div>
+```
 
-     - component:
+- css:
 
-     ```typescript
-     import { EChartsOption } from 'echarts';
+```css
+.demo-chart {
+  height: 400px;
+}
+```
 
-     // ...
+- component:
 
-     chartOption: EChartsOption = {
-       xAxis: {
-         type: 'category',
-         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-       },
-       yAxis: {
-         type: 'value',
-       },
-       series: [
-         {
-           data: [820, 932, 901, 934, 1290, 1330, 1320],
-           type: 'line',
-         },
-       ],
-     };
-     ```
+```typescript
+import { EChartsOption } from 'echarts';
 
+// ...
+
+chartOption: EChartsOption = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      type: 'line',
+    },
+  ],
+};
+```
+
 # API
@@ -422,2 +423,72 @@
 
+## Treeshaking Custom Build
+
+> Since version 5.0.1 ECharts supports [Treeshaking with NPM](https://echarts.apache.org/en/tutorial.html#Use%20ECharts%20with%20bundler%20and%20NPM).
+
+The `app.modules.ts` should look like this:
+
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+
+import { AppComponent } from './app.component';
+
+// Import the echarts core module, which provides the necessary interfaces for using echarts.
+import * as echarts from 'echarts/core';
+
+// Import bar charts, all suffixed with Chart
+import { BarChart } from 'echarts/charts';
+
+// Import the tooltip, title, rectangular coordinate system, dataset and transform components
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent
+} from 'echarts/components';
+
+// Features like Universal Transition and Label Layout
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+
+// Import the Canvas renderer
+// Note that including the CanvasRenderer or SVGRenderer is a required step
+import { CanvasRenderer } from 'echarts/renderers';
+
+// Import the theme
+import 'echarts/theme/macarons.js';
+
+// Register the required components
+echarts.use([
+  BarChart,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    // import standalone directive:
+    NgxEchartsDirective,
+  ],
+  providers: [{ 
+    // Provide custom builded ECharts core:
+    provideEchartsCore({ echarts })
+  }],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
 ## Legacy Custom Build
@@ -481,37 +552,2 @@
 
-## Treeshaking Custom Build
-
-> Since version 5.0.1 ECharts supports [Treeshaking with NPM](https://echarts.apache.org/en/tutorial.html#Use%20ECharts%20with%20bundler%20and%20NPM).
-
-There is no need for the `custom-echarts.ts` file anymore. The `app.modules.ts` should look like this:
-
-```typescript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
-
-import { NgxEchartsModule } from 'ngx-echarts';
-
-import { AppComponent } from './app.component';
-
-// Import the echarts core module, which provides the necessary interfaces for using echarts.
-import * as echarts from 'echarts/core';
-// Import bar charts, all with Chart suffix
-import { BarChart } from 'echarts/charts';
-import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
-// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
-import { CanvasRenderer } from 'echarts/renderers';
-import 'echarts/theme/macarons.js';
-
-echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, NgxEchartsModule.forRoot({ echarts }), HttpClientModule],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
 # Custom Locale
@@ -518,0 +554,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

127232

increased by1.93%

Lines of code

959

increased by2.79%

Number of lines in readme file

587

increased by6.53%

No dependency changes