SGH / COMPONENTS

Commit e4d4d425d7c72e8306c26d812e0d1ec50bd389de

Authored by Luigi Serra
2 parents 4ef93b8d 2d979e81

Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Inline Side-by-side
Showing 13 changed files with 307 additions and 68 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @e4d4d42
1   -
2 1 <link rel="import" href="../../bower_components/polymer/polymer.html">
3 2 <link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
4 3 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
... ... @@ -145,19 +144,14 @@
145 144 </style>
146 145  
147 146 <template>
148   - <!--<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
149   - <neon-animatable><div id="hidden"></div></neon-animatable>
150   - <neon-animatable>-->
151   - <paper-material elevation="5" id="window" class="window">
152   - <div class="transparent"></div>
153   - <paper-toolbar id="toolbar">
154   - <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
155   - <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
156   - </paper-toolbar>
157   - <div id="container_content"><content></content></div>
158   - </paper-material>
159   - <!--</neon-animatable>
160   - </neon-animated-pages>-->
  147 + <paper-material elevation="5" id="window" class="window">
  148 + <div class="transparent"></div>
  149 + <paper-toolbar id="toolbar">
  150 + <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
  151 + <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
  152 + </paper-toolbar>
  153 + <div id="container_content"><content></content></div>
  154 + </paper-material>
161 155  
162 156 <div id="button_container" class="horizontal layout">
163 157 <span class="button-container" id="open" on-click="_onOpenClick">
... ...
controllets/create-card-controllet/create-card-controllet.html
  View file @e4d4d42
... ... @@ -183,7 +183,7 @@
183 183 <paper-textarea class="custom_textarea" id="text"
184 184 label=""
185 185 char-counter
186   - max-rows="6"
  186 + max-rows="50"
187 187 maxlength="1024"
188 188 value="{{text}}">
189 189  
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @e4d4d42
... ... @@ -3,6 +3,8 @@
3 3 <!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->
4 4 <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
5 5 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  6 +
  7 +<script defer src="../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
