Refactor resize event binding; Unsubscribe events on destroy; Make no…

…t passing the view param resize the chart to container;
swimlane · Oct 17, 2016 · 7686e79 · 7686e79
1 parent b213660
commit 7686e79
Show file tree

Hide file tree

Showing 62 changed files with 624 additions and 558 deletions.
diff --git a/demo/app.ts b/demo/app.ts
@@ -295,6 +295,22 @@ import './demo.scss';
           </label>
         </div>
         <h3>Options</h3>
+        <div>
+          <label><strong>Dimensions</strong></label><br />
+          <label>
+            <input type="checkbox" [checked]="fitContainer" (change)="toggleFitContainer($event.target.checked)">
+            Fit Container
+          </label> <br />
+          <div *ngIf="!fitContainer">
+            <label>Width:</label><br />
+            <input type="number" [(ngModel)]="width"><br />
+            <label>Height:</label><br />
+            <input type="number" [(ngModel)]="height"><br />
+            <button (click)="applyDimensions()">Apply dimensions</button>
+          </div>
+        </div>
+        <hr />
+
         <div *ngIf="chart.options.includes('showXAxis')">
           <label>
             <input type="checkbox" [checked]="showXAxis" (change)="showXAxis = $event.target.checked">
@@ -316,7 +332,7 @@ import './demo.scss';
         <div *ngIf="chart.options.includes('gradient')">
           <label>
             <input type="checkbox" [checked]="gradient" (change)="gradient = $event.target.checked">
-            Use gradients
+            Use Gradients
           </label> <br />
         </div>
         <div *ngIf="chart.options.includes('showLegend')">
@@ -375,15 +391,6 @@ import './demo.scss';
             Timeline
           </label> <br />
         </div>
-        <div>
-          <label>View Width</label><br /> <input type="number"
-          [(ngModel)]="width"><br />
-          </div>
-          <div>
-            <label>View Height</label><br /> <input type="number"
-          [(ngModel)]="height"><br />
-        </div>
-        <button (click)="setViewSize()">Set view size</button>
       </div>
     </main>
   `
@@ -400,10 +407,10 @@ export class App implements OnInit {
   dateData: any[];
   linearScale: boolean = false;
 
-  view: any[] = [900, 400];
-  width: number = 900;
-  height: number = 400;
-
+  view: any[];
+  width: number = 700;
+  height: number = 300;
+  fitContainer: boolean = true;
 
   // options
   showXAxis = true;
@@ -488,10 +495,20 @@ export class App implements OnInit {
     }
   }
 
-  setViewSize() {
+  applyDimensions() {
     this.view = [this.width, this.height];
   }
 
+  toggleFitContainer(event) {
+    this.fitContainer = event;
+
+    if (this.fitContainer) {
+      this.view = undefined;
+    } else {
+      this.applyDimensions();
+    }
+  }
+
   selectChart(chartSelector) {
     this.chartType = chartSelector;
 

diff --git a/demo/demo.scss b/demo/demo.scss
@@ -1,8 +1,10 @@
-body {
-  // background: #1b1e27;
+html, body {
   margin: 0;
   padding: 0;
+  height: 100%;
+}
 
+body {
   font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
   font-style: normal;
   font-weight: 300;
@@ -23,19 +25,20 @@ body {
   box-sizing: border-box;
 }
 
+app {
+  height: 100%;
+}
+
 main {
   display: flex;
   flex: 1;
-  align-items: center;
   justify-content: center;
+  height: 100%;
 
   .chart-col {
-    border:1px solid black;
-    flex: 2;
-    max-height: 600px;
-    text-align: center;
-    margin: 20px auto;
-    width:80vh;
+    background: #fafafa;
+    width: 100%;
+    height: 100%;
   }
 
   .sidebar {

diff --git a/src/area-chart/area-chart-normalized.component.ts b/src/area-chart/area-chart-normalized.component.ts
@@ -1,4 +1,15 @@
-import {Component, Input, Output, EventEmitter, OnChanges, HostListener, ElementRef, NgZone, AfterViewInit} from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  OnDestroy,
+  HostListener,
+  ElementRef,
+  NgZone,
+  AfterViewInit
+} from '@angular/core';
 import { calculateViewDimensions, ViewDimensions } from '../common/view-dimensions.helper';
 import { colorHelper } from '../utils/color-sets';
 import { BaseChart } from '../common/base-chart.component';
@@ -11,7 +22,7 @@ import ObjectId from "../utils/object-id";
   template: `
     <chart
       [legend]="legend"
