WebCompDev / COMPONENTS

Commit b4accc86c850fe2d97e1ce394411d8659b3cedef

Authored by Renato De Donato
1 parent d2da5141

datalet improved

Inline Side-by-side
Showing 15 changed files with 50 additions and 190 deletions
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @b4accc8
... ... @@ -360,8 +360,7 @@
360 360 listeners: {
361 361 'items-vslider-controllet_selected-datalet': '_selectDatalet',
362 362 // 'tree-view-controllet_selected-fields': '_updateSelectedFields'
363   - 'change': '_loadDataletBlur'
364   - //change name
  363 + 'change': '_paramsChanged'
365 364 },
366 365  
367 366 ready : function() {//console.log(this.dataletPreset);
... ... @@ -504,27 +503,28 @@
504 503 }
505 504  
506 505 if(load){
507   -// var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
508   -// for (var i = 0; i < labels.length; i++) {
509   -// if (labels[i].innerHTML.trim() != "") {
510   -// this.params[labels[i].label] = labels[i].value;
511   -// }
512   -// }
513 506 this.loadPreview = true
514 507 this._loadDatalet(selectedFields);
515 508 }
516 509  
517 510 },
518 511  
519   - _loadDataletBlur : function(e){//da eliminare
  512 + _updateParams : function(){
520 513  
521 514 var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
522   - for (var i = 0; i < labels.length; i++)
523   - this.params[labels[i].label] = labels[i].value;
  515 + this.params[labels[0].label] = labels[0].value;
  516 +
  517 + if(!labels[0].value)
  518 + this.params[labels[0].label] = "";
524 519  
525 520 var labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");
526 521 for (var i = 0; i < labels.length; i++)
527 522 this.params[labels[i].label] = labels[i].value;
  523 + },
  524 +
  525 + _paramsChanged : function(){
  526 +
  527 + this._updateParams();
528 528  
529 529 if(this.$.datalet_selection_datalet_placeholder.children[1])
530 530 this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
... ... @@ -532,20 +532,7 @@
532 532  
533 533 _loadDatalet : function(selectedFields){
534 534  
535   - var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
536   - for (var i = 0; i < labels.length; i++) {
537   -// if (labels[i].innerHTML.trim() != "") {
538   - this.params[labels[i].label] = labels[i].value;
539   -// }
540   - }
541   -
542   - var labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");
543   - for (var i = 0; i < labels.length; i++) {
544   -// if (labels[i].innerHTML.trim() != "") {
545   - this.params[labels[i].label] = labels[i].value;
546   -// }
547   - }
548   -
  535 + this._updateParams();
549 536  
550 537 var dataletParams ={
551 538 component : this.selectedDatalet+"-datalet",
... ... @@ -567,6 +554,7 @@
567 554 if(this.selectedFields[i])
568 555 selectedFields.push(this.selectedFields[i]);
569 556  
  557 + console.log(this.params);
570 558  
571 559 var data = {
572 560 dataUrl : this.dataUrl,
... ...
datalets/areachart-datalet/areachart-datalet.html
  View file @b4accc8
... ... @@ -141,17 +141,6 @@ Example:
141 141 value: ""
142 142 },
143 143 /**
144   - * It's the title of the chart
145   - *
146   - * @attribute title
147   - * @type Strig
148   - * @default ''
149   - */
150   - title: {
151   - type: String,
152   - value: "Heading"
153   - },
154   - /**
155 144 * It's the values suffix
156 145 *
157 146 * @attribute suffix
... ... @@ -171,7 +160,7 @@ Example:
171 160 */
172 161 ready: function(){
173 162 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, AreachartBehavior);
174   - this.async(function(){this.behavior.init(this)},1000);
  163 + this.async(function(){this.behavior.init(this)},0);
175 164 }
176 165 });
177 166 </script>
... ...
datalets/barchart-datalet/barchart-datalet.html
  View file @b4accc8
... ... @@ -56,23 +56,6 @@ Example:
56 56  
57 57 var BarchartBehavior = {
58 58  
59   -
60   - setParameters: function(params)
61   - {
62   - //"description\":\"d\",\"title\":\"coseeee\",\"x-axis-label\":\"x\",\"y-axis-label\":\"y\",\"suffix\":\"e\"}'
63   - this._component.chart.setTitle({text: params.title});
64   - this._component.chart.xAxis[0].setTitle({text: params['x-axis-label']});
65   - this._component.chart.yAxis[0].setTitle({text: params['y-axis-label']});
66   -
67   -
68   - /*this._component.chart.tooltip.options.formatter = function() {
69   - $.each(this.points,function(){
70   - console.log(this.points);
71   - });
72   - return 'a';
73   - }*/
74   - },
75   -
76 59 /**
77 60 * Bluid Highchart object
78 61 *
... ... @@ -131,7 +114,6 @@ Example:
131 114 series: this.properties.series.value
132 115 });
133 116  
134   - this._component.chart = $(this._component.$.charts.$.container).highcharts();
135 117 }
136 118 };
137 119  
... ... @@ -163,17 +145,6 @@ Example:
163 145 value: ""
164 146 },
165 147 /**
166   - * It's the title of the chart
167   - *
168   - * @attribute title
169   - * @type Strig
170   - * @default ''
171   - */
172   - title: {
173   - type: String,
174   - value: "Heading"
175   - },
176   - /**
177 148 * It's the values suffix
178 149 *
179 150 * @attribute suffix
... ... @@ -194,18 +165,8 @@ Example:
194 165 behavior : {
195 166 type : Object,
196 167 value : {}
197   - },
198   - /**
199   - * It's the component chart
200   - *
201   - * @attribute chart
202   - * @type Object
203   - * @default {}
204   - */
205   - chart : {
206   - type : Object,
207   - value : {}
208 168 }
  169 +
209 170 },
210 171  
211 172 /**
... ... @@ -217,7 +178,7 @@ Example:
217 178 ready: function(){
218 179  
219 180 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, BarchartBehavior);
220   - this.async(function(){this.behavior.init(this)},1000);
  181 + this.async(function(){this.behavior.init(this)},0);
221 182 }
222 183 });
223 184 </script>
... ...
datalets/base-datalet/base-datalet.html
  View file @b4accc8
... ... @@ -81,21 +81,18 @@ Example :
81 81 width: 32px;
82 82 }
83 83 #base_datalet_spin {
84   - height:256px;
85   - width: 256px;
86   - position: relative;
87   - center: center;
  84 + height:64px;
88 85 width: 100%;
  86 + /*position: relative;*/
  87 + /*center: center;*/
89 88 }
90 89 </style>
91 90  
92 91 <div id="base_datalet_imgWaitDatalet">
93   - <img id="base_datalet_spin" src="static/images/spin.svg">
  92 + <img id="base_datalet_spin" src="static/images/spin.svg">
