Release v3.1.0

README.md

@@ -21,14 +21,17 @@ Angular directive for echarts (version >= 3.x) (The project is renamed from **an
 `ngx-echarts` is an Angular (ver >= 2.x) directive for ECharts (ver >= 3.x).
 
 Latest version @npm:
-+ `v3.0.1` for Angular >= 6
-+ `v2.1.1` for Angular < 6
++ `v3.1.0` for Angular >= 6
++ `v2.2.0` for Angular < 6
 
 Github branches:
 + `master` for Angular >= 6
 + `v2.x` for Angular < 6
 
 # Latest Update
++ 2018.06.13: v3.1.0 & v2.2.0:
+  + New: [autoResize] now detects its container element's offset width. Especially useful for charts inside `<ng-template>` such as NG-ZORRO components.
+
 + 2018.06.12: v3.0.1 & v2.1.1:
   + Bugfix: Line chart is not animated on init. [issue#102](https://github.com/xieziyu/ngx-echarts/issues/102)
 
@@ -241,7 +244,9 @@ Please refer to the [demo](https://xieziyu.github.io/ngx-echarts) page.
 
 + `[merge]`: You can use it to update part of the `options`, especially helpful when you need to update the chart data. In fact, the value of `merge` will be used in `echartsInstance.setOption()` with `notMerge = false`. So you can refer to [ECharts documentation](https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.setOption) for details
 
-+ `[loading]`: boolean property. Use it to toggle the echarts loading animation when your data is not ready.
++ `[loading]`: boolean. Use it to toggle the echarts loading animation when your data is not ready.
+
++ `[autoResize]`: boolean. Default: true. Charts will be automatically resized when container's width changed.
 
 + `[initOpts]`: The value of `[initOpts]` will be used in `echarts.init()`. It may contain `devicePixelRatio`, `renderer`, `width` or `height` properties. Refer to [ECharts documentation](https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init) for details
 

projects/ngx-echarts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-echarts",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0",

projects/ngx-echarts/src/lib/ngx-echarts.directive.ts

@@ -1,13 +1,15 @@
-import { Directive, ElementRef, Renderer, Input, Output, HostListener, EventEmitter,
-  OnChanges, OnDestroy, SimpleChanges, NgZone } from '@angular/core';
+import {
+  Directive, ElementRef, Renderer, Input, Output, HostListener, EventEmitter,
+  OnChanges, OnDestroy, SimpleChanges, NgZone, DoCheck
+} from '@angular/core';
 import { ChangeFilter } from './change-filter';
 
 declare var echarts: any;
 
 @Directive({
   selector: 'echarts, [echarts]'
 })
-export class NgxEchartsDirective implements OnChanges, OnDestroy {
+export class NgxEchartsDirective implements OnChanges, OnDestroy, DoCheck {
   @Input() options: any;
   @Input() theme: string;
   @Input() loading: boolean;
@@ -30,18 +32,20 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy {
   @Output() chartDataZoom = new EventEmitter<any>();
 
   private _chart: any = null;
+  private currentOffsetWidth = 0;
   private currentWindowWidth: any = null;
 
   constructor(private el: ElementRef, private _ngZone: NgZone) { }
 
   private createChart() {
     this.currentWindowWidth = window.innerWidth;
+    this.currentOffsetWidth = this.el.nativeElement.offsetWidth;
     const dom = this.el.nativeElement;
 
     if (window && window.getComputedStyle) {
       const prop = window.getComputedStyle(dom, null).getPropertyValue('height');
       if ((!prop || prop === '0px') &&
-          (!dom.style.height || dom.style.height === '0px')) {
+        (!dom.style.height || dom.style.height === '0px')) {
         dom.style.height = '400px';
       }
     }
@@ -53,6 +57,8 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy {
   onWindowResize(event: any) {
     if (this.autoResize && event.target.innerWidth !== this.currentWindowWidth) {
       this.currentWindowWidth = event.target.innerWidth;
+      this.currentOffsetWidth = this.el.nativeElement.offsetWidth;
+
       if (this._chart) {
         this._chart.resize();
       }
@@ -73,6 +79,18 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy {
     }
   }
 
+  ngDoCheck() {
+    // No heavy work in DoCheck!
+    if (this._chart && this.autoResize) {
+      const offsetWidth = this.el.nativeElement.offsetWidth;
+
+      if (this.currentOffsetWidth !== offsetWidth) {
+        this.currentOffsetWidth = offsetWidth;
+        this._chart.resize();
+      }
+    }
+  }
+
   private onOptionsChange(opt: any) {
     if (opt) {
       if (!this._chart) {

src/assets/CHANGELOG.md

@@ -1,4 +1,11 @@
-## 3.0.1 (2018-06-12)
+## 3.1.0 & 2.2.0 (2018-06-13)
+
+#### New
++ [autoResize] now detects its container element's offset width. Especially useful for charts inside `<ng-template>` such as NG-ZORRO components.
+
+---
+
+## 3.0.1 & 2.1.1 (2018-06-12)
 
 #### Bugfix
 + Line chart is not animated on init.