Commit fcc0fee355c50426978ce364e53918dd52544ecd
Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS
Showing
3 changed files
with
101 additions
and
15 deletions
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
... | ... | @@ -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
... | ... | @@ -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
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 | ... | ... |