94 93 </div>
95 94  
96 95 <div id="base_datalet_container">
97   - <!--<b>Source:</b><span id="domain"></span>-->
98   - <!--<b></b><span id="domainPage"></span>-->
99 96  
100 97 <b>Source:</b> <a id="base_datalet_source" target="_blank"></a> (<a id="base_datalet_link" target="_blank">dataset</a>)
101 98  
... ... @@ -103,10 +100,9 @@ Example :
103 100 <div id="rtp">Powered by ROUTE-TO-PA</div>
104 101 <div><a href="http://www.routetopa.eu/" target="_blank"><img id="rtpalogo" src="static/images/rtpalogo.png" ></a></div>
105 102 </div>
  103 +
106 104 </div>
107 105  
108   - <!--<b>Source : </b><span id="domain"></span><br><br>-->
109   - <!--<div id="footer">Powered by Route-to-PA&nbsp&nbsp<a href="http://routetopa.eu/"><img src="static/images/rtpalogo.png" id="rtpalogo"></a></div><br>-->
110 106 </template>
111 107  
112 108 <script src="static/js/BaseDataletBehavior.js"></script>
... ...
datalets/bubble3d-datalet/bubble3d-datalet.html
  View file @b4accc8
... ... @@ -226,17 +226,6 @@ Examples:
226 226 value: ""
227 227 },
228 228 /**
229   - * It's the title of the chart
230   - *
231   - * @attribute title
232   - * @type Strig
233   - * @default ''
234   - */
235   - title: {
236   - type: String,
237   - value: ""
238   - },
239   - /**
240 229 * It's the component behavior
241 230 *
242 231 * @attribute behavior
... ... @@ -256,7 +245,7 @@ Examples:
256 245 */
257 246 ready: function(){
258 247 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, Bubble3dBehavior);
259   - this.async(function(){this.behavior.init(this)},1);
  248 + this.async(function(){this.behavior.init(this)},0);