-      [view]="view"
+      [view]="[width, height]"
       [colors]="colors"
       [legendData]="seriesDomain">
 
@@ -87,7 +98,7 @@ import ObjectId from "../utils/object-id";
       <svg:g timeline
         *ngIf="timeline && scaleType === 'time'"
         [results]="results"
-        [view]="view"
+        [view]="[width, height]"
         [scheme]="scheme"
         [customColors]="customColors"
         [legend]="legend"
@@ -97,7 +108,7 @@ import ObjectId from "../utils/object-id";
     </chart>
   `
 })
-export class AreaChartNormalized extends BaseChart implements OnChanges, AfterViewInit {
+export class AreaChartNormalized extends BaseChart implements OnChanges, OnDestroy, AfterViewInit {
   dims: ViewDimensions;
   scaleType: string;
   xDomain: any[];
@@ -139,13 +150,17 @@ export class AreaChartNormalized extends BaseChart implements OnChanges, AfterVi
     this.bindResizeEvents(this.view);
   }
 
+  ngOnDestroy() {
+    this.unbindEvents();
+  }
+
   ngOnChanges() {
     this.update();
   }
 
   update() {
     super.update();
-    this.dims = calculateViewDimensions(this.view, this.margin, this.showXAxisLabel, this.showYAxisLabel, this.legend, 9);
+    this.dims = calculateViewDimensions(this.width, this.height, this.margin, this.showXAxisLabel, this.showYAxisLabel, this.legend, 9);
 
     if (this.timeline) {
       this.dims.height -= 150;

diff --git a/src/area-chart/area-chart-stacked.component.ts b/src/area-chart/area-chart-stacked.component.ts
@@ -1,7 +1,18 @@
-import {Component, Input, Output, EventEmitter, ElementRef, OnChanges, HostListener, NgZone, AfterViewInit} from '@angular/core';
-import {calculateViewDimensions, ViewDimensions} from '../common/view-dimensions.helper';
-import {colorHelper} from '../utils/color-sets';
-import {BaseChart} from '../common/base-chart.component';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  OnChanges,
+  OnDestroy,
+  HostListener,
+  NgZone,
+  AfterViewInit
+} from '@angular/core';
+import { calculateViewDimensions, ViewDimensions } from '../common/view-dimensions.helper';
+import { colorHelper } from '../utils/color-sets';
+import { BaseChart } from '../common/base-chart.component';
 import * as moment from 'moment';
 import ObjectId from "../utils/object-id";
 import d3 from '../d3';
@@ -11,7 +22,7 @@ import d3 from '../d3';
   template: `
     <chart
       [legend]="legend"
-      [view]="view"
+      [view]="[width, height]"
       [colors]="colors"
       [legendData]="seriesDomain">
 
@@ -87,7 +98,7 @@ import d3 from '../d3';
       <svg:g timeline
         *ngIf="timeline && scaleType === 'time'"
         [results]="results"
-        [view]="view"
+        [view]="[width, height]"
         [scheme]="scheme"
         [customColors]="customColors"
         [legend]="legend"
