SGH / COMPONENTS

Commit 97e0b0f899ee867dc1f2ca0072de2bf6276b4853

Authored by Renato De Donato
1 parent 331a2265

google chart & localization improvements

Inline Side-by-side
Showing 7 changed files with 74 additions and 46 deletions
controllets/data-sevc-controllet/colors
  View file @97e0b0f
... ... @@ -25,10 +25,8 @@ E0E0E0
25 25  
26 26 00AABF
27 27  
28   -
29   -
30   -
31   -
  28 +goole colors: {"#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"}
  29 +use ['']
32 30  
33 31  
34 32  
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @97e0b0f
... ... @@ -175,6 +175,7 @@
175 175 #dialog_info_input {
176 176 border: 2px solid #2196F3;
177 177 background-color: #E0E0E0;
  178 + min-width: 256px;
178 179 }
179 180 </style>
180 181  
... ... @@ -185,15 +186,9 @@
185 186  
186 187  
187 188 <paper-material id="datalet_selection_inputs" elevation="5">
188   - <div class="input_header">INPUTS</div>
  189 + <div class="input_header"><span data-l10n-id="inputs"></span></div>
189 190 <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
190 191 <div class="inputs">
191   - <!--<div class="input_name">-->
192   - <!--{{item.name}}-->
193   - <!--<div class="info_button">-->
194   - <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
195   - <!--</div>-->
196   - <!--</div>-->
197 192 <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
198 193 <paper-menu class="dropdown-content">
199 194 <template is="dom-repeat" items={{fields}}>
... ... @@ -209,15 +204,9 @@
209 204 </paper-material>
210 205  
211 206 <paper-material id="datalet_selection_labels" elevation="5">
212   - <div class="input_header">LABELS</div>
  207 + <div class="input_header"><span data-l10n-id="labels"></span></div>
213 208 <template is="dom-repeat" items="{{labels}}" index-as="index">
214 209 <div class="inputs">
215   - <!--<div class="input_name">-->
216   - <!--{{item.name}}-->
217   - <!--<div class="info_button">-->
218   - <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
219   - <!--</div>-->
220   - <!--</div>-->
221 210 <paper-textarea label={{item.name}}></paper-textarea>
222 211 <div class="info_button">
223 212 <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
... ... @@ -231,18 +220,18 @@
231 220  
232 221 <!--<template is="dom-if" if={{modify}}>-->
233 222 <paper-material id="datalet_selection_comment" elevation="5">
234   - <div class="input_header">COMMENT</div>
  223 + <div class="input_header"><span data-l10n-id="comment"></span></div>
235 224 <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
236 225 </paper-material>
237 226 <!--</template>-->
238 227  
239 228 <paper-material id="datalet_selection_datalet" elevation="5">
240   - <div class="input_header">DATALET PREVIEW</div>
  229 + <div class="input_header"><span data-l10n-id="dataletPreview"></span></div>
241 230 <div id="datalet_selection_datalet_placeholder"></div>
242 231  
243 232 </paper-material>
244 233  
245   - <paper-button id="add_button" disabled raised on-click="_addDatalet">ADD DATALET</paper-button>
  234 + <paper-button id="add_button" disabled raised on-click="_addDatalet"><span data-l10n-id="addDatalet"></span></paper-button>
246 235  
247 236 </div>
248 237  
... ... @@ -357,6 +346,13 @@
357 346 // console.log(i);
358 347 // for(var i=0; i < inputs.length; i++)
359 348 // console.log($(inputs[i]).children("paper-menu"));
  349 +
  350 + this._translate();
  351 +
  352 + },
  353 +
  354 + _translate : function(){
  355 + document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s));
