Merge pull request #38 from PioneerCode/feature/dynamic-label-width

Add dynamic label axis calc to base Chart class

src/libs/pcac/bar-horizontal-chart/bar-horizontal-chart.builder.ts

@@ -12,7 +12,7 @@ export class BarHorizontalChartBuilder extends PcacChart {
   private yScale: d3.ScaleBand<string>;
 
   buildChart(chartElm: ElementRef, config: IPcacBarHorizontalChartConfig): void {
-    this.setup(chartElm, config);
+    this.initializeChartState(chartElm, config);
     this.buildScales(config);
     this.drawChart(chartElm, config);
   }
@@ -33,6 +33,7 @@ export class BarHorizontalChartBuilder extends PcacChart {
   }
 
   private drawChart(chartElm: ElementRef, config: IPcacBarHorizontalChartConfig): void {
+    this.setHorizontalMarginsBasedOnContent(chartElm, config.data, this.yScale);
     this.buildContainer(chartElm);
     this.axisBuilder.drawAxis({
       svg: this.svg,

src/libs/pcac/bar-vertical-chart/bar-vertical-chart.builder.ts

@@ -16,7 +16,7 @@ export class BarVerticalChartBuilder extends PcacChart {
   private yScale: d3.ScaleLinear<number, number>;
 
   buildChart(chartElm: ElementRef, config: IPcacBarVerticalChartConfig): void {
-    this.setup(chartElm, config);
+    this.initializeChartState(chartElm, config);
     this.buildScales(config);
     this.drawChart(chartElm, config);
   }

src/libs/pcac/core/chart.ts

@@ -6,6 +6,7 @@ import { IPcacChartConfig } from './chart.model';
 import { PcacColorService } from './color.service';
 import { select } from 'd3-selection';
 import { ElementRef, Injectable } from '@angular/core';
+import { IPcacData } from '.';
 
 @Injectable()
 export class PcacChart {
@@ -19,16 +20,26 @@ export class PcacChart {
     public axisBuilder: PcacAxisBuilder,
     public gridBuilder: PcacGridBuilder,
     private colorService: PcacColorService
-  ) {
-  }
+  ) { }
 
-  setup(chartElm: ElementRef, config: IPcacChartConfig): void {
+  /**
+   * Prior to building a chart, we need to initialize the state of the chart
+   * @param chartElm Reference to SVG on dom
+   * @param config Chart specific configuration
+   */
+  initializeChartState(chartElm: ElementRef, config: IPcacChartConfig): void {
     select(chartElm.nativeElement).select('g').remove();
     this.width = chartElm.nativeElement.parentNode.clientWidth - this.margin.left - this.margin.right;
     this.height = config.height;
     this.colors = this.colorService.getColorScale(config.data.length);
   }
 
+  /**
+   * 1) Set the width and height of the SVG
+   * 2) Add a group and translate it to state of {{center}} option
+   * @param chartElm Reference to SVG on dom
+   * @param center Are we pinning x,y to the top,left, or are we centering our drawing group inside the SVG.
+   */
   buildContainer(chartElm: ElementRef, center = false): void {
     const combinedHeight = this.height + this.margin.top + this.margin.bottom;
     const combinedWidth = this.width + this.margin.left + this.margin.right;
@@ -45,4 +56,28 @@ export class PcacChart {
       .append('g')
       .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
   }
+
+  /**
+   * Most charts share a default margin(s) state.
+   * In some cases, that state needs to be calculated based on the content that resides in that margin.
+   * For example, labels on a horizontal bar chart are dynamic and such the margin needs to be calculated ahead of
+   * chart axis construction.
+   * @param chartElm Reference to SVG on dom
+   * @param data Generic multi-dimensional IPcacData structure
+   * @param yScale D3 scale transformation object (d3.ScaleBand)
+   */
+  setHorizontalMarginsBasedOnContent(chartElm: ElementRef, data: IPcacData[], yScale: any): void {
+    const axisY = axisLeft(yScale).ticks(5);
+    let max = 0;
+    select(chartElm.nativeElement).append('g')
+      .call(axisY)
+      .each((d, i, n: any) => {
+        if (n[i].getBBox().width > max) {
+          max = n[i].getBBox().width;
+        }
+      })
+      .remove();
+    this.margin.left = max;
+    this.margin.bottom = this.margin.bottom;
+  }
 }

src/libs/pcac/line-area-chart/line-area-chart.builder.ts

@@ -20,7 +20,7 @@ export class LineAreaChartBuilder extends PcacChart implements ILineAreaChartBui
   private yScale: d3.ScaleLinear<number, number>;
 
   buildChart(chartElm: ElementRef, config: IPcacLineAreaChartConfig): void {
-    this.setup(chartElm, config);
+    this.initializeChartState(chartElm, config);
     this.buildScales(config);
     this.drawChart(chartElm, config);
   }

src/libs/pcac/pie-chart/pie-chart.builder.ts

@@ -18,7 +18,7 @@ export class PieChartBuilder extends PcacChart implements IPieChartBuilder {
   private pieAngles;   // TODO: Strongly type
 
   buildChart(chartElm: ElementRef, config: IPcacPieChartConfig): void {
-    this.setup(chartElm, config);
+    this.initializeChartState(chartElm, config);
     this.radius = Math.min(this.width, this.height) / 2;
     this.buildShapes(config);
     this.drawChart(chartElm, config);