From de2f640680d95d41426b0d090e3549d16ec0969b Mon Sep 17 00:00:00 2001
From: Shelby Sturgis <shelbyjsturgis@gmail.com>
Date: Tue, 15 Sep 2015 17:25:09 -0700
Subject: [PATCH] proof of concept

---
 build/jubilee.js              | 16 +++++-----
 src/modules/chart/series.js   |  2 +-
 src/modules/component/area.js | 55 ++++++++++++++++++++++++++++-------
 src/modules/component/line.js | 19 ++++++------
 4 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/build/jubilee.js b/build/jubilee.js
index cab6c12..4cbf28d 100644
--- a/build/jubilee.js
+++ b/build/jubilee.js
@@ -12407,10 +12407,10 @@ define('src/modules/element/svg/line',['require','d3'],function (require) {
     return element;
   };
 });
-define('src/modules/component/area',['require','d3','src/modules/element/svg/path','functor','valuator'],function (require) {
+define('src/modules/component/area',['require','d3','src/modules/element/svg/path','builder','valuator'],function (require) {
   var d3 = require("d3");
   var path = require("src/modules/element/svg/path");
-  var functor = require("functor");
+  var builder = require("builder");
   var valuator = require("valuator");
 
   return function area() {
@@ -12438,13 +12438,11 @@ define('src/modules/component/area',['require','d3','src/modules/element/svg/pat
           .tension(tension)
           .defined(defined);
 
-        var areaPath = path().pathGenerator(areas);
+        var areaPath = path().pathGenerator(areas(data));
 
-        var element = functor()
-          .function(areaPath)
-          .options(properties);
-
-        d3.select(this).append("g").call(element);
+        d3.select(this)
+          .append("g")
+          .call(builder(properties, areaPath));
       });
     }
 
@@ -13000,7 +12998,7 @@ define('src/modules/chart/series',['require','d3','functor','valuator','src/modu
   var lines = require("src/modules/component/line");
 
   return function series() {
-    var margin = {top: 20, right: 50, bottom: 20, left: 50};
+    var margin = {top: 20, right: 50, bottom: 50, left: 50};
     var width = 960;
     var height = 500;
     var accessor = function (d) { return d; };
diff --git a/src/modules/chart/series.js b/src/modules/chart/series.js
index 55a44bb..2d5f5c4 100644
--- a/src/modules/chart/series.js
+++ b/src/modules/chart/series.js
@@ -258,7 +258,7 @@ define(function (require) {
           if (d3.keys(d.opts).length) {
             var element = functor().function(d.func);
 
-            if (d.type === "area") { d.opts.offset = stacks.offset; }
+            //if (d.type === "area") { d.opts.offset = stacks.offset; }
             d.opts = !Array.isArray(d.opts) ? [d.opts] : d.opts;
 
             d.opts.forEach(function (props) {
diff --git a/src/modules/component/area.js b/src/modules/component/area.js
index d262f4d..c7ef6e1 100644
--- a/src/modules/component/area.js
+++ b/src/modules/component/area.js
@@ -1,7 +1,7 @@
 define(function (require) {
   var d3 = require("d3");
   var path = require("src/modules/element/svg/path");
-  var functor = require("functor");
+  var builder = require("builder");
   var valuator = require("valuator");
 
   return function area() {
@@ -11,6 +11,11 @@ define(function (require) {
     var xScale = d3.time.scale.utc();
     var yScale = d3.scale.linear();
     var offset = "zero";
+    var order = "default";
+    var out = function stackOut(d, y0, y) {
+      d.y0 = y0;
+      d.y = y;
+    };
     var interpolate = "linear";
     var tension = 0.7;
     var defined = function (d) { return d.y !== null; };
@@ -23,27 +28,57 @@ define(function (require) {
     };
 
     function component(selection) {
-      selection.each(function (data, index) {
-        var areas = d3.svg.area().x(X).y0(Y0).y1(Y1)
+      selection.each(function (data) {
+        var stack = d3.layout.stack()
+          .x(x)
+          .y(y)
+          .offset(offset)
+          .order(order)
+          .out(out);
+
+        data = stack(data);
+
+        xScale.domain(d3.extent(d3.merge(data), xAccessor));
+
+        yScale.domain([
+          Math.min(0, d3.min(d3.merge(data), yAccessor)),
+          Math.max(0, d3.max(d3.merge(data), yAccessor))
+        ]);
+
+        var areas = d3.svg.area()
+          .x(X)
+          .y0(Y0)
+          .y1(Y1)
           .interpolate(interpolate)
           .tension(tension)
           .defined(defined);
 
-        var areaPath = path().pathGenerator(areas);
-
-        var element = functor()
-          .function(areaPath)
-          .options(properties);
+        var areaPath = path()
+          .pathGenerator(areas);
 
-        d3.select(this).append("g").call(element);
+        d3.select(this)
+          .data([data])
+          .append("g")
+          .call(builder(properties, areaPath));
       });
     }
 
+    function xAccessor(d, i) {
+      return x.call(this, d, i);
+    }
+
+    function yAccessor(d, i) {
+      if (offset === "overlap") {
+        return y.call(this, d, i);
+      }
+      return d.y0 + y.call(this, d, i);
+    }
+
     function X(d, i) {
       return xScale(x.call(this, d, i));
     }
 
-    function Y0(d, i) {
+    function Y0(d) {
       var min = Math.max(0, yScale.domain()[0]);
       if (offset === "overlap") {
         return yScale(min);
diff --git a/src/modules/component/line.js b/src/modules/component/line.js
index 2113c99..97dc155 100644
--- a/src/modules/component/line.js
+++ b/src/modules/component/line.js
@@ -1,7 +1,7 @@
 define(function (require) {
   var d3 = require("d3");
   var path = require("src/modules/element/svg/path");
-  var functor = require("functor");
+  var builder = require("builder");
   var valuator = require("valuator");
 
   return function line() {
@@ -22,19 +22,20 @@ define(function (require) {
     };
 
     function component(selection) {
-      selection.each(function (data, index) {
-        var lines = d3.svg.line().x(X).y(Y)
+      selection.each(function () {
+        var d3line = d3.svg.line()
+          .x(X)
+          .y(Y)
           .interpolate(interpolate)
           .tension(tension)
           .defined(defined);
 
-        var linePath = path().pathGenerator(lines);
+        var line = path()
+          .pathGenerator(d3line);
 
-        var element = functor()
-          .function(linePath)
-          .options(properties);
-
-        d3.select(this).append("g").call(element);
+        d3.select(this)
+          .append("g")
+          .call(builder(properties, line));
       });
     }