WebCompDev / COMPONENTS

Commit 035bbee3851a9ec5ef21362cb84cab2579bd8a44

Authored by Luigi Serra
1 parent c011cd54

Datalets and controllets update with layout inputs

Inline Side-by-side
Showing 18 changed files with 678 additions and 1082 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @035bbee
@@ -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
View file @c011cd5
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
View file @c011cd5
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
View file @c011cd5
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
  View file @035bbee
@@ -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
  View file @035bbee
  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
  View file @035bbee
@@ -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
  View file @035bbee
@@ -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
  View file @035bbee
@@ -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
  View file @035bbee
@@ -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
  View file @035bbee
@@ -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
  View file @035bbee
@@ -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
  View file @035bbee
  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
View file @035bbee

222 KB
datalets/test-datalet/ext-datalet.html deleted
View file @c011cd5
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
View file @c011cd5
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
View file @c011cd5
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
  View file @035bbee
@@ -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);