# HG changeset patch
# User veltr
# Date 1350997047 -7200
# Node ID e15576c6953b36422ee2812e4eed4f821fd3b9ee
# Parent  7c1ff03a40a7cd1364f9ae0be9627fa2b05e19c0
improved streamgraph

diff -r 7c1ff03a40a7 -r e15576c6953b integration/js/streamgraph.js
--- a/integration/js/streamgraph.js	Tue Oct 16 14:31:59 2012 +0200
+++ b/integration/js/streamgraph.js	Tue Oct 23 14:57:27 2012 +0200
@@ -50,33 +50,35 @@
         xscale = width / (transp.length - 1),
         txscale = width / (ENDTIME - STARTTIME),
         coords = _(data).map(function(line, lineindex) {
-            return _(line).map(function(point, colindex) {
-                var lowercumul = lineindex ? cumulative[colindex][lineindex - 1] : 0,
-                    uppercumul = cumulative[colindex][lineindex];
-                return {
-                    data: point,
-                    x: xscale * colindex,
-                    lowery: centery + yscale * ( ( sums[colindex] / 2 ) - lowercumul ),
-                    uppery: centery + yscale * ( ( sums[colindex] / 2 ) - uppercumul ),
-                }
-            });
+            return {
+                points : _(line).map(function(point, colindex) {
+                    var lowercumul = lineindex ? cumulative[colindex][lineindex - 1] : 0,
+                        uppercumul = cumulative[colindex][lineindex];
+                    return {
+                        data: point,
+                        x: xscale * colindex,
+                        lowery: centery + yscale * ( ( sums[colindex] / 2 ) - lowercumul ),
+                        uppery: centery + yscale * ( ( sums[colindex] / 2 ) - uppercumul ),
+                    }
+                })
+            }
         }),
-        paths = _(coords).map(function(line) {
-            var lowerline = _(line).reduce(function(path, point, colindex) {
+        _(coords).each(function(line) {
+            var lowerline = _(line.points).reduce(function(path, point, colindex) {
                 var res = path;
                 if (colindex) {
                     res += "," + (point.x - CURVE * xscale) + "," + point.lowery + "," + point.x + "," + point.lowery;
                 } else {
                     res += "M" + point.x + "," + point.lowery;
                 }
-                if (colindex < line.length - 1) {
+                if (colindex < line.points.length - 1) {
                     res += "C" + (point.x + CURVE * xscale) + "," + point.lowery;
                 }
                 return res;
             }, "");
-            var upperline = _(line).reduceRight(function(path, point, colindex) {
+            var upperline = _(line.points).reduceRight(function(path, point, colindex) {
                 var res = path;
-                if (colindex < line.length - 1) {
+                if (colindex < line.points.length - 1) {
                     res += "," + (point.x + CURVE * xscale) + "," + point.uppery + "," + point.x + "," + point.uppery;
                 } else {
                     res += "L" + point.x + "," + point.uppery;
@@ -86,19 +88,19 @@
                 }
                 return res;
             }, "");
-            return lowerline + upperline;
+            line.path = lowerline + upperline;
         });
     
     /* Drawing streamgraph*/
    
     var paper = new Raphael($selector[0]);
     
-    _(paths).each(function(path, index) {
-        var color = COLORS[index % COLORS.length],
-            p = paper.path(path);
-        p.attr({
+    _(coords).each(function(line, index) {
+        line.color = COLORS[index % COLORS.length];
+        line.surface = paper.path(line.path);
+        line.surface.attr({
             stroke: "none",
-            fill: color
+            fill: line.color
         });
     });
     
@@ -156,19 +158,20 @@
     
     /* Redrawing time slices for rollover effect */
    
-    _(paths).each(function(path, index) {
-        var p = paper.path(path);
-        p.attr({
+    _(coords).each(function(line, index) {
+        line.mousesurface = paper.path(line.path);
+        console.log(line.mousesurface);
+        line.mousesurface.attr({
             stroke: "none",
-            fill: SELECTEDCOLOR,
+            fill: line.color,
             opacity: .01
         }).mouseover(function() {
-            p.attr({
-                opacity: 1
-            });
+            line.surface.attr({
+                fill: SELECTEDCOLOR
+            })
         }).mouseout(function() {
-            p.attr({
-                opacity: .01
+            line.surface.attr({
+                fill: line.color
             })
         });
     });