6 8 /********************************************************************************************************************************
7 9  
8 10 <link rel="import" href="../../bower_components/polymer/polymer.html">
... ... @@ -114,8 +116,12 @@
114 116 this.$.slider.selected = 1;
115 117 // console.log(this.selectedDatalet);
116 118 this.dataUrl = this.dataletPreset["data-url"];
117   -
118 119 }
  120 +
  121 +// var languageLink = document.createElement("link");
  122 +// languageLink.rel = "localization";
  123 +// languageLink.href = "../../../locales/it.l20n";
  124 +// document.getElementsByTagName("head")[0].appendChild(languageLink);
119 125 },
120 126  
121 127 _updateSlider : function(e){
... ...
controllets/data-sevc-controllet/demo/index.html
  View file @e4d4d42
... ... @@ -9,11 +9,11 @@
9 9 <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
10 10 <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
11 11  
12   - <!--<meta name="defaultLanguage" content="en-EN">-->
13   - <meta name="availableLanguages" content="en-EN, it-IT">
14   - <!--<link rel="localization" href="../../../locales/{locale}.l20n">-->
15   - <link rel="localization" href="../../../locales/it-IT.l20n">
16   - <script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
  12 + <!--&lt;!&ndash;<meta name="defaultLanguage" content="en">&ndash;&gt;-->
  13 + <!--<meta name="availableLanguages" content="en, it">-->
  14 + <!--&lt;!&ndash;<link rel="localization" href="../../../locales/{locale}.l20n">&ndash;&gt;-->
  15 + <link rel="localization" href="../../../locales/it.l20n">
  16 + <!--<script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>-->
17 17  
18 18 <link rel="import" href="../data-sevc-controllet.html" />
19 19 </head>
... ... @@ -24,6 +24,12 @@
24 24 <data-sevc-controllet id="dsc" deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet>
25 25  
26 26 <script>
  27 +
  28 +// var languageLink = document.createElement("link");
  29 +// languageLink.rel = "localization";
  30 +// languageLink.href = "../../../locales/it.l20n";
  31 +// document.getElementsByTagName("head")[0].appendChild(languageLink);
  32 +
27 33 var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+
28 34 " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
29 35 " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @e4d4d42
... ... @@ -325,14 +325,14 @@
325 325 $(this.$.datalet_selection_labels).perfectScrollbar();
326 326 $(this.$.datalet_selection_datalet).perfectScrollbar();
327 327  
328   - this.modify = true;//da eliminare in futuro
  328 + this.params = {'data-url' : this.dataUrl};
  329 +
  330 + //this.modify = true;//da eliminare in futuro
329 331 if(this.preselectedDatalet){
330 332 this.modify = true;
331 333 this._preselectDatalet();
332 334 this.preselectedDatalet = undefined;
333 335 }
334   -
335   - this.params = {'data-url' : this.dataUrl};
336 336 },
337 337  
338 338 attached : function() {
... ... @@ -348,11 +348,12 @@
348 348 // console.log($(inputs[i]).children("paper-menu"));
349 349  
350 350 this._translate();
351   -
352 351 },
353 352  
354 353 _translate : function(){
355 354 document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s));
  355 + if(this.modify)
  356 + document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
356 357 },
357 358  
358 359 setFields : function(fields) {
... ... @@ -387,10 +388,6 @@
387 388 },
388 389  
389 390 _preselectDatalet : function() {
390   -// this.$.add_button.innerText = "MODIFY DATALET";
391   - document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
392   -
393   -
394 391 this.selectedDatalet = this.preselectedDatalet;
395 392 this.selectedFields = this._copy(this.fields);
396 393  
... ... @@ -426,11 +423,6 @@
426 423 },
427 424  
428 425 _addInput : function(e){
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);
433   -
434 426 var selectedFields = this._copy(this.selectedFields);
435 427  
436 428 var index = $(e.target).parents("paper-dropdown-menu")[0].id;
... ... @@ -456,13 +448,12 @@
456 448 }
457 449  
458 450 if(load){
459   - var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
460   -// console.log(labels);
461   - for (var i = 0; i < labels.length; i++) {
462   - if (labels[i].innerHTML.trim() != "") {
463   - this.params[labels[i].label] = labels[i].value;
464   - }
465   - }
  451 +// var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
  452 +// for (var i = 0; i < labels.length; i++) {
  453 +// if (labels[i].innerHTML.trim() != "") {
  454 +// this.params[labels[i].label] = labels[i].value;
  455 +// }
  456 +// }
466 457  
467 458 this._loadDatalet(selectedFields);
468 459 }
... ... @@ -472,6 +463,18 @@
472 463 _loadDatalet : function(selectedFields){
473 464 // var params = {'data-url' : this.dataUrl};
474 465  
  466 + var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
  467 + for (var i = 0; i < labels.length; i++) {
  468 + if (labels[i].innerHTML.trim() != "") {
  469 + this.params[labels[i].label] = labels[i].value;
  470 + }
  471 + }
  472 +
  473 + console.log(this.selectedDatalet);
  474 + console.log(this.params);
  475 + console.log(selectedFields);
  476 + console.log(this.dataUrl);
  477 +
475 478 var dataletParams ={
476 479 component : this.selectedDatalet+"-datalet",
477 480 params : this.params,
... ... @@ -545,10 +548,10 @@
545 548  
546 549 $("#datalet_selection_inputs").height(h);
547 550 $("#datalet_selection_labels").height(h);
548   - if(this.modify)
  551 +// if(this.modify)
549 552 $("#datalet_selection_datalet").height(h-128);
550   - else
551   - $("#datalet_selection_datalet").height(h);
  553 +// else
  554 +// $("#datalet_selection_datalet").height(h);
552 555 }
553 556  
554 557 });
... ...
controllets/paper-card-controllet/_paper-card-controllet.html 0 → 100644
  View file @e4d4d42
  1 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  2 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  3 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  4 +
  5 +
  6 +<dom-module id="paper-card-controllet">
  7 +
  8 + <template>
  9 + <style>
  10 + :host {
  11 + color: #333;
  12 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  13 + display: inline-block;
  14 + margin: 0 8px 8px ;
  15 + font-size: 14px;
  16 + text-align: justify;
  17 + line-height: 10px;
  18 + --paper-fab-background: var(--accent-color);
  19 + }
  20 +
  21 + paper-material {
  22 + border-radius: 2px;
  23 + background-color: white;
  24 + }
  25 +
  26 + .preview {
  27 + position: relative;
  28 + margin-bottom: 0px;
  29 + /*max-width: 200px;
  30 + max-height: 200px;
  31 + min-width: 200px;
  32 + min-height: 200px;*/
  33 + }
  34 +
  35 + .legend {
  36 + position: absolute;
  37 + background: rgba(0,0,0,0.5);
  38 + bottom: 0;
  39 + color: white;
  40 + height: 40px;
  41 + padding: 0 16px;
  42 + left: 0; right: 0;
  43 + }
  44 +
  45 + paper-fab {
  46 + position: absolute;
  47 + right: 10px;
  48 + bottom: -18px;
  49 + --paper-fab-background:#2196F3;
  50 + }
  51 +
  52 + .content ::content {
  53 + padding: 0 16px 8px;
  54 + font-weight: 300;
  55 + color: var(--secondary-text-color);
  56 + line-height: 24px;
  57 + }
  58 + ::content.buttons {
  59 + margin-top: 8px;
  60 + }
  61 + ::content paper-button, ::content paper-icon-button {
  62 + font-weight: 500;
  63 + color: var(--accent-color);
  64 + }
  65 +
  66 + paper-material{
  67 + max-height: 260px;
  68 + max-width: 200px;
  69 + min-height: 260px;
  70 + min-width: 200px;
  71 + }
  72 +
  73 + #card_content{
  74 + overflow: hidden;
  75 + max-width: 200px;
  76 + max-height: 240px;
  77 + min-width: 200px;
  78 + min-height: 240px;
  79 + }
  80 +
  81 + #datalet_preview{
  82 +
  83 + -ms-transform: scale(0.95);
  84 + -moz-transform: scale(0.95);
  85 + -o-transform: scale(0.95);
  86 + -webkit-transform: scale(0.95);
  87 + transform: scale(0.95);
  88 +
  89 + }
  90 +
  91 + #text_preview{
  92 + font-size: smaller;
  93 + }
  94 +
  95 + </style>
  96 +
  97 + <paper-material elevation="{{elevation}}">
  98 + <div class="vertical layout">
  99 + <div class="preview">
  100 + <div id="card_content">
  101 + <template is="dom-if" if="{{checkType(type,'image')}}">
  102 + <img src="{{imageSrc}}">
  103 + </template>
  104 + <template is="dom-if" if="{{checkType(type,'datalet')}}">
  105 + <div id="datalet_preview"><content></content></div>
  106 + </template>
  107 + <template is="dom-if" if="{{checkType(type,'text')}}">
  108 + <div id="text_preview"><content></content></div>
  109 + </template>
  110 + </div>
  111 + <div class="horizontal layout center legend">
  112 + <span>{{legend}}</span>
  113 + <paper-fab mini icon="{{icon}}"></paper-fab>
  114 + </div>
  115 + </div>
  116 + <div class="content">
  117 + <p>{{text}}</p >
  118 + </div>
  119 + </div>
  120 + </paper-material>
  121 + </template>
  122 +
  123 + <script>
  124 + Polymer({
  125 + is:'paper-card-controllet',
  126 +
  127 + properties: {
  128 + width: {
  129 + type: Number,
  130 + value: 350,
  131 + /*observer: "_changeWidth",*/
  132 + },
  133 + height: {
  134 + type: Number,
  135 + value: 200
  136 + },
  137 +
  138 + legend:{
  139 + type: String,
  140 + value: "Legend"
  141 + },
  142 +
  143 + type:{
  144 + type: String,
  145 + value: "text"
  146 + },
  147 +
  148 + icon:{
  149 + type: String,
  150 + value: "home"
  151 + },
  152 +
  153 + imageSrc: {
  154 + type: String,
  155 + value:""
  156 + }
  157 + },
  158 + _changeWidth: function(data){
  159 + this.style.width = data + "px";
  160 + this.querySelector(".content").width = data + "px";
  161 + },
  162 +
  163 + checkType: function(type, check){
  164 + return (type == check);
  165 + },
  166 +
  167 + ready: function(){
  168 + }
  169 + })
  170 + </script>
  171 +
  172 +
  173 +</dom-module>
