WebCompDev / COMPONENTS

Commit c49910f85892d3e7fa90dfc4851a5009488ecbb5

Authored by Luigi Serra
1 parent 4f0953cd

graph updates

Inline Side-by-side
Showing 3 changed files with 65 additions and 219 deletions
datalets/graph-datalet/graph-datalet.html
  View file @c49910f
... ... @@ -31,7 +31,6 @@
31 31  
32 32 <link rel="import" href="../base-datalet/base-datalet.html">
33 33 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
34   -<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
35 34  
36 35 <!--
37 36 `preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
... ... @@ -54,32 +53,26 @@ Example:
54 53 <link rel="stylesheet" href="static/css/graphStyle.css">
55 54  
56 55 <style is="custom-style">
57   - .content {
58   - /*width: 50%;*/
59   - margin: 0px auto;
60   - }
61 56  
62 57 </style>
63 58  
64   - <div class="layout vertical">
65   - <div id="toolbar">
66   - <paper-slider min="900" max="1500" value="{{width}}"></paper-slider>
67   - </div>
68   - <div style="align-content: center;" id="graph-content">
69   - <svg id="sbiricuda"></svg>
70   - </div>
71   - </div>
72   -
73   - <base-datalet id="base" data-url="{{dataUrl}}"></base-datalet>
  59 + <div style="align-content: center;" id="graph_content">
  60 + <svg id="sbiricuda"></svg>
  61 + </div>
74 62  
75 63 </template>
76 64  
77 65 <script src="static/js/d3.v3.js"></script>
78   - <script src="static/js/buildGraph.js"></script>
79 66  
80 67 <script>
81 68  
82   - var _this;
  69 + gnodes = [];
  70 + glinks = [];
  71 +
  72 + width = undefined;
  73 + height = undefined;
  74 + svg = undefined;
  75 + _this = null;
83 76  
84 77 Polymer({
85 78 is : 'graph-datalet',
... ... @@ -99,8 +92,7 @@ Example:
99 92  
100 93 width: {
101 94 type: Number,
102   - value: undefined,
103   - observer : '_widthChanged'
  95 + value: 1250
104 96 },
105 97  
106 98 height : {
... ... @@ -111,20 +103,20 @@ Example:
111 103 svg: {
112 104 type: Object,
113 105 value: undefined
114   - },
  106 + }
  107 + },
115 108  
116   - gnodes:{
117   - type: Array,
118   - value: undefined
119   - },
  109 + buildGraph: function (t){
120 110  
121   - glinks:{
122   - type: Array,
123   - value: undefined
124   - },
125   - },
  111 + this.svg = this.svg.append("g")
  112 + .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom))
  113 + .append("g");
  114 +
  115 + this.svg.append("rect")
  116 + .attr("fill", "white")
  117 + .attr("width", width)
  118 + .attr("height", height);
126 119  
127   - /* buildGraph: function (t){
128 120 var graph = {};
129 121  
130 122 graph.nodes = t.nodes;
... ... @@ -135,24 +127,35 @@ Example:
135 127 return t.value ? t.value : 80
136 128 }).on("tick", this.tick).start();
137 129  
138   - this.glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
139   -
140   - this.gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
141   - return t.fixed ? "node fixed" : "node"
142   - }).attr("name", function (t) {
143   - return t.name ? t.name.split(" ").join("_").toLowerCase() : ""
144   - }).on("mouseover", this.mouseover).on("mouseout", this.mouseout).on("click", this.active).append("circle").attr("class", function (t) {
145   - return t.fixed ? "" : "drag"
146   - }).attr("r", function (t) {
147   - return t.r ? t.r : 15
148   - }).attr("style", function (t) {
149   - return t.color ? "stroke:" + t.color : !1
150   - });
  130 + glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
  131 +
  132 + gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
  133 + return t.fixed ? "node fixed" : "node"
  134 + }).attr("name", function (t) {
  135 + return t.name ? t.name.split(" ").join("_").toLowerCase() : ""
  136 + }).on("mouseover", this.mouseover)
  137 + .on("mouseout", this.mouseout)
  138 + .on("click", this.active)
  139 + .append("circle")
  140 + .attr("class", function (t) {
  141 + return t.fixed ? "" : "drag"
  142 + }).attr("r", function (t) {
  143 + return t.r ? t.r : 15
  144 + }).attr("style", function (t) {
  145 + return t.color ? "stroke:" + t.color : !1
  146 + });
151 147  
152 148 //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
153 149 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
154 150  
  151 + svg = this.svg;
  152 +
  153 + },
  154 +
  155 + zoom: function() {
  156 + svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
155 157 },
  158 +
156 159 text: function (t)
157 160 {
158 161 var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
... ... @@ -179,14 +182,13 @@ Example:
179 182 });
180 183  
181 184  
182   -
183   - _this.gnodes.attr("cx", function (t) {
184   - return t.x = Math.max(25, Math.min(this.width - 50, t.x))
  185 + gnodes.attr("cx", function (t) {
  186 + return t.x = Math.max(25, Math.min(width - 50, t.x))
185 187 }).attr("cy", function (t) {
186 188 return t.y = Math.max(8, Math.min(600, t.y))
187 189 });
188 190  
189   - _this.glinks.attr("x1", function (t) {
  191 + glinks.attr("x1", function (t) {
190 192 return t.source.x
191 193 }).attr("y1", function (t) {
192 194 return t.source.y
... ... @@ -210,7 +212,8 @@ Example:
210 212 },
211 213  
212 214 active : function (t) {
213   - t.fixed && openModal(t.name)
  215 + /*t.fixed && openModal(t.name)*/
  216 + _this.fire('graph-datalet_node-clicked', {node : t});
214 217 },
215 218  
216 219 openModal : function(t) {
... ... @@ -218,7 +221,7 @@ Example:
218 221 $(".modal-content").hide();
219 222 $("." + e).fadeIn();
220 223 $("#modal").modal()
221   - },*/
  224 + },
222 225  
223 226 /**
224 227 * It is called after the element’s template has been stamped and all elements inside the element’s local
... ... @@ -231,47 +234,25 @@ Example:
231 234 *
232 235 */
233 236 ready: function(){
234   - width = this.width;
235   - this.height = 9 * this.width / 16;
236   - height = this.height;
237   - svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
238   - width: "100%",
239   - height: "100%"
240   - })//.attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
241 237  
242   - var g = JSON.parse(this.data);
243   - g.nodes[0].x = this.width / 2;
244   - g.nodes[0].y = this.height / 2;
245   - buildGraph(g);
246   -
247   - /* _this = this;
  238 + _this = this;
248 239  
249 240 this.height = 9 * this.width / 16;
250   - this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
251   - width: "100%",
252   - height: "100%"
253   - }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
254 241  
255   - var g = JSON.parse(this.data);
256   - g.nodes[0].x = this.width / 2;
257   - g.nodes[0].y = this.height / 2;
258   - this.buildGraph(g);*/
259   - },
260   -
261   - _widthChanged: function(oldValue, newValue){
262   -
263   - width = this.width;
264   - this.height = 9 * this.width / 16;
  242 + width = this.width;
265 243 height = this.height;
266 244  
267   - svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
  245 + this.$.graph_content.style.height = height + "px";
  246 +
  247 + this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
268 248 width: "100%",
269 249 height: "100%"
270   - }).attr("viewBox", "0 0 " + this.width + " " + height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
  250 + }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
271 251  
272 252 var g = JSON.parse(this.data);
273 253 g.nodes[0].x = this.width / 2;
274 254 g.nodes[0].y = this.height / 2;
  255 + this.buildGraph(g);
275 256 }
276 257 });
277 258 </script>
... ...
datalets/graph-datalet/static/css/graphStyle.css
  View file @c49910f
  1 +circle{
  2 + stroke-width: 2.5px;
  3 +}
  4 +
1 5 .text {
  6 + font-family: 'Roboto', sans-serif;
2 7 visibility: hidden
3 8 }
4 9  
... ... @@ -7,6 +12,7 @@
7 12 fill: #fff;
8 13 stroke: #959595;
9 14 stroke-width: 4.5px
  15 + z-index: 100;
10 16 }
11 17  
12 18 .node.fixed {
... ...
datalets/graph-datalet/static/js/buildGraph.js deleted
View file @4f0953c
1   -
2   -var nodes;
3   -var links;
4   -
5   -function buildGraph(t) {
6   - var graph = {};
7   -
8   - graph.nodes = t.nodes;
9   - graph.links = t.links;
10   -
11   - force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([width, height]).charge(-1e3).friction(.5).linkDistance(function (t)
12   - {
13   - return t.value ? t.value : 80
14   - }).on("tick", tick).start();
15   -
16   -svg=svg.append("g")
17   - .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", zoom))
18   - .append("g");
19   -
20   - svg.append("rect")
21   - .attr("fill", "white")
22   - .attr("width", width)
23   - .attr("height", height);
24   -
25   - links = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
26   -
27   - nodes = svg.selectAll(".node").data(graph.nodes).enter().append("g")
28   - .attr("class", function (t) {
29   - return t.fixed ? "node fixed" : "node"
30   - }).attr("name", function (t) {
31   - return t.name ? t.name.split(" ").join("_").toLowerCase() : ""
32   - }).on("mouseover", mouseover).on("mouseout", mouseout).on("click", active)
33   - .append("circle")
34   - .attr("class", function (t) {
35   - return t.fixed ? "" : "drag"
36   - })
37   - .attr("r", function (t) {
38   - return t.r ? t.r : 15
39   - })
40   - .attr("style", function (t) {
41   - return t.color ? "stroke:" + t.color : !1
42   - });
43   -
44   - //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
45   - d3.selectAll(".drag").call(force.drag), svg.selectAll("g.node").call(text);
46   -
47   - /* d3.selectAll("circle").attr("transform", function(t) {
48   - return "translate(" + t.x + "," + t.y + ")";
49   - });*/
50   - //d3.selectAll("circle").attr("transform", function(t) {
51   - // return "translate(" + t + ")";
52   - // });
53   -
54   -}
55   -
56   -function destroyGraph(){
57   - nodes.remove();
58   - links.remove();
59   - svg.remove();
60   - nodes = [];
61   - links = [];
62   -}
63   -
64   -function zoom() {
65   - svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
66   -}
67   -
68   -function text(t) {
69   - {
70   - var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
71   - e.attr("style", function (t) {
72   - return "color:" + (t.color ? t.color : "#000")
73   - }).append("xhtml:div").html(function (t) {
74   - //return t.fixed ? t.name : null
75   - return t.name;
76   - })
77   - }
78   -}
79   -
80   -/*function textS(t) {
81   - t.append("text").attr("dx", 12).attr("dy", ".35em").text(function (t) {
82   - return t.name
83   - })
84   -}*/
85   -
86   -function tick() {
87   - // d3.select("svg").attr("style", "transform:translate(8%)");
88   - d3.selectAll("g foreignObject").attr("x", function (t) {
89   - return t.x + (t.r ? 1.1 * t.r : 15)
90   - }).attr("y", function (t) {
91   - return t.y - 35
92   - });
93   -
94   - d3.selectAll("#logo text").attr("x", function (t) {
95   - return t.x + .7 * (t.r ? t.r : 15)
96   - }).attr("y", function (t) {
97   - return t.y
98   - });
99   -
100   - nodes.attr("cx", function (t) {
101   - return t.x = Math.max(25, Math.min(width - 50, t.x))
102   - }).attr("cy", function (t) {
103   - return t.y = Math.max(8, Math.min(600, t.y))
104   - });
105   -
106   - links.attr("x1", function (t) {
107   - return t.source.x
108   - }).attr("y1", function (t) {
109   - return t.source.y
110   - }).attr("x2", function (t) {
111   - return t.target.x
112   - }).attr("y2", function (t) {
113   - return t.target.y
114   - })
115   -}
116   -function mouseover(t) {
117   - d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
118   - return 1 == t.fixed ? 1.4 * t.r : 15
119   - });
120   - //$("#sbiricuda").html($("." + t.name.split(" ").join("_").toLowerCase()).html())
121   -}
122   -function mouseout() {
123   - d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {
124   - return t.r ? t.r : 15
125   - })
126   -}
127   -function active(t) {
128   - t.fixed && openModal(t.name)
129   -}
130   -function openModal(t) {
131   - var e = t.split(" ").join("_").toLowerCase();
132   - $(".modal-content").hide();
133   - $("." + e).fadeIn();
134   - $("#modal").modal()
135   -}
136   -/*
137   -var width = 900;//1250;
138   -var height = 9 * width / 16, svg, link, node, svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
139   - width: "100%",
140   - height: "100%"
141   -}).attr("viewBox", "0 0 " + width + " " + height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");*/