260 249 }
261 250 });
262 251 </script>
... ...
datalets/column3Dchart-datalet/column3Dchart-datalet.html
  View file @b4accc8
... ... @@ -2,7 +2,7 @@
2 2 @license
3 3 The MIT License (MIT)
4 4  
5   - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
6 6  
7 7 Permission is hereby granted, free of charge, to any person obtaining a copy
8 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -156,17 +156,6 @@ Example:
156 156 value: ""
157 157 },
158 158 /**
159   - * It's the title of the chart
160   - *
161   - * @attribute title
162   - * @type Strig
163   - * @default ''
164   - */
165   - title: {
166   - type: String,
167   - value: "Heading"
168   - },
169   - /**
170 159 * It's the component behavior
171 160 *
172 161 * @attribute behavior
... ... @@ -187,7 +176,7 @@ Example:
187 176 */
188 177 ready: function(){
189 178 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, column3DchartBehavior);
190   - this.async(function(){this.behavior.init(this)},1000);
  179 + this.async(function(){this.behavior.init(this)},0);
191 180 }
192 181 });
193 182 </script>
... ...
datalets/columnchart-datalet/columnchart-datalet.html
  View file @b4accc8
... ... @@ -2,7 +2,7 @@
2 2 @license
3 3 The MIT License (MIT)
4 4  
5   - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
6 6  
7 7 Permission is hereby granted, free of charge, to any person obtaining a copy
8 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -144,17 +144,6 @@ Example:
144 144 value: ""
145 145 },
146 146 /**
147   - * It's the title of the chart
148   - *
149   - * @attribute title
150   - * @type Strig
151   - * @default ''
152   - */
153   - title: {
154   - type: String,
155   - value: "Heading"
156   - },
157   - /**
158 147 * It's the values suffix
159 148 *
160 149 * @attribute suffix
... ... @@ -186,7 +175,7 @@ Example:
186 175 */
187 176 ready: function(){
188 177 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, ColumnchartBehavior);
189   - this.async(function(){this.behavior.init(this)},1000);
  178 + this.async(function(){this.behavior.init(this)},0);
190 179 }
191 180 });
192 181 </script>
... ...
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
  View file @b4accc8
... ... @@ -128,7 +128,7 @@ Example:
128 128 transformData: function(e)
129 129 {
130 130 var treemapData = [];
131   - DatasetexplorerBehavior.map.name = this._component.name;
  131 + DatasetexplorerBehavior.map.name = this._component.title;
132 132  
133 133 if(this.data.length > 1) {
134 134 for (i = 0; i < this.data.length; i++) {
... ... @@ -202,17 +202,6 @@ Example:
202 202  
203 203 properties: {
204 204 /**
205   - * It's the name for treemap
206   - *
207   - * @attribute name
208   - * @type String
209   - * @default ''
210   - */
211   - name: {
212   - type: String,
213   - value: ""
214   - },
215   - /**
216 205 * It's the component behavior
217 206 *
218 207 * @attribute behavior
... ...
datalets/datatable-datalet/datatable-datalet.html
  View file @b4accc8
... ... @@ -134,7 +134,7 @@ Example:
134 134  
135 135 ready: function(){
136 136 this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatatableBehavior);
137   - this.async(function(){this.behavior.init(this)},1000);
  137 + this.async(function(){this.behavior.init(this)},0);
138 138 }
139 139 });
140 140  
... ...
datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.html
  View file @b4accc8
... ... @@ -124,17 +124,6 @@ Example:
124 124 behavior : {
125 125 type : Object,
126 126 value : {}
127   - },
128   - /**
129   - * It's the title of the chart
130   - *
131   - * @attribute title
132   - * @type Strig
133   - * @default ''
134   - */
135   - title: {
136   - type: String,
137   - value: ""
138 127 }
139 128 },
140 129  
... ... @@ -146,7 +135,7 @@ Example:
146 135 */
147 136 ready: function(){
148 137 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, DonutPiechartBehavior);
149   - this.async(function(){this.behavior.init(this)},1000);
  138 + this.async(function(){this.behavior.init(this)},0);
150 139 }
151 140 });
152 141 </script>
... ...
datalets/highcharts-datalet/highcharts-datalet.html
  View file @b4accc8
