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

Merge pull request #219 from airbnb/chris/sunburst-conditional-percent 

Add 'Percent of previous' to sunburst vis. Appease npm warnings for data tables and d3.layout.cloud
This commit is contained in:
Maxime Beauchemin 2016-03-31 23:23:27 -07:00
parent ee4e3c1b98 b87d8a0fbf
commit ffa29b3909
3 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
caravel/assets/package.json
View File

@ -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",

18
caravel/assets/visualizations/sunburst.css
View File

@ -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;
}

46
caravel/assets/visualizations/sunburst.js
View File

@ -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 parent");
}
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.