Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add labels under charts which permit to show or hide corresponsive curve #16

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add labels under charts which permit to show or hide corresponsive curve #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c88ea02
permit to add new stroke in the same chart
djamelfel Oct 21, 2014
84560b0
insert label under chart wich permit to show/hide corresponsive stroke
djamelfel Oct 21, 2014
2e4322f
correct class on text and circle element
djamelfel Oct 21, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 29 additions & 6 deletions css/dangle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -53,4 +76,4 @@
fill: #000;
stroke: none;
font-size: 12px;
}
}
170 changes: 108 additions & 62 deletions src/modules/area/area.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
*/

angular.module('dangle')
.directive('fsArea', [function() {
.directive('fsArea', ['$compile', function($compile) {
'use strict';

return {
Expand All @@ -49,7 +49,7 @@ angular.module('dangle')
var margin = {
top: 20,
right: 20,
bottom: 30,
bottom: 80,
left: 80
};

Expand All @@ -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]);

Expand Down Expand Up @@ -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)
Expand All @@ -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) {

Expand All @@ -148,67 +135,126 @@ 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);

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
dg_group.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]));

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)

dg_group.append('text')
.attr('x', curve_id * width_label + 12)
.attr('y', 255)
.text(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);

}

$compile(element.contents())(scope);
}, true)
}
};
Expand Down