mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
Add 'Percent of previous' to sunburst vis. Appease npm warnings for data tables and d3-sankey.
This commit is contained in:
parent
167fb64d0c
commit
0b3e2e00cc
@ -49,10 +49,9 @@
|
||||
"d3-cloud": "^1.2.1",
|
||||
"d3-sankey": "^0.2.1",
|
||||
"d3-tip": "^0.6.7",
|
||||
"d3.layout.cloud": "^1.2.0",
|
||||
"datamaps": "^0.4.4",
|
||||
"datatables": "^1.10.9",
|
||||
"datatables-bootstrap3-plugin": "^0.4.0",
|
||||
"datatables.net": "^1.10.11",
|
||||
"exports-loader": "^0.6.3",
|
||||
"font-awesome": "^4.5.0",
|
||||
"gridster": "^0.5.6",
|
||||
|
@ -10,11 +10,15 @@
|
||||
fill: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.sunburst .path-percent {
|
||||
font-size: 4em;
|
||||
.sunburst .path-abs-percent {
|
||||
font-size: 3.5em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.sunburst .path-cond-percent {
|
||||
font-size: 2em;
|
||||
}
|
||||
.sunburst .path-metrics {
|
||||
font-size: 1.75em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.sunburst .path-ratio {
|
||||
font-size: 1.2em;
|
||||
@ -31,9 +35,15 @@
|
||||
.dashboard .sunburst text {
|
||||
font-size: 1em;
|
||||
}
|
||||
.dashboard .sunburst .path-percent {
|
||||
.dashboard .sunburst .path-abs-percent {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.dashboard .sunburst .path-cond-percent {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
.dashboard .sunburst .path-metrics {
|
||||
font-size: 1em;
|
||||
}
|
||||
.dashboard .sunburst .path-ratio {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
@ -43,8 +43,8 @@ function sunburstVis(slice) {
|
||||
return Math.sqrt(d.y + d.dy);
|
||||
});
|
||||
|
||||
var f = d3.format(".3s");
|
||||
var fp = d3.format(".3p");
|
||||
var formatNum = d3.format(".3s");
|
||||
var formatPerc = d3.format(".3p");
|
||||
|
||||
container.select("svg").remove();
|
||||
|
||||
@ -145,28 +145,44 @@ function sunburstVis(slice) {
|
||||
// Fade all but the current sequence, and show it in the breadcrumb trail.
|
||||
function mouseenter(d) {
|
||||
|
||||
var percentage = (d.m1 / totalSize).toPrecision(3);
|
||||
var percentageString = fp(percentage);
|
||||
var metricsMatch = Math.abs(d.m1 - d.m2) < 0.000001;
|
||||
var sequenceArray = getAncestors(d);
|
||||
var parentOfD = sequenceArray[sequenceArray.length - 2] || null;
|
||||
|
||||
var absolutePercentage = (d.m1 / totalSize).toPrecision(3);
|
||||
var conditionalPercentage = parentOfD ? (d.m1 / parentOfD.m1).toPrecision(3) : null;
|
||||
|
||||
var absolutePercString = formatPerc(absolutePercentage);
|
||||
var conditionalPercString = parentOfD ? formatPerc(conditionalPercentage) : "";
|
||||
|
||||
var yOffsets = ["-25", "7", "35", "60"]; // 3 levels of text if inner-most level, 4 otherwise
|
||||
var offsetIndex = 0;
|
||||
|
||||
// If metrics match, assume we are coloring by category
|
||||
var metricsMatch = Math.abs(d.m1 - d.m2) < 0.00001;
|
||||
|
||||
gMiddleText.selectAll("*").remove();
|
||||
|
||||
gMiddleText.append("text")
|
||||
.attr("class", "path-percent")
|
||||
.attr("y", "-10")
|
||||
.text(percentageString);
|
||||
.attr("class", "path-abs-percent")
|
||||
.attr("y", yOffsets[offsetIndex++])
|
||||
.text(absolutePercString + " of total");
|
||||
|
||||
if (conditionalPercString) {
|
||||
gMiddleText.append("text")
|
||||
.attr("class", "path-cond-percent")
|
||||
.attr("y", yOffsets[offsetIndex++])
|
||||
.text(conditionalPercString + " of previous");
|
||||
}
|
||||
|
||||
gMiddleText.append("text")
|
||||
.attr("class", "path-metrics")
|
||||
.attr("y", "25")
|
||||
.text("m1: " + f(d.m1) + (metricsMatch ? "" : ", m2: " + f(d.m2)));
|
||||
.attr("y", yOffsets[offsetIndex++])
|
||||
.text("m1: " + formatNum(d.m1) + (metricsMatch ? "" : ", m2: " + formatNum(d.m2)));
|
||||
|
||||
gMiddleText.append("text")
|
||||
.attr("class", "path-ratio")
|
||||
.attr("y", "50")
|
||||
.text("m2/m1: " + fp(d.m2 / d.m1));
|
||||
|
||||
var sequenceArray = getAncestors(d);
|
||||
.attr("y", yOffsets[offsetIndex++])
|
||||
.text((metricsMatch ? "" : ("m2/m1: " + formatPerc(d.m2 / d.m1))) );
|
||||
|
||||
// Reset and fade all the segments.
|
||||
arcs.selectAll("path")
|
||||
@ -183,7 +199,7 @@ function sunburstVis(slice) {
|
||||
.style("stroke-width", "2px")
|
||||
.style("stroke", "#000");
|
||||
|
||||
updateBreadcrumbs(sequenceArray, percentageString);
|
||||
updateBreadcrumbs(sequenceArray, absolutePercString);
|
||||
}
|
||||
|
||||
// Restore everything to full opacity when moving off the visualization.
|
||||
|
Loading…
Reference in New Issue
Block a user