Commit 035bbee3851a9ec5ef21362cb84cab2579bd8a44

Authored by Luigi Serra
1 parent c011cd54

Datalets and controllets update with layout inputs

controllets/data-sevc-controllet/data-sevc-controllet.html
@@ -47,6 +47,7 @@ @@ -47,6 +47,7 @@
47 <link rel="import" href="../items-slider-controllet/items-slider-controllet.html"> 47 <link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
48 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> 48 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
49 <link rel="import" href="../treeview-controllet/treeview-controllet.html"> 49 <link rel="import" href="../treeview-controllet/treeview-controllet.html">
  50 +<link rel="import" href="../text-element-controllet/text-element-controllet.html">
50 51
51 <!-- 52 <!--
52 `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required. 53 `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.
@@ -253,6 +254,11 @@ Example: @@ -253,6 +254,11 @@ Example:
253 height: 50vh; 254 height: 50vh;
254 } 255 }
255 256
  257 + #idm_layout_main_container{
  258 + position: relative;
  259 + height: 25vh;
  260 + }
  261 +
256 paper-menu{ 262 paper-menu{
257 width: 100%; 263 width: 100%;
258 } 264 }
@@ -411,6 +417,13 @@ Example: @@ -411,6 +417,13 @@ Example:
411 </div> 417 </div>
412 <div id="datalet_idm_fields_container" class="area_container"></div> 418 <div id="datalet_idm_fields_container" class="area_container"></div>
413 </div> 419 </div>
  420 +
  421 + <div id="idm_layout_main_container" class="area_container">
  422 + <div class="title">
  423 + <div class="medium">Layout fields</div>
  424 + </div>
  425 + <div id="idm_layout_container" class="area_container"></div>
  426 + </div>
