From 13e7d4c688b826db906c64c5c077af966066814d Mon Sep 17 00:00:00 2001
From: Robin Hu <robinfhu@gmail.com>
Date: Fri, 23 Aug 2013 23:19:43 -0400
Subject: [PATCH] Updating historicalBar chart transitionDuration.

---
 examples/historicalBarChart.html | 108 +++++++++----------------------
 src/models/historicalBar.js      |  13 ++--
 src/models/historicalBarChart.js |  27 ++------
 3 files changed, 43 insertions(+), 105 deletions(-)
diff --git a/examples/historicalBarChart.html b/examples/historicalBarChart.html
index 9b6fc33..c196391 100644
--- a/examples/historicalBarChart.html
+++ b/examples/historicalBarChart.html
@@ -14,95 +14,51 @@ text {
 </style>
 <body class='with-3d-shadow with-transitions'>
 
+<div style="width: 100%; height: 400px;">
 <svg id="test1"></svg>
-
+</div>
 <script src="../lib/d3.v3.js"></script>
 <script src="../nv.d3.js"></script>
+<script src="../src/models/axis.js"></script>
 <script src="../src/models/historicalBar.js"></script>
 <script src="../src/models/historicalBarChart.js"></script>
 <script src="../src/utils.js"></script>
 
 <script> 
 
+var chart;
+nv.addGraph(function() {
+  chart = nv.models.historicalBarChart();
+  chart
+    .margin({left: 100, bottom: 100})
+    .x(function(d,i) { return i })
+    .transitionDuration(250)
+    ;
 
-nv.addGraph({
-  generate: function() {
-    var width = nv.utils.windowSize().width - 40,
-        height = nv.utils.windowSize().height - 40;
-
-    var chart = nv.models.historicalBarChart()
-    //    .padData(true)
-        .width(width)
-        .height(height /2)
-        .transitionDuration(0)
-        ;
-
-    chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
-        .tickFormat(d3.format(',.1f'));
-
-    chart.yAxis
-        .axisLabel('Voltage (v)')
-        .tickFormat(d3.format(',.2f'));
-
-    chart.showXAxis(true).showYAxis(true);
-        
-    d3.select("#test1")
-      .attr('width', width)
-      .attr('height', height)
-      .datum(sinData())
-      .call(chart);
-
-    return chart;
-  },
-  callback: function(graph) {
-
-
-
-    /*
-    graph.dispatch.on('elementClick', function(e) {
-        console.log("Bar Click",e);
-    });
-
-    graph.dispatch.on('chartClick', function(e) {
-        console.log("Chart Click",e);
-    });
-
-    graph.dispatch.on('chartClick', function(e) {
-        console.log('Click Switching to');
-        if (td === 0) {
-            d3.select("#test1")
-                    .datum(testdata2)
-                    .call(graph);
-            td = 1;
-
-        } else {
-            d3.select("#test1")
-                    .datum(testdata)
-                    .call(graph);
-            td = 0;
-        }
-      });
-    */
-
-
-    window.onresize = function() {
-      var width = nv.utils.windowSize().width - 40,
-          height = nv.utils.windowSize().height /2 - 40;
-
-      graph
-        .width(width)
-        .height(height)
-
-      d3.select("#test1")
-          .attr('width', width)
-          .attr('height', height)
-        .call(graph);
-    };
-  }
-});
+  // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
+  chart.xAxis
+    .axisLabel("Time (s)")
+    .tickFormat(d3.format(',.1f'));
+
+  chart.yAxis
+    .axisLabel('Voltage (v)')
+    .tickFormat(d3.format(',.2f'));
 
+  chart.showXAxis(true);
 
+  d3.select('#test1')
+    .datum(sinData())
+    .transition().duration(0)
+    .call(chart);
 
+  //TODO: Figure out a good way to do this automatically
+  nv.utils.windowResize(chart.update);
+  //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
+
+  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
+
+  return chart;
+});
 
 
 //Simple test data generators
diff --git a/src/models/historicalBar.js b/src/models/historicalBar.js
index 273e843..5e7fa91 100644
--- a/src/models/historicalBar.js
+++ b/src/models/historicalBar.js
@@ -24,7 +24,6 @@ nv.models.historicalBar = function() {
     , yRange
     , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
     , interactive = true
-    , transitionDuration = 250
     ;
 
   //============================================================
@@ -169,11 +168,13 @@ nv.models.historicalBar = function() {
       bars
           .attr('fill', function(d,i) { return color(d, i); })
           .attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
-          .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })  //TODO: better width calculations that don't assume always uniform data spacing;w
+          .transition()
+          .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; }) 
+           //TODO: better width calculations that don't assume always uniform data spacing;w
           .attr('width', (availableWidth / data[0].values.length) * .9 )
 
 
