2015-12-20 11:33:08 -05:00
|
|
|
px.registerViz('big_number', function(slice) {
|
|
|
|
var data_attribute = slice.data;
|
|
|
|
var div = d3.select(slice.selector);
|
2015-10-02 20:08:01 -04:00
|
|
|
|
2015-12-20 11:33:08 -05:00
|
|
|
function render() {
|
|
|
|
d3.json(slice.data.json_endpoint, function(error, payload){
|
2015-10-01 20:58:47 -04:00
|
|
|
//Define the percentage bounds that define color from red to green
|
|
|
|
if (error != null){
|
2015-12-20 11:33:08 -05:00
|
|
|
slice.error(error.responseText);
|
2015-10-01 20:58:47 -04:00
|
|
|
return '';
|
|
|
|
}
|
2015-12-17 16:49:36 -05:00
|
|
|
json = payload.data;
|
2015-10-01 20:58:47 -04:00
|
|
|
var color_range = [-1, 1];
|
|
|
|
var compare_pos = -23
|
|
|
|
var target_url = 'd3js.org';
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
var f = d3.format('.3s');
|
|
|
|
var fp = d3.format('+.1%');
|
2015-12-20 11:33:08 -05:00
|
|
|
var width = slice.container.width();
|
|
|
|
var height = slice.container.height() - 30;
|
2015-10-01 20:58:47 -04:00
|
|
|
var svg = div.append('svg');
|
|
|
|
svg.attr("width", width);
|
|
|
|
svg.attr("height", height);
|
|
|
|
data = json.data;
|
|
|
|
var compare_suffix = ' ' + json.compare_suffix;
|
|
|
|
var v_compare = null;
|
|
|
|
var v = data[data.length - 1][1];
|
|
|
|
if (json.compare_lag > 0){
|
|
|
|
pos = data.length - (json.compare_lag + 1);
|
|
|
|
if (pos >= 0){
|
|
|
|
v_compare = (v / data[pos][1]) - 1;
|
|
|
|
}
|
2015-09-30 16:01:38 -04:00
|
|
|
}
|
2015-10-01 20:58:47 -04:00
|
|
|
var date_ext = d3.extent(data, function(d) { return d[0]; });
|
|
|
|
var value_ext = d3.extent(data, function(d) { return d[1]; });
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
var margin = 20;
|
|
|
|
var scale_x = d3.time.scale.utc().domain(date_ext).range([margin, width - margin]);
|
|
|
|
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);
|
|
|
|
var line = d3.svg.line()
|
|
|
|
.x(function(d) { return scale_x(d[0]); })
|
|
|
|
.y(function(d) { return scale_y(d[1]); })
|
|
|
|
.interpolate("basis");
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
//Drawing trend line
|
|
|
|
var g = svg.append('g');
|
|
|
|
var path = g.append('path')
|
|
|
|
.attr('d', function(d) { return line(data); })
|
|
|
|
.attr('stroke-width', 5)
|
|
|
|
.attr('opacity', 0.5)
|
|
|
|
.attr('fill', "none")
|
|
|
|
.attr('stroke-linecap',"round")
|
|
|
|
.attr('stroke', "grey");
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
var g = svg.append('g')
|
|
|
|
.attr('class', 'digits')
|
|
|
|
.attr('opacity', 1);
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
var y = height / 2;
|
|
|
|
if (v_compare != null) {
|
|
|
|
y = (height / 8) * 3;
|
|
|
|
}
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
//Printing big number
|
2015-09-30 16:01:38 -04:00
|
|
|
g.append('text')
|
2015-10-01 20:58:47 -04:00
|
|
|
.attr('x', width / 2)
|
2015-09-30 16:01:38 -04:00
|
|
|
.attr('y', y)
|
|
|
|
.attr('class', 'big')
|
|
|
|
.attr('alignment-baseline', 'middle')
|
|
|
|
.attr('id', 'bigNumber')
|
|
|
|
.style('font-weight', 'bold')
|
|
|
|
.style('cursor', 'pointer')
|
|
|
|
.text(f(v))
|
2015-10-01 20:58:47 -04:00
|
|
|
.style('font-size', d3.min([height, width]) / 3.5)
|
2015-09-30 16:01:38 -04:00
|
|
|
.attr('fill','white');
|
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
var c = scale_color(v_compare);
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
//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);
|
|
|
|
}
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
|
2015-09-30 16:01:38 -04:00
|
|
|
var g = g_axis.append('g');
|
|
|
|
var x_axis = d3.svg.axis()
|
|
|
|
.scale(scale_x)
|
|
|
|
.orient('bottom')
|
|
|
|
.ticks(4);
|
|
|
|
g.call(x_axis);
|
2015-10-01 20:58:47 -04:00
|
|
|
g.attr('transform', 'translate(0,' + (height - margin) + ')');
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
var g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
|
2015-09-30 16:01:38 -04:00
|
|
|
var y_axis = d3.svg.axis()
|
|
|
|
.scale(scale_y)
|
|
|
|
.orient('left')
|
|
|
|
.tickFormat(d3.format('.3s'))
|
|
|
|
.tickValues(value_ext);
|
|
|
|
g.call(y_axis);
|
|
|
|
g.selectAll('text')
|
2015-10-01 20:58:47 -04:00
|
|
|
.style('text-anchor', 'end')
|
2015-09-30 16:01:38 -04:00
|
|
|
.attr('y','-5')
|
|
|
|
.attr('x','1');
|
|
|
|
|
|
|
|
g.selectAll("text")
|
2015-10-01 20:58:47 -04:00
|
|
|
.style('font-size', '10px');
|
2015-09-30 16:01:38 -04:00
|
|
|
|
2015-10-01 20:58:47 -04:00
|
|
|
div.on('mouseover', function(d) {
|
2015-09-30 16:01:38 -04:00
|
|
|
var div = d3.select(this);
|
|
|
|
div.select('path').transition().duration(500).attr('opacity', 1)
|
|
|
|
.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);
|
|
|
|
})
|
2015-10-01 20:58:47 -04:00
|
|
|
.on('mouseout', function(d) {
|
2015-09-30 16:01:38 -04:00
|
|
|
var div = d3.select(this);
|
|
|
|
div.select('path').transition().duration(500).attr('opacity', 0.5)
|
|
|
|
.style('stroke-width', '5px');
|
|
|
|
div.select('g.digits').transition().duration(500).attr('opacity', 1);
|
|
|
|
div.select('g.axis').transition().duration(500).attr('opacity', 0);
|
|
|
|
});
|
2015-12-20 11:33:08 -05:00
|
|
|
slice.done(payload);
|
2015-09-30 16:01:38 -04:00
|
|
|
});
|
|
|
|
};
|
2015-10-02 20:08:01 -04:00
|
|
|
|
|
|
|
return {
|
|
|
|
render: render,
|
|
|
|
resize: render,
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|