414 </div> 427 </div>
415 </div> 428 </div>
416 429
@@ -470,6 +483,12 @@ Example: @@ -470,6 +483,12 @@ Example:
470 */ 483 */
471 484
472 /** 485 /**
  486 + * Received when the user change text value of the selected datalet layout inputs
  487 + *
  488 + * @event text-element-controllet_content-changed
  489 + */
  490 +
  491 + /**
473 * Fired when the user press to finish button. At this event are attached all information about the visualization currently created 492 * Fired when the user press to finish button. At this event are attached all information about the visualization currently created
474 * 493 *
475 * @event data-sevc-controllet.dataletCreated 494 * @event data-sevc-controllet.dataletCreated
@@ -478,7 +497,8 @@ Example: @@ -478,7 +497,8 @@ Example:
478 listeners : { 497 listeners : {
479 'items-slider-controllet_item-selected' : '_dataletSelected', 498 'items-slider-controllet_item-selected' : '_dataletSelected',
480 'draggable-element-controllet_content-dragged' : '_fieldsMapped', 499 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
481 - 'treeview-controllet-fileds-selected' : '_fieldsSelected' 500 + 'treeview-controllet_fileds-selected' : '_fieldsSelected',
  501 + 'text-element-controllet_content-changed' : '_textElementChanged'
482 }, 502 },
483 503
484 properties : { 504 properties : {
@@ -555,6 +575,17 @@ Example: @@ -555,6 +575,17 @@ Example:
555 value : [] 575 value : []
556 }, 576 },
557 /** 577 /**
  578 + * It's used to store the params to give to datalet. This kind of params will not processed by selection step
  579 + *
  580 + * @attribute params_fields
  581 + * @type Object
  582 + * @default empty
  583 + */
  584 + params_fields:{
  585 + type: Object,
  586 + value: {}
  587 + },
  588 + /**
558 * It's used to store the tab index in the first pass 589 * It's used to store the tab index in the first pass
559 * 590 *
560 * @attribute DatasourceTabSelected 591 * @attribute DatasourceTabSelected
@@ -577,7 +608,6 @@ Example: @@ -577,7 +608,6 @@ Example:
577 type : Array, 608 type : Array,
578 value : [] 609 value : []
579 } 610 }
580 -  
581 }, 611 },
582 /** 612 /**
583 * It is called after the elementโ€™s template has been stamped and all elements inside the elementโ€™s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called. 613 * It is called after the elementโ€™s template has been stamped and all elements inside the elementโ€™s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.
@@ -593,6 +623,7 @@ Example: @@ -593,6 +623,7 @@ Example:
593 $(this.$.fields_placeholder).perfectScrollbar(); 623 $(this.$.fields_placeholder).perfectScrollbar();
594 $(this.$.selected_fields_main_container).perfectScrollbar(); 624 $(this.$.selected_fields_main_container).perfectScrollbar();
595 $(this.$.idm_fields_main_container).perfectScrollbar(); 625 $(this.$.idm_fields_main_container).perfectScrollbar();
  626 + $(this.$.idm_layout_main_container).perfectScrollbar();
596 $(this.$.table_fields_container).perfectScrollbar(); 627 $(this.$.table_fields_container).perfectScrollbar();
597 628
598 }, 629 },
@@ -642,6 +673,7 @@ Example: @@ -642,6 +673,7 @@ Example:
642 673
643 var response = e.detail.response; 674 var response = e.detail.response;
644 this.$.datalet_idm_fields_container.innerHTML = ""; 675 this.$.datalet_idm_fields_container.innerHTML = "";
  676 + this.$.idm_layout_container.innerHTML = "";
645 677
646 if(response.idm.inputs.input.constructor == Object) { 678 if(response.idm.inputs.input.constructor == Object) {
647 var input = response.idm.inputs.input; 679 var input = response.idm.inputs.input;
@@ -658,6 +690,58 @@ Example: @@ -658,6 +690,58 @@ Example:
658 } 690 }
659 } 691 }
660 692
  693 + if(response.idm.inputs.layouts.input.constructor == Object) {
  694 + var input = response.idm.inputs.layouts.input;
  695 + this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" description="' + input.description + '" number="1"></text-element-controllet>';
  696 + }else{
  697 + for(var i =0; i < response.idm.inputs.layouts.input.length; i++){
  698 + var input = response.idm.inputs.layouts.input[i];
  699 + this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" ' +
  700 + 'description="' + input.description + '" ' +
  701 + 'number="' + (i+1) + '">' +
  702 + '</text-element-controllet>';
  703 + }
  704 +
  705 + }
  706 +
  707 + },
  708 + /**
  709 + * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.
  710 + *
  711 + * @method generateDataletPreview
  712 + */
  713 + generateDataletPreview : function(){
  714 +
  715 + var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
  716 + this.selected_fields = Array();
  717 +
  718 + for (var i = 0; i < input_mapped_fields.length; i++) {
  719 + if (input_mapped_fields[i].value != "") {
  720 + this.selected_fields.push(input_mapped_fields[i].value);
  721 + }
  722 + }
  723 +
  724 + var input_layouts_fields = Polymer.dom(this.$.idm_layout_container).querySelectorAll('text-element-controllet');
  725 + this.params_fields = {'data-url' : this.dataUrl};
  726 +
  727 + for (var i = 0; i < input_layouts_fields.length; i++) {
  728 + if (input_layouts_fields[i].value != "") {
  729 + this.params_fields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;
  730 + }
  731 + }
  732 +
  733 +
  734 + var datalet_params ={
  735 + component : this.selected_datalet,
  736 + params : this.params_fields,
  737 + fields : this.selected_fields,
  738 + placeHolder : this.$.datalet_placeholder
  739 + };
  740 +
  741 +
  742 + ComponentService.deep_url = this.deepUrl;
  743 + ComponentService.getComponent(datalet_params);
  744 +
661 }, 745 },
662 /** 746 /**
663 * Validate the current pass in order to access to next one. 747 * Validate the current pass in order to access to next one.
@@ -804,30 +888,20 @@ Example: @@ -804,30 +888,20 @@ Example:
804 */ 888 */
805 _fieldsMapped : function(e){ 889 _fieldsMapped : function(e){
806 890
807 - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');  
808 - this.selected_fields = Array();  
809 -  
810 - for (var i = 0; i < input_mapped_fields.length; i++) {  
811 - if (input_mapped_fields[i].value != "") {  
812 - this.selected_fields.push(input_mapped_fields[i].value);  
813 - }  
814 - }  
815 -  
816 - var datalet_params ={  
817 - component : this.selected_datalet,  
818 - params :{  
819 - 'data-url' : this.dataUrl  
820 - },  
821 - fields : this.selected_fields,  
822 - placeHolder : this.$.datalet_placeholder  
823 - };  
824 -  
825 -  
826 - ComponentService.deep_url = this.deepUrl;  
827 - ComponentService.getComponent(datalet_params); 891 + this.generateDataletPreview();
828 892
829 }, 893 },
830 /** 894 /**
  895 + * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text
  896 + *
  897 + * @method _textElementChanged
  898 + *
  899 + * @param {Event} e
  900 + */
  901 + _textElementChanged : function(e){
  902 + this.generateDataletPreview();
  903 + },
  904 + /**
831 * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value. 905 * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.
832 * 906 *
833 * @method _handleDatasourceDragOver 907 * @method _handleDatasourceDragOver
@@ -846,7 +920,7 @@ Example: @@ -846,7 +920,7 @@ Example:
846 */ 920 */
847 _onFinish : function(e){ 921 _onFinish : function(e){
848 922
849 - if(this.selected_fields.length == 0 || this.selected_datalet == ""){ 923 + if((this.selected_fields.length == 0) || this.selected_datalet == ""){
850 this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization."; 924 this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";
851 this.$.message.show(); 925 this.$.message.show();
852 return; 926 return;
@@ -854,7 +928,8 @@ Example: @@ -854,7 +928,8 @@ Example:
854 928
855 var data = { 929 var data = {
856 dataUrl : this.dataUrl, 930 dataUrl : this.dataUrl,
857 - fields : this.selected_fields, 931 + params : this.params_fields,
  932 + fields : this.selected_fields,
858 datalet : this.selected_datalet 933 datalet : this.selected_datalet
859 } 934 }
860 935
controllets/datalet-selection-controllet/datalet-selection-controllet.html deleted
1 -<!--  
2 -@group ROUTETOPA Polymer Core Elements  
3 -  
4 -The `select-visualization-form-controllet` is a slider container of elements.  
5 -Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a  
6 -slider with all components initialized with data and query attributes  
7 -  
8 -### Code  
9 -  
10 -Example  
11 -  
12 -@class select-visualization-form-controllet  
13 -  
14 --->  
15 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
16 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
17 -<link rel="import" href="../../bower_components/paper-button/paper-button.html">  
18 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
19 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
20 -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">  
21 -  
22 -<dom-module id="datalet-selection-controllet">  
23 - <template>  
24 - <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">  
25 - <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">  
26 - <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
27 - <style is="custom-style">  
28 - body {  
29 - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;  
30 - font-size: 14px;  
31 - margin: 0;  
32 - padding: 24px;  
33 - -webkit-tap-highlight-color: rgba(0,0,0,0);  
34 - -webkit-touch-callout: none;  
35 - }  
36 -  
37 - paper-input {  
38 - width: 80%;  
39 - }  
40 -  
41 - /*paper-dialog {  
42 - position: fixed;  
43 - top: 16px;  
44 - right: 16px;  
45 - width: 400px;  
46 - height: 400px;  
47 - }*/  
48 -  
49 - html /deep/ paper-dialog { /*::shadow #datalet_dialog_content*/  
50 - /*position: fixed;  
51 - top: 25%;  
52 - left: 25%;  
53 - bottom: 25%;  
54 - right: 25%;  
55 - margin: 0px;*/  
56 - width: 90%;  
57 - height: 95%;  
58 - }  
59 -  
60 - /*Toggle style*/  
61 - input.toggle {  
62 - max-height: 0;  
63 - max-width: 0;  
64 - opacity: 0;  
65 - }  
66 - input.toggle + label {  
67 - display: block;  
68 - position: relative;  
69 - box-shadow: inset 0 0 0px 1px #d5d5d5;  
70 - text-indent: -5000px;  
71 - height: 30px;  
72 - width: 50px;  
73 - border-radius: 15px;  
74 - }  
75 -  
76 - input.toggle + label:before {  
77 - content: "";  
78 - position: absolute;  
79 - display: block;  
80 - height: 30px;  
81 - width: 30px;  
82 - top: 0;  
83 - left: 0;  
84 - border-radius: 15px;  
85 - background: rgba(19, 191, 17, 0);  
86 - -moz-transition: .25s ease-in-out;  
87 - -webkit-transition: .25s ease-in-out;  
88 - transition: .25s ease-in-out;  
89 - }  
90 -  
91 - input.toggle + label:after {  
92 - content: "";  
93 - position: absolute;  
94 - display: block;  
95 - height: 30px;  
96 - width: 30px;  
97 - top: 0;  
98 - left: 0px;  
99 - border-radius: 15px;  
100 - background: white;  
101 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);  
102 - -moz-transition: .25s ease-in-out;  
103 - -webkit-transition: .25s ease-in-out;  
104 - transition: .25s ease-in-out;  
105 - }  
106 - input.toggle:checked + label:before {  
107 - width: 50px;  
108 - background: rgba(19, 191, 17, 1);  
109 - }  
110 -  
111 - input.toggle:checked + label:after {  
112 - left: 20px;  
113 - box-shadow: inset 0 0 0 1px rgba(19, 191, 17, 1), 0 2px 4px rgba(0, 0, 0, .2);  
114 - }  
115 -  
116 - /deep/ #fields_order_placeholder { list-style-type: none; margin: 0; padding: 0; width: 60%; }  
117 - /deep/ #fields_order_placeholder li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }  
118 - /deep/ html>body #fields_order_placeholder li { height: 1.5em; line-height: 1.2em; }  
119 - /deep/ .ui-state-highlight { height: 1.5em; line-height: 1.2em; }  
120 -  
121 - </style>  
122 -  
123 - <iron-ajax  
124 - auto  
125 - id="data_request"  
126 - url={{dataUrl}}  
127 - handle-as="json"  
128 - verbose="true"  
129 - on-response="handleResponseData"  
130 - debounce-duration="300">  
131 - </iron-ajax>  
132 -  
133 - <iron-ajax  
134 - id="datales_list_request"  
135 - auto  
136 - url={{dataletsListUrl}}  
137 - handle-as="json"  
138 - on-response="handleResponseDatalets"  
139 - debounce-duration="300">  
140 - </iron-ajax>  
141 -  
142 - <div id="modals">  
143 - </div>  
144 -  
145 - <paper-dialog id="datalet_dialog" modal="true" transition="core-transition-center" closeAttribute="close">  
146 - <h2>Datalets preview</h2>  
147 - <paper-dialog-scrollable id="datalet_dialog_content">  
148 - </paper-dialog-scrollable>  
149 - <div class="buttons">  
150 - <paper-button dialog-dismiss>Close</paper-button>  
151 - </div>  
152 - </paper-dialog>  
153 -  
154 - <div class="panel panel-default">  
155 - <div class="panel-heading">  
156 - <h3 class="panel-title">Data source</h3>  
157 - </div>  
158 - <div class="panel-body">  
159 - <section>  
160 - <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{dataUrl}}"></paper-input>  
161 - </section>  
162 - </div>  
163 - </div>  
164 -  
165 - <div class="panel panel-default">  
166 - <div class="panel-heading">  
167 - <h3 class="panel-title">Selection data fileds to visualize</h3>  
168 - </div>  
169 - <div class="panel-body">  
170 - <section>  
171 - <div class="horizontal center-justified layout">  
172 - <div id="fields_placeholder" class="horizontal-section">  
173 - </div>  
174 - </div>  
175 - </section>  
176 - </div>  
177 - </div>  
178 -  
179 - <div class="panel panel-default">  
180 - <div class="panel-heading">  
181 - <h3 class="panel-title">Selection fileds order</h3>  
182 - </div>  
183 - <div class="panel-body">  
184 - <section>  
185 - <div class="horizontal center-justified layout">  
186 - <ul id="fields_order_placeholder">  
187 - </ul>  
188 - </div>  
189 - </section>  
190 - </div>  
191 - </div>  
192 -  
193 - <div class="panel panel-default">  
194 - <div class="panel-heading">  
195 - <h3 class="panel-title">Visualization tools selection</h3>  
196 - </div>  
197 - <div class="panel-body">  
198 - <div id="datalets_menu" class="layout">  
199 - <label for="datalets_selector">Available Datalets list:</label>  
200 - <select class="form-control" id="datalets_selector">  
201 - </select>  
202 - </div>  
203 - </div>  
204 - </div>  
205 -  
206 - <section>  
207 - <paper-button on-click="goto" raised>Go to visualization</paper-button>  
208 - </section>  
209 - <paper-toast id="message" text=""></paper-toast>  
210 - <content></content>  
211 - </template>  
212 -  
213 - <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>  
214 - <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>  
215 - <script src="../shared_js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>  
216 -  
217 - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>  
218 -  
219 - <script>  
220 -  
221 - DataletSelectionControllet = Polymer({  
222 - is: 'datalet-selection-controllet',  
223 - listeners: {  
224 - 'tap' : 'clickHandler'  
225 - },  
226 - hostAttributes: {  
227 - dataUrl: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",  
228 - deepUrl: "http://service.routetopa.eu/WebComponentsDEV/DEEP/",  
229 - dataletsListUrl: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"  
230 - },  
231 - properties: {  
232 - /**  
233 - * It represent the data url from CKAN api  
234 - *  
235 - * @attribute dataUrl  
236 - * @type string  
237 - * @default 'null'  
238 - */  
239 - dataUrl: {  
240 - type: String,  
241 - value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",  
242 - observer: '_dataUrlChanged'  
243 - },  
244 - /**  
245 - * It represent the DEEP url to get information about the datalets  
246 - *  
247 - * @attribute deepUrl  
248 - * @type string  
249 - * @default 'null'  
250 - */  
251 - deepUrl: {  
252 - type: String,  
253 - value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50"  
254 - },  
255 - /**  
256 - * It stores all tools available in WebComponent server  
257 - *  
258 - * @attribute tools  
259 - * @type array  
260 - * @default 'null'  
261 - */  
262 - tools:{  
263 - type: Array,  
264 - value: []  
265 - },  
266 - /**  
267 - * It stores all fields related to data retrieved from CKAN api url  
268 - *  
269 - * @attribute fields  
270 - * @type array  
271 - * @default 'null'  
272 - */  
273 - fields_order:{  
274 - type: String,  
275 - value: []  
276 - },  
277 - fieldsMap: {  
278 - type: Map,  
279 - value: null  
280 - },  
281 - datalet_query:{  
282 - type: String,  
283 - value: ""  
284 - }  
285 - },  
286 - /**  
287 - * data-url member changed watcher. It's called when dataUrl changes its value  
288 - *  
289 - * @method dataUrlChanged  
290 - */  
291 - _dataUrlChanged: function(newValue, oldValue){  
292 - this.$.data_request.generateRequest();  
293 - },  
294 - createFieldsContainer: function(id, heading){  
295 - var panelDefault = document.createElement('div');  
296 - panelDefault.className = 'panel panel-default';  
297 - var panelHeading = document. createElement('div');  
298 - panelHeading.className = 'panel-heading';  
299 - panelHeading.innerHTML = heading;  
300 - var panelBody = document. createElement('div');  
301 - panelBody.className = 'panel-body';  
302 - panelBody.id = id;  
303 - var fieldPanel = document.createElement('div');  
304 - fieldPanel.className = 'panel-body';  
305 -  
306 - panelBody.appendChild(fieldPanel);  
307 - panelDefault.appendChild(panelHeading);  
308 - panelDefault.appendChild(panelBody);  
309 -  
310 - return panelDefault;  
311 - },  
312 - createCustomStyledToggle: function(id, label){  
313 - return '<div class="wrapper">'  
314 - + '<input id="'+ id +'" type="checkbox" class="toggle">'  
315 - + '<label for="'+ id +'">'+ label +'</label>'  
316 - + label  
317 - + '</div>';  
318 -  
319 - },  
320 - /**  
321 - * Callback to parse the data requested when dataUrl change its value  
322 - *  
323 - * @method handleResponseData  
324 - */  
325 - handleResponseData: function(e){  
326 - //crete root node and insert it in to shadow dom  
327 - var mainPanel = this.createFieldsContainer("root", "Data fields");  
328 - this.$.fields_placeholder.innerHTML = "";  
329 - this.$.fields_placeholder.appendChild(mainPanel);  
330 - this.fieldsMap = new Map;  
331 - this.fieldsMap["root"] = mainPanel;  
332 - //call recursive analyze function for current json to get all fields user can select  
333 - this.analyzeObject(new Array("root"), null, e.detail.response);  
334 - },  
335 - analyzeObject: function(parent_list, curr_field, object) {  
336 - if(curr_field != null){  
337 - if(object == null) object = "";  
338 -  
339 - if(object.constructor == Array){//Deal with flat array case  
340 - if(object[0].constructor != Object){  
341 - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createCustomStyledToggle(parent_list.toString(), curr_field);  
342 - return;  
343 - }  
344 - }  
345 - if(object.constructor == Array || object.constructor == Object){  
346 - var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);  
347 - this.fieldsMap[curr_field] = panel;  
348 - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);  
349 - }else{  
350 - //CUSTOM STYLED TOGGLE  
351 - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createCustomStyledToggle(parent_list.toString(), curr_field);  
352 - }  
353 - }  
354 - if(object.constructor == Array || object.constructor == Object) {  
355 - var obj = (object.constructor == Array) ? object[0] : object;  
356 - if(Object.prototype.toString.call(obj) === '[object String]') return;//Deal with flat array case  
357 - for (var field in obj) {  
358 - var parents = new Array();  
359 - parent_list.every(function (element, index, array) {  
360 - parents.push(element);  
361 - return true;  
362 - });  
363 - parents.push(field);  
364 - this.analyzeObject(parents, field, obj[field]);  
365 - }  
366 - }  
367 - },  
368 - /**  
369 - * Callback to parse the components response object  
370 - *  
371 - * @method handleResponseComponents  
372 - */  
373 - handleResponseDatalets: function(e){  
374 - html = "";  
375 - for(var i=0;i < e.detail.response.length;i++){  
376 - html += '<option value="' + e.detail.response[i] + '"' + ((i==0) ? ' selected>' : '>') + e.detail.response[i] + '</option>';  
377 - }  
378 - $(this.$.datalets_selector).append(html);  
379 - },  
380 - /**  
381 - * Callback called when "Go to visualization" button is pressed  
382 - *  
383 - * @method handleResponseComponents  
384 - */  
385 - goto: function(){  
386 - var fields = Polymer.dom(this.$.fields_order_placeholder).querySelectorAll('li');  
387 - this.fields_order = "";  
388 - for(var i=0;i<fields.length;i++){  
389 - this.fields_order += fields[i].id + ",";  
390 - }  
391 - this.fields_order = this.fields_order.substring(0, this.fields_order.length - 1);  
392 -  
393 -  
394 - var cbs = Polymer.dom(this.$.fields_placeholder).querySelectorAll('input[type=checkbox]:checked');  
395 - this.datalet_query = "";  
396 -  
397 - if(cbs.length == 0){  
398 - this.$.message.text = "No fields selected.";  
399 - this.$.message.show();  
400 - return;  
401 - }  
402 -  
403 - var fields = Array();  
404 - for(var i=0;i<cbs.length;i++){  
405 - fields.push(cbs[i].id.replace("root,", ""));  
406 - }  
407 -  
408 - var datalet_params ={  
409 - component : this.$.datalets_selector.options[this.$.datalets_selector.selectedIndex].text,  
410 - params :{  
411 - 'data-url' : this.dataUrl,  
412 - 'fields-order' : this.fields_order  
413 - },  
414 - fields : fields,  
415 - placeHolder : this.$.datalet_dialog_content  
416 - };  
417 - ComponentService.deep_url = this.deepUrl;  
418 - ComponentService.getComponent(datalet_params);  
419 -  
420 - document.getElementById("datalet_dialog").open();  
421 - },  
422 - clickHandler : function(e){  
423 - if(!e.target.control) {  
424 - if (e.target.className == 'toggle') {  
425 - (this.$.fields_order_placeholder).innerHTML = "";  
426 - var cbs = Polymer.dom(this.$.fields_placeholder).querySelectorAll('input[type=checkbox]:checked');  
427 - for(var i=0;i<cbs.length;i++) {  
428 - var fields = cbs[i].id.split(',');  
429 - var ele = document.createElement('li');  
430 - ele.className = "ui-state-default";  
431 - ele.id = i;  
432 - ele.innerHTML = fields[fields.length -1];  
433 - (this.$.fields_order_placeholder).appendChild(ele);  
434 - }  
435 - }  
436 - }  
437 - },  
438 - ready: function(){  
439 - $(this.$.fields_order_placeholder).sortable({  
440 - placeholder: "ui-state-highlight"  
441 - });  
442 - $(this.$.fields_order_placeholder).disableSelection();  
443 - }  
444 - });  
445 - </script>  
446 -</dom-module>  
447 \ No newline at end of file 0 \ No newline at end of file
controllets/datalet-selection-controllet/datalet-selection-controllet_.html deleted
1 -<!--  
2 -@group ROUTETOPA Polymer Core Elements  
3 -  
4 -The `select-visualization-form-controllet` is a slider container of elements.  
5 -Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a  
6 -slider with all components initialized with data and query attributes  
7 -  
8 -### Code  
9 -  
10 -Example  
11 -  
12 -@class select-visualization-form-controllet  
13 -  
14 --->  
15 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
16 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
17 -<link rel="import" href="../../bower_components/paper-button/paper-button.html">  
18 -<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">  
19 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->  
20 -  
21 -<dom-module id="datalet-selection-controllet">  
22 - <template>  
23 - <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">  
24 - <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">  
25 - <style is="custom-style">  
26 - body {  
27 - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;  
28 - font-size: 14px;  
29 - margin: 0;  
30 - padding: 24px;  
31 - -webkit-tap-highlight-color: rgba(0,0,0,0);  
32 - -webkit-touch-callout: none;  
33 - }  
34 -  
35 - paper-input {  
36 - width: 80%;  
37 - }  
38 -  
39 - paper-checkbox {  
40 - display: block;  
41 - margin-bottom: 40px;  
42 - }  
43 -  
44 - </style>  
45 -  
46 - <!--<iron-ajax  
47 - auto  
48 - id="data_request"  
49 - url={{data_url}}  
50 - handle-as="json"  
51 - verbose="true"  
52 - on-response="this.handleResponseData"  
53 - debounce-duration="300">  
54 - </iron-ajax>  
55 -  
56 - <iron-ajax  
57 - auto  
58 - url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"  
59 - handle-as="json"  
60 - on-response="handleResponseDatalets"  
61 - debounce-duration="300">  
62 - </iron-ajax>  
63 -  
64 - <iron-request id="xhr"></iron-request>-->  
65 -  
66 - <div class="panel panel-default">  
67 - <div class="panel-heading">  
68 - <h3 class="panel-title">Data source</h3>  
69 - </div>  
70 - <div class="panel-body">  
71 - <section>  
72 - <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{data_url}}"></paper-input>  
73 - </section>  
74 - </div>  
75 - </div>  
76 -  
77 - <div class="panel panel-default">  
78 - <div class="panel-heading">  
79 - <h3 class="panel-title">Selection data fileds to visualize</h3>  
80 - </div>  
81 - <div class="panel-body">  
82 - <section>  
83 - <div class="horizontal center-justified layout">  
84 - <div id="fields_placeholder" class="horizontal-section">  
85 - <!-- <template is="dom-repeat" items="{{fields}}">  
86 - <paper-checkbox>{{item}}</paper-checkbox>  
87 - </template>-->  
88 - </div>  
89 - </div>  
90 - </section>  
91 - </div>  
92 - </div>  
93 -  
94 - <div class="panel panel-default">  
95 - <div class="panel-heading">  
96 - <h3 class="panel-title">Visualization tools selection</h3>  
97 - </div>  
98 - <div class="panel-body">  
99 - <div id="datalets_menu" class="layout"></div>  
100 - </div>  
101 - </div>  
102 -  
103 - <section>  
104 - <!--<paper-button on-click="goto" raised>Go to visualization</paper-button>-->  
105 - <button id="goto" type="button" class="btn btn-primary">Go to visualization</button>  
106 - </section>  
107 - <content></content>  
108 - </template>  
109 -  
110 - <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>  
111 - <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>  
112 -  
113 - <script>  
114 -  
115 - DataletSelectionControllet = Polymer({  
116 - is: 'datalet-selection-controllet',  
117 - properties: {  
118 - /**  
119 - * It represent the data url from CKAN api  
120 - *  
121 - * @attribute data_url  
122 - * @type string  
123 - * @default 'null'  
124 - */  
125 - data_url: {  
126 - type: String,  
127 - value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",  
128 - observer: '_data_urlChanged'  
129 - },  
130 - /**  
131 - * It stores all tools available in WebComponent server  
132 - *  
133 - * @attribute tools  
134 - * @type array  
135 - * @default 'null'  
136 - */  
137 - tools:{  
138 - type: Array,  
139 - value: []  
140 - },  
141 - /**  
142 - * It stores all fields related to data retrieved from CKAN api url  
143 - *  
144 - * @attribute fields  
145 - * @type array  
146 - * @default 'null'  
147 - */  
148 - fields:{  
149 - type: Array,  
150 - value: []  
151 - },  
152 - fieldsMap: {  
153 - type: Map,  
154 - value: null  
155 - }  
156 - },  
157 - /**  
158 - * data-url member changed watcher. It's called when data_url changes its value  
159 - *  
160 - * @method data_urlChanged  
161 - */  
162 - _data_urlChanged: function(newValue, oldValue){  
163 - //this.$.xhr.send({url: newValue, body: {}}).then(function (e){this.handleResponseData(e)});  
164 - //get the data fields  
165 - var comp = this;  
166 - $.ajax({  
167 - url: newValue,  
168 - dataType: "json",  
169 - success: function(e){comp.handleResponseData(e)}  
170 - });  
171 - //get datalets list  
172 - $.ajax({  
173 - url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",  
174 - dataType: "json",  
175 - success: function(e){comp.handleResponseDatalets(e)}  
176 - });  
177 - },  
178 - createFieldsContainer: function(id, heading){  
179 - var panelDefault = document.createElement('div');  
180 - panelDefault.className = 'panel panel-default';  
181 - var panelHeading = document. createElement('div');  
182 - panelHeading.className = 'panel-heading';  
183 - panelHeading.innerHTML = heading;  
184 - var panelBody = document. createElement('div');  
185 - panelBody.className = 'panel-body';  
186 - panelBody.id = id;  
187 - var fieldPanel = document.createElement('div');  
188 - fieldPanel.className = 'panel-body';  
189 -  
190 - panelBody.appendChild(fieldPanel);  
191 - panelDefault.appendChild(panelHeading);  
192 - panelDefault.appendChild(panelBody);  
193 -  
194 - return panelDefault;  
195 -  
196 - },  
197 - cretePaperCheckbox: function (id, label ) {  
198 - var html = '<paper-checkbox id="' + id + '" role="checkbox" tabindex="0" toggles="" aria-pressed="false" aria-disabled="false" aria-checked="false" aria-label="' + label + '" class="x-scope paper-checkbox-0">'  
199 - + '<div id="checkboxContainer" class="style-scope paper-checkbox">'  
200 - + '<paper-ripple id="ink" class="circle style-scope paper-checkbox" center="">'  
201 - + '<div id="background" class="style-scope paper-ripple"></div>'  
202 - + '<div id="waves" class="style-scope paper-ripple"></div>'  
203 - + '</paper-ripple>'  
204 - + '<div id="checkbox" class="style-scope paper-checkbox">'  
205 - + '<div id="checkmark" class="hidden style-scope paper-checkbox"></div>'  
206 - + '</div>'  
207 - + '</div>'  
208 - + '<div id="checkboxLabel" aria-hidden="true" class="style-scope paper-checkbox">' + label + '</div>'  
209 - + '</paper-checkbox>';  
210 -  
211 - return html;  
212 - },  
213 - createBootstrapCheckbox: function(id, label) {  
214 - return '<div class="checkbox checkbox-primary">'  
215 - + '<label class="checkbox-inline">'  
216 - + '<input type="checkbox" data-label="'+ label +'" id="'+ id +'"/>' + label  
217 - + '</label>'  
218 - + '</div>';  
219 -  
220 - },  
221 - createBootstrapToggle: function(id, label) {  
222 - return '<div class="checkbox">'  
223 - + '<label style="padding-left: 3px; text-decoration: double;">'  
224 - + '<input type="checkbox" data-label="'+ label +'" id="'+ id +'" data-toggle="toggle" /> ' + label  
225 - + '</label>'  
226 - + '</div>';  
227 -  
228 - },  
229 - /**  
230 - * Callback to parse the data requested when data_url change its value  
231 - *  
232 - * @method handleResponseData  
233 - */  
234 - handleResponseData: function(e){  
235 - //crete root node and insert it in to shadow dom  
236 - var mainPanel = this.createFieldsContainer("root", "Data fields");  
237 - this.$.fields_placeholder.appendChild(mainPanel);  
238 - this.fieldsMap = new Map;  
239 - this.fieldsMap["root"] = mainPanel;  
240 - //call recursive analyze function for current json to get all fields user can select  
241 - this.analyzeObject("root", null, e);  
242 - },  
243 - analyzeObject: function(parent, curr_field, object) {  
244 - if(curr_field != null){  
245 - var parent_list = parent.split('.');  
246 - var ele = null;  
247 - if(object.constructor == Array || object.constructor == Object){  
248 - var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);  
249 - this.fieldsMap[curr_field] = panel;  
250 - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);  
251 -  
252 - }else{  
253 - /*var checkbox = document.createElement('paper-checkbox');  
254 - checkbox.innerHTML = "<b>" + curr_field + '</b><br>';  
255 - checkbox.id = parent;  
256 - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].appendChild(checkbox);*/  
257 - //Polymer.dom.flush();  
258 - //this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.cretePaperCheckbox(parent, curr_field);  
259 - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createBootstrapToggle(parent, curr_field);  
260 -  
261 - }  
262 - }  
263 - if(object.constructor == Array || object.constructor == Object) {  
264 - var obj = (object.constructor == Array) ? object[0] : object;  
265 - for (var field in obj) {  
266 - if (obj[field] != null) {  
267 - parent_list = parent.split('.');  
268 - this.analyzeObject(parent + '.' + field, field, obj[field]);  
269 - }  
270 - }  
271 - }  
272 - },  
273 - /**  
274 - * Callback to parse the components response object  
275 - *  
276 - * @method handleResponseComponents  
277 - */  
278 - handleResponseDatalets: function(e){  
279 - this.tools = e;  
280 - /*html = '<paper-menu>';  
281 - for(i=0;i < e.length;i++){  
282 - html += '<paper-item>' + e[i] + '</paper-item>';  
283 - }  
284 - html += '</paper-menu>';*/  
285 - html = '<label for="datalets_selector">Available Datalets list:</label>'  
286 - + '<select class="form-control" id="datalets_selector">';  
287 - for(i=0;i < e.length;i++){  
288 - html += '<option>' + e[i] + '</option>';  
289 - }  
290 - html += '</select>';  
291 - $(this.$.datalets_menu).append(html);  
292 - },  
293 - /**  
294 - * Callback called when "Go to visualization" button is pressed  
295 - *  
296 - * @method handleResponseComponents  
297 - */  
298 - goto: function(){  
299 - var url = "http://service.routetopa.eu/oxwall/webcomp";  
300 - var query = "$result$records[";  
301 - var cbs = this.shadowRoot.querySelectorAll("paper-checkbox");  
302 - for(i=0;i<cbs.length;i++){  
303 - if(cbs[i].checked){  
304 - query += cbs[i].id + ",";  
305 - }  
306 - }  
307 - query = query.slice(0,-1);  
308 - query += "]";  
309 -  
310 - var cmp = this.$.toolsmenu.selectedItemLabel;  
311 -  
312 - url += "/" + cmp + "/" + btoa(this.data_url) + "/" + query + "/0";  
313 -  
314 - window.location = url;  
315 - },  
316 - ready: function(){  
317 -  
318 - /*this.fields = [  
319 - {parent:"root", name :"No fields available"}  
320 - ];*/  
321 -  
322 - this.tools = [  
323 - 'No tools available'  
324 - ];  
325 -  
326 - //this.$.data_request.addEventListener('response', this.handleResponseData);  
327 -  
328 - /* var comp = this;  
329 - $.ajax({  
330 - url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",  
331 - dataType: "json",  
332 - success: comp.handleResponseDatalets  
333 -  
334 - });*/  
335 - $(this.$.goto).click(this.goto());  
336 - }  
337 - });  
338 - </script>  
339 -</dom-module>  
340 \ No newline at end of file 0 \ No newline at end of file
controllets/datalet-selection-controllet/datalet-selection-controllet_2.html deleted
1 -<!--  
2 -@group ROUTETOPA Polymer Core Elements  
3 -  
4 -The `select-visualization-form-controllet` is a slider container of elements.  
5 -Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a  
6 -slider with all components initialized with data and query attributes  
7 -  
8 -### Code  
9 -  
10 -Example  
11 -  
12 -@class select-visualization-form-controllet  
13 -  
14 --->  
15 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
16 -<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">  
17 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->  
18 -  
19 -<dom-module id="datalet-selection-controllet">  
20 - <template>  
21 - <!--<link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">  
22 - <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">-->  
23 - <style>  
24 - body {  
25 - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;  
26 - font-size: 14px;  
27 - margin: 0;  
28 - padding: 24px;  
29 - -webkit-tap-highlight-color: rgba(0,0,0,0);  
30 - -webkit-touch-callout: none;  
31 - }  
32 -  
33 - paper-input {  
34 - width: 80%;  
35 - }  
36 -  
37 - paper-checkbox {  
38 - display: block;  
39 - margin-bottom: 40px;  
40 - }  
41 -  
42 - </style>  
43 -  
44 - <!--<iron-ajax  
45 - auto  
46 - id="data_request"  
47 - url={{dataUrl}}  
48 - handle-as="json"  
49 - verbose="true"  
50 - on-response="this.handleResponseData"  
51 - debounce-duration="300">  
52 - </iron-ajax>  
53 -  
54 - <iron-ajax  
55 - auto  
56 - url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"  
57 - handle-as="json"  
58 - on-response="handleResponseDatalets"  
59 - debounce-duration="300">  
60 - </iron-ajax>  
61 -  
62 - <iron-request id="xhr"></iron-request>-->  
63 - </template>  
64 -  
65 - <script>  
66 -  
67 - DataletSelectionControllet = Polymer({  
68 - is: 'datalet-selection-controllet',  
69 - properties: {  
70 - /**  
71 - * It represent the data url from CKAN api  
72 - *  
73 - * @attribute dataUrl  
74 - * @type string  
75 - * @default 'null'  
76 - */  
77 - dataUrl: {  
78 - type: String,  
79 - value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",  
80 - observer: '_data_urlChanged'  
81 - },  
82 - /**  
83 - * It stores all tools available in WebComponent server  
84 - *  
85 - * @attribute tools  
86 - * @type array  
87 - * @default 'null'  
88 - */  
89 - tools:{  
90 - type: Array,  
91 - value: []  
92 - },  
93 - /**  
94 - * It stores all fields related to data retrieved from CKAN api url  
95 - *  
96 - * @attribute fields  
97 - * @type array  
98 - * @default 'null'  
99 - */  
100 - fields:{  
101 - type: Array,  
102 - value: []  
103 - },  
104 - fieldsMap: {  
105 - type: Map,  
106 - value: null  
107 - }  
108 - }  
109 - });  
110 - </script>  
111 -</dom-module>  
112 \ No newline at end of file 0 \ No newline at end of file
controllets/draggable-element-controllet/draggable-element-controllet.html
@@ -197,7 +197,7 @@ Example: @@ -197,7 +197,7 @@ Example:
197 */ 197 */
198 number: { 198 number: {
199 type: String, 199 type: String,
200 - value : "0" 200 + value : "1"
201 }, 201 },
202 /** 202 /**
203 * It's the name of the target field 203 * It's the name of the target field
controllets/text-element-controllet/text-element-controllet.html 0 โ†’ 100644
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universitร  di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  27 +<link rel="import" href="../../bower_components/paper-styles/color.html">
  28 +
  29 +<!--
  30 +`text-element-controllet` is a text area with heading. It fires an event when the text value is modified. This event can be useful when you have to monitor many af this elements.
  31 +
  32 +
  33 +Example:
  34 +
  35 + <text-element-controllet heading="myField"
  36 + description="myFieldDescription"
  37 + number="1">
  38 + </text-element-controllet>
  39 +
  40 +
  41 +@element text-element-controllet
  42 +@status beta
  43 +@homepage
  44 +@group controllets
  45 +-->
  46 +
  47 +
  48 +<dom-module id="text-element-controllet">
  49 + <template>
  50 +
  51 + <style is="custom-style">
  52 +
  53 + .avatar {
  54 + display: inline-block;
  55 + position: relative;
  56 + float: left;
  57 + height: 1.7em;
  58 + width: 1.7em;
  59 + border-radius: 50%;
  60 + background: var(--paper-blue-500);
  61 + color: white;
  62 + line-height: 2em;
  63 + font-size: 0.74em;
  64 + text-align: center;
  65 + }
  66 +
  67 + .heading{
  68 + /*width: 12.5em;*/
  69 + }
  70 +
  71 + .big {
  72 + display: inline-block;
  73 + position: relative;
  74 + float: left;
  75 + font-size: 1em;
  76 + padding: 0.5em 0.25em 0.5em;
  77 + color: var(--google-grey-500);
  78 + }
  79 +
  80 + .medium {
  81 + position: relative;
  82 + float: left;
  83 + font-size: 0.8125em;
  84 + padding-bottom: 0px;
  85 + display: inline-block;
  86 + width: 32.5em;
  87 + padding-left: 10px;
  88 + }
  89 +
  90 +
  91 + </style>
  92 +
  93 + <div>
  94 + <div>
  95 + <div class="heading">
  96 + <div class="avatar">{{number}}</div>
  97 + <div class="medium">{{description}}</div>
  98 + </div>
  99 + </div><br>
  100 + <paper-textarea id="text" label="{{heading}}" floatingLabel value="{{value}}"></paper-textarea>
  101 + </div>
  102 +
  103 + </template>
  104 +
  105 + <script>
  106 +
  107 + Polymer({
  108 +
  109 + is: 'text-element-controllet',
  110 +
  111 + /**
  112 + * Fired when the user change the text value
  113 + *
  114 + * @event text-element-controllet_content-changed
  115 + */
  116 +
  117 + targets : null,
  118 +
  119 + properties: {
  120 + /**
  121 + * It's the name of the elelent
  122 + *
  123 + * @attribute heading
  124 + * @type Strig
  125 + * @default 'Heading'
  126 + */
  127 + heading : {
  128 + type : String,
  129 + value : "Heading"
  130 + },
  131 + /**
  132 + * It's the description of the elelent
  133 + *
  134 + * @attribute description
  135 + * @type Strig
  136 + * @default 'Description'
  137 + */
  138 + description: {
  139 + type: String,
  140 + value: "Description"
  141 + },
  142 + /**
  143 + * It's a string value the represent the current number of elelent. It will be use in the label section.
  144 + *
  145 + * @attribute number
  146 + * @type Strig
  147 + * @default '0'
  148 + */
  149 + number: {
  150 + type: String,
  151 + value : "0"
  152 + },
  153 + value :{
  154 + type: String,
  155 + value: "",
  156 + observer : '_valueChanged'
  157 + }
  158 + },
  159 + /**
  160 + * Callback related to text change
  161 + *
  162 + * @method _valueChanged
  163 + *
  164 + * @param {Event} e
  165 + */
  166 + _valueChanged : function(oldvalue, newValue){
  167 + this.fire('text-element-controllet_content-changed', {newValue: newValue});
  168 + },
  169 + /**
  170 + * It returns the value in text area
  171 + *
  172 + * @method getValue
  173 + */
  174 + getValue : function(){
  175 + return this.$.text.value;
  176 + }
  177 + });
  178 +
  179 + </script>
  180 +
  181 +</dom-module>
