WebCompDev / COMPONENTS

Commit 7d89b7435914c7b0212eb1631bb47fd5f5a0f02b

Authored by lucvic
1 parent 5790099a

Spinner + Word wrap

Inline Side-by-side
Showing 3 changed files with 101 additions and 15 deletions
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
  View file @7d89b74
... ... @@ -64,7 +64,8 @@ Example:
64 64 width: 100%;
65 65 height: 70%;
66 66 min-height: 500px;
67   - background: #ddd;
  67 + background: #ffffff;
  68 + position: relative;
68 69 }
69 70  
70 71 :host ::content text {
... ... @@ -107,8 +108,19 @@ Example:
107 108 :host ::content .children:hover rect.child {
108 109 fill: #bbb;
109 110 }
  111 +
  112 + :host ::content .spinner {
  113 + position: absolute;
  114 + left: 50%;
  115 + top: 50%;
  116 + width: 160px;
  117 + height: 160px;
  118 + margin-left: -80px;
  119 + margin-top: -80px;
  120 +
  121 + }
110 122 </style>
111   - <div id="treemap_placeholder"></div>
  123 + <div id="treemap_placeholder"><img class="spinner" src="spin.svg" /></div>
112 124 <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
113 125 </template>
114 126  
... ... @@ -182,7 +194,15 @@ Example:
182 194 },
183 195  
184 196 presentData: function(){
185   - build(this.map, "treemap_placeholder");
  197 + var me = this;
  198 + var xyz = function(url) {
  199 + me.selectResource(url);
  200 + }
  201 + build(this.map, "treemap_placeholder", xyz);
  202 + },
  203 +
  204 + selectResource: function(url) {
  205 + this._component.fire("datasetexplorer-datalet_data-url", { url: url });
186 206 }
187 207 };
188 208  
... ...
datalets/datasetexplorer-datalet/js/buildtreemap.js
  View file @7d89b74
