mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
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:
commit
ffa29b3909
@ -49,10 +49,9 @@
|
|||||||
"d3-cloud": "^1.2.1",
|
"d3-cloud": "^1.2.1",
|
||||||
"d3-sankey": "^0.2.1",
|
"d3-sankey": "^0.2.1",
|
||||||
"d3-tip": "^0.6.7",
|
"d3-tip": "^0.6.7",
|
||||||
"d3.layout.cloud": "^1.2.0",
|
|
||||||
"datamaps": "^0.4.4",
|
"datamaps": "^0.4.4",
|
||||||
"datatables": "^1.10.9",
|
|
||||||
"datatables-bootstrap3-plugin": "^0.4.0",
|
"datatables-bootstrap3-plugin": "^0.4.0",
|
||||||
|
"datatables.net": "^1.10.11",
|
||||||
"exports-loader": "^0.6.3",
|
"exports-loader": "^0.6.3",
|
||||||
"font-awesome": "^4.5.0",
|
"font-awesome": "^4.5.0",
|
||||||
"gridster": "^0.5.6",
|
"gridster": "^0.5.6",
|
||||||
|
@ -10,11 +10,15 @@
|
|||||||
fill: #000;
|
fill: #000;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.sunburst .path-percent {
|
.sunburst .path-abs-percent {
|
||||||
font-size: 4em;
|
font-size: 3.5em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.sunburst .path-cond-percent {
|
||||||
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
.sunburst .path-metrics {
|
.sunburst .path-metrics {
|
||||||
font-size: 1.75em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
.sunburst .path-ratio {
|
.sunburst .path-ratio {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
@ -31,9 +35,15 @@
|
|||||||
.dashboard .sunburst text {
|
.dashboard .sunburst text {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
.dashboard .sunburst .path-percent {
|
.dashboard .sunburst .path-abs-percent {
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
}
|
}
|
||||||
|
.dashboard .sunburst .path-cond-percent {
|
||||||
|
font-size: 1.75em;
|
||||||
|
}
|
||||||
.dashboard .sunburst .path-metrics {
|
.dashboard .sunburst .path-metrics {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
.dashboard .sunburst .path-ratio {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
@ -43,8 +43,8 @@ function sunburstVis(slice) {
|
|||||||
return Math.sqrt(d.y + d.dy);
|
return Math.sqrt(d.y + d.dy);
|
||||||
});
|
});
|
||||||
|
|
||||||
var f = d3.format(".3s");
|
var formatNum = d3.format(".3s");
|
||||||
var fp = d3.format(".3p");
|
var formatPerc = d3.format(".3p");
|
||||||
|
|
||||||
container.select("svg").remove();
|
container.select("svg").remove();
|
||||||
|
|
||||||
@ -145,28 +145,44 @@ function sunburstVis(slice) {
|
|||||||
// Fade all but the current sequence, and show it in the breadcrumb trail.
|
// Fade all but the current sequence, and show it in the breadcrumb trail.
|
||||||
function mouseenter(d) {
|
function mouseenter(d) {
|
||||||
|
|
||||||
var percentage = (d.m1 / totalSize).toPrecision(3);
|
var sequenceArray = getAncestors(d);
|
||||||
var percentageString = fp(percentage);
|
var parentOfD = sequenceArray[sequenceArray.length - 2] || null;
|
||||||
var metricsMatch = Math.abs(d.m1 - d.m2) < 0.000001;
|
|
||||||
|
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.selectAll("*").remove();
|
||||||
|
|
||||||
gMiddleText.append("text")
|
gMiddleText.append("text")
|
||||||
.attr("class", "path-percent")
|
.attr("class", "path-abs-percent")
|
||||||
.attr("y", "-10")
|
.attr("y", yOffsets[offsetIndex++])
|
||||||
.text(percentageString);
|
.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")
|
gMiddleText.append("text")
|
||||||
.attr("class", "path-metrics")
|
.attr("class", "path-metrics")
|
||||||
.attr("y", "25")
|
.attr("y", yOffsets[offsetIndex++])
|
||||||
.text("m1: " + f(d.m1) + (metricsMatch ? "" : ", m2: " + f(d.m2)));
|
.text("m1: " + formatNum(d.m1) + (metricsMatch ? "" : ", m2: " + formatNum(d.m2)));
|
||||||
|
|
||||||
gMiddleText.append("text")
|
gMiddleText.append("text")
|
||||||
.attr("class", "path-ratio")
|
.attr("class", "path-ratio")
|
||||||
.attr("y", "50")
|
.attr("y", yOffsets[offsetIndex++])
|
||||||
.text("m2/m1: " + fp(d.m2 / d.m1));
|
.text((metricsMatch ? "" : ("m2/m1: " + formatPerc(d.m2 / d.m1))) );
|
||||||
|
|
||||||
var sequenceArray = getAncestors(d);
|
|
||||||
|
|
||||||
// Reset and fade all the segments.
|
// Reset and fade all the segments.
|
||||||
arcs.selectAll("path")
|
arcs.selectAll("path")
|
||||||
@ -183,7 +199,7 @@ function sunburstVis(slice) {
|
|||||||
.style("stroke-width", "2px")
|
.style("stroke-width", "2px")
|
||||||
.style("stroke", "#000");
|
.style("stroke", "#000");
|
||||||
|
|
||||||
updateBreadcrumbs(sequenceArray, percentageString);
|
updateBreadcrumbs(sequenceArray, absolutePercString);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Restore everything to full opacity when moving off the visualization.
|
// Restore everything to full opacity when moving off the visualization.
|
||||||
|
Loading…
Reference in New Issue
Block a user