perf(chart): make sure only to render chart when necessary (Teradata#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
kriswinbush · Nov 20, 2018 · 4107c31 · 4107c31
1 parent e0d72db
commit 4107c31
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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%'"