mirror of
https://github.com/apache/superset.git
synced 2024-09-12 16:49:40 -04:00
[big_number*] fixing a few bugs (#342)
This commit is contained in:
parent
a76ccf462d
commit
21b3a5f199
@ -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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user