perf(module:chart): optimize g2 performance (#388)

- close #377
ng-alain · Jan 17, 2019 · 94ef1fe · 94ef1fe
1 parent 06adf96
commit 94ef1fe
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 76 deletions.
diff --git a/packages/chart/bar/bar.component.ts b/packages/chart/bar/bar.component.ts
@@ -5,6 +5,7 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -47,6 +48,8 @@ export class G2BarComponent implements OnInit, OnChanges, OnDestroy {
 
   // #endregion
 
+  constructor(private ngZone: NgZone) {}
+
   private getHeight() {
     return this.title ? this.height - TITLE_HEIGHT : this.height;
   }
@@ -119,15 +122,15 @@ export class G2BarComponent implements OnInit, OnChanges, OnDestroy {
         filter(() => this.chart),
         debounceTime(200),
       )
-      .subscribe(() => this.updatelabel());
+      .subscribe(() =>  this.ngZone.runOutsideAngular(() => this.updatelabel()));
   }
 
   ngOnInit() {
-    setTimeout(() => this.install(), this.delay);
+    this.ngZone.runOutsideAngular(() => setTimeout(() => this.install(), this.delay));
   }
 
   ngOnChanges(): void {
-    this.attachChart();
+    this.ngZone.runOutsideAngular(() => this.attachChart());
   }
 
   ngOnDestroy(): void {

diff --git a/packages/chart/gauge/gauge.component.ts b/packages/chart/gauge/gauge.component.ts
@@ -4,6 +4,7 @@ import {
   Component,
   ElementRef,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -36,7 +37,7 @@ export class G2GaugeComponent implements OnInit, OnDestroy, OnChanges {
 
   // #endregion
 
-  constructor(private el: ElementRef) { }
+  constructor(private el: ElementRef, private ngZone: NgZone) { }
 
   private install() {
     const Shape = G2.Shape;
@@ -158,11 +159,11 @@ export class G2GaugeComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnInit(): void {
-    setTimeout(() => this.install(), this.delay);
+    this.ngZone.runOutsideAngular(() => setTimeout(() => this.install(), this.delay));
   }
 
   ngOnChanges(): void {
-    this.attachChart();
+    this.ngZone.runOutsideAngular(() => this.attachChart());
   }
 
   ngOnDestroy(): void {

diff --git a/packages/chart/mini-area/mini-area.component.ts b/packages/chart/mini-area/mini-area.component.ts
@@ -5,6 +5,7 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -46,7 +47,7 @@ export class G2MiniAreaComponent implements OnInit, OnChanges, OnDestroy {
 
   // #endregion
 
-  constructor(private el: ElementRef) { }
+  constructor(private el: ElementRef, private ngZone: NgZone) { }
 
   private install() {
     const { el, fit, height, padding, xAxis, yAxis, yTooltipSuffix, tooltipType, line } = this;
@@ -117,11 +118,11 @@ export class G2MiniAreaComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
-    setTimeout(() => this.install(), this.delay);
+    this.ngZone.runOutsideAngular(() => setTimeout(() => this.install(), this.delay));
   }
 
   ngOnChanges(): void {
-    this.attachChart();
+    this.ngZone.runOutsideAngular(() => this.attachChart());
   }
 
   ngOnDestroy(): void {

diff --git a/packages/chart/mini-bar/mini-bar.component.ts b/packages/chart/mini-bar/mini-bar.component.ts
@@ -5,6 +5,7 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -40,7 +41,7 @@ export class G2MiniBarComponent implements OnInit, OnChanges, OnDestroy {
 
   // #endregion
 
-  constructor(private el: ElementRef) { }
+  constructor(private el: ElementRef, private ngZone: NgZone) { }
 
   private install() {
     const { el, height, padding, yTooltipSuffix, tooltipType } = this;
@@ -88,11 +89,11 @@ export class G2MiniBarComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
-    setTimeout(() => this.install(), this.delay);
+    this.ngZone.runOutsideAngular(() => setTimeout(() => this.install(), this.delay));
   }
 
   ngOnChanges(): void {
-    this.attachChart();
+    this.ngZone.runOutsideAngular(() => this.attachChart());
   }
 
   ngOnDestroy(): void {

diff --git a/packages/chart/pie/pie.component.ts b/packages/chart/pie/pie.component.ts
@@ -5,6 +5,7 @@ import {
   Component,
   ElementRef,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -59,7 +60,12 @@ export class G2PieComponent implements OnInit, OnDestroy, OnChanges {
 
   // #endregion
 
-  constructor(private el: ElementRef, private rend: Renderer2, private cdr: ChangeDetectorRef) { }
+  constructor(
+    private el: ElementRef,
+    private rend: Renderer2,
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
 
   private setCls() {
     const { el, rend, hasLegend, isPercent } = this;
@@ -83,7 +89,8 @@ export class G2PieComponent implements OnInit, OnDestroy, OnChanges {
     if (this.isPercent) {
       this.select = false;
       this.tooltip = false;
-      this.percentColor = value => value === '占比' ? color || 'rgba(24, 144, 255, 0.85)' : '#F0F2F5';
+      this.percentColor = value =>
+        value === '占比' ? color || 'rgba(24, 144, 255, 0.85)' : '#F0F2F5';
       this.data = [
         {
           x: '占比',
@@ -101,13 +108,13 @@ export class G2PieComponent implements OnInit, OnDestroy, OnChanges {
     this.setCls();
 
     const { node, height, padding, animate, tooltip, inner, hasLegend } = this;
-    const chart = this.chart = new G2.Chart({
+    const chart = (this.chart = new G2.Chart({
       container: node.nativeElement,
       forceFit: true,
       height,
       padding,
       animate,
-    });
+    }));
 
     if (!tooltip) {
       chart.tooltip(false);
@@ -129,7 +136,10 @@ export class G2PieComponent implements OnInit, OnDestroy, OnChanges {
     chart
       .intervalStack()
       .position('y')
-      .tooltip('x*percent', (name, p) => ({ name, value: hasLegend ? p : (p * 100).toFixed(2) }))
+      .tooltip('x*percent', (name, p) => ({
+        name,
+        value: hasLegend ? p : (p * 100).toFixed(2),
+      }))
       .select(this.select);
 
     chart.render();
@@ -138,49 +148,63 @@ export class G2PieComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   private attachChart() {
-    const { chart, height, padding, animate, data, lineWidth, isPercent, percentColor, colors } = this;
+    const {
+      chart,
+      height,
+      padding,
+      animate,
+      data,
+      lineWidth,
+      isPercent,
+      percentColor,
+      colors,
+    } = this;
     if (!chart) return;
 
     chart.set('height', height);
     chart.set('padding', padding);
     chart.set('animate', animate);
 
-    chart.get('geoms')[0]
+    chart
+      .get('geoms')[0]
       .style({ lineWidth, stroke: '#fff' })
       .color('x', isPercent ? percentColor : colors);
 
     const dv = new DataSet.DataView();
     dv.source(data).transform({
-        type: 'percent',
-        field: 'y',
-        dimension: 'x',
-        as: 'percent',
-      });
+      type: 'percent',
+      field: 'y',
+      dimension: 'x',
+      as: 'percent',
+    });
     chart.source(dv, {
-        x: {
-          type: 'cat',
-          range: [0, 1],
-        },
-        y: {
-          min: 0,
-        },
-      });
+      x: {
+        type: 'cat',
+        range: [0, 1],
+      },
+      y: {
+        min: 0,
+      },
+    });
     chart.repaint();
 
-    this.genLegend();
+    this.ngZone.run(() => this.genLegend());
   }
 
   private genLegend() {
     const { hasLegend, isPercent, cdr, chart } = this;
     if (!hasLegend || isPercent) return;
 
-    this.legendData = chart.get('geoms')[0].get('dataArray').map((item: any) => {
-      const origin = item[0]._origin;
-      origin.color = item[0].color;
-      origin.checked = true;
-      origin.percent = (origin.percent * 100).toFixed(2);
-      return origin;
-    });
+    this.legendData = chart
+      .get('geoms')[0]
+      .get('dataArray')
+      .map((item: any) => {
+        const origin = item[0]._origin;
+        origin.color = item[0].color;
+        origin.checked = true;
+        origin.percent = (origin.percent * 100).toFixed(2);
+        return origin;
+      });
 
     cdr.detectChanges();
   }
@@ -200,13 +224,13 @@ export class G2PieComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnInit(): void {
-    setTimeout(() => this.install(), this.delay);
+    this.ngZone.runOutsideAngular(() => setTimeout(() => this.install(), this.delay));
   }
 
   ngOnChanges(): void {
     this.fixData();
     this.setCls();
-    this.attachChart();
+    this.ngZone.runOutsideAngular(() => this.attachChart());
     this.installResizeEvent();
   }
 

diff --git a/packages/chart/radar/radar.component.ts b/packages/chart/radar/radar.component.ts
@@ -6,6 +6,7 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -56,7 +57,7 @@ export class G2RadarComponent implements OnInit, OnDestroy, OnChanges {
 
   // #endregion
 
-  constructor(private cdr: ChangeDetectorRef) { }
+  constructor(private cdr: ChangeDetectorRef, private ngZone: NgZone) { }
 
   private getHeight() {
     return this.height - (this.hasLegend ? 80 : 22);
@@ -145,7 +146,7 @@ export class G2RadarComponent implements OnInit, OnDestroy, OnChanges {
 
     chart.repaint();
 
-    this.genLegend();
+    this.ngZone.run(() => this.genLegend());
   }
 
   private genLegend() {
@@ -174,12 +175,12 @@ export class G2RadarComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnInit(): void {
-    setTimeout(() => this.install(), this.delay);
+    this.ngZone.runOutsideAngular(() => setTimeout(() => this.install(), this.delay));
   }
 
   ngOnChanges(): void {
     this.legendData.forEach(i => i.checked = true);
-    this.attachChart();
+    this.ngZone.runOutsideAngular(() => this.attachChart());
   }
 
   ngOnDestroy(): void {

diff --git a/packages/chart/single-bar/single-bar.component.ts b/packages/chart/single-bar/single-bar.component.ts
@@ -5,6 +5,7 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -38,7 +39,7 @@ export class G2SingleBarComponent implements OnInit, OnChanges, OnDestroy {
 
   // #endregion
 
-  constructor(private el: ElementRef) { }
+  constructor(private el: ElementRef, private ngZone: NgZone) { }
 
   private install() {
     const { el, height, padding, textStyle, line, format } = this;
@@ -96,11 +97,11 @@ export class G2SingleBarComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
-    setTimeout(() => this.install(), this.delay);
+    this.ngZone.runOutsideAngular(() => setTimeout(() => this.install(), this.delay));
   }
 
   ngOnChanges(): void {
-    this.attachChart();
+    this.ngZone.runOutsideAngular(() => this.attachChart());
   }
 
   ngOnDestroy(): void {