Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Luigi Serra
2 parents 33ee61fd b0fbbe35
Showing 3 changed files with 101 additions and 15 deletions
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
datalets/datasetexplorer-datalet/js/buildtreemap.js
datalets/datasetexplorer-datalet/spin.svg
@@ -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 });
             }
         };
@@ -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) {
+<?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