google chart & localization improvements

Renato De Donato
1 parent 331a2265
Showing 7 changed files with 74 additions and 46 deletions
controllets/data-sevc-controllet/colors
controllets/datalet-selection-controllet/datalet-selection-controllet.html
controllets/datalet-selection-controllet/demo/index.html
datalets/google_piechart-datalet/google_piechart-datalet.html
datalets/google_piechart-datalet/google_piechart-datalet.png
locales/en-EN.l20n
locales/it-IT.l20n
@@ -25,10 +25,8 @@ E0E0E0
 00AABF
-
-
-
-
+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"}
+use ['']
@@ -175,6 +175,7 @@
             #dialog_info_input {
                 border: 2px solid #2196F3;
                 background-color: #E0E0E0;
+                min-width: 256px;
             }
         </style>
@@ -185,15 +186,9 @@
             <paper-material id="datalet_selection_inputs" elevation="5">
-                <div class="input_header">INPUTS</div>
+                <div class="input_header"><span data-l10n-id="inputs"></span></div>
                 <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
                     <div class="inputs">
-                        <!--<div class="input_name">-->
-                            <!--{{item.name}}-->
-                            <!--<div class="info_button">-->
-                                <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
-                            <!--</div>-->
-                        <!--</div>-->
                         <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
                             <paper-menu class="dropdown-content">
                                 <template is="dom-repeat" items={{fields}}>
@@ -209,15 +204,9 @@
             </paper-material>
             <paper-material id="datalet_selection_labels" elevation="5">
-                <div class="input_header">LABELS</div>
+                <div class="input_header"><span data-l10n-id="labels"></span></div>
                 <template is="dom-repeat" items="{{labels}}" index-as="index">
                     <div class="inputs">
-                        <!--<div class="input_name">-->
-                            <!--{{item.name}}-->
-                            <!--<div class="info_button">-->
-                                <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
-                            <!--</div>-->
-                        <!--</div>-->
                         <paper-textarea label={{item.name}}></paper-textarea>
                         <div class="info_button">
                             <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
@@ -231,18 +220,18 @@
                 <!--<template is="dom-if" if={{modify}}>-->
                     <paper-material id="datalet_selection_comment" elevation="5">
-                        <div class="input_header">COMMENT</div>
+                        <div class="input_header"><span data-l10n-id="comment"></span></div>
                         <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
                     </paper-material>
                 <!--</template>-->
                 <paper-material id="datalet_selection_datalet" elevation="5">
-                    <div class="input_header">DATALET PREVIEW</div>
+                    <div class="input_header"><span data-l10n-id="dataletPreview"></span></div>
                     <div id="datalet_selection_datalet_placeholder"></div>
                 </paper-material>
-                <paper-button id="add_button" disabled raised on-click="_addDatalet">ADD DATALET</paper-button>
+                <paper-button id="add_button" disabled raised on-click="_addDatalet"><span data-l10n-id="addDatalet"></span></paper-button>
             </div>
@@ -357,6 +346,13 @@
 //                    console.log(i);
 //                for(var i=0; i < inputs.length; i++)
 //                    console.log($(inputs[i]).children("paper-menu"));
