diff --git a/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
index 2fd120a..bf9732f 100644
--- a/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
+++ b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
@@ -64,7 +64,8 @@ Example:
width: 100%;
height: 70%;
min-height: 500px;
- background: #ddd;
+ background: #ffffff;
+ position: relative;
}
:host ::content text {
@@ -107,8 +108,19 @@ Example:
:host ::content .children:hover rect.child {
fill: #bbb;
}
+
+ :host ::content .spinner {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 160px;
+ height: 160px;
+ margin-left: -80px;
+ margin-top: -80px;
+
+ }
</style>
- <div id="treemap_placeholder"></div>
+ <div id="treemap_placeholder"><img class="spinner" src="spin.svg" /></div>
<base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
</template>
@@ -182,7 +194,15 @@ Example:
},
presentData: function(){
- build(this.map, "treemap_placeholder");
+ var me = this;
+ var xyz = function(url) {
+ me.selectResource(url);
+ }
+ build(this.map, "treemap_placeholder", xyz);
+ },
+
+ selectResource: function(url) {
+ this._component.fire("datasetexplorer-datalet_data-url", { url: url });
}
};
diff --git a/datalets/datasetexplorer-datalet/js/buildtreemap.js b/datalets/datasetexplorer-datalet/js/buildtreemap.js
index 2f9e85a..b575e0d 100644
--- a/datalets/datasetexplorer-datalet/js/buildtreemap.js
+++ b/datalets/datasetexplorer-datalet/js/buildtreemap.js
@@ -2,14 +2,12 @@
* Created by Utente on 17/07/2015.
*/
-function build(root, place_holder) {
+function build(root, place_holder, select_listener) {
var plwidth = $("#" + place_holder).width(),
plheight = $("#" + place_holder).height();
var margin = {top: 20, right: 0, bottom: 0, left: 0},
- //width = 960,
- //height = 500 - margin.top - margin.bottom,
width = plwidth,
height = plheight - margin.top - margin.bottom,
formatNumber = d3.format(",d"),
@@ -17,6 +15,7 @@ function build(root, place_holder) {
var x = d3.scale.linear()
.domain([0, width])
+ .domain([0, width])
.range([0, width]);
var y = d3.scale.linear()
@@ -29,7 +28,10 @@ function build(root, place_holder) {
.ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
.round(false);
- var svg = d3.select("#" + place_holder).append("svg")
+ d3.select("#" + place_holder).selectAll('*').remove();
+
+ var svg = d3.select("#" + place_holder)
+ .append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.style("margin-left", -margin.left + "px")
@@ -102,7 +104,7 @@ function build(root, place_holder) {
}
}
- function display(d) {0
+ function display(d) {
grandparent
.datum(d.parent)
.on("click", transition)
@@ -135,9 +137,7 @@ function build(root, place_holder) {
g.append("text")
.attr("dy", ".75em")
- .text(function(d) { return (d._children) ? d.name : ''; })
- .call(text)
- ;
+ .call(text);
function transition(d) {
if (transitioning || !d) return;
@@ -160,7 +160,7 @@ function build(root, place_holder) {
svg.style("shape-rendering", null);
// Draw child nodes on top of parent nodes.
- svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });
+ svg.selectAll(".depth").sort(function(a, b) { return b.depth - a.depth; });
// Fade-in entering text.
g2.selectAll("text").style("fill-opacity", 0);
@@ -179,6 +179,11 @@ function build(root, place_holder) {
}
if (!d._children[0]._children) {
+ //grandparent.dispatchEvent(new CustomEvent('select', { detail: d._children[0].name }));
+ if (select_listener) {
+ select_listener(d._children[0].name);
+ }
+
var dataurl = d._children[0].name;
var pageurl = dataurl.replace(/\/download\/.*/, '');
dataletContainer = svg
@@ -194,9 +199,69 @@ function build(root, place_holder) {
}
function text(text) {
- text.attr("x", function(d) { return x(d.x) + 6; })
- .attr("y", function(d) { return y(d.y) + 6; })
- ;
+ text
+ .attr("x", function(d) { return x(d.x) + 6; })
+ .attr("y", function(d) { return y(d.y) + 6; });
+ text.call(wrap);
+ }
+
+ function wrap(d) {
+ var wwidth = width;
+ var hheight = height;
+
+ d.each(function(){
+ var text = d3.select(this),
+ d = text[0][0].__data__,
+ words = d.name.trim().split(/\s+|\./).reverse(),
+ word = words.pop(),
+ line = [word],
+ lineNumber = 0,
+ lineHeight = 1.1, // ems
+ x = parseFloat(text.attr("x")),
+ y = parseFloat(text.attr("y")),
+ dy = parseFloat(text.attr("dy"));
+ text.selectAll("tspan").remove();
+
+ var fx = d3.scale.linear()
+ .domain([d.parent.x, d.parent.x + d.parent.dx])
+ .range([0, wwidth]);
+
+ var fy = d3.scale.linear()
+ .domain([d.parent.y, d.parent.y + d.parent.dy])
+ .range([0, hheight]);
+
+ var tspan = text
+ .text(null)
+ .append("tspan")
+ .attr("x", fx(d.x) + 6)
+ .attr("y", fy(d.y) + 6)
+ .attr("dy", lineNumber++ * lineHeight + dy + "em");
+ var width = fx(d.x + d.dx) - fx(d.x) - 12;
+ var height = fy(d.y + d.dy) - fy(d.y) - 6;
+
+ while (word = words.pop()) {
+ line.push(word);
+ tspan.text(line.join(" "));
+ if (tspan.node().getComputedTextLength() > width) {
+ line.pop();
+ tspan.text(line.join(" "));
+
+ line = [word];
+
+ tspan = text
+ .append("tspan")
+ .attr("x", fx(d.x) + 6)
+ .attr("y", fy(d.y) + 6)
+ .attr("dy", lineNumber++ * lineHeight + dy + "em")
+ .text(word);
+
+ if (text.node().offsetHeight > height) {
+ tspan.remove();
+ break;
+ }
+ }
+ }
+ });
}
function rect(rect) {
diff --git a/datalets/datasetexplorer-datalet/spin.svg b/datalets/datasetexplorer-datalet/spin.svg
new file mode 100644
index 0000000..5b931d7
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/spin.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-spin"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g transform="translate(50 50)"><g transform="rotate(0) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(45) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.12s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.12s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(90) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.25s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.25s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(135) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.37s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.37s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(180) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.5s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.5s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(225) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.62s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.62s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(270) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.75s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.75s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(315) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.87s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.87s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g></g></svg>
\ No newline at end of file