... ... @@ -2,7 +2,7 @@
2 2 @license
3 3 The MIT License (MIT)
4 4  
5   - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
6 6  
7 7 Permission is hereby granted, free of charge, to any person obtaining a copy
8 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -133,7 +133,21 @@ Example :
133 133  
134 134 this.properties.series.value.push(this.data[i]);
135 135 }
136   - }
  136 + },
  137 +
  138 + setParameters: function(params)
  139 + {
  140 + var chart = $(this._component.$.charts.$.container).highcharts();
  141 +
  142 + chart.setTitle({text: params['title']});
  143 + chart.xAxis[0].setTitle({text: params['x-axis-label']});
  144 + chart.yAxis[0].setTitle({text: params['y-axis-label']});
  145 +
  146 + chart.tooltip.options.formatter = function() {
  147 + return this.x + '<br/><br/><span style="fill:#7cb5ec" x="8" dy="15">â—</span> ' + this.series.name + ': <b>' + this.y + ' ' + params['suffix'] + '</b>';
  148 + }
  149 +
  150 + },
137 151 };
138 152  
139 153 var HighchartsComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, HighchartsBehavior);
... ...
datalets/leafletjs-datalet/leafletjs-datalet.html
  View file @b4accc8
... ... @@ -160,7 +160,7 @@ Example:
160 160 L.Icon.Default.imagePath = 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';
161 161  
162 162 this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, leafletjsBehavior);
163   - this.async(function(){this.behavior.init(this)},1000);
  163 + this.async(function(){this.behavior.init(this)},0);
164 164 }
165 165 });
166 166 </script>
... ...
datalets/linechart-datalet/linechart-datalet.html
  View file @b4accc8
... ... @@ -2,7 +2,7 @@
2 2 @license
3 3 The MIT License (MIT)
4 4  
5   - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
6 6  
7 7 Permission is hereby granted, free of charge, to any person obtaining a copy
8 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -136,17 +136,6 @@ Example:
136 136 value: ""
137 137 },
138 138 /**
139   - * It's the title of the chart
140   - *
141   - * @attribute title
142   - * @type Strig
143   - * @default ''
144   - */
145   - title: {
146   - type: String,
147   - value: "Heading"
148   - },
149   - /**
150 139 * It's the values suffix
151 140 *
152 141 * @attribute suffix
... ... @@ -178,7 +167,7 @@ Example:
178 167 */
179 168 ready: function(){
180 169 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, LinechartBehavior);
181   - this.async(function(){this.behavior.init(this)},1000);
  170 + this.async(function(){this.behavior.init(this)},0);
182 171 }
183 172 });
184 173 </script>
... ...
datalets/piechart-datalet/piechart-datalet.html
  View file @b4accc8
... ... @@ -121,17 +121,6 @@ Example:
121 121 behavior : {
122 122 type : Object,
123 123 value : {}
124   - },
125   - /**
126   - * It's the title of the chart
127   - *
128   - * @attribute title
129   - * @type Strig
130   - * @default ''
131   - */
132   - title: {
133   - type: String,
134   - value: ""
135 124 }
136 125 },
137 126  
... ... @@ -143,7 +132,7 @@ Example:
143 132 */
144 133 ready: function(){
145 134 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, PiechartBehavior);
146   - this.async(function(){this.behavior.init(this)},1000);
  135 + this.async(function(){this.behavior.init(this)},0);
147 136 }
148 137 });
149 138 </script>
... ...
datalets/treemap-datalet/treemap-datalet.html
  View file @b4accc8
... ... @@ -189,17 +189,6 @@ Example:
189 189  
190 190 properties: {
191 191 /**
192   - * It's the name for treemap
193   - *
194   - * @attribute name
195   - * @type String
196   - * @default ''
197   - */
198   - title: {
199   - type: String,
200   - value: ""
201   - },
202   - /**
203 192 * It's the component behavior
204 193 *
205 194 * @attribute behavior
... ... @@ -214,7 +203,7 @@ Example:
214 203  
215 204 ready: function(){
216 205 this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, TreemapBehavior);
217   - this.async(function(){this.behavior.init(this)},1000);
  206 + this.async(function(){this.behavior.init(this)},0);
218 207 }
219 208  
220 209 });
... ...