From 4107c31395053daa88953bd26229009c136e835d Mon Sep 17 00:00:00 2001
From: Ed Morales <emoralesb05@gmail.com>
Date: Mon, 19 Nov 2018 17:03:04 -0800
Subject: [PATCH] perf(chart): make sure only to render chart when necessary
 (#37)

* perf(chart): make sure only to render chart when necessary

add a debounce and combine all options fed by subcomponents to render the chart only once.. before it was rerendered multiple times depending on changes on subcomponents

* fix(): remove xAxis/yAxis from demo in tree/treemap

* fix(): make demo fit screen better in treemap

* fix(): change readme
---
 .../components/types/graph/graph.component.html    |  6 ++----
 .../components/types/sankey/sankey.component.html  |  6 ++----
 .../components/types/scatter/scatter.component.ts  |  2 ++
 src/app/components/types/tree/tree.component.html  |  6 ++----
 .../types/treemap/treemap.component.html           |  6 ++----
 src/platform/echarts/base/chart.component.ts       | 14 ++++++++------
 src/platform/echarts/graph/README.md               |  2 +-
 src/platform/echarts/sankey/README.md              |  2 +-
 src/platform/echarts/tree/README.md                |  3 +--
 src/platform/echarts/treemap/README.md             |  3 +--
 10 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/app/components/types/graph/graph.component.html b/src/app/components/types/graph/graph.component.html
index 403cb48ee5..c20fc2fd50 100644
--- a/src/app/components/types/graph/graph.component.html
+++ b/src/app/components/types/graph/graph.component.html
@@ -6,8 +6,7 @@
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="500"
-                  [config]="{ xAxis: { show: false }, yAxis: { show: false } }">
+        <td-chart [style.height.px]="500">
           <td-chart-tooltip [trigger]="'item'">
             <ng-template let-params let-i="index" let-ticket="ticket" tdTooltipFormatter>
               <ng-container *ngIf="params">
@@ -73,8 +72,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-          <td-chart [style.height.px]="500"
-                    [config]="{ xAxis: { show: false }, yAxis: { show: false } }">
+          <td-chart [style.height.px]="500">
             <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-i="index" let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
diff --git a/src/app/components/types/sankey/sankey.component.html b/src/app/components/types/sankey/sankey.component.html
index 08bcee9094..4065dd8bc5 100644
--- a/src/app/components/types/sankey/sankey.component.html
+++ b/src/app/components/types/sankey/sankey.component.html
@@ -6,8 +6,7 @@
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="300"
-                  [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+        <td-chart [style.height.px]="300">
           <td-chart-series td-sankey
                             [focusNodeAdjacency]="'allEdges'"
                             [right]="40"
@@ -74,8 +73,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chart [style.height.px]="300"
-                      [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+            <td-chart [style.height.px]="300">
               <td-chart-series td-sankey
                                 [focusNodeAdjacency]="'allEdges'"
                                 [right]="40"
diff --git a/src/app/components/types/scatter/scatter.component.ts b/src/app/components/types/scatter/scatter.component.ts
index 29fd72c0bf..23a60f4309 100644
--- a/src/app/components/types/scatter/scatter.component.ts
+++ b/src/app/components/types/scatter/scatter.component.ts
@@ -17,6 +17,8 @@ export class TypesScatterComponent {
       right: 10,
       data: ['1990', '2015'],
     },
+    xAxis: [{show: true}],
+    yAxis: [{show: true}],
     series: [
       {
         name: '1990',
diff --git a/src/app/components/types/tree/tree.component.html b/src/app/components/types/tree/tree.component.html
index 747a431a5e..2d5a4d625c 100644
--- a/src/app/components/types/tree/tree.component.html
+++ b/src/app/components/types/tree/tree.component.html
@@ -6,8 +6,7 @@
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="800"
-        [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+        <td-chart [style.height.px]="800">
           <td-chart-tooltip [trigger]="'item'">
             <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
               <ng-container *ngIf="params">
@@ -319,8 +318,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-          <td-chart [style.height.px]="800"
-          [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+          <td-chart [style.height.px]="800">
             <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
diff --git a/src/app/components/types/treemap/treemap.component.html b/src/app/components/types/treemap/treemap.component.html
index a6a9997757..c464360d32 100644
--- a/src/app/components/types/treemap/treemap.component.html
+++ b/src/app/components/types/treemap/treemap.component.html
@@ -6,8 +6,7 @@
     <mat-tab-group mat-stretch-tabs dynamicHeight>
       <mat-tab>
         <ng-template matTabLabel>Demo</ng-template>
-        <td-chart [style.height.px]="800"
-                  [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+        <td-chart [style.height.px]="600">
           <td-chart-tooltip [trigger]="'item'">
             <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
               <ng-container *ngIf="params">
@@ -160,8 +159,7 @@
         <p>HTML: </p>
         <td-highlight lang="html">
           <![CDATA[
-          <td-chart [style.height.px]="800"
-                    [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+          <td-chart [style.height.px]="600">
             <td-chart-tooltip [trigger]="'item'">
               <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
                 <ng-container *ngIf="params">
diff --git a/src/platform/echarts/base/chart.component.ts b/src/platform/echarts/base/chart.component.ts
index a67dc204a9..5cd8d5d955 100644
--- a/src/platform/echarts/base/chart.component.ts
+++ b/src/platform/echarts/base/chart.component.ts
@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 
 import { Subject, fromEvent, merge, timer } from 'rxjs';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, takeUntil, tap } from 'rxjs/operators';
 
 import * as echarts from 'echarts/lib/echarts';
 
@@ -95,9 +95,13 @@ export class TdChartComponent implements AfterViewInit, OnChanges, OnDestroy {
         this._changeDetectorRef.markForCheck();
       }
     });
-    this.render();
-    this._optionsService.listen().subscribe((options: any) => {
-      assignDefined(this._options, options);
+    this._optionsService.listen().pipe(
+      tap((options: any) => {
+        assignDefined(this._options, options);
+      }),
+      debounceTime(0),
+      takeUntil(this._destroy),
+    ).subscribe(() => {
       this.render();
     });
     timer(500, 250).pipe(
@@ -138,8 +142,6 @@ export class TdChartComponent implements AfterViewInit, OnChanges, OnDestroy {
           containLabel: true,
           borderColor: '#FCFCFC',
         },
-        xAxis : [{}], // throws error if its empty
-        yAxis : [{}], // throws error if its empty
       }, this.config ? this.config : {}, this._options), true);
       this._changeDetectorRef.markForCheck();
     }
diff --git a/src/platform/echarts/graph/README.md b/src/platform/echarts/graph/README.md
index 754235f59b..7486e95ec0 100644
--- a/src/platform/echarts/graph/README.md
+++ b/src/platform/echarts/graph/README.md
@@ -48,7 +48,7 @@ export class MyModule {}
 Basic Example:
 
 ```html
-<td-chart [config]="{ xAxis: { show: false }, yAxis: { show: false } }">
+<td-chart>
   <td-chart-series td-graph
                   [data]="[{ x: -739.36383, y: -404.26147, id: 'jquery', name: 'jquery',
                     symbolSize: 40.7252817, itemStyle: { normal: { color: '#4f19c7' } } },
diff --git a/src/platform/echarts/sankey/README.md b/src/platform/echarts/sankey/README.md
index 310e865c98..832152877a 100644
--- a/src/platform/echarts/sankey/README.md
+++ b/src/platform/echarts/sankey/README.md
@@ -48,7 +48,7 @@ export class MyModule {}
 Basic Example:
 
 ```html
-<td-chart [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+<td-chart>
   <td-chart-series td-sankey
                     [focusNodeAdjacency]="'allEdges'"
                     [right]="40"
diff --git a/src/platform/echarts/tree/README.md b/src/platform/echarts/tree/README.md
index 4e5d2d56be..dca80191bb 100644
--- a/src/platform/echarts/tree/README.md
+++ b/src/platform/echarts/tree/README.md
@@ -46,8 +46,7 @@ export class MyModule {}
 Basic Example:
 
 ```html
-<td-chart [style.height.px]="800" 
-          [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+<td-chart>
   <td-chart-series td-tree
                   [leaves]="{ label: { position: 'right' } }"
                   [label]="{ position: 'left' }"            
diff --git a/src/platform/echarts/treemap/README.md b/src/platform/echarts/treemap/README.md
index 23af96a45f..026fb39cb5 100644
--- a/src/platform/echarts/treemap/README.md
+++ b/src/platform/echarts/treemap/README.md
@@ -46,8 +46,7 @@ export class MyModule {}
 Basic Example:
 
 ```html
-<td-chart [style.height.px]="800"
-          [config]="{ xAxis: { show: false }, yAxis: { show: false }, grid: { borderColor: 'transparent' } }">
+<td-chart>
   <td-chart-series td-treemap
                   [top]="'10%'"
                   [left]="'10%'"