Added new chart

Author: andreaferretti

app/index.html

@@ -36,15 +36,18 @@
     </div>
     <div class="row">
       <div id="bar" class="col-md-6"></div>
-      <div id="tree" class="col-md-6"></div>
+      <div id="stack" class="col-md-6"></div>
     </div>
     <div class="row">
       <div id="graph" class="col-md-6"></div>
+      <div id="tree" class="col-md-6"></div>
+    </div>
+    <div class="row">
       <div id="scatterplot" class="col-md-6"></div>
+      <div id="sankey" class="col-md-6"></div>
     </div>
     <div class="row">
       <div id="waterfall" class="col-md-6"></div>
-      <div id="sankey" class="col-md-6"></div>
     </div>
   </body>
 </html>

app/templates/stack.html

@@ -0,0 +1,23 @@
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h2 class="panel-title">Bar Chart</h2>
+    <span class="links">
+      <a on-click="coffee">Coffescript</a>
+      <a on-click="html">HTML</a>
+    </span>
+  </div>
+
+  <div class="panel-body">
+    <p class="alert alert-info">Here is a stacked bar chart example. Try hovering on the bars.</p>
+
+    <svg width=500 height=380>
+      <g>
+        {{# Bar({data: data, accessor: accessor, width: width, height: height, gutter: gutter }) }}
+          {{# curves:num }}
+            <path on-mouseenter="detail" on-mouseleave="restore" d="{{ line.path.print() }}" stroke="none" fill="{{ colors(group) }}" />
+          {{/ curves }}
+        {{/ end of bar }}
+      </g>
+    </svg>
+  </div>
+</div>

bower.json

@@ -7,7 +7,7 @@
 		"requirejs-plugins": "1.0.2",
 		"ractive": "0.3.9",
 		"pajamas": "1.6.1",
-		"paths-js": "0.4.0"
+		"paths-js": "0.4.1"
 	},
 	"devDependencies": {}
 }

src/coffee/app.coffee

@@ -6,6 +6,7 @@ define [
   'views/radar'
   'views/line'
   'views/bar'
+  'views/stack'
   'views/tree'
   'views/graph'
   'views/scatterplot'

src/coffee/views/stack.coffee

@@ -0,0 +1,41 @@
+define [
+  'ractive'
+  'show_source'
+  'paths/stack'
+  'palette/util'
+  'text!templates/stack.html'
+], (Ractive, show_source, Stack, util, template)->
+  palette = ["#FEE871", "#E5FAAF", "#B7E5F5"]
+  colors = util.palette_to_function(palette)
+
+  data = [
+    [1, 2, 3, 4]
+    [3, 5, 4, 2]
+    [1, 6, 1, 6]
+  ]
+
+  lower = (data, index) ->
+    data.map (d, i) ->
+      if i == index then d else (0 for x in d)
+
+  bar = new Ractive
+    el: '#stack'
+    template: template
+    data:
+      Bar: Stack
+      data: data
+      accessor: (x) -> x
+      width: 500
+      height: 350
+      gutter: 10
+      colors: colors
+
+  bar.on 'detail', (event) ->
+    console.log event
+    index = event.context.group
+    @animate 'data', lower(data, index)
+
+  bar.on 'restore', ->
+    @animate 'data', data
+
+  show_source('bar', bar)