@@ -97,7 +108,7 @@ import d3 from '../d3';
     </chart>
   `
 })
-export class AreaChartStacked extends BaseChart implements OnChanges, AfterViewInit {
+export class AreaChartStacked extends BaseChart implements OnChanges, OnDestroy, AfterViewInit {
   element: HTMLElement;
   dims: ViewDimensions;
   scaleType: string;
@@ -131,7 +142,6 @@ export class AreaChartStacked extends BaseChart implements OnChanges, AfterViewI
 
   @Output() clickHandler = new EventEmitter();
 
-
   constructor(element: ElementRef, zone: NgZone) {
     super(element, zone);
     this.element = element.nativeElement;
@@ -141,13 +151,17 @@ export class AreaChartStacked extends BaseChart implements OnChanges, AfterViewI
     this.bindResizeEvents(this.view);
   }
 
+  ngOnDestroy() {
+    this.unbindEvents();
+  }
+
   ngOnChanges() {
     this.update();
   }
 
   update() {
     super.update();
-    this.dims = calculateViewDimensions(this.view, this.margin, this.showXAxisLabel, this.showYAxisLabel, this.legend, 9);
+    this.dims = calculateViewDimensions(this.width, this.height, this.margin, this.showXAxisLabel, this.showYAxisLabel, this.legend, 9);
 
     if (this.timeline) {
       this.dims.height -= 150;

diff --git a/src/area-chart/area-chart.component.ts b/src/area-chart/area-chart.component.ts
@@ -1,7 +1,18 @@
-import {Component, Input, Output, EventEmitter, OnChanges, HostListener, NgZone, ElementRef, AfterViewInit} from '@angular/core';
-import {calculateViewDimensions, ViewDimensions} from '../common/view-dimensions.helper';
-import {colorHelper} from '../utils/color-sets';
-import {BaseChart} from '../common/base-chart.component';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  OnDestroy,
+  HostListener,
+  NgZone,
+  ElementRef,
+  AfterViewInit
+} from '@angular/core';
+import { calculateViewDimensions, ViewDimensions } from '../common/view-dimensions.helper';
+import { colorHelper } from '../utils/color-sets';
+import { BaseChart } from '../common/base-chart.component';
 import * as moment from 'moment';
 import ObjectId from "../utils/object-id";
 import d3 from '../d3';
@@ -11,7 +22,7 @@ import d3 from '../d3';
   template: `
     <chart
       [legend]="legend"
-      [view]="view"
+      [view]="[width, height]"
       [colors]="colors"
       [legendData]="seriesDomain">
 
@@ -85,7 +96,7 @@ import d3 from '../d3';
       <svg:g timeline
         *ngIf="timeline && scaleType === 'time'"
         [results]="results"
-        [view]="view"
+        [view]="[width, height]"
         [scheme]="scheme"
         [customColors]="customColors"
         [legend]="legend"
@@ -95,7 +106,7 @@ import d3 from '../d3';
     </chart>
   `
 })
-export class AreaChart extends BaseChart implements OnChanges, AfterViewInit {
+export class AreaChart extends BaseChart implements OnChanges, OnDestroy, AfterViewInit {
   dims: ViewDimensions;
   xSet: any;
   xDomain: any;
@@ -139,13 +150,17 @@ export class AreaChart extends BaseChart implements OnChanges, AfterViewInit {
     this.bindResizeEvents(this.view);
   }
 
+  ngOnDestroy() {
+    this.unbindEvents();
+  }
+
   ngOnChanges() {
     this.update();
   }
 
   update() {
     super.update();
-    this.dims = calculateViewDimensions(this.view, this.margin, this.showXAxisLabel, this.showYAxisLabel, this.legend, 9);
+    this.dims = calculateViewDimensions(this.width, this.height, this.margin, this.showXAxisLabel, this.showYAxisLabel, this.legend, 9);
 
     if (this.timeline) {
       this.dims.height -= 150;

diff --git a/src/area-chart/area-chart.module.ts b/src/area-chart/area-chart.module.ts
@@ -1,9 +1,9 @@
-import {NgModule} from "@angular/core";
-import {AreaChart} from "./area-chart.component";
-import {AreaChartNormalized} from "./area-chart-normalized.component";
-import {AreaChartStacked} from "./area-chart-stacked.component";
-import {AreaSeries} from "./area-series.component";
-import {CommonModule} from "../common/common.module";
+import { NgModule } from "@angular/core";
+import { AreaChart } from "./area-chart.component";
+import { AreaChartNormalized } from "./area-chart-normalized.component";
+import { AreaChartStacked } from "./area-chart-stacked.component";
+import { AreaSeries } from "./area-series.component";
+import { CommonModule } from "../common/common.module";
 
 export { AreaChart, AreaChartNormalized, AreaChartStacked, AreaSeries }
 

diff --git a/src/area-chart/area-series.component.ts b/src/area-chart/area-series.component.ts
@@ -1,6 +1,12 @@
-import {Component, Input, Output, EventEmitter, OnChanges} from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges
+} from '@angular/core';
 import d3 from '../d3';
-import {sortLinear} from '../utils/sort';
+import { sortLinear } from '../utils/sort';
 
 @Component({
   selector: 'g[areaSeries]',
@@ -77,4 +83,4 @@ export class AreaSeries implements OnChanges {
     this.path = area(data);
     this.startingPath = startingArea(data);
   }
-}
+}