0 174 \ No newline at end of file
... ...
controllets/paper-card-controllet/paper-card-controllet.html
  View file @e4d4d42
... ... @@ -210,11 +210,11 @@
210 210 properties: {
211 211 width: {
212 212 type: Number,
213   - observer: "_changeWidth",
  213 + observer: "_changeWidth"
214 214 },
215 215 height: {
216 216 type: Number,
217   - observer: "_changeHeight",
  217 + observer: "_changeHeight"
218 218 },
219 219 cardType:{
220 220 type: String,
... ...
controllets/search-panel-controllet/search-panel-controllet.html
  View file @e4d4d42
... ... @@ -68,10 +68,10 @@ Example:
68 68 position: absolute;
69 69 top: -12px;
70 70 width: 20vw;
71   -
72 71 }
73 72  
74   - neon-animated-pages{
  73 + neon-animated-pages
  74 + {
75 75 /*width: 20vw;*/
76 76 }
77 77  
... ... @@ -143,7 +143,7 @@ Example:
143 143  
144 144 ready: function(){
145 145  
146   - if(this.leftDirection != undefined){
  146 + if(this.leftDirection != undefined){
147 147 this.$.search_text.style.left = '5px';
148 148 }else if(this.rightDirection != undefined){
149 149 this.$.search_text.style.right = '5px';
... ... @@ -169,8 +169,9 @@ Example:
169 169 * @param {Event} e
170 170 */
171 171 _valueChanged : function(oldvalue, newValue){
172   - clearTimeout (this.timer);
173   - this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
  172 + var t = this;
  173 + clearTimeout(this.timer);
  174 + this.timer = setTimeout(function(){t.fire('search-panel-controllet_content-changed', {searchKey: t.searchKey, id : t.id})}, 500);
174 175 },
175 176 /**
176 177 * It returns the value in text area
... ...
datalets/base-datalet/base-datalet.html
  View file @e4d4d42
... ... @@ -97,7 +97,7 @@ Example :
97 97 <!--<b>Source:</b><span id="domain"></span>-->
98 98 <!--<b></b><span id="domainPage"></span>-->
99 99  
100   - <b>Source:</b> <a id="base_datalet_source" target="_blank"></a> ( <a id="base_datalet_link" target="_blank">dataset</a> )
  100 + <b>Source:</b> <a id="base_datalet_source" target="_blank"></a> (<a id="base_datalet_link" target="_blank">dataset</a>)
101 101  
102 102 <div id="base_datalet_rtp">
103 103 <div id="rtp">Powered by ROUTE-TO-PA</div>
... ... @@ -140,33 +140,46 @@ Example :
140 140 * @method ready
141 141 */
142 142 ready: function(){
  143 + //cKan organized with or not catalog
  144 + queryInitial = this.dataUrl.substring(0, this.dataUrl.indexOf("api")); //SOURCE
143 145  
  146 + urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
  147 + this.$.base_datalet_source.innerHTML = urlSource;
  148 + this.$.base_datalet_source.setAttribute("href", urlSource);
144 149  
145 150  
146   - var urlDatalet;
147   - if(this.dataUrl != undefined){
  151 + //OpenDataSoft check
  152 + if(this.dataUrl.indexOf("/records/") > -1 )
  153 + {
  154 + //Resourceid of a datalet
  155 + var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
  156 + var params = this.decomponeQueryString(query);
  157 + resultIssyIdDatalet = params["dataset"];
  158 + resultIssyAPI = "explore/dataset/";
  159 + urlPageDatasetIssy = queryInitial + resultIssyAPI + resultIssyIdDatalet + "/";
148 160  
  161 + this.$.base_datalet_link.setAttribute("href", urlPageDatasetIssy);
  162 + }
  163 + else
  164 + {
  165 + //CKAN portal
  166 + var urlDatalet;
  167 + if(this.dataUrl != undefined) {
149 168 var apiIdResource = "resource_show?id=";
150 169  
151 170 //Resourceid of a datalet
152 171 var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
153   - var params = this.decomponeQueryString(query);
  172 + var params = this.decomponeQueryString(query);
  173 + //CKAN
154 174 resultIdDatalet = params["resource_id"];
155 175  
156 176 //cKan organized with or not catalog
157   - queryInitial = this.dataUrl.substring(0, this.dataUrl.indexOf("api"));
158   - queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"), this.dataUrl.indexOf("datastore_search"));
159   -
160   - urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
161   - urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
162   -
163   -// this.$.domainPage.innerHTML = '<a href=' + urlSource + ' target=' + "_blank>" + urlSource + '</a>'+ "." ;
164   -
165   - this.$.base_datalet_source.innerHTML = urlSource;
166   - this.$.base_datalet_source.setAttribute("href", urlSource);
  177 + queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"), this.dataUrl.indexOf("datastore_search"));
167 178  
  179 + urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
168 180 this.requestDataletData(urlDatalet);
169 181 }
  182 + }
170 183 },
171 184 /**
172 185 * Set the domain url to show in the footer
... ... @@ -210,7 +223,6 @@ Example :
210 223 */
211 224 handleDataletResponse: function(e) {
212 225 this.objectDatalet.json_resultDatalet.value = e;
213   -
214 226 //packageId of a give datalet
215 227 packageIdDatalet = this.objectDatalet.json_resultDatalet.value.result.package_id;
216 228 resourceId = this.objectDatalet.json_resultDatalet.value.result.id;
... ... @@ -228,8 +240,6 @@ Example :
228 240 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
229 241  
230 242 this.$.base_datalet_link.setAttribute("href", urlDatalet);
231   -// this.$.domainPage.innerHTML += " (" + ' <a href=' + urlDatalet + ' target=' + "_blank>" + "Dataset's page" + '</a>' + " )";
232   -
233 243 }
234 244 }
235 245 });
... ...
locales/en-EN.l20n renamed to locales/en.l20n
  View file @e4d4d42
locales/fr.l20n 0 → 100644
  View file @e4d4d42
  1 +<slide1Title "SELECT DATASET">
  2 +<slide1Subtitle "Search or copy and paste the url of dataset.">
  3 +<slide2Title "SELECT DATA">
  4 +<slide2Subtitle "Select the fields from tree-view. The multi-table will show the values related to the selected fields.">
  5 +<slide3Title "SELECT VISUALIZATION">
  6 +<slide3Subtitle "Select a visualization, fill out inputs and labels (optional).">
  7 +
  8 +<listView "LIST VIEW">
  9 +<treeMapView "TREE MAP VIEW">
  10 +<mostPopular "MOST POPULAR">
  11 +<availableDatasets "Available datasets">
  12 +<suggestedDatasets "Suggested datasets">
  13 +<selectedUrl "Selected url">
  14 +
  15 +<inputs "INPUTS">
  16 +<labels "LABELS / OPTIONS">
  17 +<comment "COMMENT">
  18 +<commentLabel "comment (max 100 characters)">
  19 +<dataletPreview "DATALET PREVIEW">
  20 +<addDatalet "ADD">
  21 +<modifyDatalet "MODIFY">
  22 +
  23 +<googlePiechartDescription "The labels of slices.">
0 24 \ No newline at end of file
... ...
locales/it-IT.l20n renamed to locales/it.l20n
  View file @e4d4d42
locales/nl.l20n 0 → 100644
  View file @e4d4d42
  1 +<slide1Title "SELECT DATASET">
  2 +<slide1Subtitle "Search or copy and paste the url of dataset.">
  3 +<slide2Title "SELECT DATA">
  4 +<slide2Subtitle "Select the fields from tree-view. The multi-table will show the values related to the selected fields.">
  5 +<slide3Title "SELECT VISUALIZATION">
  6 +<slide3Subtitle "Select a visualization, fill out inputs and labels (optional).">
  7 +
  8 +<listView "LIST VIEW">
  9 +<treeMapView "TREE MAP VIEW">
  10 +<mostPopular "MOST POPULAR">
  11 +<availableDatasets "Available datasets">
  12 +<suggestedDatasets "Suggested datasets">
  13 +<selectedUrl "Selected url">
  14 +
  15 +<inputs "INPUTS">
  16 +<labels "LABELS / OPTIONS">
  17 +<comment "COMMENT">
  18 +<commentLabel "comment (max 100 characters)">
  19 +<dataletPreview "DATALET PREVIEW">
  20 +<addDatalet "ADD">
  21 +<modifyDatalet "MODIFY">
  22 +
  23 +<googlePiechartDescription "The labels of slices.">
0 24 \ No newline at end of file
... ...