pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[big_number*] fixing a few bugs (#342)

This commit is contained in:
Maxime Beauchemin 2016-04-13 17:27:00 -07:00
parent a76ccf462d
commit 21b3a5f199
1 changed files with 57 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
caravel/assets/visualizations/big_number.js
View File

@ -32,10 +32,10 @@ function bigNumberVis(slice) {
var compare_suffix = ' ' + json.compare_suffix; var compare_suffix = ' ' + json.compare_suffix;
var v_compare = null; var v_compare = null;
var v = null; var v = null;
if (data.length > 1) { if (fd.viz_type === 'big_number') {
v = data[data.length - 1][1]; v = data[data.length - 1][1];
} else { } else {
v = data[data.length - 1][0]; v = data[0][0];
} }
if (json.compare_lag > 0) { if (json.compare_lag > 0) {
var pos = data.length - (json.compare_lag + 1); var pos = data.length - (json.compare_lag + 1);
@ -55,22 +55,37 @@ function bigNumberVis(slice) {
var scale_y = d3.scale.linear().domain(value_ext).range([height - (margin), 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 colorRange = [d3.hsl(0, 1, 0.3), d3.hsl(120, 1, 0.3)];
var scale_color = d3.scale var scale_color = d3.scale
.linear().domain(color_range) .linear().domain(color_range)
.interpolate(d3.interpolateHsl) .interpolate(d3.interpolateHsl)
.range(colorRange).clamp(true); .range(colorRange).clamp(true);
var line = d3.svg.line() var line = d3.svg.line()
.x(function (d) { .x(function (d) {
return scale_x(d[0]); return scale_x(d[0]);
}) })
.y(function (d) { .y(function (d) {
return scale_y(d[1]); return scale_y(d[1]);
}) })
.interpolate("basis"); .interpolate("basis");
//Drawing trend line
var g = svg.append('g'); var g = svg.append('g');
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');
g.append('path') if (fd.viz_type === 'big_number') {
//Drawing trend line
g.append('path')
.attr('d', function (d) { .attr('d', function (d) {
return line(data); return line(data);
}) })
@ -80,31 +95,17 @@ function bigNumberVis(slice) {
.attr('stroke-linecap', "round") .attr('stroke-linecap', "round")
.attr('stroke', "grey"); .attr('stroke', "grey");
g = svg.append('g') g = svg.append('g')
.attr('class', 'digits') .attr('class', 'digits')
.attr('opacity', 1); .attr('opacity', 1);
var y = height / 2; if (v_compare !== null) {
if (v_compare !== null) { y = (height / 8) * 3;
y = (height / 8) * 3; }
}
//Printing big number //Printing big number subheader text
g.append('text') if (json.subheader !== null) {
.attr('x', width / 2) g.append('text')
.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')
.attr('x', width / 2) .attr('x', width / 2)
.attr('y', y + d3.min([height, width]) / 4.5) .attr('y', y + d3.min([height, width]) / 4.5)
.text(json.subheader) .text(json.subheader)
@ -113,13 +114,13 @@ function bigNumberVis(slice) {
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.attr('fill', c) .attr('fill', c)
.attr('stroke', c); .attr('stroke', c);
} }
var c = scale_color(v_compare); var c = scale_color(v_compare);
//Printing compare % //Printing compare %
if (v_compare !== null) { if (v_compare !== null) {
g.append('text') g.append('text')
.attr('x', width / 2) .attr('x', width / 2)
.attr('y', (height / 16) * 12) .attr('y', (height / 16) * 12)
.text(fp(v_compare) + compare_suffix) .text(fp(v_compare) + compare_suffix)
@ -127,47 +128,48 @@ function bigNumberVis(slice) {
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.attr('fill', c) .attr('fill', c)
.attr('stroke', c); .attr('stroke', c);
} }
var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0); var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
g = g_axis.append('g'); g = g_axis.append('g');
var x_axis = d3.svg.axis() var x_axis = d3.svg.axis()
.scale(scale_x) .scale(scale_x)
.orient('bottom') .orient('bottom')
.ticks(4) .ticks(4)
.tickFormat(px.formatDate); .tickFormat(px.formatDate);
g.call(x_axis); g.call(x_axis);
g.attr('transform', 'translate(0,' + (height - margin) + ')'); g.attr('transform', 'translate(0,' + (height - margin) + ')');
g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)'); g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
var y_axis = d3.svg.axis() var y_axis = d3.svg.axis()
.scale(scale_y) .scale(scale_y)
.orient('left') .orient('left')
.tickFormat(d3.format(fd.y_axis_format)) .tickFormat(d3.format(fd.y_axis_format))
.tickValues(value_ext); .tickValues(value_ext);
g.call(y_axis); g.call(y_axis);
g.selectAll('text') g.selectAll('text')
.style('text-anchor', 'end') .style('text-anchor', 'end')
.attr('y', '-7') .attr('y', '-7')
.attr('x', '-4'); .attr('x', '-4');
g.selectAll("text") g.selectAll("text")
.style('font-size', '10px'); .style('font-size', '10px');
div.on('mouseover', function (d) { div.on('mouseover', function (d) {
var div = d3.select(this); var div = d3.select(this);
div.select('path').transition().duration(500).attr('opacity', 1) 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.digits').transition().duration(500).attr('opacity', 0.1);
div.select('g.axis').transition().duration(500).attr('opacity', 1); div.select('g.axis').transition().duration(500).attr('opacity', 1);
}) })
.on('mouseout', function (d) { .on('mouseout', function (d) {
var div = d3.select(this); var div = d3.select(this);
div.select('path').transition().duration(500).attr('opacity', 0.5) 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.digits').transition().duration(500).attr('opacity', 1);
div.select('g.axis').transition().duration(500).attr('opacity', 0); div.select('g.axis').transition().duration(500).attr('opacity', 0);
}); });
}
slice.done(payload); slice.done(payload);
}); });
} }