360 356 },
361 357  
362 358 setFields : function(fields) {
... ... @@ -391,7 +387,8 @@
391 387 },
392 388  
393 389 _preselectDatalet : function() {
394   - this.$.add_button.innerText = "MODIFY DATALET";
  390 +// this.$.add_button.innerText = "MODIFY DATALET";
  391 + document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
395 392  
396 393  
397 394 this.selectedDatalet = this.preselectedDatalet;
... ... @@ -429,10 +426,10 @@
429 426 },
430 427  
431 428 _addInput : function(e){
432   - console.log(e.target.innerHTML.trim());
433   - console.log(e.target.innerText);
434   - console.log(e.currentTarget.innerHTML.trim());
435   - console.log(e.currentTarget.innerText);
  429 +// console.log(e.target.innerHTML.trim());
  430 +// console.log(e.target.innerText);
  431 +// console.log(e.currentTarget.innerHTML.trim());
  432 +// console.log(e.currentTarget.innerText);
436 433  
437 434 var selectedFields = this._copy(this.selectedFields);
438 435  
... ... @@ -460,21 +457,16 @@
460 457  
461 458 if(load){
462 459 var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
463   - console.log(labels);
  460 +// console.log(labels);
464 461 for (var i = 0; i < labels.length; i++) {
465 462 if (labels[i].innerHTML.trim() != "") {
466 463 this.params[labels[i].label] = labels[i].value;
467 464 }
468 465 }
469   -
  466 +
470 467 this._loadDatalet(selectedFields);
471 468 }
472 469  
473   -// $("#base_datalet_container").html("");
474   -// $("#base_datalet_container").css('visibility','hidden');
475   -// $("#base_datalet_container").css('padding','0px');
476   -// $("#base_datalet_container").css('height','0px');
477   -// console.log($("#base_datalet_container"));
478 470 },
479 471  
480 472 _loadDatalet : function(selectedFields){
... ... @@ -526,7 +518,8 @@
526 518 dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
527 519  
528 520 this.$.dialog_name.innerHTML = dataset.name;
529   - this.$.dialog_description.innerHTML = dataset.description;
  521 +// this.$.dialog_description.innerHTML = dataset.description;
  522 + document.l10n.formatValue(dataset.description).then(s => this.$.dialog_description.innerHTML = s);
530 523 this.$.dialog_info_input.open();
531 524  
532 525 var pos = t.getBoundingClientRect();
... ...
controllets/datalet-selection-controllet/demo/index.html
  View file @97e0b0f
... ... @@ -8,6 +8,12 @@
8 8 <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
9 9 <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
10 10  
  11 + <!--<meta name="defaultLanguage" content="en-EN">-->
  12 + <meta name="availableLanguages" content="en-EN, it-IT">
  13 + <!--<link rel="localization" href="../../../locales/{locale}.l20n">-->
  14 + <link rel="localization" href="../../../locales/it-IT.l20n">
  15 + <script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
  16 +
11 17 <link rel="import" href="../datalet-selection-controllet.html" />
12 18 </head>
13 19  
... ...
datalets/google_piechart-datalet/google_piechart-datalet.html
  View file @97e0b0f
... ... @@ -62,8 +62,10 @@
62 62 var GooglePiechartBehavior = {
63 63  
64 64 presentData : function(){
65   - var cols = [{"label": this.data[0].name, "type": "string"}, {"label": this.data[1].name, "type": "number"}];
  65 + if(!this._dataIsValid())
  66 + return;
66 67  
  68 + var cols = [{"label": this.data[0].name, "type": typeof this.data[0].data[0]}, {"label": this.data[1].name, "type": typeof this.data[1].data[0]}];
67 69 var rows = [];
68 70 for(var i=0; i<this.data[0].data.length; i++)
69 71 {
... ... @@ -71,17 +73,30 @@
71 73 rows.push(row);
72 74 }
73 75  
74   - var options = {"title": this._component._title, "pieHole": this._component.pieHole, "is3D": this._component.is3D, "sliceVisibilityThreshold": this._component.sliceVisibilityThreshold};
  76 + this._updateOptions();
75 77  
76 78 this._component.cols = cols;
77 79 this._component.rows = rows;
78   - this._component.options = options;
79 80 },
80 81  
81 82 _updateOptions : function(){
82   - var options = {"title": this._component._title, "pieHole": this._component.pieHole, "is3D": this._component.is3D, "sliceVisibilityThreshold": this._component.sliceVisibilityThreshold};
  83 + if(!this._dataIsValid())
  84 + return;
  85 +
  86 + var options = this._component.options;
  87 +
  88 + options["title"] = this._component._title;
  89 + options["pieHole"] = this._component.pieHole;
  90 + options["is3D"] = this._component.is3D;
  91 +
83 92 this._component.options = options;
84 93 this._component.$.google_piechart.drawChart();
  94 + },
  95 +
  96 + _dataIsValid : function(){
  97 + if(!this.data[0] || !this.data[1] || typeof this.data[1].data[0] != "number")
  98 + return false;
  99 + return true;
85 100 }
86 101  
87 102 };
... ... @@ -113,7 +128,7 @@
113 128  
114 129 options: {
115 130 type: Object,
116   - value: undefined
  131 + value: {"sliceVisibilityThreshold": .03}
117 132 },
118 133  
119 134 _title: {//_?
... ... @@ -129,12 +144,8 @@
129 144 pieHole: {
130 145 type: Number,
131 146 value: 0
132   - },
133   -
134   - sliceVisibilityThreshold: {
135   - type: Number,
136   - value: 1/20
137 147 }
  148 +
138 149 },
139 150  
140 151 observers: [
... ...
datalets/google_piechart-datalet/google_piechart-datalet.png
View file @97e0b0f

24.8 KB | W: | H:

12.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
locales/en-EN.l20n
  View file @97e0b0f
... ... @@ -10,4 +10,14 @@
10 10 <mostPopular "MOST POPULAR">
11 11 <availableDatasets "Available datasets">
12 12 <suggestedDatasets "Suggested datasets">
13   -<selectedUrl "Selected url">
14 13 \ No newline at end of file
  14 +<selectedUrl "Selected url">
  15 +
  16 +<inputs "INPUTS">
  17 +<labels "LABELS / OPTIONS">
  18 +<comment "COMMENT">
  19 +<commentLabel "comment (max 100 characters)">
  20 +<dataletPreview "DATALET PREVIEW">
  21 +<addDatalet "ADD">
  22 +<modifyDatalet "MODIFY">
  23 +
  24 +<googlePiechartDescription "The labels of slices.">
15 25 \ No newline at end of file
... ...
locales/it-IT.l20n
  View file @97e0b0f
... ... @@ -10,4 +10,14 @@
10 10 <mostPopular "POPOLARI">
11 11 <availableDatasets "Dataset disponibili">
12 12 <suggestedDatasets "Dataset suggeriti">
13   -<selectedUrl "Url selezionato">
14 13 \ No newline at end of file
  14 +<selectedUrl "Url selezionato">
  15 +
  16 +<inputs "INPUT">
  17 +<labels "ETICHETTE / OPZIONI">
  18 +<comment "COMMENTO">
  19 +<commentLabel "commento (massimo 100 caratteri)">
  20 +<dataletPreview "ANTEPRIMA DATALET">
  21 +<addDatalet "AGGIUNGI">
  22 +<modifyDatalet "MODIFICA">
  23 +
  24 +<googlePiechartDescription "Le etichette delle fette.">
15 25 \ No newline at end of file
... ...