From 6d1bacd9446178be9f1e3f01e1a877817b7ac074 Mon Sep 17 00:00:00 2001
From: mikhail samoilov <antiplaka@gmail.com>
Date: Mon, 17 Feb 2014 19:18:14 +0200
Subject: [PATCH] Subchart bar refactoring, allow negative values

---
 .gitignore                            |  1 +
 c3.js                                 | 42 ++++++++++++---------------
 htdocs/samples/chart_bar_stacked.html | 42 +++++++++++++--------------
 3 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1b2ff06..ff6f150 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 # npm modules
 node_modules
+bower_components
diff --git a/c3.js b/c3.js
index 380c051..f617188 100644
--- a/c3.js
+++ b/c3.js
@@ -1938,18 +1938,16 @@
 
             // bars
 
-            var barOnMain = function (isSub) {
+            var drawBar = function (isSub) {
                 var barW = getBarW(xAxis, barTargetsNum, !!isSub),
-                    barX = getBarX(barW, barTargetsNum, barIndices),
-                    barY = getBarY(!!isSub),
-                    barOffset = getBarOffset(barIndices);
+                    x = getBarX(barW, barTargetsNum, barIndices, !!isSub),
+                    y = getBarY(!!isSub),
+                    barOffset = getBarOffset(barIndices, !!isSub),
+                    yScale = isSub ? getSubYScale : getYScale;
 
                 return function (d, i) {
-                    var y = barY;
-                    var x = barX;
-
-                    var y0 = getYScale(d.id)(0),
-                        offset = barOffset(d, i) || y0; // offset is for stacked bar chart, by default
+                    var y0 = yScale(d.id)(0),
+                        offset = barOffset(d, i) || y0; // offset is for stacked bar chart
 
                     // 4 points that make a bar
                     var points = [
@@ -1977,16 +1975,14 @@
                 .data(barData);
 
             mainBar.enter().append('path')
-                .attr('d', barOnMain(false))
+                .attr('d', drawBar(false))
                 .style("stroke", 'none')
                 .style("fill", function (d) { return color(d.id); })
                 .attr("class", classBar);
 
             mainBar
-                .style("opacity", 0)
                 .transition().duration(duration)
-                .attr('d', barOnMain(false))
-                .style('opacity', 1);
+                .attr('d', drawBar(false));
 
             mainBar.exit().transition().duration(duration)
                 .style('opacity', 0)
@@ -2058,21 +2054,19 @@
                         brush.extent(x.orgDomain()).update();
                     }
                     // bars
-                    barW = getBarW(subXAxis, barTargetsNum, true);
-                    barH = getBarH(height2, true);
-                    barX = getBarX(barW, barTargetsNum, barIndices, true);
-                    barY = getBarY(barH, barIndices, false, true);
                     contextBar = context.selectAll('.-bars').selectAll('.-bar')
                         .data(barData);
-                    contextBar.transition().duration(duration)
-                        .attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH);
-                    contextBar.enter().append('rect')
-                        .attr("class", classBar)
-                        .attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
+                    contextBar.enter().append('path')
+                        .attr('d', drawBar(true))
+                        .style("stroke", 'none')
+                        .style("fill", function (d) { return color(d.id); })
+                        .attr("class", classBar);
+                    contextBar
                         .style("opacity", 0)
-                      .transition()
+                        .transition().duration(duration)
+                        .attr('d', drawBar(true))
                         .style('opacity', 1);
-                    contextBar.exit().transition()
+                    contextBar.exit().transition().duration(duration)
                         .style('opacity', 0)
                         .remove();
                     // lines
diff --git a/htdocs/samples/chart_bar_stacked.html b/htdocs/samples/chart_bar_stacked.html
index 4468354..9713c56 100644
--- a/htdocs/samples/chart_bar_stacked.html
+++ b/htdocs/samples/chart_bar_stacked.html
@@ -1,33 +1,33 @@
 <html>
-  <head>
+<head>
     <link href="/css/c3.css" rel="stylesheet" type="text/css">
-  </head>
-  <body>
-    <div id="chart"></div>
+</head>
+<body>
+<div id="chart"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
-    <script>
-      var chart = c3.generate({
+<script src="/js/c3.js"></script>
+<script>
+    var chart = c3.generate({
         data: {
-          columns: [
-            ['data1', 30, 200, 100, 400, 150, 250],
-            ['data2', 130, 100, 140, 200, 150, 50]
-          ],
-          types: {
-            data1: 'bar',
-            data2: 'bar'
-          },
-          groups: [
-            ['data1', 'data2']
-          ]
+            columns: [
+                ['data1', 30, 200, 200, 400, 150, 250],
+                ['data2', 130, -100, 100, 200, 150, 50]
+            ],
+            types: {
+                data1: 'bar',
+                data2: 'bar'
+            },
+            groups: [
+                ['data1', 'data2']
+            ]
         },
         axis: {
           x: {
             type: 'categorized'
           }
         }
-      });
-    </script>
-  </body>
+    });
+</script>
+</body>
 </html>