Skip to content

Commit

Permalink
[big_number*] fixing a few bugs (#342)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistercrunch
mistercrunch committed Apr 14, 2016
1 parent a76ccf4 commit 21b3a5f
Showing 1 changed file with 58 additions and 56 deletions.
114 changes: 58 additions & 56 deletions caravel/assets/visualizations/big_number.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ function bigNumberVis(slice) {
var compare_suffix = ' ' + json.compare_suffix;
var v_compare = null;
var v = null;
if (data.length > 1) {
v = data[data.length - 1][1];
if (fd.viz_type === 'big_number') {
v = data[data.length - 1][1];
} else {
v = data[data.length - 1][0];
v = data[0][0];
}
if (json.compare_lag > 0) {
var pos = data.length - (json.compare_lag + 1);
Expand All @@ -55,22 +55,37 @@ function bigNumberVis(slice) {
var scale_y = d3.scale.linear().domain(value_ext).range([height - (margin), margin]);
var colorRange = [d3.hsl(0, 1, 0.3), d3.hsl(120, 1, 0.3)];
var scale_color = d3.scale
.linear().domain(color_range)
.interpolate(d3.interpolateHsl)
.range(colorRange).clamp(true);
.linear().domain(color_range)
.interpolate(d3.interpolateHsl)
.range(colorRange).clamp(true);
var line = d3.svg.line()
.x(function (d) {
return scale_x(d[0]);
})
.y(function (d) {
return scale_y(d[1]);
})
.interpolate("basis");
.x(function (d) {
return scale_x(d[0]);
})
.y(function (d) {
return scale_y(d[1]);
})
.interpolate("basis");

//Drawing trend line
var g = svg.append('g');

g.append('path')
var y = height / 2;
//Printing big number
g.append('text')
.attr('x', width / 2)
.attr('y', y)
.attr('class', 'big')
.attr('alignment-baseline', 'middle')
.attr('id', 'bigNumber')
.style('font-weight', 'bold')
.style('cursor', 'pointer')
.text(f(v))
.style('font-size', d3.min([height, width]) / 3.5)
.attr('fill', 'white');

if (fd.viz_type === 'big_number') {
//Drawing trend line

g.append('path')
.attr('d', function (d) {
return line(data);
})
Expand All @@ -80,31 +95,17 @@ function bigNumberVis(slice) {
.attr('stroke-linecap', "round")
.attr('stroke', "grey");

g = svg.append('g')
g = svg.append('g')
.attr('class', 'digits')
.attr('opacity', 1);

var y = height / 2;
if (v_compare !== null) {
y = (height / 8) * 3;
}
if (v_compare !== null) {
y = (height / 8) * 3;
}

//Printing big number
g.append('text')
.attr('x', width / 2)
.attr('y', y)
.attr('class', 'big')
.attr('alignment-baseline', 'middle')
.attr('id', 'bigNumber')
.style('font-weight', 'bold')
.style('cursor', 'pointer')
.text(f(v))
.style('font-size', d3.min([height, width]) / 3.5)
.attr('fill', 'white');

//Printing big number subheader text
if (json.subheader !== null) {
g.append('text')
//Printing big number subheader text
if (json.subheader !== null) {
g.append('text')
.attr('x', width / 2)
.attr('y', y + d3.min([height, width]) / 4.5)
.text(json.subheader)
Expand All @@ -113,61 +114,62 @@ function bigNumberVis(slice) {
.style('text-anchor', 'middle')
.attr('fill', c)
.attr('stroke', c);
}
}

var c = scale_color(v_compare);
var c = scale_color(v_compare);

//Printing compare %
if (v_compare !== null) {
g.append('text')
//Printing compare %
if (v_compare !== null) {
g.append('text')
.attr('x', width / 2)
.attr('y', (height / 16) * 12)
.text(fp(v_compare) + compare_suffix)
.style('font-size', d3.min([height, width]) / 8)
.style('text-anchor', 'middle')
.attr('fill', c)
.attr('stroke', c);
}
}

var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
g = g_axis.append('g');
var x_axis = d3.svg.axis()
var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
g = g_axis.append('g');
var x_axis = d3.svg.axis()
.scale(scale_x)
.orient('bottom')
.ticks(4)
.tickFormat(px.formatDate);
g.call(x_axis);
g.attr('transform', 'translate(0,' + (height - margin) + ')');
g.call(x_axis);
g.attr('transform', 'translate(0,' + (height - margin) + ')');

g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
var y_axis = d3.svg.axis()
g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
var y_axis = d3.svg.axis()
.scale(scale_y)
.orient('left')
.tickFormat(d3.format(fd.y_axis_format))
.tickValues(value_ext);
g.call(y_axis);
g.selectAll('text')
g.call(y_axis);
g.selectAll('text')
.style('text-anchor', 'end')
.attr('y', '-7')
.attr('x', '-4');

g.selectAll("text")
g.selectAll("text")
.style('font-size', '10px');

div.on('mouseover', function (d) {
div.on('mouseover', function (d) {
var div = d3.select(this);
div.select('path').transition().duration(500).attr('opacity', 1)
.style('stroke-width', '2px');
.style('stroke-width', '2px');
div.select('g.digits').transition().duration(500).attr('opacity', 0.1);
div.select('g.axis').transition().duration(500).attr('opacity', 1);
})
.on('mouseout', function (d) {
var div = d3.select(this);
div.select('path').transition().duration(500).attr('opacity', 0.5)
.style('stroke-width', '5px');
.style('stroke-width', '5px');
div.select('g.digits').transition().duration(500).attr('opacity', 1);
div.select('g.axis').transition().duration(500).attr('opacity', 0);
});
}
slice.done(payload);
});
}
Expand Down

0 comments on commit 21b3a5f

Please sign in to comment.