... ... @@ -2,14 +2,12 @@
2 2 * Created by Utente on 17/07/2015.
3 3 */
4 4  
5   -function build(root, place_holder) {
  5 +function build(root, place_holder, select_listener) {
6 6  
7 7 var plwidth = $("#" + place_holder).width(),
8 8 plheight = $("#" + place_holder).height();
9 9  
10 10 var margin = {top: 20, right: 0, bottom: 0, left: 0},
11   - //width = 960,
12   - //height = 500 - margin.top - margin.bottom,
13 11 width = plwidth,
14 12 height = plheight - margin.top - margin.bottom,
15 13 formatNumber = d3.format(",d"),
... ... @@ -17,6 +15,7 @@ function build(root, place_holder) {
17 15  
18 16 var x = d3.scale.linear()
19 17 .domain([0, width])
  18 + .domain([0, width])
20 19 .range([0, width]);
21 20  
22 21 var y = d3.scale.linear()
... ... @@ -29,7 +28,10 @@ function build(root, place_holder) {
29 28 .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
30 29 .round(false);
31 30  
32   - var svg = d3.select("#" + place_holder).append("svg")
  31 + d3.select("#" + place_holder).selectAll('*').remove();
  32 +
  33 + var svg = d3.select("#" + place_holder)
  34 + .append("svg")
33 35 .attr("width", width + margin.left + margin.right)
34 36 .attr("height", height + margin.bottom + margin.top)
35 37 .style("margin-left", -margin.left + "px")
... ... @@ -102,7 +104,7 @@ function build(root, place_holder) {
102 104 }
103 105 }
104 106  
105   - function display(d) {0
  107 + function display(d) {
106 108 grandparent
107 109 .datum(d.parent)
108 110 .on("click", transition)
... ... @@ -135,9 +137,7 @@ function build(root, place_holder) {
135 137  
136 138 g.append("text")
137 139 .attr("dy", ".75em")
138   - .text(function(d) { return (d._children) ? d.name : ''; })
139   - .call(text)
140   - ;
  140 + .call(text);
141 141  
142 142 function transition(d) {
143 143 if (transitioning || !d) return;
... ... @@ -160,7 +160,7 @@ function build(root, place_holder) {
160 160 svg.style("shape-rendering", null);
161 161  
162 162 // Draw child nodes on top of parent nodes.
163   - svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });
  163 + svg.selectAll(".depth").sort(function(a, b) { return b.depth - a.depth; });
164 164  
165 165 // Fade-in entering text.
166 166 g2.selectAll("text").style("fill-opacity", 0);
... ... @@ -179,6 +179,11 @@ function build(root, place_holder) {
179 179 }
180 180  
181 181 if (!d._children[0]._children) {
  182 + //grandparent.dispatchEvent(new CustomEvent('select', { detail: d._children[0].name }));
  183 + if (select_listener) {
  184 + select_listener(d._children[0].name);
  185 + }
  186 +
182 187 var dataurl = d._children[0].name;
183 188 var pageurl = dataurl.replace(/\/download\/.*/, '');
184 189 dataletContainer = svg
... ... @@ -194,9 +199,69 @@ function build(root, place_holder) {
194 199 }
195 200  
196 201 function text(text) {
197   - text.attr("x", function(d) { return x(d.x) + 6; })
198   - .attr("y", function(d) { return y(d.y) + 6; })
199   - ;
  202 + text
  203 + .attr("x", function(d) { return x(d.x) + 6; })
  204 + .attr("y", function(d) { return y(d.y) + 6; });
  205 + text.call(wrap);
  206 + }
  207 +
  208 + function wrap(d) {
  209 + var wwidth = width;
  210 + var hheight = height;
  211 +
  212 + d.each(function(){
  213 + var text = d3.select(this),
  214 + d = text[0][0].__data__,
  215 + words = d.name.trim().split(/\s+|\./).reverse(),
  216 + word = words.pop(),
  217 + line = [word],
  218 + lineNumber = 0,
  219 + lineHeight = 1.1, // ems
  220 + x = parseFloat(text.attr("x")),
  221 + y = parseFloat(text.attr("y")),
  222 + dy = parseFloat(text.attr("dy"));
  223 + text.selectAll("tspan").remove();
  224 +
  225 + var fx = d3.scale.linear()
  226 + .domain([d.parent.x, d.parent.x + d.parent.dx])
  227 + .range([0, wwidth]);
  228 +
  229 + var fy = d3.scale.linear()
  230 + .domain([d.parent.y, d.parent.y + d.parent.dy])
  231 + .range([0, hheight]);
  232 +
  233 + var tspan = text
  234 + .text(null)
  235 + .append("tspan")
  236 + .attr("x", fx(d.x) + 6)
  237 + .attr("y", fy(d.y) + 6)
  238 + .attr("dy", lineNumber++ * lineHeight + dy + "em");
  239 + var width = fx(d.x + d.dx) - fx(d.x) - 12;
  240 + var height = fy(d.y + d.dy) - fy(d.y) - 6;
  241 +
  242 + while (word = words.pop()) {
  243 + line.push(word);
  244 + tspan.text(line.join(" "));
  245 + if (tspan.node().getComputedTextLength() > width) {
  246 + line.pop();
  247 + tspan.text(line.join(" "));
  248 +
  249 + line = [word];
  250 +
  251 + tspan = text
  252 + .append("tspan")
  253 + .attr("x", fx(d.x) + 6)
  254 + .attr("y", fy(d.y) + 6)
  255 + .attr("dy", lineNumber++ * lineHeight + dy + "em")
  256 + .text(word);
  257 +
  258 + if (text.node().offsetHeight > height) {
  259 + tspan.remove();
  260 + break;
  261 + }
  262 + }
  263 + }
  264 + });
200 265 }
201 266  
202 267 function rect(rect) {
... ...
datalets/datasetexplorer-datalet/spin.svg 0 → 100644
  View file @7d89b74
  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>
0 2 \ No newline at end of file
... ...