+
+                this._translate();
+
+            },
+
+            _translate : function(){
+                document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s));
             },
             setFields : function(fields) {
@@ -391,7 +387,8 @@
             },
             _preselectDatalet : function() {
-                this.$.add_button.innerText = "MODIFY DATALET";
+//                this.$.add_button.innerText = "MODIFY DATALET";
+                document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
                 this.selectedDatalet = this.preselectedDatalet;
@@ -429,10 +426,10 @@
             },
             _addInput : function(e){
-                console.log(e.target.innerHTML.trim());
-                console.log(e.target.innerText);
-                console.log(e.currentTarget.innerHTML.trim());
-                console.log(e.currentTarget.innerText);
+//                console.log(e.target.innerHTML.trim());
+//                console.log(e.target.innerText);
+//                console.log(e.currentTarget.innerHTML.trim());
+//                console.log(e.currentTarget.innerText);
                 var selectedFields = this._copy(this.selectedFields);
@@ -460,21 +457,16 @@
                 if(load){
                     var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
-                    console.log(labels);
+//                    console.log(labels);
                     for (var i = 0; i < labels.length; i++) {
                         if (labels[i].innerHTML.trim() != "") {
                             this.params[labels[i].label] = labels[i].value;
                         }
                     }
-
+                    
                     this._loadDatalet(selectedFields);
                 }
-//                $("#base_datalet_container").html("");
-//                $("#base_datalet_container").css('visibility','hidden');
-//                $("#base_datalet_container").css('padding','0px');
-//                $("#base_datalet_container").css('height','0px');
-//                console.log($("#base_datalet_container"));
             },
             _loadDatalet : function(selectedFields){
@@ -526,7 +518,8 @@
                     dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
                 this.$.dialog_name.innerHTML = dataset.name;
-                this.$.dialog_description.innerHTML = dataset.description;
+//                this.$.dialog_description.innerHTML = dataset.description;
+                document.l10n.formatValue(dataset.description).then(s => this.$.dialog_description.innerHTML = s);
                 this.$.dialog_info_input.open();
                 var pos = t.getBoundingClientRect();
@@ -8,6 +8,12 @@
     <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
     <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+    <!--<meta name="defaultLanguage" content="en-EN">-->
+    <meta name="availableLanguages" content="en-EN, it-IT">
+    <!--<link rel="localization" href="../../../locales/{locale}.l20n">-->
+    <link rel="localization" href="../../../locales/it-IT.l20n">
+    <script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
+
     <link rel="import" href="../datalet-selection-controllet.html" />
 </head>
@@ -62,8 +62,10 @@
         var GooglePiechartBehavior = {
             presentData : function(){
-                var cols = [{"label": this.data[0].name, "type": "string"}, {"label": this.data[1].name, "type": "number"}];
+                if(!this._dataIsValid())
+                    return;
+                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]}];
                 var rows = [];
                 for(var i=0; i<this.data[0].data.length; i++)
                 {
@@ -71,17 +73,30 @@
                     rows.push(row);
                 }
-                var options = {"title": this._component._title, "pieHole": this._component.pieHole, "is3D": this._component.is3D, "sliceVisibilityThreshold": this._component.sliceVisibilityThreshold};
+                this._updateOptions();
                 this._component.cols = cols;
                 this._component.rows = rows;
-                this._component.options = options;
             },
             _updateOptions : function(){
-                var options = {"title": this._component._title, "pieHole": this._component.pieHole, "is3D": this._component.is3D, "sliceVisibilityThreshold": this._component.sliceVisibilityThreshold};
+                if(!this._dataIsValid())
+                    return;
+
+                var options = this._component.options;
+
+                options["title"] = this._component._title;
+                options["pieHole"] = this._component.pieHole;
+                options["is3D"] = this._component.is3D;
+
                 this._component.options = options;
                 this._component.$.google_piechart.drawChart();
+            },
+
+            _dataIsValid : function(){
+                if(!this.data[0] || !this.data[1] || typeof this.data[1].data[0] != "number")
+                    return false;
+                return true;
             }
         };
@@ -113,7 +128,7 @@
                 options: {
                     type: Object,
-                    value: undefined
+                    value: {"sliceVisibilityThreshold": .03}
                 },
                 _title: {//_?
@@ -129,12 +144,8 @@
                 pieHole: {
                     type: Number,
                     value: 0
-                },
-
-                sliceVisibilityThreshold: {
-                    type: Number,
-                    value: 1/20
                 }
+
             },
             observers: [
@@ -10,4 +10,14 @@
 <mostPopular "MOST POPULAR">
 <availableDatasets "Available datasets">
 <suggestedDatasets "Suggested datasets">
-<selectedUrl "Selected url">
 \ No newline at end of file
+<selectedUrl "Selected url">
+
+<inputs "INPUTS">
+<labels "LABELS / OPTIONS">
+<comment "COMMENT">
+<commentLabel "comment (max 100 characters)">
+<dataletPreview "DATALET PREVIEW">
+<addDatalet "ADD">
+<modifyDatalet "MODIFY">
+
+<googlePiechartDescription "The labels of slices.">
 \ No newline at end of file
@@ -10,4 +10,14 @@
 <mostPopular "POPOLARI">
 <availableDatasets "Dataset disponibili">
 <suggestedDatasets "Dataset suggeriti">
-<selectedUrl "Url selezionato">
 \ No newline at end of file
+<selectedUrl "Url selezionato">
+
+<inputs "INPUT">
+<labels "ETICHETTE / OPZIONI">
+<comment "COMMENTO">
+<commentLabel "commento (massimo 100 caratteri)">
+<dataletPreview "ANTEPRIMA DATALET">
+<addDatalet "AGGIUNGI">
+<modifyDatalet "MODIFICA">
+
+<googlePiechartDescription "Le etichette delle fette.">
 \ No newline at end of file