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