Skip to content

Commit

Permalink
Refactor broken lines implementation (w3c#449)
Browse files Browse the repository at this point in the history
  • Loading branch information
@almossawi
almossawi committed Jul 2, 2015
1 parent 2d215a6 commit c14d422
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 171 deletions.
113 changes: 29 additions & 84 deletions dist/metricsgraphics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -933,11 +933,6 @@ function y_axis(args) {
max_y;

args.scalefns.yf = function(di) {
//since we want to show actual zeros when missing_is_hidden is on
if(args.missing_is_hidden && di['_missing']) {
return args.scales.Y(di[args.y_accessor]) + 42.1234;
}

return args.scales.Y(di[args.y_accessor]);
};

Expand Down Expand Up @@ -2444,8 +2439,32 @@ MG.button_layout = function(target) {
return d[args.y_accessor];
};

//main line
var line = d3.svg.line()
.x(args.scalefns.xf)
.y(args.scalefns.yf)
.interpolate(args.interpolate)
.tension(args.interpolate_tension);

if(!args.missing_is_zero) {
line = line.defined(function(d) {
return (d['_missing'] == undefined || d['_missing'] != true);
})
}

//for animating line on first load
var flat_line = d3.svg.line()
.defined(function(d) {
return (d['_missing'] == undefined || d['_missing'] != true);
})
.x(args.scalefns.xf)
.y(function() { return args.scales.Y(data_median); })
.interpolate(args.interpolate)
.tension(args.interpolate_tension);

//main area
var area = d3.svg.area()
.defined(line.defined())
.x(args.scalefns.xf)
.y0(args.scales.Y.range()[0])
.y1(args.scalefns.yf)
Expand All @@ -2458,6 +2477,7 @@ MG.button_layout = function(target) {

if (args.show_confidence_band) {
confidence_area = d3.svg.area()
.defined(line.defined())
.x(args.scalefns.xf)
.y0(function(d) {
var l = args.show_confidence_band[0];
Expand All @@ -2471,20 +2491,6 @@ MG.button_layout = function(target) {
.tension(args.interpolate_tension);
}

//main line
var line = d3.svg.line()
.x(args.scalefns.xf)
.y(args.scalefns.yf)
.interpolate(args.interpolate)
.tension(args.interpolate_tension);

//for animating line on first load
var flat_line = d3.svg.line()
.x(args.scalefns.xf)
.y(function() { return args.scales.Y(data_median); })
.interpolate(args.interpolate)
.tension(args.interpolate_tension);

//for building the optional legend
var legend = '';
var this_data;
Expand Down Expand Up @@ -2588,64 +2594,6 @@ MG.button_layout = function(target) {
}
}

var the_line = svg.select('.mg-line' + (line_id) + '-color');
if (args.missing_is_hidden && the_line.attr('d') !== null) {
var bits = the_line.attr('d').split('L');
var zero = args.scales.Y(0) + 42.1234;
var dasharray = [];
var singleton_point_length = 2;

var x_y,
x_y_plus_1,
x,
y,
x_plus_1,
y_plus_1,
segment_length,
cumulative_segment_length = 0;

bits[0] = bits[0].replace('M', '');
bits[bits.length - 1] = bits[bits.length - 1].replace('Z', '');

//if we have a min_x, turn the line off first
if (args.min_x) {
dasharray.push(0);
}

//build the stroke-dasharray pattern
for (var j = 0; j < bits.length - 1; j++) {
x_y = bits[j].split(',');
x_y_plus_1 = bits[j + 1].split(',');
x = Number(x_y[0]);
y = Number(x_y[1]);
x_plus_1 = Number(x_y_plus_1[0]);
y_plus_1 = Number(x_y_plus_1[1]);

segment_length = Math.sqrt(Math.pow(x - x_plus_1, 2) + Math.pow(y - y_plus_1, 2));

//do we need to either cover or clear the current stroke
if (y_plus_1 == zero && y != zero) {
dasharray.push(cumulative_segment_length || singleton_point_length);
cumulative_segment_length = (cumulative_segment_length)
? segment_length
: segment_length - singleton_point_length;
} else if (y_plus_1 != zero && y == zero) { //switching on line
dasharray.push(cumulative_segment_length += segment_length);
cumulative_segment_length = 0;
} else {
cumulative_segment_length += segment_length;
}
}

//fear not, end bit of line, ye too shall be covered
if (dasharray.length > 0) {
dasharray.push(the_line.node().getTotalLength() - dasharray[dasharray.length - 1]);

svg.select('.mg-line' + (line_id) + '-color')
.attr('stroke-dasharray', dasharray.join());
}
}

//build legend
if (args.legend) {
if (is_array(args.legend)) {
Expand Down Expand Up @@ -3008,7 +2956,6 @@ MG.button_layout = function(target) {
}
});
} else if (args.missing_is_hidden
&& d[args.y_accessor] == 0
&& d['_missing']) {
//disable rollovers for hidden parts of the line
//recall that hidden parts are missing data ranges and possibly also
Expand Down Expand Up @@ -4587,7 +4534,7 @@ function process_line(args) {

time_frame = mg_get_time_frame((upto-from)/1000);

if (time_frame == 'default' && args.missing_is_hidden_accessor == null){
if (time_frame == 'default' && args.missing_is_hidden_accessor == null) {
for (var d = new Date(from); d <= upto; d.setDate(d.getDate() + 1)) {
var o = {};
d.setHours(0, 0, 0, 0);
Expand Down Expand Up @@ -4617,7 +4564,6 @@ function process_line(args) {
//if the data point has, say, a 'missing' attribute set, just set its
//y-value to 0 and identify it internally as missing
else if (existing_o[args.missing_is_hidden_accessor]) {
existing_o[args.y_accessor] = 0;
existing_o['_missing'] = true;
processed_data.push(existing_o);
}
Expand All @@ -4628,10 +4574,9 @@ function process_line(args) {
}
}
else {
for (var j=0; j<args.data[i].length; j+=1){
o=MG.clone(args.data[i][j]);
o['_missing']=args.data[i][j][args.missing_is_hidden_accessor];
console.log(o[args.x_accessor], o['_missing']);
for (var j = 0; j < args.data[i].length; j += 1) {
o = MG.clone(args.data[i][j]);
o['_missing'] = args.data[i][j][args.missing_is_hidden_accessor];
processed_data.push(o);
}
}
Expand Down
6 changes: 3 additions & 3 deletions dist/metricsgraphics.min.js
View file

Large diffs are not rendered by default.

98 changes: 25 additions & 73 deletions src/js/charts/line.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 0 additions & 5 deletions src/js/common/y_axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,6 @@ function y_axis(args) {
max_y;

args.scalefns.yf = function(di) {
//since we want to show actual zeros when missing_is_hidden is on
if(args.missing_is_hidden && di['_missing']) {
return args.scales.Y(di[args.y_accessor]) + 42.1234;
}

return args.scales.Y(di[args.y_accessor]);
};

Expand Down
10 changes: 4 additions & 6 deletions src/js/misc/process.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function process_line(args) {

time_frame = mg_get_time_frame((upto-from)/1000);

if (time_frame == 'default' && args.missing_is_hidden_accessor == null){
if (time_frame == 'default' && args.missing_is_hidden_accessor == null) {
for (var d = new Date(from); d <= upto; d.setDate(d.getDate() + 1)) {
var o = {};
d.setHours(0, 0, 0, 0);
Expand Down Expand Up @@ -146,7 +146,6 @@ function process_line(args) {
//if the data point has, say, a 'missing' attribute set, just set its
//y-value to 0 and identify it internally as missing
else if (existing_o[args.missing_is_hidden_accessor]) {
existing_o[args.y_accessor] = 0;
existing_o['_missing'] = true;
processed_data.push(existing_o);
}
Expand All @@ -157,10 +156,9 @@ function process_line(args) {
}
}
else {
for (var j=0; j<args.data[i].length; j+=1){
o=MG.clone(args.data[i][j]);
o['_missing']=args.data[i][j][args.missing_is_hidden_accessor];
console.log(o[args.x_accessor], o['_missing']);
for (var j = 0; j < args.data[i].length; j += 1) {
o = MG.clone(args.data[i][j]);
o['_missing'] = args.data[i][j][args.missing_is_hidden_accessor];
processed_data.push(o);
}
}
Expand Down

0 comments on commit c14d422

Please sign in to comment.