SGH / COMPONENTS

Commit 035bbee3851a9ec5ef21362cb84cab2579bd8a44

Authored by Luigi Serra
1 parent c011cd54
master ... v1.4 v1.2 v1.0

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 47 <link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
48 48 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
49 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 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 254 height: 50vh;
254 255 }
255 256  
  257 + #idm_layout_main_container{
  258 + position: relative;
  259 + height: 25vh;
  260 + }
  261 +
256 262 paper-menu{
257 263 width: 100%;
258 264 }
... ... @@ -411,6 +417,13 @@ Example:
411 417 </div>
412 418 <div id="datalet_idm_fields_container" class="area_container"></div>
413 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 427 </div>
415 428 </div>
416 429  
... ... @@ -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 492 * Fired when the user press to finish button. At this event are attached all information about the visualization currently created
474 493 *
475 494 * @event data-sevc-controllet.dataletCreated
... ... @@ -478,7 +497,8 @@ Example:
478 497 listeners : {
479 498 'items-slider-controllet_item-selected' : '_dataletSelected',
480 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 504 properties : {
... ... @@ -555,6 +575,17 @@ Example:
555 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 589 * It's used to store the tab index in the first pass
559 590 *
560 591 * @attribute DatasourceTabSelected
... ... @@ -577,7 +608,6 @@ Example:
577 608 type : Array,
578 609 value : []
579 610 }
580   -
581 611 },
582 612 /**
583 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 623 $(this.$.fields_placeholder).perfectScrollbar();
594 624 $(this.$.selected_fields_main_container).perfectScrollbar();
595 625 $(this.$.idm_fields_main_container).perfectScrollbar();
  626 + $(this.$.idm_layout_main_container).perfectScrollbar();
596 627 $(this.$.table_fields_container).perfectScrollbar();
597 628  
598 629 },
... ... @@ -642,6 +673,7 @@ Example:
642 673  
643 674 var response = e.detail.response;
644 675 this.$.datalet_idm_fields_container.innerHTML = "";
  676 + this.$.idm_layout_container.innerHTML = "";
645 677  
646 678 if(response.idm.inputs.input.constructor == Object) {
647 679 var input = response.idm.inputs.input;
... ... @@ -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 747 * Validate the current pass in order to access to next one.
... ... @@ -804,30 +888,20 @@ Example:
804 888 */
805 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 905 * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.
832 906 *
833 907 * @method _handleDatasourceDragOver
... ... @@ -846,7 +920,7 @@ Example:
846 920 */
847 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 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 925 this.$.message.show();
852 926 return;
... ... @@ -854,7 +928,8 @@ Example:
854 928  
855 929 var data = {
856 930 dataUrl : this.dataUrl,
857   - fields : this.selected_fields,
  931 + params : this.params_fields,
  932 + fields : this.selected_fields,
858 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 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 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 0 \ No newline at end of file
controllets/draggable-element-controllet/draggable-element-controllet.html
  View file @035bbee
... ... @@ -197,7 +197,7 @@ Example:
197 197 */
198 198 number: {
199 199 type: String,
200   - value : "0"
  200 + value : "1"
201 201 },
202 202 /**
203 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 182 \ No newline at end of file
... ...
controllets/treeview-controllet/treeview-controllet.html
  View file @035bbee
... ... @@ -220,6 +220,12 @@ Example:
220 220  
221 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 229 listeners : {
224 230 'tap' : '_clickHandler'
225 231 },
... ... @@ -353,7 +359,7 @@ Example:
353 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 365 _clickHandler : function(e){
... ...
datalets/barchart-datalet/barchart-datalet.html
  View file @035bbee
... ... @@ -47,6 +47,7 @@ Example:
47 47 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
48 48 </template>
49 49 <script>
  50 +
50 51 var BarchartBehavior = {
51 52  
52 53  
... ... @@ -63,18 +64,18 @@ Example:
63 64 zoomType: 'xy'
64 65 },
65 66 title: {
66   - text: 'Bar chart'
  67 + text: this._component.title
67 68 },
68 69 xAxis: {
69 70 categories: this.properties.categories.value,
70 71 title: {
71   - text: null
  72 + text: this._component.xAxisLabel
72 73 }
73 74 },
74 75 yAxis: {
75 76 min: 0,
76 77 title: {
77   - text: 'Foreclosure (units)',
  78 + text: this._component.yAxisLabel,
78 79 align: 'high'
79 80 },
80 81 labels: {
... ... @@ -82,7 +83,7 @@ Example:
82 83 }
83 84 },
84 85 tooltip: {
85   - valueSuffix: ' units'
  86 + valueSuffix: ' ' + this._component.suffix
86 87 },
87 88 plotOptions: {
88 89 bar: {
... ... @@ -110,9 +111,57 @@ Example:
110 111 }
111 112 };
112 113  
  114 +
113 115 BarchartDatalet = Polymer({
114 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 166 * 'ready' callback extend the BarchartComponentBehavior with HighchartsComponentBehavior and BarchartBehavior
118 167 * and run the Datalet workcycle.
... ...
datalets/base-datalet/base-datalet.html
  View file @035bbee
... ... @@ -84,6 +84,13 @@ Example :
84 84 */
85 85 ready: function(){
86 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 96 </script>
... ...
datalets/column3Dchart-datalet/column3Dchart-datalet.html
  View file @035bbee
... ... @@ -57,8 +57,8 @@ Example:
57 57 </template>
58 58  
59 59 <script>
60   - var chart = null;
61 60  
  61 + var chart = null;
62 62  
63 63 var column3DchartBehavior = {
64 64  
... ... @@ -68,42 +68,45 @@ Example:
68 68 * @method transformData
69 69 */
70 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 112 // Activate the sliders
... ... @@ -123,6 +126,42 @@ Example:
123 126 column3DchartDatalet = Polymer({
124 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 166 * 'ready' callback extend the column3DchartComponentBehavior with HighchartsComponentBehavior and column3DchartBehavior
128 167 * and run the Datalet workcycle.
... ... @@ -130,6 +169,7 @@ Example:
130 169 * @method ready
131 170 */
132 171 ready: function(){
  172 +
133 173 var column3DchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, column3DchartBehavior);
134 174 column3DchartComponentBehavior.init(this);
135 175 }
... ...
datalets/columnchart-datalet/columnchart-datalet.html
  View file @035bbee
... ... @@ -47,6 +47,7 @@ Example:
47 47 <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
48 48 </template>
49 49 <script>
  50 +
50 51 var ColumnchartBehavior = {
51 52  
52 53  
... ... @@ -62,18 +63,18 @@ Example:
62 63 zoomType: 'xy'
63 64 },
64 65 title: {
65   - text: 'Column chart'
  66 + text: this._component.title
66 67 },
67 68 xAxis: {
68 69 categories: this.properties.categories.value,//this._component.categories,
69 70 title: {
70   - text: null
  71 + text: this._component.xAxisLabel
71 72 }
72 73 },
73 74 yAxis: {
74 75 min: 0,
75 76 title: {
76   - text: 'Units',
  77 + text: this._component.yAxisLabel,
77 78 align: 'high'
78 79 },
79 80 labels: {
... ... @@ -81,7 +82,7 @@ Example:
81 82 }
82 83 },
83 84 tooltip: {
84   - valueSuffix: ' units'
  85 + valueSuffix: ' ' + this._component.suffix
85 86 },
86 87 plotOptions: {
87 88 bar: {
... ... @@ -109,9 +110,57 @@ Example:
109 110 }
110 111 };
111 112  
  113 +
112 114 LinechartDatalet = Polymer({
113 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 165 * 'ready' callback extend the ColumnchartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior
117 166 * and run the Datalet workcycle.
... ...
datalets/linechart-datalet/linechart-datalet.html
  View file @035bbee
... ... @@ -59,20 +59,20 @@ Example:
59 59  
60 60 $(this._component.$.charts.$.container).highcharts({
61 61 title: {
62   - text: 'Line chart'
  62 + text: "" + this._component.title
63 63 },
64 64 chart: {
65   - zoomType: 'xy'
66   - },
  65 + zoomType: 'xy'
  66 + },
67 67 xAxis: {
68 68 categories: this.properties.categories.value,//this._component.categories,
69 69 title: {
70   - text: null
  70 + text: this._component.xAxisLabel
71 71 }
72 72 },
73 73 yAxis: {
74 74 title: {
75   - text: 'Units'
  75 + text: this._component.yAxisLabel
76 76 },
77 77 plotLines: [{
78 78 value: 0,
... ... @@ -81,7 +81,7 @@ Example:
81 81 }]
82 82 },
83 83 tooltip: {
84   - valueSuffix: ' units'
  84 + valueSuffix: ' ' + this._component.suffix
85 85 },
86 86 legend: {
87 87 layout: 'vertical',
... ... @@ -102,9 +102,57 @@ Example:
102 102 }
103 103 };
104 104  
  105 +
105 106 LinechartDatalet = Polymer({
106 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 157 * 'ready' callback extend the LinechartComponentBehavior with HighchartsComponentBehavior and LinechartBehavior
110 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 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 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 0 \ No newline at end of file
datalets/treemap-datalet/treemap-datalet.html
  View file @035bbee
... ... @@ -109,7 +109,7 @@ Example:
109 109 var TreemapBehavior = {
110 110  
111 111 map : {
112   - name : "Expenses",
  112 + name : this._component.name,
113 113 children : []
114 114 },
115 115  
... ... @@ -180,6 +180,20 @@ Example:
180 180 Polymer({
181 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 197 ready: function(){
184 198 var TreemapComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, TreemapBehavior);
185 199 TreemapComponentBehavior.init(this);
... ...