From 384d420a7f0005a956e2172167890444fb3c2a61 Mon Sep 17 00:00:00 2001
From: Colin McLeod <colin@roaminsight.com>
Date: Thu, 28 May 2015 02:00:05 -0700
Subject: [PATCH] Update area chart on window resize or orientation change

---
 app/js/directives/directive-area-chart.js | 66 ++++++++++++-----------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/app/js/directives/directive-area-chart.js b/app/js/directives/directive-area-chart.js
index 765a5127..1ecf0f1c 100755
--- a/app/js/directives/directive-area-chart.js
+++ b/app/js/directives/directive-area-chart.js
@@ -1,4 +1,4 @@
-angular.module('app').directive('areaChart', function () {
+angular.module('app').directive('areaChart', ['$window', function ($window) {
 
 
   return {
@@ -10,33 +10,25 @@ angular.module('app').directive('areaChart', function () {
       width: '='
     },
     link: function(scope, element) {
-      var width = element[0].parentElement.offsetWidth,
-          height = width * 0.6,
-          series = scope.series,
+      var series = scope.series,
           config = scope.config,
           labels = config.labels,
           margin = {top: 15, right: 15, bottom: 35, left: 50},
-          w = width - margin.left - margin.right,
-          h = height - margin.top - margin.bottom,
           fmt = d3.format('.3r'),
-          fmtLong = d3.format('.2f');
+          fmtLong = d3.format('.2f'),
+          x, y;
 
       // Create chart
-      var svg = d3.select(element[0]).append("svg")
-        .attr("width", width)
-        .attr("height", height)
-        .append("g")
-          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+      var svg = d3.select(element[0]).append("svg");
+      var vis = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
       // Define Axes
-      var x = d3.scale.linear().range([0, w]);
-      var y = d3.scale.linear().range([h, 0]);
       var xAxis = d3.svg.axis().outerTickSize(0).orient("bottom").tickFormat(fmt);
       var yAxis = d3.svg.axis().outerTickSize(0).orient("left").tickFormat(fmt);
       // Define Area
-      var area = d3.svg.area().x(function(d) { return x(d[0]); }).y0(h).y1(function(d) { return y(d[1]); });
+      var area = d3.svg.area();
 
-      var gradient = svg.append("defs")
+      var gradient = vis.append("defs")
         .append("linearGradient")
         .attr("id", "gradient")
         .attr("x1", "0%").attr("y1", "0%")
@@ -52,57 +44,69 @@ angular.module('app').directive('areaChart', function () {
         .attr("stop-opacity", 1);
 
       // Create Y Axis SVG Elements
-      svg.append("g").attr("class", "y axis")
+      var yTxt = vis.append("g").attr("class", "y axis")
         .append("text")
           .attr("transform", "rotate(-90)")
           .attr("y", -40)
-          .attr("x", -h/2)
           .attr("dy", ".1em")
           .style("text-anchor", "middle")
           .text(labels.yAxis.title + ' (' + labels.yAxis.unit + ')');
       // Create X Axis SVG Elements
-      svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + h + ")")
-        .append("text")
+      var xLbl = vis.append("g").attr("class", "x axis");
+      var xTxt = xLbl.append("text")
           .attr("y", 30)
-          .attr("x", w/2)
           .attr("dy", ".1em")
           .style("text-anchor", "middle")
           .text(labels.xAxis.title + ' (' + labels.xAxis.unit + ')');
 
       // Create and Add tooltip
-      var tip = svg.append("g").style("display", "none");
+      var tip = vis.append("g").style("display", "none");
       tip.append("circle")
         .attr("class", "marker")
         .attr("r", 4);
       tip.append("text").attr("class", 'label x').attr("y", -2);
       tip.append("text").attr("class", 'label y').attr("y", '0.7em');
 
-
-
       /**
        * Watch for changes in the series data (mass changes, etc)
        */
       scope.$watchCollection('series', render);
       scope.$watchCollection('config.watch', render);
+      angular.element($window).bind('resize', render);
 
       function render() {
-        var data = [];
-        var func = series.func;
+        var width = element[0].parentElement.offsetWidth,
+            height = width * 0.6,
+            w = width - margin.left - margin.right,
+            h = height - margin.top - margin.bottom,
+            x = d3.scale.linear().range([0, w]),
+            y = d3.scale.linear().range([h, 0]),
+            data = [],
+            func = series.func;
+
         for (var d = series.xMin; d <= series.xMax; d++) {
           data.push([ d, func(d) ]);
         }
+
+        // Update Chart Size
+        svg.attr("width", width).attr("height", height);
+        area.x(function(d) { return x(d[0]); }).y0(h).y1(function(d) { return y(d[1]); });
+
         // Update domain and scale for axes;
         x.domain([series.xMin, series.xMax]);
         xAxis.scale(x);
+        xLbl.attr("transform", "translate(0," + h + ")");
+        xTxt.attr("x", w/2);
         y.domain([data[data.length - 1][1], data[0][1]]);
         yAxis.scale(y);
-        svg.selectAll(".y.axis").call(yAxis);
-        svg.selectAll(".x.axis").call(xAxis);
+        yTxt.attr("x", -h/2);
+        vis.selectAll(".y.axis").call(yAxis);
+        vis.selectAll(".x.axis").call(xAxis);
 
         // Remove existing elements
-        svg.selectAll('path.area').remove();
+        vis.selectAll('path.area').remove();
 
-        svg.insert("path",':first-child')   // Area/Path to appear behind everything else
+        vis.insert("path",':first-child')   // Area/Path to appear behind everything else
           .datum(data)
           .attr("class", "area")
           .attr('fill', 'url(#gradient)')
@@ -120,4 +124,4 @@ angular.module('app').directive('areaChart', function () {
 
     }
   };
-});
\ No newline at end of file
+}]);
\ No newline at end of file