-      bars.transition().duration(transitionDuration)
+      bars.transition()
           .attr('y', function(d,i) {
             var rval = getY(d,i) < 0 ?
                     y(0) :
@@ -320,12 +321,6 @@ nv.models.historicalBar = function() {
     return chart;
   };
 
-  chart.transitionDuration = function(_) {
-    if (!arguments.length) return transitionDuration;
-    transitionDuration = _;
-    return chart;
-  };
-
   //============================================================
 
 
diff --git a/src/models/historicalBarChart.js b/src/models/historicalBarChart.js
index 92e81ca..5210712 100644
--- a/src/models/historicalBarChart.js
+++ b/src/models/historicalBarChart.js
@@ -31,6 +31,7 @@ nv.models.historicalBarChart = function() {
     , defaultState = null
     , noData = 'No Data Available.'
     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
+    , transitionDuration = 250
     ;
 
   xAxis
@@ -85,7 +86,7 @@ nv.models.historicalBarChart = function() {
                              - margin.top - margin.bottom;
 
 
-      chart.update = function() { container.transition().call(chart) };
+      chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
       chart.container = this;
 
       //set state.disabled
@@ -194,7 +195,7 @@ nv.models.historicalBarChart = function() {
       var barsWrap = g.select('.nv-barsWrap')
           .datum(data.filter(function(d) { return !d.disabled }))
 
-      d3.transition(barsWrap).call(bars);
+      barsWrap.transition().call(bars);
 
       //------------------------------------------------------------
 
@@ -210,7 +211,7 @@ nv.models.historicalBarChart = function() {
         g.select('.nv-x.nv-axis')
             .attr('transform', 'translate(0,' + y.range()[0] + ')');
         g.select('.nv-x.nv-axis')
-          .transition()
+            .transition()
             .call(xAxis);
       }
 
@@ -221,7 +222,7 @@ nv.models.historicalBarChart = function() {
           .tickSize( -availableWidth, 0);
 
         g.select('.nv-y.nv-axis')
-          .transition().duration(0)
+          .transition()
             .call(yAxis);
       }
       //------------------------------------------------------------
@@ -260,18 +261,6 @@ nv.models.historicalBarChart = function() {
           chart.update();
       });
 
-/*
-      legend.dispatch.on('legendMouseover', function(d, i) {
-        d.hover = true;
-        selection.transition().call(chart)
-      });
-
-      legend.dispatch.on('legendMouseout', function(d, i) {
-        d.hover = false;
-        selection.transition().call(chart)
-      });
-*/
-
       dispatch.on('tooltipShow', function(e) {
         if (tooltips) showTooltip(e, that.parentNode);
       });
@@ -416,10 +405,8 @@ nv.models.historicalBarChart = function() {
   };
 
   chart.transitionDuration = function(_) {
-    if (!arguments.length) return bars.transitionDuration();
-    bars.transitionDuration(_);
-    xAxis.transitionDuration(_);
-    yAxis.transitionDuration(_);
+    if (!arguments.length) return transitionDuration;
+    transitionDuration = _;
     return chart;
   };
 
