Merge pull request #125 from PioneerCode/bug-fixes

Bug fixes

CHANGELOG.md

@@ -1,4 +1,21 @@
 
+<a name="0.13.3"></a>
+# [v0.13.3](https://github.com/PioneerCode/pioneer-charts/releases/tag/0.13.3) (2018-06-18)
+
+### Fix
+
+- Stop chart failure on empty data sets.
+  - bar-chart
+  - line-area-chart
+  - pie-chart
+  - table
+- Fix normalized height of table.
+- Responsive concerns in table.
+
+### Features
+
+- Add the ability to enable/disable sticky footer/header independently of each other. 
+
 <a name="0.13.1"></a>
 # [v0.13.1](https://github.com/PioneerCode/pioneer-charts/releases/tag/0.13.1) (2018-06-16)
 

apps/dev/src/app/pages/test/test.component.html

@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col-sm">
         <div class="pc-chart-container">
-          <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartSingleConfig"></pcac-bar-horizontal-chart>
+          <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartConfig"></pcac-bar-horizontal-chart>
         </div>
       </div>
     </div>

apps/dev/src/assets/mock/table.json

@@ -1,6 +1,7 @@
 {
   "height": 200,
-  "enableSticky": true,
+  "enableStickyHeader": true,
+  "enableStickyFooter": true,
   "data": [
     {
       "data": [

apps/docs/src/app/pages/docs/components/charts/table/table.component.html

@@ -29,8 +29,12 @@ <h3>API</h3>
           <pc-prism language="javascript" [code]="importCode"></pc-prism>
           <pc-base-config>
             <tr>
-              <td>enableSticky</td>
-              <td>Enable sticky header and footer.</td>
+              <td>enableStickyHeader</td>
+              <td>Enable sticky header.</td>
+            </tr>
+            <tr>
+              <td>enableStickyFooter</td>
+              <td>Enable sticky footer.</td>
             </tr>
           </pc-base-config>
         </div>

apps/docs/src/assets/mock/table.json

@@ -1,6 +1,7 @@
 {
   "height": 200,
-  "enableSticky": true,
+  "enableStickyHeader": true,
+  "enableStickyFooter": true,
   "data": [
     {
       "data": [

apps/docs/src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
 export const environment = {
   production: true,
-  version: '0.13.2'
+  version: '0.13.5'
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pioneer-charts",
-  "version": "0.13.2",
+  "version": "0.13.5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve pioneer-charts-dev",
@@ -41,7 +41,7 @@
     "@angular/cli": "~6.0.0",
     "@angular/compiler-cli": "^6.0.0",
     "@angular/language-service": "^6.0.0",
-    "@pioneer-code/pioneer-charts": "^0.13.2",
+    "@pioneer-code/pioneer-charts": "^0.13.5",
     "@ryancavanaugh/prismjs": "^1.4.3-alpha",
     "@types/d3": "^5.0.0",
     "@types/jasmine": "~2.8.6",

projects/pcac/package.json

@@ -22,7 +22,7 @@
     "type": "git",
     "url": "https://github.com/PioneerCode/pioneer-charts"
   },
-  "version": "0.13.2",
+  "version": "0.13.5",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",

projects/pcac/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.component.ts

@@ -36,13 +36,13 @@ export class PcacBarChartHorizontalComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    if (this.config && this.config.data) {
-      this.buildChart();
-    }
+    this.buildChart();
   }
 
   buildChart(): void {
-    this.chartBuilder.buildChart(this.chartElm, this.config);
+    if (this.config && this.config.data && this.config.data.length > 0) {
+      this.chartBuilder.buildChart(this.chartElm, this.config);
+    }
   }
 
   /**
@@ -53,9 +53,7 @@ export class PcacBarChartHorizontalComponent implements OnChanges {
     const self = this;
     clearTimeout(this.resizeWindowTimeout);
     this.resizeWindowTimeout = setTimeout(() => {
-      if (self.config.data.length > 0) {
         self.buildChart();
-      }
     }, 300);
   }
 }

projects/pcac/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.component.ts

@@ -36,13 +36,13 @@ export class PcacBarVerticalChartComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    if (this.config && this.config.data) {
-      this.buildChart();
-    }
+    this.buildChart();
   }
 
   buildChart(): void {
-    this.chartBuilder.buildChart(this.chartElm, this.config);
+    if (this.config && this.config.data && this.config.data.length > 0) {
+      this.chartBuilder.buildChart(this.chartElm, this.config);
+    }
   }
 
   /**
@@ -53,9 +53,7 @@ export class PcacBarVerticalChartComponent implements OnChanges {
     const self = this;
     clearTimeout(this.resizeWindowTimeout);
     this.resizeWindowTimeout = setTimeout(() => {
-      if (self.config.data.length > 0) {
-        self.buildChart();
-      }
+      self.buildChart();
     }, 300);
   }
 }

projects/pcac/src/lib/line-area-chart/line-area-chart.component.ts

@@ -37,13 +37,13 @@ export class PcacLineAreaChartComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    if (this.config && this.config.data) {
-      this.buildChart();
-    }
+    this.buildChart();
   }
 
   buildChart(): void {
-    this.chartBuilder.buildChart(this.chartElm, this.config);
+    if (this.config && this.config.data && this.config.data.length > 0) {
+      this.chartBuilder.buildChart(this.chartElm, this.config);
+    }
   }
 
   /**
@@ -54,9 +54,7 @@ export class PcacLineAreaChartComponent implements OnChanges {
     const self = this;
     clearTimeout(this.resizeWindowTimeout);
     this.resizeWindowTimeout = setTimeout(() => {
-      if (self.config.data.length > 0) {
-        self.buildChart();
-      }
+      self.buildChart();
     }, 300);
   }
 }

projects/pcac/src/lib/pie-chart/pie-chart.component.ts

@@ -36,13 +36,13 @@ export class PcacPieChartComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    if (this.config && this.config.data) {
-      this.buildChart();
-    }
+    this.buildChart();
   }
 
   buildChart(): void {
-    this.chartBuilder.buildChart(this.chartElm, this.config);
+    if (this.config && this.config.data && this.config.data.length > 0) {
+      this.chartBuilder.buildChart(this.chartElm, this.config);
+    }
   }
 
   /**
@@ -53,9 +53,7 @@ export class PcacPieChartComponent implements OnChanges {
     const self = this;
     clearTimeout(this.resizeWindowTimeout);
     this.resizeWindowTimeout = setTimeout(() => {
-      if (self.config.data.length > 0) {
-        self.buildChart();
-      }
+      self.buildChart();
     }, 300);
   }
 }

projects/pcac/src/lib/table/table.component.html

@@ -14,7 +14,7 @@
       </tr>
     </tbody>
   </table>
-  <div *ngIf="config?.enableSticky" class="header">
+  <div *ngIf="config?.enableStickyHeader" class="header">
     <table class="pcac-table">
       <thead>
         <tr>
@@ -26,7 +26,7 @@
       </thead>
     </table>
   </div>
-  <div *ngIf="config?.enableSticky" class="footer" #tableFooter>
+  <div *ngIf="config?.enableStickyFooter && config?.data.length > 0" class="footer" #tableFooter>
     <table class="pcac-table">
       <tfoot>
         <tr>

projects/pcac/src/lib/table/table.component.ts

@@ -8,7 +8,8 @@ import {
   ViewChild,
   ChangeDetectorRef,
   QueryList,
-  ViewChildren
+  ViewChildren,
+  HostListener
 } from '@angular/core';
 import { IPcacTableConfig, IPcacTableHeader, PcacTableSortIconsEnum } from './table.model';
 import { TableSortService } from './table-sort.service';
@@ -35,17 +36,18 @@ export class PcacTableComponent implements OnChanges, AfterViewInit {
   rowData = [] as IPcacData[];
   adjustedHeight = 200;
 
+  private resizeWindowTimeout: NodeJS.Timer;
+
   constructor(
     private sortService: TableSortService,
     private changeDetector: ChangeDetectorRef
-  ) {
-  }
+  ) { }
 
   ngAfterViewInit() {
     this.initTableUi();
     // @ngFor rows finished
     this.rows.changes.subscribe(t => {
-      if (this.config.enableSticky) {
+      if (this.config.enableStickyHeader || this.config.enableStickyFooter) {
         this.calculateColumnWidths();
       }
     });
@@ -56,9 +58,9 @@ export class PcacTableComponent implements OnChanges, AfterViewInit {
   }
 
   private initTableUi() {
-    if (this.config && this.config.data) {
-      this.adjustedHeight = this.config.height + 36;
-      if (this.config.enableSticky) {
+    if (this.config && this.config.data && this.config.data.length > 0) {
+      this.adjustedHeight = this.config.height + 28;
+      if (this.config.enableStickyHeader || this.config.enableStickyFooter) {
         this.calculateColumnWidths();
       }
       this.setHeaders();
@@ -122,4 +124,16 @@ export class PcacTableComponent implements OnChanges, AfterViewInit {
       }
     }
   }
+
+  /**
+ * Opting against fromEvent due to incompatibility with rxjs 5 => 6
+ */
+  @HostListener('window:resize')
+  onResize() {
+    const self = this;
+    clearTimeout(this.resizeWindowTimeout);
+    this.resizeWindowTimeout = setTimeout(() => {
+      self.initTableUi();
+    }, 300);
+  }
 }

projects/pcac/src/lib/table/table.model.ts

@@ -1,7 +1,8 @@
 import { IPcacChartConfig } from '../core/chart.model';
 
 export interface IPcacTableConfig extends IPcacChartConfig {
-  enableSticky: boolean;
+  enableStickyHeader: boolean;
+  enableStickyFooter: boolean;
 }
 
 export interface IPcacTableHeader  {