From c88ea0270992c3fd1853fbad70b377b45c0d3af5 Mon Sep 17 00:00:00 2001
From: Djamel F <djamelfel@gmail.com>
Date: Tue, 21 Oct 2014 15:39:19 +0200
Subject: [PATCH 1/3] permit to add new stroke in the same chart

---
 css/dangle.css           |  35 ++++++++--
 src/modules/area/area.js | 145 +++++++++++++++++++++++----------------
 2 files changed, 114 insertions(+), 66 deletions(-)

diff --git a/css/dangle.css b/css/dangle.css
index 5dfd680..0f76086 100644
--- a/css/dangle.css
+++ b/css/dangle.css
@@ -22,20 +22,43 @@
     font-size: 16px;
 }
 
+.curve0 {
+    fill: #0000FF;
+    stroke: #0000FF;
+}
+
+.curve1 {
+    fill: #000000;
+    stroke: #000000;
+}
+
+.curve2 {
+    fill: #FF0000;
+    stroke: #FF0000;
+}
+
+.curve3 {
+    fill: #00FF00;
+    stroke: #00FF00;
+}
+
+.curve4 {
+    fill: #00FFFF;
+    stroke: #00FFFF;
+}
+
 /* controls the area */
-.area.fill { 
-    fill: #e5f3f9;
+.fill {
     fill-opacity: 0.2;
 }
 
 /* controls the top line in area */
-.area.line {
+.line {
     fill: none;
-    stroke: #058dc7;
     stroke-width: 6.0px;
 }
 
-.area.line.points {
+.line.points {
     fill: #058dc7;
     stroke: #fff;
     stroke-width: 3.0px;
@@ -53,4 +76,4 @@
     fill: #000;
     stroke: none;
     font-size: 12px;
-}
\ No newline at end of file
+}
diff --git a/src/modules/area/area.js b/src/modules/area/area.js
index 568a191..0a467cb 100644
--- a/src/modules/area/area.js
+++ b/src/modules/area/area.js
@@ -67,7 +67,7 @@ angular.module('dangle')
                 width = width - margin.left - margin.right;
                 height = height - margin.top - margin.bottom;
 
-                // create x,y sclaes (x is inferred as time)
+                // create x,y scales (x is inferred as time)
                 var x = d3.time.scale()
                     .range([0, width]);
 
@@ -108,19 +108,13 @@ angular.module('dangle')
                         .append('g')
                             .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
-                // generate the area. Data is empty at link time
-                svg.append('path')
-                    .datum([])
-                    .attr('class', 'area fill ' + klass)
-                    .attr('d', area);
-
                 // insert the x axis (no data yet)
                 svg.append('g')
                     .attr('class', 'area x axis ' + klass)
                     .attr('transform', 'translate(0,' + height + ')')
                     .call(xAxis);
 
-                // insert the x axis (no data yet)
+                // insert the y axis (no data yet)
                 svg.append('g')
                     .attr('class', 'area y axis ' + klass)
                     .call(yAxis)
@@ -131,13 +125,6 @@ angular.module('dangle')
                             .style('text-anchor', 'end')
                             .text(label);
 
-                // generate the line. Data is empty at link time
-                svg.append('path')
-                    .datum([])
-                    .attr('class', 'area line ' + klass)
-                    .attr("d", line);
-
-
                 // main observer fn called when scope is updated. Data and scope vars are now bound
                 scope.$watch('bind', function(data) {
 
@@ -148,66 +135,104 @@ angular.module('dangle')
                     var pointRadius = scope.pointRadius || 8;
                     var field = scope.field || attrs.bind.split('.').pop().toLowerCase();
 
+                    //remove element if they are
+                    svg.selectAll(".curve")
+                        .remove();
+
                     // just because scope is bound doesn't imply we have data.
-                    if (data) {
+                    if (data === undefined) {
+                    }
+                    else if (data.length != 0) {
 
                         // pull the data array from the facet
                         data = data.entries || [];
 
-                        // use that data to build valid x,y ranges
-                        x.domain(d3.extent(data, function(d) { return d.time; }));
-                        y.domain([0, d3.max(data, function(d) { return d.count; })]);
-
-                        // create the transition 
-                        var t = svg.transition().duration(duration);
-
-                        // feed the current data to our area/line generators
-                        t.select('.area').attr('d', area(data));
-                        t.select('.line').attr('d', line(data));
-
-                        // does the user want data points to be plotted
-                        if (dataPoints == 'true') {
-
-                            // create svg circle for each data point
-                            // using Math.random as (optional) key fn ensures old
-                            // data values are flushed and all new values inserted
-                            var points = svg.selectAll('circle')
-                                .data(data.filter(function(d) { 
-                                    return d.count; 
-                                }), function(d) { 
-                                    return Math.random(); 
-                                });
+                        var label_charts = {};
+                        for (var i=0; i<data.length; i++) {
+                            if (label_charts[data[i].label] === undefined) {
+                                label_charts[data[i].label] = [];
+                            }
+                            label_charts[data[i].label].push(data[i]);
+                        }
 
-                            // d3 enter fn binds each new value to a circle 
-                            points.enter()
-                                .append('circle')
-                                    .attr('class', 'area line points ' + klass)
-                                    .attr('cursor', 'pointer')
-                                    .attr("cx", line.x())
-                                    .attr("cy", line.y())
-                                    .style("opacity", 0)
-                                    .transition()
-                                        .duration(duration)
-                                        .style("opacity", 1)
+                        var curve_id = 0;
+                        for (var key in label_charts) {
+
+                            // generate the area. Data is empty at link time
+                            var curve = svg.append('g')
+                                .attr('class', 'curve curve' + curve_id);
+
+                            curve.append('path')
+                                .datum([])
+                                .attr('class', 'fill ' + klass)
+                                .attr('d', area);
+
+                            // generate the line. Data is empty at link time
+                            curve.append('path')
+                                .datum([])
+                                .attr('class', 'line ' + klass)
+                                .attr('d', line);
+
+                            // use that data to build valid x,y ranges
+                            x.domain(d3.extent(data, function(d) { return d.time; }));
+
+                            var ymin = d3.min(data, function(d) { return d.count; });
+                            ymin < 0 ? ymin : ymin = 0;
+                            y.domain([ymin, d3.max(data, function(d) { return d.count; })]);
+
+                            // create the transition
+                            var t = curve.transition().duration(duration);
+
+                            // feed the current data to our area/line generators
+                            t.select('.fill').attr('d', area(label_charts[key]));
+                            t.select('.line').attr('d', line(label_charts[key]));
+
+                            // does the user want data points to be plotted
+                            if (dataPoints == 'true') {
+
+                                // create svg circle for each data point
+                                // using Math.random as (optional) key fn ensures old
+                                // data values are flushed and all new values inserted
+                                var points = svg.selectAll('circle')
+                                    .data(data.filter(function(d) {
+                                        return d.count;
+                                    }), function(d) {
+                                        return Math.random();
+                                    });
+
+                                // d3 enter fn binds each new value to a circle
+                                points.enter()
+                                    .append('circle')
+                                        .attr('class', 'area line points ' + klass)
+                                        .attr('cursor', 'pointer')
                                         .attr("cx", line.x())
                                         .attr("cy", line.y())
-                                        .attr("r", pointRadius);
-
-                            // wire up any events (registers filter callback)
-                            points.on('mousedown', function(d) { 
-                                scope.$apply(function() {
-                                    (scope.onClick || angular.noop)(field, d.time);
+                                        .style("opacity", 0)
+                                        .transition()
+                                            .duration(duration)
+                                            .style("opacity", 1)
+                                            .attr("cx", line.x())
+                                            .attr("cy", line.y())
+                                            .attr("r", pointRadius);
+
+                                // wire up any events (registers filter callback)
+                                points.on('mousedown', function(d) {
+                                    scope.$apply(function() {
+                                        (scope.onClick || angular.noop)(field, d.time);
+                                    });
                                 });
-                            });
 
-                            // d3 exit/remove flushes old values (removes old circles)
-                            points.exit().remove();
+                                // d3 exit/remove flushes old values (removes old circles)
+                                points.exit().remove();
+                            }
+
+                            curve_id++;
                         }
 
                         // update our x,y axis based on new data values
+                        var t = svg.transition().duration(duration);
                         t.select('.x').call(xAxis);
                         t.select('.y').call(yAxis);
-
                     }
                 }, true)
             }

From 84560b0e7e29f3c0ba7c83d4afd22113fb299bc0 Mon Sep 17 00:00:00 2001
From: Djamel F <djamelfel@gmail.com>
Date: Tue, 21 Oct 2014 15:50:11 +0200
Subject: [PATCH 2/3] insert label under chart wich permit to show/hide
 corresponsive stroke

---
 src/modules/area/area.js | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/modules/area/area.js b/src/modules/area/area.js
index 0a467cb..764dda4 100644
--- a/src/modules/area/area.js
+++ b/src/modules/area/area.js
@@ -24,7 +24,7 @@
  */
 
 angular.module('dangle')
-    .directive('fsArea', [function() {
+    .directive('fsArea', ['$compile', function($compile) {
         'use strict';
 
         return {
@@ -49,7 +49,7 @@ angular.module('dangle')
                 var margin = {
                     top: 20, 
                     right: 20, 
-                    bottom: 30, 
+                    bottom: 80,
                     left: 80
                 };
 
@@ -162,13 +162,17 @@ angular.module('dangle')
                             var curve = svg.append('g')
                                 .attr('class', 'curve curve' + curve_id);
 
-                            curve.append('path')
+                            var dg_group = curve.append('g')
+                                .attr('ng-init', 'sh' + curve_id + '=true')
+                                .attr('ng-show', 'sh' + curve_id);
+
+                            dg_group.append('path')
                                 .datum([])
                                 .attr('class', 'fill ' + klass)
                                 .attr('d', area);
 
                             // generate the line. Data is empty at link time
-                            curve.append('path')
+                            dg_group.append('path')
                                 .datum([])
                                 .attr('class', 'line ' + klass)
                                 .attr('d', line);
@@ -187,6 +191,23 @@ angular.module('dangle')
                             t.select('.fill').attr('d', area(label_charts[key]));
                             t.select('.line').attr('d', line(label_charts[key]));
 
+                            dg_group = curve.append('g')
+                                .attr('ng-click', 'sh' + curve_id + '= !sh' + curve_id)
+                                .attr('class', 'pointer');
+
+                            var width_label = 150;
+                            dg_group.append('circle')
+                                .attr('cx', curve_id * width_label)
+                                .attr('cy', 250)
+                                .attr('r', 8)
+                                .attr('class', 'circle curve' + curve_id);
+
+                            dg_group.append('text')
+                                .attr('x', curve_id * width_label + 12)
+                                .attr('y', 255)
+                                .attr('class', 'text curve' + curve_id)
+                                .text(key);
+
                             // does the user want data points to be plotted
                             if (dataPoints == 'true') {
 
@@ -234,6 +255,8 @@ angular.module('dangle')
                         t.select('.x').call(xAxis);
                         t.select('.y').call(yAxis);
                     }
+
+                    $compile(element.contents())(scope);
                 }, true)
             }
         };

From 2e4322f428fc690d116ccc32014707215be443b6 Mon Sep 17 00:00:00 2001
From: Djamel F <djamelfel@gmail.com>
Date: Tue, 21 Oct 2014 16:01:52 +0200
Subject: [PATCH 3/3] correct class on text and circle element

---
 src/modules/area/area.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/modules/area/area.js b/src/modules/area/area.js
index 764dda4..5fe2120 100644
--- a/src/modules/area/area.js
+++ b/src/modules/area/area.js
@@ -192,7 +192,7 @@ angular.module('dangle')
                             t.select('.line').attr('d', line(label_charts[key]));
 
                             dg_group = curve.append('g')
-                                .attr('ng-click', 'sh' + curve_id + '= !sh' + curve_id)
+                                .attr('ng-click', 'sh' + curve_id + ' = !sh' + curve_id)
                                 .attr('class', 'pointer');
 
                             var width_label = 150;
@@ -200,12 +200,10 @@ angular.module('dangle')
                                 .attr('cx', curve_id * width_label)
                                 .attr('cy', 250)
                                 .attr('r', 8)
-                                .attr('class', 'circle curve' + curve_id);
 
                             dg_group.append('text')
                                 .attr('x', curve_id * width_label + 12)
                                 .attr('y', 255)
-                                .attr('class', 'text curve' + curve_id)
                                 .text(key);
 
                             // does the user want data points to be plotted