0 \ No newline at end of file 182 \ No newline at end of file
controllets/treeview-controllet/treeview-controllet.html
@@ -220,6 +220,12 @@ Example: @@ -220,6 +220,12 @@ Example:
220 220
221 is : 'treeview-controllet', 221 is : 'treeview-controllet',
222 222
  223 + /**
  224 + * Fired when the user check a checkbox
  225 + *
  226 + * @event treeview-controllet_fileds-selected
  227 + * */
  228 +
223 listeners : { 229 listeners : {
224 'tap' : '_clickHandler' 230 'tap' : '_clickHandler'
225 }, 231 },
@@ -353,7 +359,7 @@ Example: @@ -353,7 +359,7 @@ Example:
353 fields.push(cbs[i].id.replace("root,","")); 359 fields.push(cbs[i].id.replace("root,",""));
354 } 360 }
355 361
356 - this.fire('treeview-controllet-fileds-selected', {fields : fields}); 362 + this.fire('treeview-controllet_fileds-selected', {fields : fields});
357 }, 363 },
358 364
359 _clickHandler : function(e){ 365 _clickHandler : function(e){
datalets/barchart-datalet/barchart-datalet.html
@@ -47,6 +47,7 @@ Example: @@ -47,6 +47,7 @@ Example:
47 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet> 47 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
48 </template> 48 </template>
49 <script> 49 <script>
  50 +
50 var BarchartBehavior = { 51 var BarchartBehavior = {
51 52
52 53
@@ -63,18 +64,18 @@ Example: @@ -63,18 +64,18 @@ Example:
63 zoomType: 'xy' 64 zoomType: 'xy'
64 }, 65 },
65 title: { 66 title: {
66 - text: 'Bar chart' 67 + text: this._component.title
67 }, 68 },
68 xAxis: { 69 xAxis: {
69 categories: this.properties.categories.value, 70 categories: this.properties.categories.value,
70 title: { 71 title: {
71 - text: null 72 + text: this._component.xAxisLabel
72 } 73 }
73 }, 74 },
74 yAxis: { 75 yAxis: {
75 min: 0, 76 min: 0,
76 title: { 77 title: {
77 - text: 'Foreclosure (units)', 78 + text: this._component.yAxisLabel,
78 align: 'high' 79 align: 'high'
79 }, 80 },
80 labels: { 81 labels: {
@@ -82,7 +83,7 @@ Example: @@ -82,7 +83,7 @@ Example:
82 } 83 }
83 }, 84 },
84 tooltip: { 85 tooltip: {
85 - valueSuffix: ' units' 86 + valueSuffix: ' ' + this._component.suffix
86 }, 87 },
87 plotOptions: { 88 plotOptions: {
88 bar: { 89 bar: {
@@ -110,9 +111,57 @@ Example: @@ -110,9 +111,57 @@ Example:
110 } 111 }
111 }; 112 };
112 113
  114 +
113 BarchartDatalet = Polymer({ 115 BarchartDatalet = Polymer({
114 is: 'barchart-datalet', 116 is: 'barchart-datalet',
115 117
  118 + properties: {
  119 + /**
  120 + * It's the label for X axis
  121 + *
  122 + * @attribute xAxisLabel
  123 + * @type String
  124 + * @default ''
  125 + */
  126 + xAxisLabel: {
  127 + type: String,
  128 + value: ""
  129 + },
  130 + /**
  131 + * It's the label for Y axis
  132 + *
  133 + * @attribute yAxisLabel
  134 + * @type String
  135 + * @default ''
  136 + */
  137 + yAxisLabel: {
  138 + type: String,
  139 + value: ""
  140 + },
  141 + /**
  142 + * It's the title of the chart
  143 + *
  144 + * @attribute title
  145 + * @type Strig
  146 + * @default ''
  147 + */
  148 + title: {
  149 + type: String,
  150 + value: "Heading"
  151 + },
  152 + /**
  153 + * It's the values suffix
  154 + *
  155 + * @attribute suffix
  156 + * @type Strig
  157 + * @default 'units'
  158 + */
  159 + suffix : {
  160 + type : String,
  161 + value : "units"
  162 + }
  163 + },
  164 +
116 /** 165 /**
117 * 'ready' callback extend the BarchartComponentBehavior with HighchartsComponentBehavior and BarchartBehavior 166 * 'ready' callback extend the BarchartComponentBehavior with HighchartsComponentBehavior and BarchartBehavior
118 * and run the Datalet workcycle. 167 * and run the Datalet workcycle.
datalets/base-datalet/base-datalet.html
@@ -84,6 +84,13 @@ Example : @@ -84,6 +84,13 @@ Example :
84 */ 84 */
85 ready: function(){ 85 ready: function(){
86 this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2]; 86 this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
  87 + },
  88 + /**
  89 + * Set the domain url to show in the footer
  90 + */
  91 + setDomain: function(url){
  92 + this.$.domain.textContent = url;
  93 +
87 } 94 }
88 }); 95 });
89 </script> 96 </script>
datalets/column3Dchart-datalet/column3Dchart-datalet.html
@@ -57,8 +57,8 @@ Example: @@ -57,8 +57,8 @@ Example:
57 </template> 57 </template>
58 58
59 <script> 59 <script>
60 - var chart = null;  
61 60
  61 + var chart = null;
62 62
63 var column3DchartBehavior = { 63 var column3DchartBehavior = {
64 64
@@ -68,42 +68,45 @@ Example: @@ -68,42 +68,45 @@ Example:
68 * @method transformData 68 * @method transformData
69 */ 69 */
70 presentData: function(){ 70 presentData: function(){
71 - chart = new Highcharts.Chart({  
72 - chart: {  
73 - renderTo: this._component.$.charts.$.container,  
74 - borderColor: '#EBBA95',  
75 - borderWidth: 2,  
76 - zoomType : 'xy',  
77 - type: 'line',  
78 - type: 'column',  
79 - margin: 75,  
80 - options3d: {  
81 - enabled: true,  
82 - alpha: 15,  
83 - beta: 15,  
84 - depth: 50,  
85 - viewDistance: 25  
86 - }  
87 - },  
88 - xAxis: {  
89 - categories: this.properties.categories.value,  
90 - title: {  
91 - text: null  
92 - }  
93 - },  
94 - title: {  
95 - text: this.properties.title  
96 - },  
97 - subtitle: {  
98 - text: '3D CHART demo by dragging the sliders below'  
99 - },  
100 - plotOptions: {  
101 - column: {  
102 - depth: 25  
103 - }  
104 - },  
105 -  
106 - series: this.properties.series.value 71 + chart = new Highcharts.Chart({
  72 + chart: {
  73 + renderTo: this._component.$.charts.$.container,
  74 + borderColor: '#EBBA95',
  75 + borderWidth: 2,
  76 + zoomType : 'xy',
  77 + type: 'line',
  78 + type: 'column',
  79 + margin: 75,
  80 + options3d: {
  81 + enabled: true,
  82 + alpha: 15,
  83 + beta: 15,
  84 + depth: 50,
  85 + viewDistance: 25
  86 + }
  87 + },
  88 + title: {
  89 + text: this._component.title
  90 + },
  91 + xAxis: {
  92 + categories: this.properties.categories.value,
  93 + title: {
  94 + text: this._component.xAxislabel
  95 + }
  96 + },
  97 + title: {
  98 + text: this.properties.title
  99 + },
  100 + subtitle: {
  101 + text: this._component.title
  102 + },
  103 + plotOptions: {
  104 + column: {
  105 + depth: 25
  106 + }
  107 + },
  108 +
  109 + series: this.properties.series.value
107 }); 110 });
108 111
109 // Activate the sliders 112 // Activate the sliders
@@ -123,6 +126,42 @@ Example: @@ -123,6 +126,42 @@ Example:
123 column3DchartDatalet = Polymer({ 126 column3DchartDatalet = Polymer({
124 is: 'column3Dchart-datalet', 127 is: 'column3Dchart-datalet',
125 128
  129 + properties: {
  130 + /**
  131 + * It's the label for X axis
  132 + *
  133 + * @attribute xAxisLabel
  134 + * @type String
  135 + * @default ''
  136 + */
  137 + xAxisLabel: {
  138 + type: String,
  139 + value: ""
  140 + },
  141 + /**
  142 + * It's the label for Y axis
  143 + *
  144 + * @attribute yAxisLabel
  145 + * @type String
  146 + * @default ''
  147 + */
  148 + yAxisLabel: {
  149 + type: String,
  150 + value: ""
  151 + },
  152 + /**
  153 + * It's the title of the chart
  154 + *
  155 + * @attribute title
  156 + * @type Strig
  157 + * @default ''
  158 + */
  159 + title: {
  160 + type: String,
  161 + value: "Heading"
  162 + }
  163 + },
  164 +
126 /** 165 /**
127 * 'ready' callback extend the column3DchartComponentBehavior with HighchartsComponentBehavior and column3DchartBehavior 166 * 'ready' callback extend the column3DchartComponentBehavior with HighchartsComponentBehavior and column3DchartBehavior
128 * and run the Datalet workcycle. 167 * and run the Datalet workcycle.
@@ -130,6 +169,7 @@ Example: @@ -130,6 +169,7 @@ Example:
130 * @method ready 169 * @method ready
131 */ 170 */
132 ready: function(){ 171 ready: function(){
  172 +
133 var column3DchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, column3DchartBehavior); 173 var column3DchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, column3DchartBehavior);
134 column3DchartComponentBehavior.init(this); 174 column3DchartComponentBehavior.init(this);
135 } 175 }
datalets/columnchart-datalet/columnchart-datalet.html
@@ -47,6 +47,7 @@ Example: @@ -47,6 +47,7 @@ Example:
47 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet> 47 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
48 </template> 48 </template>
49 <script> 49 <script>
  50 +
50 var ColumnchartBehavior = { 51 var ColumnchartBehavior = {
51 52
52 53
@@ -62,18 +63,18 @@ Example: @@ -62,18 +63,18 @@ Example:
62 zoomType: 'xy' 63 zoomType: 'xy'
63 }, 64 },
64 title: { 65 title: {
65 - text: 'Column chart' 66 + text: this._component.title
66 }, 67 },
67 xAxis: { 68 xAxis: {
68 categories: this.properties.categories.value,//this._component.categories, 69 categories: this.properties.categories.value,//this._component.categories,
69 title: { 70 title: {
70 - text: null 71 + text: this._component.xAxisLabel
71 } 72 }
72 }, 73 },
73 yAxis: { 74 yAxis: {
74 min: 0, 75 min: 0,
75 title: { 76 title: {
76 - text: 'Units', 77 + text: this._component.yAxisLabel,
77 align: 'high' 78 align: 'high'
78 }, 79 },
79 labels: { 80 labels: {
@@ -81,7 +82,7 @@ Example: @@ -81,7 +82,7 @@ Example:
81 } 82 }
82 }, 83 },
83 tooltip: { 84 tooltip: {
84 - valueSuffix: ' units' 85 + valueSuffix: ' ' + this._component.suffix
85 }, 86 },
86 plotOptions: { 87 plotOptions: {
87 bar: { 88 bar: {
@@ -109,9 +110,57 @@ Example: @@ -109,9 +110,57 @@ Example:
109 } 110 }
110 }; 111 };
111 112
  113 +
112 LinechartDatalet = Polymer({ 114 LinechartDatalet = Polymer({
113 is: 'columnchart-datalet', 115 is: 'columnchart-datalet',
114 116
  117 + properties: {
  118 + /**
  119 + * It's the label for X axis
  120 + *
  121 + * @attribute xAxisLabel
  122 + * @type String
  123 + * @default ''
  124 + */
  125 + xAxisLabel: {
  126 + type: String,
  127 + value: ""
  128 + },
  129 + /**
  130 + * It's the label for Y axis
  131 + *
  132 + * @attribute yAxisLabel
  133 + * @type String
  134 + * @default ''
  135 + */
  136 + yAxisLabel: {
  137 + type: String,
  138 + value: ""
  139 + },
  140 + /**
  141 + * It's the title of the chart
  142 + *
  143 + * @attribute title
  144 + * @type Strig
  145 + * @default ''
  146 + */
  147 + title: {
  148 + type: String,
  149 + value: "Heading"
  150 + },
  151 + /**
  152 + * It's the values suffix
  153 + *
  154 + * @attribute suffix
  155 + * @type Strig
  156 + * @default 'units'
  157 + */
  158 + suffix : {
  159 + type : String,
  160 + value : "units"
  161 + }
  162 + },
  163 +
115 /** 164 /**
116 * 'ready' callback extend the ColumnchartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior 165 * 'ready' callback extend the ColumnchartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior
117 * and run the Datalet workcycle. 166 * and run the Datalet workcycle.
datalets/linechart-datalet/linechart-datalet.html
@@ -59,20 +59,20 @@ Example: @@ -59,20 +59,20 @@ Example:
59 59
60 $(this._component.$.charts.$.container).highcharts({ 60 $(this._component.$.charts.$.container).highcharts({
61 title: { 61 title: {
62 - text: 'Line chart' 62 + text: "" + this._component.title
63 }, 63 },
64 chart: { 64 chart: {
65 - zoomType: 'xy'  
66 - }, 65 + zoomType: 'xy'
  66 + },
67 xAxis: { 67 xAxis: {
68 categories: this.properties.categories.value,//this._component.categories, 68 categories: this.properties.categories.value,//this._component.categories,
69 title: { 69 title: {
70 - text: null 70 + text: this._component.xAxisLabel
71 } 71 }
72 }, 72 },
73 yAxis: { 73 yAxis: {
74 title: { 74 title: {
75 - text: 'Units' 75 + text: this._component.yAxisLabel
76 }, 76 },
77 plotLines: [{ 77 plotLines: [{
78 value: 0, 78 value: 0,
@@ -81,7 +81,7 @@ Example: @@ -81,7 +81,7 @@ Example:
81 }] 81 }]
82 }, 82 },
83 tooltip: { 83 tooltip: {
84 - valueSuffix: ' units' 84 + valueSuffix: ' ' + this._component.suffix
85 }, 85 },
86 legend: { 86 legend: {
87 layout: 'vertical', 87 layout: 'vertical',
@@ -102,9 +102,57 @@ Example: @@ -102,9 +102,57 @@ Example:
102 } 102 }
103 }; 103 };
104 104
  105 +
105 LinechartDatalet = Polymer({ 106 LinechartDatalet = Polymer({
106 is: 'linechart-datalet', 107 is: 'linechart-datalet',
107 108
  109 + properties: {
  110 + /**
  111 + * It's the label for X axis
  112 + *
  113 + * @attribute xAxisLabel
  114 + * @type String
  115 + * @default ''
  116 + */
  117 + xAxisLabel: {
  118 + type: String,
  119 + value: ""
  120 + },
  121 + /**
  122 + * It's the label for Y axis
  123 + *
  124 + * @attribute yAxisLabel
  125 + * @type String
  126 + * @default ''
  127 + */
  128 + yAxisLabel: {
  129 + type: String,
  130 + value: ""
  131 + },
  132 + /**
  133 + * It's the title of the chart
  134 + *
  135 + * @attribute title
  136 + * @type Strig
  137 + * @default ''
  138 + */
  139 + title: {
  140 + type: String,
  141 + value: "Heading"
  142 + },
  143 + /**
  144 + * It's the values suffix
  145 + *
  146 + * @attribute suffix
  147 + * @type Strig
  148 + * @default 'units'
  149 + */
  150 + suffix : {
  151 + type : String,
  152 + value : "units"
  153 + }
  154 + },
  155 +
108 /** 156 /**
109 * 'ready' callback extend the LinechartComponentBehavior with HighchartsComponentBehavior and LinechartBehavior 157 * 'ready' callback extend the LinechartComponentBehavior with HighchartsComponentBehavior and LinechartBehavior
110 * and run the Datalet workcycle. 158 * and run the Datalet workcycle.
datalets/preview-datalet/preview-datalet.html 0 โ†’ 100644
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universitร  di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +<link rel="import" href="../base-datalet/base-datalet.html">
  26 +
  27 +<!--
  28 +`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.
  29 +
  30 +Example:
  31 +
  32 + <data-sevc-controllet data-url="http://spod.routetopa.eu"
  33 + </data-sevc-controllet>
  34 +
  35 +
  36 +@element preview-datalet
  37 +@status beta
  38 +@homepage
  39 +@group datalets
  40 +-->
  41 +
  42 +<dom-module id="preview-datalet">
  43 + <template>
  44 + <style is="custom-style">
  45 + .content {
  46 + /*width: 50%;*/
  47 + margin: 0px auto;
  48 + }
  49 +
  50 + .embed-container {
  51 + height: 0;
  52 + /*width: 100vw;*/
  53 + padding-bottom: 56.25%;
  54 + overflow: hidden;
  55 + position: relative;
  56 +
  57 +
  58 + }
  59 +
  60 + .embed-container iframe {
  61 + width: 100%;
  62 + height: 100%;
  63 + position: absolute;
  64 + top: 0;
  65 + left: 0;
  66 + }
  67 + </style>
  68 + <div class="content">
  69 + <a href="{{url}}" target="_blank">{{url}}</a>
  70 + <div class="embed-container" style="height:300px;padding:0px;overflow:hidden;">
  71 + <iframe style="zoom:0.75;
  72 + width:1280px;
  73 + height:786px;
  74 + border:none;
  75 + -ms-transform: scale(0.50);
  76 + -moz-transform: scale(0.50);
  77 + -o-transform: scale(0.50);
  78 + -webkit-transform: scale(0.50);
  79 + transform: scale(0.50);
  80 + -ms-transform-origin: 0 0;
  81 + -moz-transform-origin: 0 0;
  82 + -o-transform-origin: 0 0;
  83 + -webkit-transform-origin: 0 0;
  84 + transform-origin: 0 0;"
  85 + src="{{url}}"
  86 + scrolling="yes">
  87 + </iframe>
  88 + </div>
  89 + </div>
  90 +
  91 + <base-datalet id="base" data-url="{{dataUrl}}"></base-datalet>
  92 +
  93 + </template>
  94 +
  95 + <script>
  96 +
  97 + Polymer({
  98 + is : 'preview-datalet',
  99 +
  100 + properties: {
  101 + /**
  102 + * It's the url for the preview
  103 + *
  104 + * @attribute url
  105 + * @type Strig
  106 + * @default ''
  107 + */
  108 + url : {
  109 + type : String,
  110 + value : ""
  111 + }
  112 + },
  113 +
  114 + /**
  115 + * It is called after the elementโ€™s template has been stamped and all elements inside the elementโ€™s local
  116 + * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
  117 + * and had their ready method called.
  118 + *
  119 + * Extract the dataset domain from the entire URL and set the text content of the datalet footer.
  120 + *
  121 + * @method ready
  122 + *
  123 + */
  124 + ready: function(){
  125 + this.$.base.setDomain(this.url.split("/")[0] + "//" + this.url.split("/")[2]);
  126 + }
  127 + });
  128 + </script>
  129 +</dom-module>
  130 +
datalets/preview-datalet/preview-datalet.png 0 โ†’ 100644

222 KB

datalets/test-datalet/ext-datalet.html deleted
1 -<link rel="import"  
2 - href="../../bower_components/polymer/polymer.html">  
3 -<link rel="import"  
4 - href="test-datalet.html">  
5 -  
6 -<dom-module id="ext-datalet">  
7 -  
8 - <template>  
9 - <test-datalet owner="{{owner}}"></test-datalet>  
10 - </template>  
11 - <script>  
12 - Polymer({  
13 - is: "ext-datalet",  
14 - behaviors: [BaseBehaviour],  
15 - setOwner: function(){  
16 - this.owner = "Specialization";  
17 - },  
18 - ready: function() {  
19 - //Polymer.dom(this.root).appendChild(new TestDatalet(this.owner));  
20 - this.setOwner()  
21 - }  
22 - });  
23 - </script>  
24 -</dom-module>  
25 \ No newline at end of file 0 \ No newline at end of file
datalets/test-datalet/index.html deleted
1 -<!DOCTYPE html>  
2 -<html>  
3 -<head>  
4 - <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>  
5 - <script src="../shared_js/jquery-1.11.2.min.js"></script>  
6 - <script>  
7 - jQuery(document).ready(function($) {  
8 - $.ajax({  
9 - url: "http://www.dublinked.ie/datastore/server/FileServerWeb/FileChecker?metadataUUID=c94cd225ed3740e2bfe891e2db6ccabf&filename=FCC_ACABoundaries_P20130501-1408.csv&_=1435920548083:2",  
10 - type:"GET",  
11 - dataType: "script",  
12 - headers : {  
13 - 'Accept' : '*/*',  
14 - 'Accept-Encoding' : 'gzip, deflate',  
15 - 'Accept-Language' : 'it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4',  
16 - 'Cache-Control' : 'max-age=0',  
17 - 'Connection' : 'keep-alive',  
18 - 'Host' : 'www.dublinked.ie',  
19 - 'Referer' : 'http://service.routetopa.eu/WebComponentsDEV/COMPONENTS/datalets/test-datalet/index.html',  
20 - 'User-Agent' : 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36'  
21 - },  
22 - success: function(data){  
23 - alert(data);  
24 - },  
25 - error: function(xhr, status, error){  
26 - alert(error);  
27 - }});  
28 - /* try {  
29 - $.getScript("http://www.dublinked.ie/datastore/server/FileServerWeb/FileChecker?metadataUUID=c94cd225ed3740e2bfe891e2db6ccabf&filename=FCC_ACABoundaries_P20130501-1408.csv")  
30 - .done(function (script, textStatus) {  
31 - console.log(textStatus);  
32 - });  
33 - }catch(err){  
34 - alert(err.message);  
35 - }*/  
36 - });  
37 -  
38 - </script>  
39 -</head>  
40 -<body>  
41 -<link rel="import" href="http://service.routetopa.eu/WebComponentsDEV/COMPONENTS/datalets/linechart-datalet/linechart-datalet.html">  
42 -<linechart-datalet data_url="http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&amp;limit=50" query="$.result.records..Supplier $.result.records..Amount">  
43 -</linechart-datalet>  
44 -<br><br><br><br><br>  
45 -<link rel="import" href="http://service.routetopa.eu/WebComponentsDEV/COMPONENTS/datalets/datatable-datalet/datatable-datalet.html">  
46 -<datatable-datalet data_url="http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&amp;limit=50" query="$.result.records..Supplier $.result.records..Amount">  
47 -</datatable-datalet>  
48 -  
49 -</body>  
50 -</html>  
51 \ No newline at end of file 0 \ No newline at end of file
datalets/test-datalet/test-datalet.html deleted
1 -<link rel="import"  
2 - href="../../bower_components/polymer/polymer.html">  
3 -  
4 -<dom-module id="test-datalet">  
5 -  
6 - <template>  
7 - <!-- bind to the "owner" property -->  
8 - This is <b>{{owner}}</b>'s name-tag element.  
9 - </template>  
10 -  
11 - <script>  
12 - BaseBehaviour ={  
13 - properties:{  
14 - owner:{  
15 - type: String,  
16 - value: "surname"  
17 - },  
18 - setOwner: function(){  
19 - this.owner = "Base";  
20 - }  
21 -  
22 - },  
23 - factoryImpl: function(owner) {  
24 - this.owner = owner;  
25 - }  
26 - }  
27 -  
28 - TestDatalet = Polymer({  
29 - is: "test-datalet",  
30 - behaviors: [BaseBehaviour]  
31 - });  
32 - </script>  
33 -</dom-module>  
34 \ No newline at end of file 0 \ No newline at end of file
datalets/treemap-datalet/treemap-datalet.html
@@ -109,7 +109,7 @@ Example: @@ -109,7 +109,7 @@ Example:
109 var TreemapBehavior = { 109 var TreemapBehavior = {
110 110
111 map : { 111 map : {
112 - name : "Expenses", 112 + name : this._component.name,
113 children : [] 113 children : []
114 }, 114 },
115 115
@@ -180,6 +180,20 @@ Example: @@ -180,6 +180,20 @@ Example:
180 Polymer({ 180 Polymer({
181 is : 'treemap-datalet' , 181 is : 'treemap-datalet' ,
182 182
  183 + properties: {
  184 + /**
  185 + * It's the name for treemap
  186 + *
  187 + * @attribute name
  188 + * @type String
  189 + * @default ''
  190 + */
  191 + name: {
  192 + type: String,
  193 + value: ""
  194 + }
  195 + },
  196 +
183 ready: function(){ 197 ready: function(){
184 var TreemapComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, TreemapBehavior); 198 var TreemapComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, TreemapBehavior);
185 TreemapComponentBehavior.init(this); 199 TreemapComponentBehavior.init(this);