From fb05b400c1e8f4efa4ff29d6cbf0a9422590aa69 Mon Sep 17 00:00:00 2001
From: renato <rended83@gmail.com>
Date: Wed, 23 Mar 2016 14:04:05 +0100
Subject: [PATCH] controllet 2.0, new datalets

---
 controllets/data-sevc-controllet/data-sevc-controllet.html                       |    6 ++++--
 controllets/datalet-selection-controllet/datalet-selection-controllet.html       |    2 +-
 controllets/filters-controllet/demo/index.html                                   |    0
 controllets/filters-controllet/filters-controllet.html                           |    0
 controllets/items-vslider-controllet/items-vslider-controllet.html               |   53 +++++++++++++++++++++++++++++++++--------------------
 controllets/paper-card-controllet/paper-card-controllet.html                     |    9 ++++++---
 controllets/select-dataset-controllet/demo/index.html                            |   58 ++++++++++++++++++++++++++++++++++++++++++++++++----------
 controllets/select-dataset-controllet/select-dataset-controllet.html             | 1080 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/select-visualization-controllet/demo/index.html                      |   12 +++++++-----
 controllets/select-visualization-controllet/inputs-series.html                   |  380 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/select-visualization-controllet/select-datalet-inputs.html           |  463 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 controllets/select-visualization-controllet/select-datalet-inputs_series.html    |  425 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 controllets/select-visualization-controllet/select-datalet-options.html          |  273 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 controllets/select-visualization-controllet/select-visualization-controllet.html |  725 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 datalets/areachart-datalet/areachart-datalet.html                                |   41 +++++++++++++++++++++++++++++++++++------
 datalets/areachart-datalet/areachart-datalet.png                                 | Bin 449 -> 0 bytes
 datalets/areachart_stacked-datalet/areachart_stacked-datalet.html                |  193 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/areachart_stacked-datalet/areachart_stacked-datalet.png                 | Bin 0 -> 925 bytes
 datalets/bar-chart-datalet/bar-chart-datalet.html                                |  214 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 datalets/bar-chart-datalet/bar-chart-datalet.png                                 | Bin 526 -> 0 bytes
 datalets/barchart-datalet/barchart-datalet.html                                  |   48 +++++++++++++-----------------------------------
 datalets/barchart-datalet/barchart-datalet.png                                   | Bin 526 -> 0 bytes
 datalets/barchart_stacked-datalet/barchart_stacked-datalet.html                  |  181 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/barchart_stacked-datalet/barchart_stacked-datalet.png                   | Bin 0 -> 46441 bytes
 datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js       |   63 +++++++++++++++++++--------------------------------------------
 datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior_old2.js  |  300 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/base-datalet/base-datalet.html                                          |   17 +++--------------
 datalets/base-datalet/static/js/BaseDataletBehavior.js                           |   26 +++++++++++++++++---------
 datalets/columnchart-datalet/columnchart-datalet.html                            |   42 +++++++++++++++++++++++++++++++++---------
 datalets/columnchart-datalet/columnchart-datalet.png                             | Bin 506 -> 0 bytes
 datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.html            |  181 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.png             | Bin 0 -> 61841 bytes
 datalets/datasetexplorer-datalet/datasetexplorer-datalet.html                    |    8 ++++++++
 datalets/datasetexplorer-datalet/js/buildtreemap2.js                             |   10 +++++++++-
 datalets/datatable-datalet/datatable-datalet.png                                 | Bin 5692 -> 0 bytes
 datalets/heatmap-datalet/heatmap-datalet.html                                    |   75 +++++++++++++++++++++++++++++----------------------------------------------
 datalets/heatmap-datalet/heatmap-datalet.png                                     | Bin 5638 -> 0 bytes
 datalets/heatmap-datalet/js/heatmap.js                                           |   56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/highcharts-datalet/highcharts-datalet.html                              |  160 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------
 datalets/highcharts-datalet/static/themes/themeDarkUnika.js                      |  210 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/highcharts-datalet/static/themes/themeGridLight.js                      |   71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/highcharts-datalet/static/themes/themeSandSignika.js                    |  101 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/highcharts-datalet/static/themes/themes.js                              |  392 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/highcharts-datalet/themes/dark_unica.js                                 |  210 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 datalets/highcharts-datalet/themes/grid_light.js                                 |   71 -----------------------------------------------------------------------
 datalets/highcharts-datalet/themes/sand_signika.js                               |  101 -----------------------------------------------------------------------------------------------------
 datalets/highcharts-datalet/themes/themes.js                                     |  384 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 datalets/leafletjs-datalet/leafletjs-datalet.png                                 | Bin 132802 -> 0 bytes
 datalets/linechart-datalet/linechart-datalet.html                                |   36 ++++++++++++++++++++++--------------
 datalets/linechart-datalet/linechart-datalet.png                                 | Bin 3544 -> 0 bytes
 datalets/piechart-datalet/piechart-datalet.html                                  |   84 ++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------
 datalets/piechart-datalet/piechart-datalet.png                                   | Bin 7648 -> 0 bytes
 locales/controllet_ln.js                                                         |  220 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------
 53 files changed, 3660 insertions(+), 3321 deletions(-)
 mode change 100644 => 100755 controllets/filters-controllet/demo/index.html
 mode change 100644 => 100755 controllets/filters-controllet/filters-controllet.html
 delete mode 100644 controllets/select-visualization-controllet/inputs-series.html
 create mode 100644 controllets/select-visualization-controllet/select-datalet-inputs.html
 create mode 100644 controllets/select-visualization-controllet/select-datalet-inputs_series.html
 create mode 100644 controllets/select-visualization-controllet/select-datalet-options.html
 mode change 100755 => 100644 datalets/areachart-datalet/areachart-datalet.png
 create mode 100755 datalets/areachart_stacked-datalet/areachart_stacked-datalet.html
 create mode 100644 datalets/areachart_stacked-datalet/areachart_stacked-datalet.png
 delete mode 100755 datalets/bar-chart-datalet/bar-chart-datalet.html
 delete mode 100755 datalets/bar-chart-datalet/bar-chart-datalet.png
 mode change 100755 => 100644 datalets/barchart-datalet/barchart-datalet.png
 create mode 100755 datalets/barchart_stacked-datalet/barchart_stacked-datalet.html
 create mode 100644 datalets/barchart_stacked-datalet/barchart_stacked-datalet.png
 create mode 100755 datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior_old2.js
 mode change 100755 => 100644 datalets/columnchart-datalet/columnchart-datalet.png
 create mode 100755 datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.html
 create mode 100644 datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.png
 mode change 100755 => 100644 datalets/datatable-datalet/datatable-datalet.png
 mode change 100755 => 100644 datalets/heatmap-datalet/heatmap-datalet.png
 create mode 100644 datalets/heatmap-datalet/js/heatmap.js
 create mode 100755 datalets/highcharts-datalet/static/themes/themeDarkUnika.js
 create mode 100755 datalets/highcharts-datalet/static/themes/themeGridLight.js
 create mode 100755 datalets/highcharts-datalet/static/themes/themeSandSignika.js
 create mode 100755 datalets/highcharts-datalet/static/themes/themes.js
 delete mode 100644 datalets/highcharts-datalet/themes/dark_unica.js
 delete mode 100644 datalets/highcharts-datalet/themes/grid_light.js
 delete mode 100644 datalets/highcharts-datalet/themes/sand_signika.js
 delete mode 100644 datalets/highcharts-datalet/themes/themes.js
 mode change 100755 => 100644 datalets/leafletjs-datalet/leafletjs-datalet.png
 mode change 100755 => 100644 datalets/linechart-datalet/linechart-datalet.png
 mode change 100755 => 100644 datalets/piechart-datalet/piechart-datalet.png

diff --git a/controllets/data-sevc-controllet/data-sevc-controllet.html b/controllets/data-sevc-controllet/data-sevc-controllet.html
index 8c3799e..0e74ba7 100755
--- a/controllets/data-sevc-controllet/data-sevc-controllet.html
+++ b/controllets/data-sevc-controllet/data-sevc-controllet.html
@@ -8,7 +8,8 @@
 <link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
 <link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
 <link rel="import" href="../select-data-controllet/select-data-controllet.html" />
-<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">
+<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
+<!--<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">-->
 
 <dom-module id="data-sevc-controllet">
 
@@ -32,7 +33,8 @@
 
             <neon-animatable>
 
-                <datalet-selection-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet>
+                <!--<datalet-selection-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet>-->
+                <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></select-visualization-controllet>
 
             </neon-animatable>
 
diff --git a/controllets/datalet-selection-controllet/datalet-selection-controllet.html b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
index 1ac3194..ae89580 100755
--- a/controllets/datalet-selection-controllet/datalet-selection-controllet.html
+++ b/controllets/datalet-selection-controllet/datalet-selection-controllet.html
@@ -226,7 +226,7 @@
                     <div class="inputs">
                         <paper-dropdown-menu id="group_by">
                             <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{selectedFields}}>
+                                <template is="dom-repeat" items={{fields}}>
                                     <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
                                 </template>
                             </paper-menu>
diff --git a/controllets/filters-controllet/demo/index.html b/controllets/filters-controllet/demo/index.html
old mode 100644
new mode 100755
index 8714eeb..8714eeb
--- a/controllets/filters-controllet/demo/index.html
+++ b/controllets/filters-controllet/demo/index.html
diff --git a/controllets/filters-controllet/filters-controllet.html b/controllets/filters-controllet/filters-controllet.html
old mode 100644
new mode 100755
index 49811bb..49811bb
--- a/controllets/filters-controllet/filters-controllet.html
+++ b/controllets/filters-controllet/filters-controllet.html
diff --git a/controllets/items-vslider-controllet/items-vslider-controllet.html b/controllets/items-vslider-controllet/items-vslider-controllet.html
index d624ea0..0607f14 100755
--- a/controllets/items-vslider-controllet/items-vslider-controllet.html
+++ b/controllets/items-vslider-controllet/items-vslider-controllet.html
@@ -17,8 +17,8 @@
         <style is="custom-style">
             paper-icon-button{
                 color: #FFFFFF;
-                height: 48px;
-                width: 48px;
+                height: 32px;/*48*/
+                width: 32px;/*48*/
                 padding: 0px;
                 margin: 0px;
                 --paper-icon-button-ink-color: white;
@@ -27,7 +27,7 @@
             #items_vslider_container{
                 display: flex;
                 flex-direction: column;
-                height: 100vh;
+                height: 100%;
                 width: 172px;
                 background-color: #E0E0E0;
             }
@@ -39,18 +39,17 @@
 
             .arrow-up{
                 background-color: #2196F3;
-                padding-left: 63px;
+                padding-left: 70px;/*62*/
             }
 
             .arrow-down{
                 background-color: #2196F3;
-                padding-left: 63px;
+                padding-left: 70px;
             }
 
             .content-card{
                 position: relative;
                 float: left;/*firefox*/
-                /*margin : 16px;*/
                 margin : 16px 16px 0px 16px;
                 padding: 8px;
                 height: 124px;
@@ -60,7 +59,6 @@
             }
 
             img{
-                /*height: 100%;*/
                 width: 100%;
             }
 
@@ -70,23 +68,24 @@
                 bottom: 16px;
                 padding: 8px;
                 width: 124px;
-                background-color: #9E9E9E;
-                color: #FFFFFF;
-                opacity: 0.87;
+                color: #000000;
+                background-color: rgba(158, 158, 158, 0.8);
                 z-index: 1;
                 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 font-size: 16px;
+                line-height: 16px;
+                font-weight: 700;
             }
 
             .legend.selected {
-                font-weight: 700;
                 background-color: #2196F3;
-                opacity: 1;
+                color: #FFFFFF;
             }
 
             #items_vslider_search{
                 height: 48px;
                 padding: 0px 8px;
+                /*padding-top: 8px;*/
                 background-color: #B6B6B6;
                 --paper-input-container-focus-color: #2196F3;
             }
@@ -99,7 +98,7 @@
                 width: 24px;
                 height: 24px;
                 padding: 0px 4px;
-                color: #FFFFFF;
+                color: #F44336;
                 --paper-icon-button-ink-color: #FFFFFF;
             }
         </style>
@@ -108,7 +107,7 @@
 
         <paper-material id="items_vslider_container" elevation="5">
 
-            <paper-input id="items_vslider_search" value={{filter}} no-label-float> <!--label="search"-->
+            <paper-input id="items_vslider_search" value={{filter}} no-label-float label="">
                 <iron-icon class="search" icon="search" prefix></iron-icon>
                 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
             </paper-input>
@@ -179,19 +178,30 @@
             },
 
             ready : function() {
-//                this._resize();
                 $(this.$.div_datalets_container).perfectScrollbar();
             },
 
             attached : function() {
-//                this._resize();
-//                var that = this;
-//                window.addEventListener("resize", function() { that._resize(); });
-
                 if(this.preselectedDatalet){
                     this._preselectDatalet();
                     this.preselectedDatalet = undefined;
                 }
+
+                this._translate();
+            },
+
+            _reset : function() {
+                if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet) != null)){
+                    var dataletCard = document.getElementById(this.selectedDatalet);
+                    dataletCard.elevation = "1";
+                    dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", "");
+                }
+                this.selectedDatalet = undefined;
+                this.filter = "";
+            },
+
+            _translate : function(){
+                this.$.items_vslider_search.setAttribute("label", ln["search_" + ln["localization"]]);
             },
 
             _clearInput : function() {
@@ -214,7 +224,10 @@
                 var datalets = new Array();
                 for(var i=0; i < this.datalets.length; i++){
                     var datalet = this.datalets[i];
-                    if(datalet.imageName.indexOf(this.filter) != -1)
+                    var imageName = this._getChartName(datalet.imageName).toLowerCase();
+                    console.log(imageName);
+                    console.log(this.filter);
+                    if(imageName.indexOf(this.filter.toLowerCase()) > -1)
                         datalets.push(datalet);
                 }
 
diff --git a/controllets/paper-card-controllet/paper-card-controllet.html b/controllets/paper-card-controllet/paper-card-controllet.html
index 5a479db..883d971 100755
--- a/controllets/paper-card-controllet/paper-card-controllet.html
+++ b/controllets/paper-card-controllet/paper-card-controllet.html
@@ -212,11 +212,14 @@
                 this.$.card_modify.setAttribute("title", paper_ln["modify_"+paper_ln["ln"]]);
                 this.$.card_delete.setAttribute("title", paper_ln["delete_"+paper_ln["ln"]]);
                 if(this.checkType(this.cardType, 'link'))
-                    this.$$("#card_open_link").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
+                    if(this.$$("#card_open_link"))
+                        this.$$("#card_open_link").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
                 if(this.checkType(this.cardType, 'text'))
-                    this.$$("#card_open_text").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
+                    if(this.$$("#card_open_text"))
+                        this.$$("#card_open_text").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
                 if(this.checkType(this.cardType, 'datalet'))
-                    this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
+                    if(this.$$("#card_open_datalet"))
+                        this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
             },
 
             _changeWidth: function(){
diff --git a/controllets/select-dataset-controllet/demo/index.html b/controllets/select-dataset-controllet/demo/index.html
index 7e36d6f..7c47b99 100755
--- a/controllets/select-dataset-controllet/demo/index.html
+++ b/controllets/select-dataset-controllet/demo/index.html
@@ -13,21 +13,59 @@
         ln["localization"] = "en";
     </script>
 
-    <link rel="import" href="../datalet-selection-controllet.html" />
+    <link rel="import" href="../select-dataset-controllet.html" />
 </head>
 
 <body>
 
-<!--<datalet-selection-controllet fields='["result,records,Anno","result,records,Cinesi","result,records,Albanesi","result,records,Rumeni","result,records,Pakistani","result,records,Marocchini","result,records,Altri stranieri" ]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=e04338cf-7a92-4221-81c6-fe12f41003d5" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
+<style>
 
-<!--<datalet-selection-controllet fields='["records,fields,title", "records,fields,published"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
-<datalet-selection-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>
+    .container {
+        height: calc(90px * 5 - 8px);
+        width: 50%;
+        /*width: 400px;*/
+        position: relative;
+        top: 100px;
+        left:25%;
+        /*background-color: red;*/
+    }
+
+</style>
+
+<div class="container">
+    <select-dataset-controllet id="ds"></select-dataset-controllet>
+</div>
+
+<script>
+    var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+
+            " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
+            " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
+            "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa";
+
+    var dataset1 = {description: description, name: "Data", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab"};
+    var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};
+    var dataset3 = {description: "descrizione bellissima purissima levissima sbiricuda antani", name: "Derelict Sites", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"};
+    var datasets = [dataset1, dataset2, dataset3];
+    var datasets = [dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3];
+
+    var ds = document.getElementById('ds');
+    ds.setAttribute("items", JSON.stringify(datasets));
+
+</script>
 
 </body>
 
-<!--urls:-->
-<!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
-<!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
-<!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->
-<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',-->
-<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015',-->
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/controllets/select-dataset-controllet/select-dataset-controllet.html b/controllets/select-dataset-controllet/select-dataset-controllet.html
index 1ac3194..aefaa3d 100755
--- a/controllets/select-dataset-controllet/select-dataset-controllet.html
+++ b/controllets/select-dataset-controllet/select-dataset-controllet.html
@@ -1,953 +1,223 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html" />
-
-<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
-
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-styles/color.html">
+<link rel="import" href="../../bower_components/paper-styles/typography.html">
+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-
-<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/iron-image/iron-image.html">
+<link rel="import" href="../../bower_components/iron-list/iron-list.html">
 
-<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
-
-<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
-
-<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
-
-<dom-module id="datalet-selection-controllet">
 
+<dom-module id="select-dataset-controllet">
     <template>
-
-        <style is="custom-style">
-            :host {
-            --paper-dropdown-menu-icon: {
-                 color: #2196F3;
-             };
-            }
-
-            #datalet_selection_container {
-                display: flex;
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        <style>
+            /*:host {*/
+                /*display: block;*/
+            /*@apply(--paper-font-common-base);*/
+            /*}*/
+            /*app-toolbar {*/
+                /*background-color: var(--google-green-700);*/
+                /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);*/
+                /*font-weight: bold;*/
+                /*color: white;*/
+                /*z-index: 1;*/
+                /*position: fixed;*/
+                /*top: 0;*/
+                /*left: 0;*/
+                /*right: 0;*/
+            /*}*/
+            /*app-toolbar paper-icon-button {*/
+                /*--paper-icon-button-ink-color: white;*/
+            /*}*/
+            /*iron-list {*/
+                /*padding-top: 64px;*/
+            /*--iron-list-items-container: {*/
+                 /*max-width: 800px;*/
+                 /*margin: auto;*/
+                 /*margin-top: 60px;*/
+                 /*margin-bottom: 60px;*/
+                 /*border-bottom: 1px solid #ddd;*/
+             /*};*/
+            /*}*/
+            .item {
+            @apply(--layout-horizontal);
+                padding: 16px;
+                background-color: #FFFFFF;
+                border: 1px solid #B6B6B6;/*2196F3*/
+                cursor: pointer;
+                margin-bottom: 8px;
+                /*border-radius: 8px;*/
+            }
+
+            /*.avatar {*/
+                /*height: 40px;*/
+                /*width: 40px;*/
+                /*border-radius: 20px;*/
+                /*box-sizing: border-box;*/
+                /*background-color: #DDD;*/
+            /*}*/
+            .pad {
+                /*padding: 0 16px;*/
+            @apply(--layout-flex);
+            @apply(--layout-vertical);
+            }
+            .primary {
+                /*font-size: 16px;*/
+                font-weight: bold;
+                /*padding-top: 5px;*/
+            }
+            .shortText/*, .longText*/ {
                 font-size: 16px;
-                margin-top: 8px;
-            }
-
-            #items_vslider_controllet {
-                position: relative;
-                min-width: 172px;
             }
-
-            #datalet_selection_inputs {
-                position: relative;
-                height: 100vh;
-                margin-left: 32px;
-                min-width: 258px;
+            .longText {
+                color: gray;
+                display: none;
             }
-
-            #datalet_selection_labels {
+            .item:hover .shortText::after {
+                content: ' [+]';
+                color: gray;
+            }
+            .item.expanded:hover .shortText::after {
+                content: '';
+            }
+            .item.expanded .longText {
+                display: block;
+            }
+            .item.expanded:hover .longText::after {
+                content: ' [–]';
+            }
+            /*.spacer {*/
+            /*@apply(--layout-flex);*/
+            /*}*/
+            /*@media (max-width: 460px) {*/
+                /*paper-toolbar .bottom.title {*/
+                    /*font-size: 14px;*/
+                /*}*/
+            /*}*/
+
+            /*.item.selected {*/
+                /*border: 1px solid #2196F3;/!**!/*/
+            /*}*/
+
+            #list_container {
+                /*background-color: #ccc;*/
+                height: 100%;
+                width: calc(100% - 16px);
+                /*overflow: scroll;*/
                 position: relative;
-                height: 100vh;
-                margin-left: 32px;
-                min-width: 258px;
-            }
 
-            #datalet_selection_column {
-                position: relative;
-                width: 100%;
-                margin-left: 32px;
-            }
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+                line-height: 24px;/*???*/
 
-            #datalet_selection_datalet {
-                position: relative;
-                height: 100vh;
-                width: 100%;
-            }
+                margin: 8px;
 
-            #datalet_selection_datalet_placeholder {
-                padding: 16px;
             }
 
-            .inputs{
-                position: relative;
+            #select_dataset_container {
+               /*padding: 8px;*/
+                /*background-color: #B6B6B6;*/
+                border: 4px solid #B6B6B6;/*2196F3*/
             }
 
-            .input_header {
-                height: 32px;
-                padding-top: 16px;
-                text-align: center;
-                font-weight: 700;
+            #toolbar {
+                /*padding: 8px;*/
+                /*background-color: #B6B6B6;*/
+                width: calc(100% - 12px);
+                height: 20px;
                 background-color: #B6B6B6;
-            }
 
-            #expert_container {
-                display: none;
-            }
-
-            #expert_header {
-                display: none;
-
-                height: 32px;
-                padding-top: 16px;
-                margin-top: 8px;
-                text-align: center;
-                font-weight: 700;
-                color: #00BCD4;
-                cursor: pointer;
-            }
-
-            .field_nema {
-                height: 40px;
-                padding-top: 8px;
-
-                margin-top: 8px;
-                padding-left: 16px;
-                font-weight: 700;
-                color: #2196F3;
-                background-color: #E0E0E0;
-            }
-
-            .info_button {
-                position: absolute;
-                top: 18px;
-                right: 0px;
-            }
-
-            paper-input {
-                display: inline-block;
-                height: 48px;
-                /*padding: 0px 8px;*/
-                width: 210px;
-                padding-left: 8px;
-                padding-bottom: 8px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-input.base_input {
-                width: 242px;
-            }
-
-            paper-textarea {
-                width: 242px;
-                padding-left: 8px;
-                padding-bottom: 4px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-dropdown-menu {
-                height: 48px;
-                width: 210px;;
-                padding-left: 8px;
-                padding-bottom: 8px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-item.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            paper-icon-button {
-                color: #2196F3;
-                --paper-icon-button-ink-color: #2196F3;
-                margin: 0px;
-            }
-
-            paper-button {
-                position: absolute;
-                bottom: 16px;
-                right: 11px;
-
-                height: 48px;
-                width: 172px;
-                background-color: #00BCD4;
-                color: white;
-                font-weight: 700;
-                padding: 16px;
-            }
-
-            paper-button:hover {
-                background-color: #00AABF;
-
-                box-shadow: 0px 8px 12px #888;
-                -webkit-box-shadow: 0px 8px 12px #888;
-                -moz-box-shadow: 0px 8px 12px #888;
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+                font-weight: bold;
+                /*line-height: 24px;*/
+                padding-left: 12px;
+                padding-top: 12px;
+                padding-bottom: 12px;
             }
-
-            paper-button[disabled] {
-                background-color: #B6B6B6;
+            .ssssssssseeeel {
+                background-color: red;
             }
 
-            #dialog_info_input {
-                border: 2px solid #2196F3;
-                background-color: #E0E0E0;
-                min-width: 248px;
-            }
         </style>
 
-        <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
+        <div id="select_dataset_container">
 
-        <div id="datalet_selection_container">
+            <div id="toolbar">
+                AVAILABLE DATASETS
 
-            <div id="items_vslider_controllet">
-                <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
             </div>
 
-            <paper-material id="datalet_selection_inputs" elevation="5">
-                <div class="input_header"><span id="inputs"></span></div>
-                <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
-                    <div class="inputs">
-                        <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
-                            <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{fields}}>
-                                    <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
-                                    <!--{{_fieldName(item)}}-->
-                                </template>
-                            </paper-menu>
-                        </paper-dropdown-menu>
-                        <div class="info_button">
-                            <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
-                        </div>
-                    </div>
-                </template>
-
-                <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
-
-                <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
-
-                <div id="expert_container">
-
-                    <div class="inputs">
-                        <paper-dropdown-menu id="group_by">
-                            <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{selectedFields}}>
-                                    <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
-                                </template>
-                            </paper-menu>
-                        </paper-dropdown-menu>
-                        <div class="info_button">
-                            <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
-                        </div>
-                    </div>
-
-                    <template is="dom-repeat" items="{{groupedFields}}">
-                        <div class="inputs">
-                            <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">
-                                <paper-menu class="dropdown-content">
-                                    <!--foreach functions-->
-                                    <paper-item id="0" on-tap="_addGroupByInput">{{_operationName(0)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="1" on-tap="_addGroupByInput">{{_operationName(1)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="2" on-tap="_addGroupByInput">{{_operationName(2)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="3" on-tap="_addGroupByInput">{{_operationName(3)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="4" on-tap="_addGroupByInput">{{_operationName(4)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="5" on-tap="_addGroupByInput">{{_operationName(5)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="6" on-tap="_addGroupByInput">{{_operationName(6)}} {{_fieldName(item)}}</paper-item>
-                                </paper-menu>
-                            </paper-dropdown-menu>
-                            <div class="info_button">
-                                <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
+            <div id="list_container">
+
+                <!--<iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>-->
+
+                <!--<app-toolbar>-->
+                    <!--<div title>Collapsable items</div>-->
+                    <!--<paper-icon-button icon="search" alt="Search"></paper-icon-button>-->
+                    <!--<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>-->
+                <!--</app-toolbar>-->
+
+                <iron-list id="list" items="[[items]]" as="item" selection-enabled><!--multi-selection-->
+                    <template>
+                        <div>
+                            <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" on-tap="_prova">
+                                <!--<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>-->
+                                <div class="pad">
+                                    <div class="primary">[[item.name]]</div>
+                                    <!--<div class="shortText">[[item.url]]</div>-->
+                                    <!--substring description-->
+                                    <div class="longText">[[item.description]]</div>
+                                </div>
+                                <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
                             </div>
                         </div>
                     </template>
-
-                </div>
-
-                <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
-
-            </paper-material>
-
-            <paper-material id="datalet_selection_labels" elevation="5">
-                <div class="input_header"><span id="baseInfo"></span></div>
-
-                <div class="inputs">
-                    <paper-input id="base_title" maxlength="32" class="base_input"></paper-input>
-                </div>
-
-                <div class="inputs">
-                    <paper-textarea id="base_description" maxlength="100" class="base_input"></paper-textarea>
-                </div>
-
-                <div class="input_header"><span id="layouts"></span></div>
-
-                <template is="dom-repeat" items="{{labels}}" index-as="index">
-                    <div class="inputs">
-                        <paper-input label={{_getLabelName(item.name)}}></paper-input>
-                        <div class="info_button">
-                            <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
-                        </div>
-                    </div>
-                </template>
-            </paper-material>
-
-
-            <div id="datalet_selection_column">
-
-                <paper-material id="datalet_selection_datalet" elevation="5">
-                    <div class="input_header"><span id="dataletPreview"></span></div>
-                    <div id="datalet_selection_datalet_placeholder"></div>
-
-                </paper-material>
-
-                <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
+                </iron-list>
 
             </div>
 
-            <paper-dialog id="dialog_info_input">
-                <h2 id="dialog_name"></h2>
-                <p id="dialog_description"></p>
-            </paper-dialog>
-
         </div>
 
     </template>
 
     <script>
-
-        Polymer({
-
-            is : 'datalet-selection-controllet',
-
-            properties : {
-
-                deepUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                dataletsListUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                selectedDatalet : {
-                    type  : String,
-                    value : undefined
-                },
-
-                preselectedDatalet : {
-                    type  : String,
-                    value : undefined
-                },
-
-                loadPreview : {
-                    type :  Boolean,
-                    value : false
-                },
-
-                type : {
-                    type : String,
-                    value : undefined
-                },
-
-                inputs : {
-                    type : Array,
-                    value : []
-                },
-
-                labels : {
-                    type : Array,
-                    value : []
-                },
-
-                filters : {
-                    type : Array,
-                    value : []
-                },
-
-                aggregators : {
-                    type : Array,
-                    value : []
-                },
-
-                orders : {
-                    type : Array,
-                    value : []
-                },
-
-                fields : {
-                    type : Array,
-                    value : []
-                },
-
-                selectedFields : {
-                    type : Array,
-                    value : []
-                },
-
-                groupedFields : {
-                    type : Array,
-                    value : []
-                },
-
-                dataletPreset : {
-                    type  : Object,
-                    value : []
+        HTMLImports.whenReady(function() {
+            Polymer({
+                is: 'select-dataset-controllet',
+                properties: {
+                    items: {
+                        type: Array,
+                        value: [
+//                            {"name": "Bob"},
+//                            {"name": "Tim"},
+//                            {"name": "Mike"}
+                        ]
+                    }
                 },
-
-//                selectableFields : {
-//                    type : Array,
-//                    value : []
-//                },
-
-                dataUrl : {
-                    type  : String,
-                    value : undefined
+                ready : function() {
+                    $(this.$.list_container).perfectScrollbar();
                 },
-
-                params:{
-                    type: Object,
-                    value: undefined
+                _prova : function(e) {
+//                   console.log(e.target);
+//                    e.target.style.background = "#B6B6B6";
                 },
 
-                expert : {
-                    type  : Boolean,
-                    value : false
+                attached: function() {
+                    // Use the document element
+                    this.$.list.scrollTarget = this.ownerDocument.documentElement;
                 },
-
-                functions : {
-                    type  : Array,
-                    value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
+                iconForItem: function(item) {
+                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
                 },
-
-                modify : {
-                    type  : Boolean,
-                    value : false
-                }
-
-            },
-
-            listeners: {
-                'items-vslider-controllet_selected-datalet': '_selectDatalet',
-//                'tree-view-controllet_selected-fields': '_updateSelectedFields'
-                'change': '_paramsChanged'
-            },
-
-            _showExpertMode : function() {
-                if(!this.expert) {
-                    this.$.expert_header.style.color = "#000000";
-                    this.$.expert_header.style.background = "#B6B6B6";
-                    this.$.expert_container.style.display = "block";
+                getClassForItem: function(item, selected) {
+                    console.log(item);
+                    console.log(selected);
+                    return selected ? 'item expanded' : 'item';
                 }
-                else {
-                    this.$.expert_header.style.color = "#00BCD4";
-                    this.$.expert_header.style.background = "#FFFFFF";
-                    this.$.expert_container.style.display = "none";
-                }
-
-                this.expert = !this.expert;
-            },
-
-            _showGroupedFields : function(e) {
-                var index = e.target.id;
-                var temp = [];
-
-//                var isSelected = false;
-//                for (var i = 0; i < this.selectedFields.length; i++) {
-//                    if (this.selectedFields[i]) {
-//                        if (this.selectedFields[i].indexOf(this.fields[index]) > -1) {
-//                            isSelected = true;
-//                        }
-//                        else {
-//                            temp.push(this.selectedFields[i]);
-//                        }
-//                    }
-//                }
-//
-//                if (isSelected)
-//                    this.groupedFields = this._copy(temp);
-//                else
-//                    this.groupedFields =[];
-
-                for (var i = 0; i < this.selectedFields.length; i++) {
-                    if (this.selectedFields[i]) {
-                        if (i != index) {
-                            temp.push(this.selectedFields[i]);
-                        }
-                    }
-                }
-
-                this.groupedFields = this._copy(temp);
-
-                this.async(function() {
-                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
-                    for (var i = 0; i < ddls.length; i++){
-                        var id = ddls[i].id;
-                        if(id.indexOf("calculate") > -1) {
-                            $(ddls[i]).find("paper-menu")[0].select(-1);
-                            $(ddls[i]).find("paper-menu")[0].select(0);
-                        }
-                    }
-                }, 0);
-
-                this._addGroupByInput();
-            },
-
-            ready : function() {
-                this._resize();
-                $(this.$.datalet_selection_inputs).perfectScrollbar();
-                $(this.$.datalet_selection_labels).perfectScrollbar();
-                $(this.$.datalet_selection_datalet).perfectScrollbar();
-
-                this.params = {'data-url' : this.dataUrl};
-
-                //this.modify = true;//da eliminare in futuro
-                if(this.preselectedDatalet){
-                    if(this.modify)
-                        this._preselectDatalet();
-
-                    this.modify = true;
-                    this.preselectedDatalet = undefined;
-                }
-            },
-
-            attached : function() {
-                this._resize();
-                var that = this;
-                window.addEventListener("resize", function() { that._resize(); });
-
-                this._translate();
-            },
-
-            setFilters : function(filters) {
-                this.filters = filters;
-            },
-
-            setFields : function(fields) {
-                this.fields = fields;
-            },
-
-            reset : function() {
-                this.selectedDatalet = undefined;//non va!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-                this.preselectedDatalet = undefined;
-                this.type = undefined;
-                this.inputs = [];
-                this.labels = [];
-                this.$.expert_header.style.display = "none";
-                this.expert = true;
-                this._showExpertMode();
-                this.loadPreview = false;
-                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
-                this._resetGroupBy();
-            },
-
-            _translate : function(){
-
-                this.$.add_button.innerHTML     = ln["addDatalet_" + ln["localization"]];
-                this.$.inputs.innerHTML         = ln["inputs_" + ln["localization"]];
-                this.$.baseInfo.innerHTML       = ln["baseInfo_" + ln["localization"]];
-                this.$.layouts.innerHTML        = ln["layouts_" + ln["localization"]];
-                this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
-
-                this.$.base_title.label = ln["title_" + ln["localization"]];
-                this.$.base_description.label = ln["description_" + ln["localization"]];
-
-                this.$.groupBy.innerHTML = ln["groupBy_" + ln["localization"]];
-                this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);
-
-                if(this.modify)
-                    this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
-            },
-
-            _selectDatalet : function(e){
-                this.$.add_button.setAttribute("disabled", "true");
-
-                this.selectedDatalet = e.detail.datalet;
-
-                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
-
-                if(!this.selectedDatalet){
-                    this.type = undefined;
-                    this.inputs = [];
-                    this.labels = [];
-                    this.$.expert_header.style.display = "none";
-                    this.expert = true;
-                    this._showExpertMode();
-                    this.loadPreview = false;
-                }
-                else{
-                    this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
-                    this.$.selectedDatalet_request.generateRequest();
-                    this.$.expert_header.style.display = "block";
-                }
-            },
-
-            _preselectDatalet : function() {
-                this.type = "undefined";
-                this.$.selectedDatalet_request.url = this.deepUrl + this.preselectedDatalet + "-datalet";
-                this.$.selectedDatalet_request.generateRequest();
-
-                this.selectedDatalet = this.preselectedDatalet;
-                this.selectedFields = this._copy(this.fields);
-
-//                this.filters = JSON.parse(this.dataletPreset["filters"]);
-//                this.aggregators = JSON.parse(this.dataletPreset["aggregators"]);
-//                this.orders = JSON.parse(this.dataletPreset["orders"]);
-
-                this.async(function() {
-                    this.selectedFields = this._copy(this.fields);
-
-                    //set info labels options
-                    var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
-                    textarea[0].value = this.dataletPreset["description"];
-
-                    var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");
-                    inputs[0].value = this.dataletPreset["title"];
-
-                    for (var i = 1; i < inputs.length; i++)
-                        inputs[i].value = this.dataletPreset[this.labels[i-1].name];
-
-                    //set inputs --> prima apri GB e riempi CALCULATE e poi gli ORDERBY???
-                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
-                    for (var i = 0; i < ddls.length; i++) {
-                        var id = ddls[i].id;
-                        if (!isNaN(id)) {
-//                            id = parseInt(id);
-                            $(ddls[i]).find("paper-menu")[0].select(id);
-                        }
-                        else if (id.indexOf("group_by") > -1) {
-                            ;
-                        }
-                        else if (id.indexOf("calculate") > -1) {
-                            ;
-                        }
-                    }
-
-                    this.loadPreview = true;
-                    this._loadDatalet(this.selectedFields);
-                }, 300);
-            },
-
-            _handleSelectedDatalet : function(e){
-
-                if(this.type != e.detail.response.type) {
-
-                    this.inputs = [];
-                    this.labels = [];
-
-                    var inputs = e.detail.response.idm.inputs.input;
-
-                    if (inputs.constructor == Object) {//not Array && inputs.input.selection == "*"
-                        var name = inputs.name;
-                        var description = inputs.description;
-                        var selection = inputs.selection;
-                        inputs = [];
-                        for (var i in this.fields)
-                            inputs.push({name: name + " " + i, description: description, selection: selection});
-                    }
-
-                    this.async(function(){
-                        this.type = e.detail.response.type;
-                        this.inputs = inputs;
-                        this.labels = e.detail.response.idm.inputs.layouts.input;
-
-                        this.selectedFields = new Array(inputs.length);
-                    },0);
-
-                    this._resetGroupBy();
-
-                    this.loadPreview = false;
-                }
-
-                else if (this.loadPreview)
-                    this._loadDatalet(this.selectedFields);
-            },
-
-            _resetGroupBy : function(){
-                $(this.$.group_by).find("paper-menu")[0].select(-1);
-                this.groupedFields = [];
-                this.aggregators = [];
-            },
-
-            _addGroupByInput : function(){
-                this.async(function() {//codice reprlicato!
-                    var selectedFields = this.selectedFields;
-
-                    var load = true;
-
-                    if(this.inputs[0].selection == "*"){
-                        var temp = [];
-                        for (var i = 0; i < selectedFields.length; i++)
-                            if(selectedFields[i])
-                                temp.push(selectedFields[i]);
-                        selectedFields = temp;
-                    }
-                    else {
-                        for (var i = 0; i < selectedFields.length; i++)
-                            if (!selectedFields[i]) {
-                                load = false;
-                                break;
-                            }
-                    }
-
-                    if(load){
-                        this.loadPreview = true;
-                        this._loadDatalet(selectedFields);
-                    }
-                }, 0);
-            },
-
-            _addOrder : function(e){
-                var t = e.target;
-                if(t.tagName.indexOf("IRON-ICON") > -1)
-                    t = $(e.target).parents("paper-icon-button")[0];
-
-                var icon = t.getAttribute("icon");
-                var name = t.getAttribute("id");
-
-                if(name.indexOf("gb") > -1){
-                    var selectedItem = $(this.$.group_by).find("paper-menu")[0].selectedItem;
-                    if(selectedItem)
-                        name = selectedItem.textContent.trim();
-//                        name = "[" + selectedItem.textContent.trim() + "]";
-                    else
-                        return;
-                }// else {
-//                    var i = name;
-//                    var ddl = $("#calculate_"+i);
-//
-//                    var label = $(ddl).find("paper-menu")[0].selectedItem.textContent.trim();
-//                    var index = label.split(" ", 2).join(" ").length;
-//                    var field = label.substring(index+1, label.length);
-//                    var operation = label.substring(0, label.indexOf(" "));
-//                    name = operation + "([" + field + "])";
-//                }
-
-                if(icon.indexOf("unfold-more") > -1){
-                    t.setAttribute("icon", "expand-less");
-                    t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    orders.push({"field": name, "operation": "ASC"});
-                    this.orders = this._copy(orders);
-                }
-                else if(icon.indexOf("expand-less") > -1){
-                    t.setAttribute("icon", "expand-more");
-                    t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    orders.push({"field": name, "operation": "DESC"});
-                    this.orders = this._copy(orders);
-                }
-                else if(icon.indexOf("expand-more") > -1){
-                    t.setAttribute("icon", "unfold-more");
-                    t.setAttribute("title", ln["unsort_" + ln["localization"]]);
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    this.orders = this._copy(orders);
-                }
-
-                this._addGroupByInput();//no buoono
-//                if(load){
-//                    this.loadPreview = true;
-//                    this._loadDatalet(selectedFields);
-//                }
-            },
-
-            _addInput : function(e){
-                var selectedFields = this._copy(this.selectedFields);
-
-//                var index = $(e.target).parents("paper-dropdown-menu")[0].id;
-//                selectedFields[index] = e.target.innerHTML.trim();
-
-                var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
-                var index = e.target.id;
-                selectedFields[ddl_index] = this.fields[index];
-
-                this.selectedFields = this._copy(selectedFields);
-
-                var load = true;
-
-                if(this.inputs[0].selection == "*"){
-                    var temp = [];
-                    for (var i = 0; i < selectedFields.length; i++)
-                        if(selectedFields[i])
-                            temp.push(selectedFields[i]);
-                    selectedFields = temp;
-                }
-                else {
-                    for (var i = 0; i < selectedFields.length; i++)
-                        if (!selectedFields[i]) {
-                            load = false;
-                            break;
-                        }
-                }
-
-                this._resetGroupBy();//--> conflitto, in _updateparams valorizza this.aggregators
-
-                if(load){
-                    this.loadPreview = true;
-                    this._loadDatalet(selectedFields);
-                }
-            },
-
-            _updateParams : function(){
-                var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
-                this.params["description"] = textarea[0].value;
-
-                if(!textarea[0].value)
-                    this.params[textarea[0].label] = "";
-
-                var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");
-                this.params["title"] = inputs[0].value;
-
-                for (var i = 1; i < inputs.length; i++)
-                    this.params[this.labels[i-1].name] = inputs[i].value;
-
-                this.aggregators = [];
-
-                var ddls = document.getElementsByTagName("paper-dropdown-menu");
-                for (var i = 0; i < ddls.length; i++){
-                    var id = ddls[i].id;
-                    if(id.indexOf("group_by") > -1 && $(ddls[i]).find("paper-menu")[0].selectedItem) {
-                        var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();
-                        this.aggregators.push({"field": label, "operation": "GROUP BY"});
-                    }
-                    if(id.indexOf("calculate") > -1) {
-                        var menu = $(ddls[i]).find("paper-menu")[0];
-                        var label = menu.selectedItem.textContent.trim();
-                        var index = menu.selectedItem.id;
-                        var ii = label.split(" ", 2).join(" ").length;
-                        //attenzione BUG --> non funziona se la traduzione non ha solo 1 spazio
-                        var field = label.substring(ii+1, label.length);
-//                        var operation = label.substring(0, label.indexOf(" "));
-                        this.aggregators.push({"field": field, "operation": this.functions[index]});
-                    }
-                }
-            },
-
-            _paramsChanged : function(){
-
-                this._updateParams();
-
-                if(this.$.datalet_selection_datalet_placeholder.children[1])
-                    this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
-            },
-
-            _loadDatalet : function(selectedFields){
-
-                this._updateParams();
-
-                this.params["filters"] = JSON.stringify(this.filters);
-                this.params["aggregators"] = JSON.stringify(this.aggregators);
-                this.params["orders"] = JSON.stringify(this.orders);
-
-//                this.params["filters"] = '[{"field": "Lat", "operation": ">=", "value": "53.298164"}, {"field": "Lat", "operation": "<", "value": "54"}]';
-//                this.params["aggregators"] = '[{"field": "Lat", "operation": "GROUP BY"}, {"field": "Lng", "operation": "COUNT"}]';
-//                this.params["orders"] = '[{"field": "Lat", "operation": "DESC"}, {"field": "Lat", "operation": "ASC"}]';
-
-                //this.params["aggregators"] = '[{"field": "Value", "operation": "GROUP BY"}, {"field": "LOCATION", "operation": "COUNT"}]';
-                //this.params["orders"] = '[{"field": "Value", "operation": "ASC"}, {"field": "Value", "operation": "ASC"}]';
-
-                var dataletParams ={
-                    component   : this.selectedDatalet+"-datalet",
-                    params      : this.params,
-                    fields      : selectedFields,
-                    placeHolder : this.$.datalet_selection_datalet_placeholder
-                };
-
-                ComponentService.deep_url = this.deepUrl;
-                ComponentService.getComponent(dataletParams);
-
-                this.$.add_button.removeAttribute("disabled");
-            },
-
-            _addDatalet : function(){
-
-                this._updateParams();
-
-                var selectedFields = [];
-                for (var i = 0; i < this.selectedFields.length; i++)
-                    if(this.selectedFields[i])
-                        selectedFields.push(this.selectedFields[i]);
-
-                var data = {
-                    dataUrl : this.dataUrl,
-                    params :  this.params,
-                    fields :  selectedFields,
-                    datalet : this.selectedDatalet+"-datalet",
-//                    comment : "",//DEPRECATED!!!
-                    staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
-                }
-
-                this.fire('data-sevc-controllet.dataletCreated', {data : data});
-
-            },
-
-            _showInfo : function(e){
-//                var that = this;
-                var t = e.target;
-                if(t.tagName.indexOf("IRON-ICON") != -1)
-                    t = $(e.target).parents("paper-icon-button")[0];
-
-//                var name = t.getAttribute("title").replace(" info", "");
-                var name = t.getAttribute("id");
-
-                var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];
-                if(!dataset)
-                    dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
-
-                this.$.dialog_name.innerHTML = this._getLabelName(dataset.name);
-                this.$.dialog_description.innerHTML = ln[dataset.description + "_" +  ln["localization"]];
-                this.$.dialog_info_input.open();
-
-                var pos = t.getBoundingClientRect();
-                $("#dialog_info_input").css("top", pos.top - 4);
-                $("#dialog_info_input").css("left", pos.left - 4);
-            },
-
-            _fieldName : function(field) {
-                if(!field)//when?
-                    return "";
-                return field.substring(field.lastIndexOf(",")+1, field.length);
-            },
-
-            _copy : function(o) {
-                var out, v, key;
-                out = Array.isArray(o) ? new Array(o.length) : {};
-                for (key in o) {
-                    v = o[key];
-                    out[key] = (typeof v === "object") ? this._copy(v) : v;
-                }
-                return out;
-            },
-
-            _getLabelName: function(key) {
-                //* exceptions
-                if(key.indexOf("Cell") > -1) {
-                    return ln["Cell" + "_" +ln["localization"]] + key.slice(-2);
-                }
-                if(key.indexOf("Level") > -1) {
-                    return ln["Level" + "_" +ln["localization"]] + key.slice(-2);
-                }
-
-                return ln[key + "_" +ln["localization"]];
-            },
-
-            _calculateLabel: function() {
-                return ln["calculate" + "_" +ln["localization"]];
-            },
-
-            _operationName: function(index) {
-                var key = this.functions[index];
-                return ln[key + "_" +ln["localization"]];
-            },
-
-            _resize : function(){
-                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
-                h = h - 64 - 8; //height with page scroller
-
-                $("#items_vslider_container").height(h);//vslider controllet
-
-                $("#datalet_selection_inputs").height(h);
-                $("#datalet_selection_labels").height(h);
-                $("#datalet_selection_datalet").height(h);
-            }
-
+            });
         });
-
     </script>
-
 </dom-module>
\ No newline at end of file
diff --git a/controllets/select-visualization-controllet/demo/index.html b/controllets/select-visualization-controllet/demo/index.html
index 7e36d6f..1d2df81 100755
--- a/controllets/select-visualization-controllet/demo/index.html
+++ b/controllets/select-visualization-controllet/demo/index.html
@@ -13,19 +13,21 @@
         ln["localization"] = "en";
     </script>
 
-    <link rel="import" href="../datalet-selection-controllet.html" />
+    <link rel="import" href="../select-visualization-controllet.html" />
+    <link rel="import" href="../select-datalet-inputs_series.html" />
+    <link rel="import" href="../select-datalet-options.html" />
 </head>
 
 <body>
 
-<!--<datalet-selection-controllet fields='["result,records,Anno","result,records,Cinesi","result,records,Albanesi","result,records,Rumeni","result,records,Pakistani","result,records,Marocchini","result,records,Altri stranieri" ]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=e04338cf-7a92-4221-81c6-fe12f41003d5" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
-
-<!--<datalet-selection-controllet fields='["records,fields,title", "records,fields,published"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
-<datalet-selection-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>
+<select-visualization-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></select-visualization-controllet>
+<!--<select-datalet-inputs_series></select-datalet-inputs_series>-->
+<!--<select-datalet-options></select-datalet-options>-->
 
 </body>
 
 <!--urls:-->
+<!--https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee-->
 <!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
 <!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
 <!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->
diff --git a/controllets/select-visualization-controllet/inputs-series.html b/controllets/select-visualization-controllet/inputs-series.html
deleted file mode 100644
index 064bd33..0000000
--- a/controllets/select-visualization-controllet/inputs-series.html
+++ /dev/null
@@ -1,380 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html" />
-
-<!--<link rel="import" href="../../bower_components/paper-material/paper-material.html" />-->
-
-<!--<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">-->
-<!--<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">-->
-<!--<link rel="import" href="../../bower_components/paper-item/paper-item.html">-->
-
-<!--<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">-->
-<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
-<!--<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">-->
-
-<!--<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">-->
-<!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->
-
-<!--<link rel="import" href="../../bower_components/paper-button/paper-button.html">-->
-
-<!--<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">-->
-
-<!--<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />-->
-
-<!--<script src="../../../DEEPCLIENT/js/deepClient.js"></script>-->
-
-<dom-module id="select-visualization-controllet">
-
-    <template>
-
-        <style is="custom-style">
-            :host {
-            --paper-dropdown-menu-icon: {
-                 color: #2196F3;
-             };
-            }
-
-            #datalet_selection_container {
-                display: flex;
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                font-size: 16px;
-                margin-top: 8px;
-            }
-
-            #items_vslider_controllet {
-                position: relative;
-                min-width: 172px;
-            }
-
-            #datalet_selection_inputs {
-                position: relative;
-                height: 100vh;
-                margin-left: 32px;
-                min-width: 258px;
-            }
-
-            #datalet_selection_labels {
-                position: relative;
-                height: 100vh;
-                margin-left: 32px;
-                min-width: 258px;
-            }
-
-            #datalet_selection_column {
-                position: relative;
-                width: 100%;
-                margin-left: 32px;
-            }
-
-            #datalet_selection_datalet {
-                position: relative;
-                height: 100vh;
-                width: 100%;
-            }
-
-            #datalet_selection_datalet_placeholder {
-                padding: 16px;
-            }
-
-            .inputs{
-                position: relative;
-            }
-
-            .input_header {
-                height: 32px;
-                padding-top: 16px;
-                text-align: center;
-                font-weight: 700;
-                background-color: #B6B6B6;
-            }
-
-            #expert_container {
-                display: none;
-            }
-
-            #expert_header {
-                display: none;
-
-                height: 32px;
-                padding-top: 16px;
-                margin-top: 8px;
-                text-align: center;
-                font-weight: 700;
-                color: #00BCD4;
-                cursor: pointer;
-            }
-
-            .field_nema {
-                height: 40px;
-                padding-top: 8px;
-
-                margin-top: 8px;
-                padding-left: 16px;
-                font-weight: 700;
-                color: #2196F3;
-                background-color: #E0E0E0;
-            }
-
-            .info_button {
-                position: absolute;
-                top: 18px;
-                right: 0px;
-            }
-
-            paper-input {
-                display: inline-block;
-                height: 48px;
-                /*padding: 0px 8px;*/
-                width: 210px;
-                padding-left: 8px;
-                padding-bottom: 8px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-input.base_input {
-                width: 242px;
-            }
-
-            paper-textarea {
-                width: 242px;
-                padding-left: 8px;
-                padding-bottom: 4px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-dropdown-menu {
-                height: 48px;
-                width: 210px;;
-                padding-left: 8px;
-                padding-bottom: 8px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-item.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            paper-icon-button {
-                color: #2196F3;
-                --paper-icon-button-ink-color: #2196F3;
-                margin: 0px;
-            }
-
-            paper-button {
-                position: absolute;
-                bottom: 16px;
-                right: 11px;
-
-                height: 48px;
-                width: 172px;
-                background-color: #00BCD4;
-                color: white;
-                font-weight: 700;
-                padding: 16px;
-            }
-
-            paper-button:hover {
-                background-color: #00AABF;
-
-                box-shadow: 0px 8px 12px #888;
-                -webkit-box-shadow: 0px 8px 12px #888;
-                -moz-box-shadow: 0px 8px 12px #888;
-            }
-
-            paper-button[disabled] {
-                background-color: #B6B6B6;
-            }
-
-            #dialog_info_input {
-                border: 2px solid #2196F3;
-                background-color: #E0E0E0;
-                min-width: 248px;
-            }
-        </style>
-
-        <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
-
-        <div id="datalet_selection_container">
-
-            <paper-material id="datalet_selection_inputs" elevation="5">
-                <div class="input_header"><span id="inputs"></span></div>
-                <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
-                    <div class="inputs">
-                        <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
-                            <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{fields}}>
-                                    <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
-                                    <!--{{_fieldName(item)}}-->
-                                </template>
-                            </paper-menu>
-                        </paper-dropdown-menu>
-                        <div class="info_button">
-                            <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
-                        </div>
-                    </div>
-                </template>
-
-                <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
-
-                <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
-
-                <div id="expert_container">
-
-                    <div class="inputs">
-                        <paper-dropdown-menu id="group_by">
-                            <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{fields}}>
-                                    <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
-                                </template>
-                            </paper-menu>
-                        </paper-dropdown-menu>
-                        <div class="info_button">
-                            <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
-                        </div>
-                    </div>
-
-                    <template is="dom-repeat" items="{{groupedFields}}">
-                        <div class="inputs">
-                            <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">
-                                <paper-menu class="dropdown-content">
-                                    <!--foreach functions-->
-                                    <paper-item id="0" on-tap="_addGroupByInput">{{_operationName(0)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="1" on-tap="_addGroupByInput">{{_operationName(1)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="2" on-tap="_addGroupByInput">{{_operationName(2)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="3" on-tap="_addGroupByInput">{{_operationName(3)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="4" on-tap="_addGroupByInput">{{_operationName(4)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="5" on-tap="_addGroupByInput">{{_operationName(5)}} {{_fieldName(item)}}</paper-item>
-                                    <paper-item id="6" on-tap="_addGroupByInput">{{_operationName(6)}} {{_fieldName(item)}}</paper-item>
-                                </paper-menu>
-                            </paper-dropdown-menu>
-                            <div class="info_button">
-                                <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
-                            </div>
-                        </div>
-                    </template>
-
-                </div>
-
-                <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
-
-            </paper-material>
-
-eeeeeeeeeeeeeeeeeeee
-        </div>
-
-    </template>
-
-    <script>
-
-        Polymer({
-
-            is : 'select-visualization-controllet',
-
-            properties : {
-
-                deepUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                dataletsListUrl : {
-                    type : String,
-                    value : undefined
-                },
-
-                selectedDatalet : {
-                    type  : String,
-                    value : undefined
-                },
-
-                preselectedDatalet : {
-                    type  : String,
-                    value : undefined
-                },
-
-                loadPreview : {
-                    type :  Boolean,
-                    value : false
-                },
-
-                type : {
-                    type : String,
-                    value : undefined
-                },
-
-                inputs : {
-                    type : Array,
-                    value : []
-                },
-
-                labels : {
-                    type : Array,
-                    value : []
-                },
-
-                filters : {
-                    type : Array,
-                    value : []
-                },
-
-                aggregators : {
-                    type : Array,
-                    value : []
-                },
-
-                orders : {
-                    type : Array,
-                    value : []
-                },
-
-                fields : {
-                    type : Array,
-                    value : []
-                },
-
-                selectedFields : {
-                    type : Array,
-                    value : []
-                },
-
-                groupedFields : {
-                    type : Array,
-                    value : []
-                },
-
-                dataletPreset : {
-                    type  : Object,
-                    value : []
-                },
-
-                dataUrl : {
-                    type  : String,
-                    value : undefined
-                },
-
-                params:{
-                    type: Object,
-                    value: undefined
-                },
-
-                expert : {
-                    type  : Boolean,
-                    value : false
-                },
-
-                functions : {
-                    type  : Array,
-                    value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
-                },
-
-                modify : {
-                    type  : Boolean,
-                    value : false
-                }
-
-            },
-
-        });
-
-    </script>
-
-</dom-module>
\ No newline at end of file
diff --git a/controllets/select-visualization-controllet/select-datalet-inputs.html b/controllets/select-visualization-controllet/select-datalet-inputs.html
new file mode 100644
index 0000000..f6a33cf
--- /dev/null
+++ b/controllets/select-visualization-controllet/select-datalet-inputs.html
@@ -0,0 +1,463 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html" />
+
+<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
+
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+
+<dom-module id="select-datalet-inputs">
+
+    <template>
+
+        <style is="custom-style">
+            :host {
+            --paper-dropdown-menu-icon: {
+                 color: #2196F3;
+             };
+            }
+
+            #inputs_container {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+
+                height: 100%;
+                width: 258px;
+            }
+
+            .inputs{
+                position: relative;
+            }
+
+            .input_header {
+                height: 32px;
+                padding-top: 16px;
+                text-align: center;
+                font-weight: 700;
+                background-color: #B6B6B6;
+            }
+
+            #expert_container {
+                display: none;
+            }
+
+            #expert_header {
+                height: 32px;
+                padding-top: 16px;
+                margin-top: 8px;
+                text-align: center;
+                font-weight: 700;
+                color: #00BCD4;
+                cursor: pointer;
+
+                display: none;
+            }
+
+            .info_button {
+                position: absolute;
+                top: 18px;
+                right: 0px;
+            }
+
+            paper-dropdown-menu {
+                height: 48px;
+                width: 210px;;
+                padding-left: 8px;
+                padding-bottom: 8px;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-item.iron-selected {
+                background-color: #2196F3;
+                color: #FFFFFF;
+            }
+
+            paper-icon-button {
+                color: #2196F3;
+                --paper-icon-button-ink-color: #2196F3;
+                margin: 0px;
+            }
+        </style>
+
+        <paper-material id="inputs_container" elevation="5">
+
+            <div class="input_header"><span id="inputs"></span></div>
+
+            <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
+                <div class="inputs">
+                    <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
+                        <paper-menu class="dropdown-content">
+                            <template is="dom-repeat" items={{fields}}>
+                                <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
+                            </template>
+                        </paper-menu>
+                    </paper-dropdown-menu>
+                    <div class="info_button">
+                        <paper-icon-button id="{{ddl_index}}" on-click="_setOrders" icon="unfold-more" title=""></paper-icon-button>
+                    </div>
+                </div>
+            </template>
+
+            <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
+
+            <div id="expert_container">
+
+                <div class="inputs">
+                    <paper-dropdown-menu id="group_by" disabled>
+                        <paper-menu class="dropdown-content">
+                            <template is="dom-repeat" items={{groupableFields}}>
+                                <paper-item id={{index}} on-tap="_setAggregatorsFields">{{_fieldName(item)}}</paper-item>
+                            </template>
+                        </paper-menu>
+                    </paper-dropdown-menu>
+                </div>
+
+                <template is="dom-repeat" items="{{aggregateFields}}" as="field">
+                    <div class="inputs">
+                        <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">
+                            <paper-menu class="dropdown-content">
+                                <template is="dom-repeat" items="{{functions}}">
+                                    <paper-item id={{index}} on-tap="_setAggregators">{{_operationName(index)}} : {{_fieldName(field)}}</paper-item>
+                                </template>
+                            </paper-menu>
+                        </paper-dropdown-menu>
+                    </div>
+                </template>
+
+            </div>
+
+        </paper-material>
+
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is : 'select-datalet-inputs',
+
+            properties : {
+
+                //INPUT
+                fields : {type : Array, value : []},
+
+                //OUTPUT
+                selectedFields : {type : Array, value : []},
+                aggregators : {type : Array, value : []},
+                orders : {type : Array, value : []},
+
+                expert : {
+                    type  : Boolean,
+                    value : false
+                },
+
+                functions : {
+                    type  : Array,
+                    value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
+                },
+
+                inputs : {
+                    type : Array,
+                    value : []
+                },
+
+                groupableFields : {
+                    type : Array,
+                    value : []
+                },
+
+                aggregateFields : {
+                    type : Array,
+                    value : []
+                }
+
+            },
+
+            ready : function() {
+                $(this.$.inputs_container).perfectScrollbar();
+            },
+
+            attached : function() {
+                this._translate();
+            },
+
+            getSelectedFields : function () {
+                return this.selectedFields.filter(function(field){ return field != "" });
+            },
+
+            getAggregators : function () {
+                return this.aggregators;
+            },
+
+            getOrders : function () {
+                return this.orders;
+            },
+
+            setFields : function(fields) {
+                var temp = this._copy(fields);
+                temp.unshift("");
+                this.fields = this._copy(temp);
+
+                this.$.expert_header.style.display = "block";
+
+                this._reset();
+            },
+
+            setInputs : function(inputs) {
+                var temp =  this._copy(inputs);
+                if (inputs.constructor != Array) {//table --> 1 input
+                    var name = inputs.name;
+                    var description = inputs.description;
+                    var selection = inputs.selection;
+                    temp = [];
+                    for (var i = 1; i < this.fields.length; i++)
+                        temp.push({name: name + " " + i, description: description, selection: selection});
+                }
+                else if (inputs.length > 2 && inputs[2].selection == "*") {//map --> multiple baloon content
+                    name = inputs[2].name;
+                    description = inputs[2].description;
+                    selection = inputs[2].selection;
+                    temp = [inputs[0], inputs[1]];
+                    for (var i = 3; i < this.fields.length; i++)
+                        temp.push({name: name + " " + (i-2), description: description, selection: selection});
+                }
+
+                this.inputs = this._copy(temp);
+
+                this.selectedFields = new Array(temp.length);
+            },
+
+            fireReady : function() {
+                if(this._isReady())
+                    this.fire('select_visualization_inputs_ready');
+            },
+
+            _isReady : function() {
+                var fire = true;
+                for (var i = 0; i < this.selectedFields.length; i++) {
+                    if (!this.selectedFields[i] && this.inputs[i].selection != "*")
+                        return false;
+                    if(this.inputs[i].selection == "*")
+                        fire = false;
+                }
+
+                if(!fire) {
+                    for (var i = 0; i < this.selectedFields.length; i++) {
+                        if (this.selectedFields[i] && this.inputs[i].selection == "*") {
+                            fire = true;
+                            break;
+                        }
+                    }
+                }
+
+                return fire;
+            },
+
+            _reset : function() {
+                //this.fields = []; --> setFields
+                //this.inputs = []; --> setInputs
+                this.selectedFields = [];
+                this.aggregators = [];
+                //this.orders = []; --> _resetOrders
+                this._resetOrders();
+                this.expert = true;
+                this._showExpertMode();//expert --> false
+                this.groupableFields = [];
+                this.aggregateFields = [];
+
+                this.async(function () {
+                    //reset ddl
+                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
+                    for (var i = 0; i < ddls.length; i++)
+                        $(ddls[i]).find("paper-menu")[0].select(-1);
+                    this.$.group_by.setAttribute("disabled", "");
+                    //reset orders
+                    this._resetOrders();
+                }, 1);
+            },
+
+            _translate : function(){
+                this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
+                this.$.groupBy.innerHTML = ln["groupBy_" + ln["localization"]];
+                this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);
+            },
+
+            _showExpertMode : function() {
+                if(!this.expert) {
+                    this.$.expert_header.style.color = "#000000";
+                    this.$.expert_header.style.background = "#B6B6B6";
+                    this.$.expert_container.style.display = "block";
+                }
+                else {
+                    this.$.expert_header.style.color = "#00BCD4";
+                    this.$.expert_header.style.background = "#FFFFFF";
+                    this.$.expert_container.style.display = "none";
+                }
+
+                this.expert = !this.expert;
+            },
+
+            _addInput : function(e){
+                var selectedFields = this._copy(this.selectedFields);
+
+                var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
+                var index = e.target.id;
+                selectedFields[ddl_index] = this.fields[index];
+
+                this.selectedFields = this._copy(selectedFields);
+
+                if(!this._isReady()) {
+                    this.$.group_by.setAttribute("disabled", "");
+
+                    this.groupableFields = [];
+                    this.aggregateFields = [];
+                }
+                else {
+                    this.$.group_by.removeAttribute("disabled");
+
+                    var groupableFields = [];
+                    for (var i = 0; i < this.selectedFields.length; i++) {
+                        if(this.selectedFields[i])
+                            groupableFields.push(this.selectedFields[i]);
+                    }
+                    this.groupableFields = this._copy(groupableFields);
+                    this.aggregateFields = [];
+
+                    this.async(function () {
+                        var menu = $(this.$.group_by).find("paper-menu")[0];
+                        menu.select(-1);
+                    }, 0);
+                }
+                this._setAggregators();
+            },
+
+            _setAggregatorsFields : function(e){
+                var index = e.target.id;
+                var aggregateFields = [];
+                for (var i = 0; i < this.groupableFields.length; i++) {
+                    if (i != index && this.groupableFields[i])
+                        aggregateFields.push(this.groupableFields[i]);
+                }
+                this.aggregateFields = this._copy(aggregateFields);
+
+                this.async(function() {
+                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
+                    for (var i = 0; i < ddls.length; i++){
+                        var id = ddls[i].id;
+                        if(id.indexOf("calculate") > -1) {
+                            $(ddls[i]).find("paper-menu")[0].select(-1);
+                            $(ddls[i]).find("paper-menu")[0].select(0);
+                        }
+                    }
+
+                    this._setAggregators();
+                }, 0);
+            },
+
+            _setAggregators : function(){
+                this.async(function() {
+                    this.aggregators = [];
+
+                    this._resetOrders();
+
+                    var gb_menu = $(this.$.group_by).find("paper-menu")[0];
+                    var groupByField = this.groupableFields[gb_menu.selected];
+                    if(groupByField) {
+                        this.aggregators.push({"field": groupByField, "operation": "GROUP BY"});
+                        for (var i = 0; i < this.aggregateFields.length; i++){
+                            var c_menu = $("#calculate_"+i).find("paper-menu")[0];
+                            var operationIndex = c_menu.selectedItem.id;
+                            this.aggregators.push({"field": this.aggregateFields[i], "operation": this.functions[operationIndex]})
+                        }
+                    }
+
+                    this.fireReady();
+                }, 1);
+            },
+
+            _setOrders : function(e){
+                var t = e.target;
+                if(t.tagName.indexOf("IRON-ICON") > -1)
+                    t = $(e.target).parents("paper-icon-button")[0];
+
+                var icon = t.getAttribute("icon");
+                var id = t.getAttribute("id");
+                var field = this.selectedFields[id];
+
+                if(icon.indexOf("unfold-more") > -1){
+                    t.setAttribute("icon", "expand-less");
+                    t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);
+                    var orders = this.orders.filter(function (el) { return el.field !== field; });
+                    orders.unshift({"field": field, "operation": "ASC"});
+                    this.orders = this._copy(orders);
+                }
+                else if(icon.indexOf("expand-less") > -1){
+                    t.setAttribute("icon", "expand-more");
+                    t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);
+                    var orders = this.orders.filter(function (el) { return el.field !== field; });
+                    orders.unshift({"field": field, "operation": "DESC"});
+                    this.orders = this._copy(orders);
+                }
+                else if(icon.indexOf("expand-more") > -1){
+                    t.setAttribute("icon", "unfold-more");
+                    t.setAttribute("title", ln["unsort_" + ln["localization"]]);
+                    var orders = this.orders.filter(function (el) { return el.field !== field; });
+                    this.orders = this._copy(orders);
+                }
+
+                this.fireReady();
+            },
+
+            _resetOrders : function(){
+                var icons = this.$.inputs_container.querySelectorAll("paper-icon-button");
+                for (var i = 0; i < icons.length; i++){
+                    icons[i].setAttribute("icon", "unfold-more");
+                    icons[i].setAttribute("title", ln["unsort_" + ln["localization"]]);
+                }
+                this.orders = [];
+            },
+
+            _fieldName : function(field) {
+                return field.substring(field.lastIndexOf(",")+1, field.length);
+            },
+
+            _getLabelName: function(key) {
+                if(key.indexOf("Column") > -1) {
+                    return ln["Column" + "_" +ln["localization"]] + key.slice(-2);
+                }
+                if(key.indexOf("BalloonContent") > -1) {
+                    return ln["BalloonContent" + "_" +ln["localization"]] + key.slice(-2);
+                }
+
+                return ln[key + "_" +ln["localization"]];
+            },
+
+            _operationName: function(index) {
+                var key = this.functions[index];
+                return ln[key + "_" +ln["localization"]];
+            },
+
+            _calculateLabel: function() {
+                return ln["calculate" + "_" +ln["localization"]];
+            },
+
+            _copy : function(o) {
+                var out, v, key;
+                out = Array.isArray(o) ? new Array(o.length) : {};
+                for (key in o) {
+                    v = o[key];
+                    out[key] = (typeof v === "object") ? this._copy(v) : v;
+                }
+                return out;
+            }
+
+        });
+
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/select-visualization-controllet/select-datalet-inputs_series.html b/controllets/select-visualization-controllet/select-datalet-inputs_series.html
new file mode 100644
index 0000000..883ce38
--- /dev/null
+++ b/controllets/select-visualization-controllet/select-datalet-inputs_series.html
@@ -0,0 +1,425 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html" />
+
+<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
+
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+
+<dom-module id="select-datalet-inputs_series">
+
+    <template>
+
+        <style is="custom-style">
+            :host {
+            --paper-dropdown-menu-icon: {
+                 color: #2196F3;
+             };
+            }
+
+            #inputs_series_container {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+
+                height: 100%;
+                width: 258px;
+            }
+
+            .inputs{
+                position: relative;
+            }
+
+            .input_header {
+                height: 32px;
+                padding-top: 16px;
+                text-align: center;
+                font-weight: 700;
+                background-color: #B6B6B6;
+            }
+
+            #expert_container {
+                display: none;
+            }
+
+            #expert_header {
+                height: 32px;
+                padding-top: 16px;
+                margin-top: 8px;
+                text-align: center;
+                font-weight: 700;
+                color: #00BCD4;
+                cursor: pointer;
+            }
+
+            .info_button {
+                position: absolute;
+                top: 18px;
+                right: 0px;
+            }
+
+            paper-dropdown-menu {
+                height: 48px;
+                width: 210px;;
+                padding-left: 8px;
+                padding-bottom: 8px;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-item.iron-selected {
+                background-color: #2196F3;
+                color: #FFFFFF;
+            }
+
+            paper-icon-button {
+                color: #2196F3;
+                --paper-icon-button-ink-color: #2196F3;
+                margin: 0px;
+            }
+        </style>
+
+            <paper-material id="inputs_series_container" elevation="5">
+
+                <div class="input_header"><span id="inputs"></span></div>
+
+                <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
+                    <div class="inputs">
+                        <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
+                            <paper-menu class="dropdown-content">
+                                <template is="dom-repeat" items={{fields}}>
+                                    <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
+                                </template>
+                            </paper-menu>
+                        </paper-dropdown-menu>
+                        <div class="info_button">
+                            <paper-icon-button id="{{ddl_index}}" on-click="_setOrders" icon="unfold-more" title=""></paper-icon-button>
+                        </div>
+                    </div>
+                </template>
+
+                <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
+
+                <div id="expert_container">
+
+                    <div class="inputs">
+                        <paper-dropdown-menu id="group_by" disabled>
+                            <paper-menu class="dropdown-content">
+                                <template is="dom-repeat" items={{groupableFields}}>
+                                    <paper-item id={{index}} on-tap="_setAggregators">{{_fieldName(item)}}</paper-item>
+                                </template>
+                            </paper-menu>
+                        </paper-dropdown-menu>
+                        <div class="info_button">
+                            <paper-icon-button id="gb" on-click="_setOrders" icon="unfold-more" title="" disabled></paper-icon-button>
+                        </div>
+                    </div>
+
+                    <template is="dom-repeat" items="{{aggregateFields}}" as="field">
+                        <div class="inputs">
+                            <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}" disabled>
+                                <paper-menu class="dropdown-content">
+                                    <template is="dom-repeat" items="{{functions}}">
+                                        <paper-item id={{index}} on-tap="_setAggregators">{{_operationName(index)}} : {{_fieldName(field)}}</paper-item>
+                                    </template>
+                                </paper-menu>
+                            </paper-dropdown-menu>
+                        </div>
+                    </template>
+
+                </div>
+
+            </paper-material>
+
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is : 'select-datalet-inputs_series',
+
+            properties : {
+
+                //INPUT
+                fields : {type : Array, value : []},
+
+                //OUTPUT
+                selectedFields : {type : Array, value : ["", ""]},
+                aggregators : {type : Array, value : []},
+                orders : {type : Array, value : []},
+
+                expert : {
+                    type  : Boolean,
+                    value : false
+                },
+
+                functions : {
+                    type  : Array,
+                    value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
+                },
+
+                inputs : {
+                    type : Array,
+                    value : []
+                },
+
+                groupableFields : {
+                    type : Array,
+                    value : []
+                },
+
+                aggregateFields : {
+                    type : Array,
+                    value : [""]
+                }
+
+            },
+
+            ready : function() {
+                $(this.$.inputs_series_container).perfectScrollbar();
+            },
+
+            attached : function() {
+                this._translate();
+            },
+
+            getSelectedFields : function () {
+                var gb_menu = $(this.$.group_by).find("paper-menu")[0];
+                var c_menu = $("#calculate_0").find("paper-menu")[0];
+
+                if(gb_menu.selectedItem && c_menu.selectedItem && gb_menu.selectedItem.id != 0) {
+                    var groupByField = this.groupableFields[gb_menu.selected];
+                    if (groupByField != this.selectedFields[0])
+                        return [this.selectedFields[0], groupByField, this.selectedFields[1]];
+                }
+                return this.selectedFields;
+            },
+
+            getAggregators : function () {
+                return this.aggregators;
+            },
+
+            getOrders : function () {
+                return this.orders;
+            },
+
+            setFields : function(fields) {
+                var temp = this._copy(fields);
+                temp.unshift("");
+                this.fields = this._copy(temp);
+
+                this._reset();
+            },
+
+            setInputs : function(inputs) {
+                this.inputs = this._copy(inputs);
+            },
+
+            fireReady : function() {
+                if(this.selectedFields[0] != "" && this.selectedFields[1] != "")
+                    this.fire('select_visualization_inputs_ready');
+            },
+
+            _reset : function() {
+                //this.fields = []; --> setFields
+                //this.inputs = []; --> setInputs
+                this.selectedFields = ["", ""];
+                this.aggregators = [];
+                //this.orders = []; --> _resetOrders
+                this.expert = true;
+                this._showExpertMode();//expert --> false
+                this.groupableFields = [];
+                this.aggregateFields = [""];
+
+                this.async(function () {
+                    //reset ddl
+                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
+                    for (var i = 0; i < ddls.length; i++)
+                        $(ddls[i]).find("paper-menu")[0].select(-1);
+                    this.$.group_by.setAttribute("disabled", "");
+                    $("#calculate_0")[0].setAttribute("disabled", "");
+                    //reset orders
+                    this._resetOrders();
+                }, 1);
+            },
+
+            _translate : function(){
+                this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
+                this.$.groupBy.innerHTML = ln["groupBy_" + ln["localization"]];
+                this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);
+            },
+
+            _showExpertMode : function() {
+                if(!this.expert) {
+                    this.$.expert_header.style.color = "#000000";
+                    this.$.expert_header.style.background = "#B6B6B6";
+                    this.$.expert_container.style.display = "block";
+                }
+                else {
+                    this.$.expert_header.style.color = "#00BCD4";
+                    this.$.expert_header.style.background = "#FFFFFF";
+                    this.$.expert_container.style.display = "none";
+                }
+
+                this.expert = !this.expert;
+            },
+
+            _addInput : function(e){
+                var selectedFields = this._copy(this.selectedFields);
+
+                var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
+                var index = e.target.id;
+                selectedFields[ddl_index] = this.fields[index];
+
+                this.selectedFields = this._copy(selectedFields);
+
+                if(this.selectedFields[0] == "" || this.selectedFields[1] == "") {
+                    this.$.group_by.setAttribute("disabled", "");
+                    $("#calculate_0")[0].setAttribute("disabled", "");
+
+                    this.groupableFields = [];
+                    this.aggregateFields = [""];
+                    var menu = $("#calculate_0").find("paper-menu")[0];
+                    menu.select(-1);
+                }
+                else {
+                    this.$.group_by.removeAttribute("disabled");
+                    $("#calculate_0")[0].removeAttribute("disabled");
+
+                    var groupableFields = [];
+                    for (var i = 0; i < this.fields.length; i++) {
+                        if(this.fields[i] != this.selectedFields[1])
+                            groupableFields.push(this.fields[i]);
+                    }
+                    this.groupableFields = this._copy(groupableFields);
+                    this.aggregateFields = [this.selectedFields[1]];
+
+                    this.async(function () {
+                        var menu = $(this.$.group_by).find("paper-menu")[0];
+                        menu.select(-1);
+                        var menu = $("#calculate_0").find("paper-menu")[0];
+                        //var selected =  menu.selected;
+                        menu.select(-1);
+                        //menu.select(selected);
+                    }, 0);
+                }
+                this._setAggregators();
+            },
+
+            _setAggregators : function(){
+                this.async(function() {
+                    this.aggregators = [];
+
+                    this._resetOrders();
+
+                    $("#gb")[0].setAttribute("disabled", "");
+
+                    var gb_menu = $(this.$.group_by).find("paper-menu")[0];
+                    var c_menu = $("#calculate_0").find("paper-menu")[0];
+
+                    if(gb_menu.selectedItem && c_menu.selectedItem && gb_menu.selectedItem.id != 0) {
+                        var groupByField = this.groupableFields[gb_menu.selected];
+                        var operationIndex = c_menu.selectedItem.id;
+
+                        if (groupByField == this.selectedFields[0]){// X Axis field
+                            this.aggregators.push({"field": groupByField, "operation": "GROUP BY"});
+                        }
+                        else{
+                            $("#gb")[0].removeAttribute("disabled");
+                            this.aggregators.push({"field": this.selectedFields[0], "operation": "GROUP BY"});
+                            this.aggregators.push({"field": groupByField, "operation": "GROUP BY"});
+                        }
+
+                        this.aggregators.push({"field": this.selectedFields[1], "operation": this.functions[operationIndex]});
+                    }
+
+                    this.fireReady();
+                }, 0);
+            },
+
+            _setOrders : function(e){
+                var t = e.target;
+                if(t.tagName.indexOf("IRON-ICON") > -1)
+                    t = $(e.target).parents("paper-icon-button")[0];
+
+                var icon = t.getAttribute("icon");
+                var id = t.getAttribute("id");
+                var field;
+
+                if(id == "gb"){
+                    var gb_menu = $(this.$.group_by).find("paper-menu")[0];
+                    field = this.groupableFields[gb_menu.selected];
+                }
+                else {
+                    field = this.selectedFields[id];
+                }
+
+                if(icon.indexOf("unfold-more") > -1){
+                    t.setAttribute("icon", "expand-less");
+                    t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);
+                    var orders = this.orders.filter(function (el) { return el.field !== field; });
+                    orders.unshift({"field": field, "operation": "ASC"});
+                    this.orders = this._copy(orders);
+                }
+                else if(icon.indexOf("expand-less") > -1){
+                    t.setAttribute("icon", "expand-more");
+                    t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);
+                    var orders = this.orders.filter(function (el) { return el.field !== field; });
+                    orders.unshift({"field": field, "operation": "DESC"});
+                    this.orders = this._copy(orders);
+                }
+                else if(icon.indexOf("expand-more") > -1){
+                    t.setAttribute("icon", "unfold-more");
+                    t.setAttribute("title", ln["unsort_" + ln["localization"]]);
+                    var orders = this.orders.filter(function (el) { return el.field !== field; });
+                    this.orders = this._copy(orders);
+                }
+
+                this.fireReady();
+            },
+
+            _resetOrders : function(){
+                var icons = this.$.inputs_series_container.querySelectorAll("paper-icon-button");
+                for (var i = 0; i < icons.length; i++){
+                    icons[i].setAttribute("icon", "unfold-more");
+                    icons[i].setAttribute("title", ln["unsort_" + ln["localization"]]);
+                }
+                this.orders = [];
+            },
+
+            _fieldName : function(field) {
+                return field.substring(field.lastIndexOf(",")+1, field.length);
+            },
+
+            _getLabelName: function(key) {
+                return ln[key + "_" +ln["localization"]];
+            },
+
+            _operationName: function(index) {
+                var key = this.functions[index];
+                return ln[key + "_" +ln["localization"]];
+            },
+
+            _calculateLabel: function() {
+                return ln["calculate" + "_" +ln["localization"]];
+            },
+
+            _copy : function(o) {
+                var out, v, key;
+                out = Array.isArray(o) ? new Array(o.length) : {};
+                for (key in o) {
+                    v = o[key];
+                    out[key] = (typeof v === "object") ? this._copy(v) : v;
+                }
+                return out;
+            }
+
+        });
+
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/select-visualization-controllet/select-datalet-options.html b/controllets/select-visualization-controllet/select-datalet-options.html
new file mode 100644
index 0000000..b275c8a
--- /dev/null
+++ b/controllets/select-visualization-controllet/select-datalet-options.html
@@ -0,0 +1,273 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html" />
+
+<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
+
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+
+<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
+
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+
+<dom-module id="select-datalet-options">
+
+    <template>
+
+        <style is="custom-style">
+            :host {
+            --paper-dropdown-menu-icon: {
+                 color: #2196F3;
+             };
+            }
+
+            #select_datalet_options_container {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+
+                /*height: 100vh;*/
+                height: 100%;
+                width: 258px;
+            }
+
+            .inputs{
+                position: relative;
+            }
+
+            .input_header {
+                height: 32px;
+                padding-top: 16px;
+                text-align: center;
+                font-weight: 700;
+                background-color: #B6B6B6;
+            }
+
+            .info_button {
+                position: absolute;
+                top: 18px;
+                right: 0px;
+            }
+
+            #dialog_info_input {
+                display: flex;
+                flex-direction: column;
+                color: #000000;
+                border: 2px solid #2196F3;
+                background-color: #E0E0E0;
+                min-width: 244px;
+                padding: 8px;
+            }
+
+            #dialog_name{
+                font-size: 24px;
+                line-height: 24px;
+                font-weight: 700;
+                padding: 0px;
+                margin: 0px;
+            }
+
+            #dialog_description{
+
+                font-size: 16px;
+                line-height: 16px;
+                font-weight: normal;
+                padding: 0px;
+                margin: 8px 0px 0px 0px;
+            }
+
+            paper-dropdown-menu {
+                height: 48px;
+                width: 210px;;
+                padding-left: 8px;
+                padding-bottom: 8px;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-item.iron-selected {
+                background-color: #2196F3;
+                color: #FFFFFF;
+            }
+
+            paper-icon-button {
+                color: #2196F3;
+                --paper-icon-button-ink-color: #2196F3;
+                margin: 0px;
+            }
+
+            paper-input {
+                display: inline-block;
+                height: 48px;
+                /*padding: 0px 8px;*/
+                width: 210px;
+                padding-left: 8px;
+                padding-bottom: 8px;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-input.base_input {
+                width: 242px;
+            }
+
+            paper-textarea {
+                width: 242px;
+                padding-left: 8px;
+                padding-bottom: 4px;
+                --paper-input-container-focus-color: #2196F3;
+            }
+        </style>
+
+        <paper-material id="select_datalet_options_container" elevation="5">
+
+            <div class="input_header"><span id="baseInfo"></span></div>
+
+            <div class="inputs">
+                <paper-input id="base_title" maxlength="32" class="base_input" on-change="_updateParams"></paper-input>
+            </div>
+
+            <div class="inputs">
+                <paper-textarea id="base_description" maxlength="100" class="base_input" on-change="_updateParams" value=""></paper-textarea>
+            </div>
+
+            <div class="input_header"><span id="layouts"></span></div>
+
+            <template is="dom-repeat" items={{options}} index-as="index">
+                <div class="inputs">
+                    <template is="dom-if" if="{{_checkType(item.type, 'text')}}">
+                        <paper-input label={{_getLabelName(item.name)}} on-change="_updateParams"></paper-input>
+                    </template>
+
+                    <template is="dom-if" if="{{_checkType(item.type, 'list')}}">
+                        <paper-dropdown-menu label={{_getLabelName(item.name)}}>
+                            <paper-menu class="dropdown-content" selected = 0>
+                                <!--<paper-item on-tap="_updateParams"></paper-item>-->
+                                <template is="dom-repeat" items={{item.list.item}}>
+                                    <paper-item id={{index}} on-tap="_updateParams">{{item}}</paper-item>
+                                </template>
+                            </paper-menu>
+                        </paper-dropdown-menu>
+                    </template>
+
+                    <div class="info_button">
+                        <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
+                    </div>
+                </div>
+            </template>
+
+        </paper-material>
+
+        <paper-dialog id="dialog_info_input">
+            <span id="dialog_name"></span>
+            <span id="dialog_description"></span>
+        </paper-dialog>
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is : 'select-datalet-options',
+
+            properties : {
+
+                options : {
+                    type : Array,
+                    value : []
+                },
+
+                params : {
+                    type : Object,
+                    value : {}
+                }
+
+            },
+
+            ready : function() {
+                $(this.$.select_datalet_options_container).perfectScrollbar();
+            },
+
+            attached : function() {
+                this._translate();
+            },
+
+            setOptions : function(options) {
+                this.options = [];
+                this.async(function() {
+                    this.options = options;
+                }, 0);
+
+                this.params["title"] = "";
+                this.params["description"] = "";
+            },
+
+            ceckOptions : function(options) {
+                if(options.length != this.options.length)
+                    this.setOptions(options);
+            },
+
+            getParams : function() {
+                return this.params;
+            },
+
+            _reset : function() {
+                this.options = [];
+                this.params = [];
+            },
+
+            _updateParams : function() {
+                this.async(function() {
+                    var textarea = this.$.select_datalet_options_container.querySelectorAll("paper-textarea");
+                    this.params["description"] = textarea[0].value;
+
+                    var inputs = this.$.select_datalet_options_container.querySelectorAll("paper-input");
+                    this.params["title"] = inputs[0].value;
+
+                    for (var i = 1; i < inputs.length; i++)
+                        this.params[this.options[i-1].name] = inputs[i].value;
+
+                    this.fire('select_visualization_options_changed');
+                }, 0);
+            },
+
+            _translate : function(){
+                this.$.baseInfo.innerHTML = ln["baseInfo_" + ln["localization"]];
+                this.$.layouts.innerHTML = ln["layouts_" + ln["localization"]];
+
+                this.$.base_title.label = ln["title_" + ln["localization"]];
+                this.$.base_description.label = ln["description_" + ln["localization"]];
+            },
+
+            _checkType: function(type, check){
+                return (type == check);
+            },
+
+            _getLabelName: function(key) {
+                return ln[key + "_" +ln["localization"]];
+            },
+
+            _showInfo : function(e){
+                var t = e.target;
+                if(t.tagName.indexOf("IRON-ICON") != -1)
+                    t = $(e.target).parents("paper-icon-button")[0];
+
+                var name = t.getAttribute("id");
+
+                this.$.dialog_name.innerHTML = ln[name + "_" +  ln["localization"]];
+                this.$.dialog_description.innerHTML = ln[name + "_description_" +  ln["localization"]];
+                this.$.dialog_info_input.open();
+
+                var pos = t.getBoundingClientRect();
+                $("#dialog_info_input").css("top", pos.top - 4);
+                $("#dialog_info_input").css("left", pos.left - 4);
+            },
+
+        });
+
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/select-visualization-controllet/select-visualization-controllet.html b/controllets/select-visualization-controllet/select-visualization-controllet.html
index af4ac16..e66ebd2 100755
--- a/controllets/select-visualization-controllet/select-visualization-controllet.html
+++ b/controllets/select-visualization-controllet/select-visualization-controllet.html
@@ -2,37 +2,21 @@
 
 <link rel="import" href="../../bower_components/paper-material/paper-material.html" />
 
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-
-<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
-<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
-
 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
+<link rel="import" href="select-datalet-inputs_series.html" />
+<link rel="import" href="select-datalet-inputs.html" />
+<link rel="import" href="select-datalet-options.html" />
 
 <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
 
-<dom-module id="datalet-selection-controllet">
+<dom-module id="select-visualization-controllet">
 
     <template>
 
         <style is="custom-style">
-            :host {
-            --paper-dropdown-menu-icon: {
-                 color: #2196F3;
-             };
-            }
-
-            #datalet_selection_container {
+            #select_visualization_container {
                 display: flex;
                 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 font-size: 16px;
@@ -46,19 +30,17 @@
 
             #datalet_selection_inputs {
                 position: relative;
-                height: 100vh;
                 margin-left: 32px;
                 min-width: 258px;
             }
 
-            #datalet_selection_labels {
+            #datalet_selection_options {
                 position: relative;
-                height: 100vh;
                 margin-left: 32px;
                 min-width: 258px;
             }
 
-            #datalet_selection_column {
+            #datalet_preview_container {
                 position: relative;
                 width: 100%;
                 margin-left: 32px;
@@ -74,10 +56,6 @@
                 padding: 16px;
             }
 
-            .inputs{
-                position: relative;
-            }
-
             .input_header {
                 height: 32px;
                 padding-top: 16px;
@@ -86,78 +64,6 @@
                 background-color: #B6B6B6;
             }
 
-            #expert_container {
-                display: none;
-            }
-
-            #expert_header {
-                display: none;
-
-                height: 32px;
-                padding-top: 16px;
-                margin-top: 8px;
-                text-align: center;
-                font-weight: 700;
-                color: #00BCD4;
-                cursor: pointer;
-            }
-
-            .field_nema {
-                height: 40px;
-                padding-top: 8px;
-
-                margin-top: 8px;
-                padding-left: 16px;
-                font-weight: 700;
-                color: #2196F3;
-                background-color: #E0E0E0;
-            }
-
-            .info_button {
-                position: absolute;
-                top: 18px;
-                right: 0px;
-            }
-
-            paper-input {
-                display: inline-block;
-                height: 48px;
-                width: 210px;
-                padding-left: 8px;
-                padding-bottom: 8px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-input.base_input {
-                width: 242px;
-            }
-
-            paper-textarea {
-                width: 242px;
-                padding-left: 8px;
-                padding-bottom: 4px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-dropdown-menu {
-                height: 48px;
-                width: 210px;;
-                padding-left: 8px;
-                padding-bottom: 8px;
-                --paper-input-container-focus-color: #2196F3;
-            }
-
-            paper-item.iron-selected {
-                background-color: #2196F3;
-                color: #FFFFFF;
-            }
-
-            paper-icon-button {
-                color: #2196F3;
-                --paper-icon-button-ink-color: #2196F3;
-                margin: 0px;
-            }
-
             paper-button {
                 position: absolute;
                 bottom: 16px;
@@ -182,125 +88,43 @@
             paper-button[disabled] {
                 background-color: #B6B6B6;
             }
-
-            #dialog_info_input {
-                border: 2px solid #2196F3;
-                background-color: #E0E0E0;
-                min-width: 248px;
-            }
         </style>
 
         <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
 
-        <div id="datalet_selection_container">
+        <div id="select_visualization_container">
 
             <div id="items_vslider_controllet">
                 <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
             </div>
 
-            <paper-material id="datalet_selection_inputs" elevation="5">
-                <div class="input_header"><span id="inputs"></span></div>
-                <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
-                    <div class="inputs">
-                        <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
-                            <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{fields}}>
-                                    <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
-                                    <!--{{_fieldName(item)}}-->
-                                </template>
-                            </paper-menu>
-                        </paper-dropdown-menu>
-                        <div class="info_button">
-                            <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
-                        </div>
-                    </div>
+            <div id="datalet_selection_inputs">
+                <template is="dom-if" if="{{_checkType(type, 'multiseries')}}">
+                    <select-datalet-inputs_series id="inputs_series"></select-datalet-inputs_series>
                 </template>
-
-                <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
-
-                <div id="expert_header" on-click="_showExpertMode"><span id="expert">ADVANCED: GROUP BY</span></div>
-
-                <div id="expert_container">
-
-                    <div class="inputs">
-                        <paper-dropdown-menu id="group_by" label="GROUP BY">
-                            <paper-menu class="dropdown-content">
-                                <template is="dom-repeat" items={{selectedFields}}>
-                                    <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
-                                </template>
-                            </paper-menu>
-                        </paper-dropdown-menu>
-                        <div class="info_button">
-                            <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title="unsort"></paper-icon-button>
-                        </div>
-                    </div>
-
-                    <template is="dom-repeat" items="{{groupedFields}}">
-                        <div class="inputs">
-                            <paper-dropdown-menu id="calculate_{{index}}" label="CALCULATE">
-                                <paper-menu class="dropdown-content">
-                                    <paper-item on-tap="_addGroupByInput">COUNT of {{_fieldName(item)}}</paper-item>
-                                    <paper-item on-tap="_addGroupByInput">SUM of {{_fieldName(item)}}</paper-item>
-                                    <paper-item on-tap="_addGroupByInput">MIN of {{_fieldName(item)}}</paper-item>
-                                    <paper-item on-tap="_addGroupByInput">MAX of {{_fieldName(item)}}</paper-item>
-                                    <paper-item on-tap="_addGroupByInput">AVG of {{_fieldName(item)}}</paper-item>
-                                    <paper-item on-tap="_addGroupByInput">FIRST of {{_fieldName(item)}}</paper-item>
-                                    <paper-item on-tap="_addGroupByInput">LAST of {{_fieldName(item)}}</paper-item>
-                                </paper-menu>
-                            </paper-dropdown-menu>
-                            <div class="info_button">
-                                <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title="unsort"></paper-icon-button>
-                            </div>
-                        </div>
-                    </template>
-
-                </div>
-
-                <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
-
-            </paper-material>
-
-            <paper-material id="datalet_selection_labels" elevation="5">
-                <div class="input_header"><span id="baseInfo"></span></div>
-
-                <div class="inputs">
-                    <paper-input id="base_title" maxlength="32" class="base_input"></paper-input>
-                </div>
-
-                <div class="inputs">
-                    <paper-textarea id="base_description" maxlength="100" class="base_input"></paper-textarea>
-                </div>
-
-                <div class="input_header"><span id="layouts"></span></div>
-
-                <template is="dom-repeat" items="{{labels}}" index-as="index">
-                    <div class="inputs">
-                        <paper-input label={{_getLabelName(item.name)}}></paper-input>
-                        <div class="info_button">
-                            <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
-                        </div>
-                    </div>
+                <template is="dom-if" if="{{_checkType(type, 'default')}}">
+                    <select-datalet-inputs id="inputs"></select-datalet-inputs>
+                </template>
+                <template is="dom-if" if="{{_checkType(type, '')}}">
+                    <select-datalet-inputs></select-datalet-inputs>
                 </template>
-            </paper-material>
+            </div>
 
+            <div id="datalet_selection_options">
+                <select-datalet-options id="options"></select-datalet-options>
+            </div>
 
-            <div id="datalet_selection_column">
+            <div id="datalet_preview_container">
 
                 <paper-material id="datalet_selection_datalet" elevation="5">
                     <div class="input_header"><span id="dataletPreview"></span></div>
                     <div id="datalet_selection_datalet_placeholder"></div>
-
                 </paper-material>
 
                 <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
 
             </div>
 
-            <paper-dialog id="dialog_info_input">
-                <h2 id="dialog_name"></h2>
-                <p id="dialog_description"></p>
-            </paper-dialog>
-
         </div>
 
     </template>
@@ -309,7 +133,7 @@
 
         Polymer({
 
-            is : 'datalet-selection-controllet',
+            is : 'select-visualization-controllet',
 
             properties : {
 
@@ -333,24 +157,9 @@
                     value : undefined
                 },
 
-                loadPreview : {
-                    type :  Boolean,
-                    value : false
-                },
-
                 type : {
                     type : String,
-                    value : undefined
-                },
-
-                inputs : {
-                    type : Array,
-                    value : []
-                },
-
-                labels : {
-                    type : Array,
-                    value : []
+                    value : ""
                 },
 
                 filters : {
@@ -358,16 +167,6 @@
                     value : []
                 },
 
-                aggregators : {
-                    type : Array,
-                    value : []
-                },
-
-                orders : {
-                    type : Array,
-                    value : []
-                },
-
                 fields : {
                     type : Array,
                     value : []
@@ -378,21 +177,11 @@
                     value : []
                 },
 
-                groupedFields : {
-                    type : Array,
-                    value : []
-                },
-
                 dataletPreset : {
                     type  : Object,
                     value : []
                 },
 
-//                selectableFields : {
-//                    type : Array,
-//                    value : []
-//                },
-
                 dataUrl : {
                     type  : String,
                     value : undefined
@@ -401,92 +190,25 @@
                 params:{
                     type: Object,
                     value: undefined
-                },
-
-                expert : {
-                    type  : Boolean,
-                    value : false
-                },
-
-                modify : {
-                    type  : Boolean,
-                    value : false
                 }
 
             },
 
             listeners: {
                 'items-vslider-controllet_selected-datalet': '_selectDatalet',
-//                'tree-view-controllet_selected-fields': '_updateSelectedFields'
-                'change': '_paramsChanged'
-            },
-
-            _showExpertMode : function() {
-                if(!this.expert) {
-                    this.$.expert_header.style.color = "#000000";
-                    this.$.expert_header.style.background = "#B6B6B6";
-                    this.$.expert_container.style.display = "block";
-                }
-                else {
-                    this.$.expert_header.style.color = "#00BCD4";
-                    this.$.expert_header.style.background = "#FFFFFF";
-                    this.$.expert_container.style.display = "none";
-                }
-
-                this.expert = !this.expert;
-            },
-
-            _showGroupedFields : function(e) {
-                var index = e.target.id;
-                var isSelected = false;
-                var temp = [];
-
-                for (var i = 0; i < this.selectedFields.length; i++) {
-                    if (this.selectedFields[i]) {
-                        if (this.selectedFields[i].indexOf(this.fields[index]) > -1) {
-                            isSelected = true;
-                        }
-                        else {
-                            temp.push(this.selectedFields[i])
-                        }
-                    }
-                }
-
-                if (isSelected)
-                    this.groupedFields = this._copy(temp);
-                else
-                    this.groupedFields =[];
-
-                this.async(function() {
-                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
-                    for (var i = 0; i < ddls.length; i++){
-                        var id = ddls[i].id;
-                        if(id.indexOf("calculate") > -1) {
-                            $(ddls[i]).find("paper-menu")[0].select(-1);
-                            $(ddls[i]).find("paper-menu")[0].select(0);
-                        }
-                    }
-                }, 0);
-
-                this._addGroupByInput();
+                'select_visualization_inputs_ready': '_loadDatalet',
+                'select_visualization_options_changed': '_tryLoadDatalet',
             },
 
             ready : function() {
                 this._resize();
-                $(this.$.datalet_selection_inputs).perfectScrollbar();
-                $(this.$.datalet_selection_labels).perfectScrollbar();
+
                 $(this.$.datalet_selection_datalet).perfectScrollbar();
 
                 this.params = {'data-url' : this.dataUrl};
 
-                //this.modify = true;//da eliminare in futuro
-                if(this.preselectedDatalet){
-                    if(this.modify)
-                        this._preselectDatalet();
-
-                    this.modify = true;
-                    this.preselectedDatalet = undefined;
-                }
+                if(this.preselectedDatalet)
+                    this._preselectDatalet();
             },
 
             attached : function() {
@@ -498,43 +220,34 @@
             },
 
             setFilters : function(filters) {
-                this.filters = filters;
+                this.filters = this._copy(filters);
             },
 
             setFields : function(fields) {
-                this.fields = fields;
+                this.fields = this._copy(fields);
+
+                var inputs = this._getInputs();
+                if(inputs)
+                    inputs.setFields(this.fields);
             },
 
             reset : function() {
-                this.selectedDatalet = undefined;//non va!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-                this.preselectedDatalet = undefined;
-                this.type = undefined;
-                this.inputs = [];
-                this.labels = [];
-                this.$.expert_header.style.display = "none";
-                this.expert = true;
-                this._showExpertMode();
-                this.loadPreview = false;
+                this.$.vslider._reset();
+                this.type = "";
                 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
-                this._resetGroupBy();
             },
 
             _translate : function(){
+                if(this.preselectedDatalet)
+                    this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
+                else
+                    this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
 
-                this.$.add_button.innerHTML     = ln["addDatalet_" + ln["localization"]];
-                this.$.inputs.innerHTML         = ln["inputs_" + ln["localization"]];
-                this.$.baseInfo.innerHTML       = ln["baseInfo_" + ln["localization"]];
-                this.$.layouts.innerHTML        = ln["layouts_" + ln["localization"]];
                 this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
-
-                this.$.base_title.label = ln["title_" + ln["localization"]];
-                this.$.base_description.label = ln["description_" + ln["localization"]];
-
-                if(this.modify)
-                    this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
             },
 
             _selectDatalet : function(e){
+
                 this.$.add_button.setAttribute("disabled", "true");
 
                 this.selectedDatalet = e.detail.datalet;
@@ -542,289 +255,79 @@
                 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
 
                 if(!this.selectedDatalet){
-                    this.type = undefined;
-                    this.inputs = [];
-                    this.labels = [];
-                    this.$.expert_header.style.display = "none";
-                    this.expert = true;
-                    this._showExpertMode();
-                    this.loadPreview = false;
+                    this.type = "";
+                    this.$.options.setOptions([]);
                 }
                 else{
                     this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
                     this.$.selectedDatalet_request.generateRequest();
-                    this.$.expert_header.style.display = "block";
                 }
             },
 
             _preselectDatalet : function() {
-                this.type = "undefined";
-                this.$.selectedDatalet_request.url = this.deepUrl + this.preselectedDatalet + "-datalet";
-                this.$.selectedDatalet_request.generateRequest();
+//                console.log("_preselectDatalet to implement");
+//                console.log(this.preselectedDatalet);
+//                console.log(this.fields);
+//                console.log(this.dataletPreset);
 
-                this.selectedDatalet = this.preselectedDatalet;
-                this.selectedFields = this._copy(this.fields);
-
-                this.async(function() {
-                    this.selectedFields = this._copy(this.fields);
-
-                    var inputs = document.getElementsByTagName("paper-dropdown-menu");
-                    for (var i = 0; i < inputs.length; i++)
-                        $(inputs[i]).find("paper-menu")[0].select(i);
-
-                    //set info labels options
-                    var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
-                    for (var i = 0; i < labels.length; i++)
-                        labels[i].value = this.dataletPreset[labels[i].label];
+                var dataletParams ={
+                    component   : this.preselectedDatalet+"-datalet",
+                    params      : this.dataletPreset,
+                    fields      : this.fields,
+                    placeHolder : this.$.datalet_selection_datalet_placeholder
+                };
 
-                    var labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");
-                    for (var i = 0; i < labels.length; i++)
-                        labels[i].value = this.dataletPreset[labels[i].label];
+                ComponentService.deep_url = this.deepUrl;
+                ComponentService.getComponent(dataletParams);
 
-                    this.loadPreview = true;
-                    this._loadDatalet(this.selectedFields);
-                }, 300);
+                this.$.add_button.removeAttribute("disabled");
             },
 
             _handleSelectedDatalet : function(e){
 
                 if(this.type != e.detail.response.type) {
 
-                    this.inputs = [];
-                    this.labels = [];
-
-                    var inputs = this._copy(e.detail.response.idm.inputs.input);
-
-                    if (inputs.constructor == Object) {//not Array && inputs.input.selection == "*"
-                        var name = inputs.name;
-                        var description = inputs.description;
-                        var selection = inputs.selection;
-                        inputs = [];
-                        for (var i in this.fields)
-                            inputs.push({name: name + " " + i, description: description, selection: selection});
-                    }
-
-                    /**/
-                    var computedInputs = [];
-                    computedInputs.push(inputs[0]);
-
-                    for(var i = 0; i < inputs.length; i++) {
-                        var input = inputs[i];
-                        if(input.selection == "*") {
-                            var name = input.name;
-                            var description = input.description;
-                            var selection = input.selection;
-                            for(var j = 0; j < (this.fields.length - inputs.length +1); j++)
-                                computedInputs.push({name: name + " " + j, description: description, selection: selection});
-                        }
-                    }
-
-                    if(computedInputs.length > inputs.length)
-                        inputs = computedInputs;
-                    /**/
-
-                    this.async(function(){
-                        this.type = e.detail.response.type;
-                        this.inputs = inputs;
-                        this.labels = e.detail.response.idm.inputs.layouts.input;
-
-                        this.selectedFields = new Array(inputs.length);
-                    },0);
-
-                    this._resetGroupBy();
-
-                    this.loadPreview = false;
-                }
+                    this.type = e.detail.response.type;
 
-                else if (this.loadPreview)
-                    this._loadDatalet(this.selectedFields);
-            },
-
-            _resetGroupBy : function(){
-                $(this.$.group_by).find("paper-menu")[0].select(-1);
-                this.groupedFields = [];
-                this.aggregators = [];
-            },
+                    this.async(function () {
+                        var inputs = this._getInputs();
+                        inputs.setFields(this.fields);
+                        inputs.setInputs(e.detail.response.idm.inputs.input);// Cannot read property '0' of undefined
+                    }, 0);
 
-            _addGroupByInput : function(){
-                this.async(function() {//codice reprlicato!
-                    var selectedFields = this.selectedFields;
-
-                    var load = true;
-
-                    if(this.inputs[0].selection == "*"){
-                        var temp = [];
-                        for (var i = 0; i < selectedFields.length; i++)
-                            if(selectedFields[i])
-                                temp.push(selectedFields[i]);
-                        selectedFields = temp;
-                    }
-                    else {
-                        for (var i = 0; i < selectedFields.length; i++)
-                            if (!selectedFields[i]) {
-                                load = false;
-                                break;
-                            }
-                    }
-
-                    if(load){
-                        this.loadPreview = true;
-                        this._loadDatalet(selectedFields);
-                    }
-                }, 0);
-            },
-
-            _addOrder : function(e){
-                var t = e.target;
-                if(t.tagName.indexOf("IRON-ICON") > -1)
-                    t = $(e.target).parents("paper-icon-button")[0];
-
-                var icon = t.getAttribute("icon");
-                var name = t.getAttribute("id");
-
-                if(name.indexOf("gb") > -1){
-                    var selectedItem = $(this.$.group_by).find("paper-menu")[0].selectedItem;
-                    if(selectedItem)
-                        name = selectedItem.textContent.trim();
-//                        name = "[" + selectedItem.textContent.trim() + "]";
-                    else
-                        return;
-                }// else {
-//                    var i = name;
-//                    var ddl = $("#calculate_"+i);
-//
-//                    var label = $(ddl).find("paper-menu")[0].selectedItem.textContent.trim();
-//                    var index = label.split(" ", 2).join(" ").length;
-//                    var field = label.substring(index+1, label.length);
-//                    var operation = label.substring(0, label.indexOf(" "));
-//                    name = operation + "([" + field + "])";
-//                }
-
-                if(icon.indexOf("unfold-more") > -1){
-                    t.setAttribute("icon", "expand-less");
-                    t.setAttribute("title", "sort ascending");
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    orders.push({"field": name, "operation": "ASC"});
-                    this.orders = this._copy(orders);
-                }
-                else if(icon.indexOf("expand-less") > -1){
-                    t.setAttribute("icon", "expand-more");
-                    t.setAttribute("title", "sort descending");
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    orders.push({"field": name, "operation": "DESC"});
-                    this.orders = this._copy(orders);
-                }
-                else if(icon.indexOf("expand-more") > -1){
-                    t.setAttribute("icon", "unfold-more");
-                    t.setAttribute("title", "unsort");
-                    var orders = this.orders.filter(function (el) { return el.field !== name; });
-                    this.orders = this._copy(orders);
-                }
-
-                this._addGroupByInput();//no buoono
-//                if(load){
-//                    this.loadPreview = true;
-//                    this._loadDatalet(selectedFields);
-//                }
-            },
-
-            _addInput : function(e){
-                var selectedFields = this._copy(this.selectedFields);
-
-//                var index = $(e.target).parents("paper-dropdown-menu")[0].id;
-//                selectedFields[index] = e.target.innerHTML.trim();
-
-                var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
-                var index = e.target.id;
-                selectedFields[ddl_index] = this.fields[index];
-
-                this.selectedFields = this._copy(selectedFields);
-
-                var load = true;
-
-                if(this.inputs[0].selection == "*"){
-                    var temp = [];
-                    for (var i = 0; i < selectedFields.length; i++)
-                        if(selectedFields[i])
-                            temp.push(selectedFields[i]);
-                    selectedFields = temp;
+                    this.$.options.setOptions(e.detail.response.idm.inputs.layouts.input);
                 }
                 else {
-                    for (var i = 0; i < selectedFields.length; i++)
-                        if (!selectedFields[i]) {
-                            load = false;
-                            break;
-                        }
+                    this.$.options.ceckOptions(e.detail.response.idm.inputs.layouts.input);
                 }
 
-                this._resetGroupBy();//--> conflitto, in _updateparams valorizza this.aggregators
-
-                if(load){
-                    this.loadPreview = true;
-                    this._loadDatalet(selectedFields);
-                }
-            },
-
-            _updateParams : function(){
-                var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
-                this.params["description"] = textarea[0].value;
-
-                if(!textarea[0].value)
-                    this.params[textarea[0].label] = "";
-
-                var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");
-                this.params["title"] = inputs[0].value;
-
-                for (var i = 1; i < inputs.length; i++)
-                    this.params[this.labels[i-1].name] = inputs[i].value;
-
-                this.aggregators = [];
-
-                var ddls = document.getElementsByTagName("paper-dropdown-menu");
-                for (var i = 0; i < ddls.length; i++){
-                    var id = ddls[i].id;
-                    if(id.indexOf("group_by") > -1 && $(ddls[i]).find("paper-menu")[0].selectedItem) {
-                        var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();
-                        this.aggregators.push({"field": label, "operation": "GROUP BY"});
-                    }
-                    if(id.indexOf("calculate") > -1) {
-                        var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();
-//                        var field = label.substring(label.lastIndexOf(" ")+1, label.length);
-                        var index = label.split(" ", 2).join(" ").length;
-                        var field = label.substring(index+1, label.length);
-                        var operation = label.substring(0, label.indexOf(" "));
-                        this.aggregators.push({"field": field, "operation": operation});
-                    }
-                }
+                this.async(function () {
+                    var inputs = this._getInputs();
+                    inputs.fireReady();
+                }, 0);
             },
 
-            _paramsChanged : function(){
-
-                this._updateParams();
-
-                if(this.$.datalet_selection_datalet_placeholder.children[1])
-                    this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
+            _tryLoadDatalet : function(){
+                var inputs = this._getInputs();
+                inputs.fireReady();
             },
 
-            _loadDatalet : function(selectedFields){
+            _loadDatalet : function(){
+                var inputs = this._getInputs();
 
-                this._updateParams();
+                this.selectedFields = inputs.getSelectedFields();
 
                 this.params["filters"] = JSON.stringify(this.filters);
-                this.params["aggregators"] = JSON.stringify(this.aggregators);
-                this.params["orders"] = JSON.stringify(this.orders);
-
-//                this.params["filters"] = '[{"field": "Lat", "operation": ">=", "value": "53.298164"}, {"field": "Lat", "operation": "<", "value": "54"}]';
-//                this.params["aggregators"] = '[{"field": "Lat", "operation": "GROUP BY"}, {"field": "Lng", "operation": "COUNT"}]';
-//                this.params["orders"] = '[{"field": "Lat", "operation": "DESC"}, {"field": "Lat", "operation": "ASC"}]';
+                this.params["aggregators"] = JSON.stringify(inputs.getAggregators());
+                this.params["orders"] = JSON.stringify(inputs.getOrders());
 
-                //this.params["aggregators"] = '[{"field": "Value", "operation": "GROUP BY"}, {"field": "LOCATION", "operation": "COUNT"}]';
-                //this.params["orders"] = '[{"field": "Value", "operation": "ASC"}, {"field": "Value", "operation": "ASC"}]';
+                var params = this.$.options.getParams();
+                for (var key in params) { this.params[key] = params[key]; }
 
                 var dataletParams ={
                     component   : this.selectedDatalet+"-datalet",
                     params      : this.params,
-                    fields      : selectedFields,
+                    fields      : this.selectedFields,
                     placeHolder : this.$.datalet_selection_datalet_placeholder
                 };
 
@@ -835,53 +338,29 @@
             },
 
             _addDatalet : function(){
-
-                this._updateParams();
-
-                var selectedFields = [];
-                for (var i = 0; i < this.selectedFields.length; i++)
-                    if(this.selectedFields[i])
-                        selectedFields.push(this.selectedFields[i]);
-
                 var data = {
                     dataUrl : this.dataUrl,
                     params :  this.params,
-                    fields :  selectedFields,
+                    fields :  this.selectedFields,
                     datalet : this.selectedDatalet+"-datalet",
-//                    comment : "",//DEPRECATED!!!
                     staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
                 }
 
                 this.fire('data-sevc-controllet.dataletCreated', {data : data});
-
             },
 
-            _showInfo : function(e){
-//                var that = this;
-                var t = e.target;
-                if(t.tagName.indexOf("IRON-ICON") != -1)
-                    t = $(e.target).parents("paper-icon-button")[0];
-
-//                var name = t.getAttribute("title").replace(" info", "");
-                var name = t.getAttribute("id");
-
-                var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];
-                if(!dataset)
-                    dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
-
-                this.$.dialog_name.innerHTML = this._getLabelName(dataset.name);
-                this.$.dialog_description.innerHTML = ln[dataset.description + "_" +  ln["localization"]];
-                this.$.dialog_info_input.open();
-
-                var pos = t.getBoundingClientRect();
-                $("#dialog_info_input").css("top", pos.top - 4);
-                $("#dialog_info_input").css("left", pos.left - 4);
+            _checkType: function(type, check){
+                if (type == "multiseries" || type == "")
+                    return (type == check);
+                else if(check == "default")
+                    return true;
+                return false;
             },
 
-            _fieldName : function(field) {
-                if(!field)//when?
-                    return "";
-                return field.substring(field.lastIndexOf(",")+1, field.length);
+            _getInputs  : function(){
+                if(this.type == "multiseries")
+                    return this.$$("#inputs_series")
+                return this.$$("#inputs");
             },
 
             _copy : function(o) {
@@ -894,32 +373,14 @@
                 return out;
             },
 
-            _getLabelName: function(key) {
-                //* exceptions
-                if(key.indexOf("Cell") > -1) {
-                    return ln["Cell" + "_" +ln["localization"]] + key.slice(-2);
-                }
-                if(key.indexOf("Level") > -1) {
-                    return ln["Level" + "_" +ln["localization"]] + key.slice(-2);
-                }
-                if(key.indexOf("Category") > -1) {
-                    return ln["Category" + "_" +ln["localization"]] + key.slice(-2);
-                }
-
-                return ln[key + "_" +ln["localization"]];
-            },
-
             _resize : function(){
                 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                 h = h - 64 - 8; //height with page scroller
 
-                $("#items_vslider_container").height(h);//vslider controllet
-
+                $("#items_vslider_controllet").height(h);//vslider controllet
                 $("#datalet_selection_inputs").height(h);
-                $("#datalet_selection_labels").height(h);
-//                if(this.modify)
-//                    $("#datalet_selection_datalet").height(h-128);
-//                else
+                $("#datalet_selection_options").height(h);
+
                 $("#datalet_selection_datalet").height(h);
             }
 
diff --git a/datalets/areachart-datalet/areachart-datalet.html b/datalets/areachart-datalet/areachart-datalet.html
index 1b3717a..b91bdf7 100755
--- a/datalets/areachart-datalet/areachart-datalet.html
+++ b/datalets/areachart-datalet/areachart-datalet.html
@@ -62,7 +62,7 @@ Example:
              * @method transformData
              */
             presentData: function(){
-                $(this._component.$.charts.$.container).highcharts({
+                options = {
                     chart: {
                         type: 'area',
                         zoomType: 'xy'
@@ -91,7 +91,16 @@ Example:
                     },
                     plotOptions: {
                         area: {
-
+                            marker: {
+                                enabled: false,
+                                symbol: 'circle',
+                                radius: 2,
+                                states: {
+                                    hover: {
+                                        enabled: true
+                                    }
+                                }
+                            }
                         }
                     },
                     legend: {
@@ -99,17 +108,22 @@ Example:
                         align: 'right',
                         verticalAlign: 'top',
                         x: -40,
-                        y: 100,
+                        y: 80,
                         floating: true,
                         borderWidth: 1,
-                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
+                        backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
                         shadow: true
                     },
                     credits: {
                         enabled: false
                     },
-                    series: this.properties.series.value//this._component.series
-                });
+                    series: this.properties.series.value
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
+
+                $(this._component.$.charts.$.container).highcharts(options);
             }
         };
 
@@ -150,6 +164,21 @@ Example:
                 suffix : {
                     type : String,
                     value : "units"
+                },
+                theme : {
+                    type : String,
+                    value : ""
+                },
+                /**
+                 * It's the component behavior
+                 *
+                 * @attribute behavior
+                 * @type Object
+                 * @default {}
+                 */
+                behavior : {
+                    type : Object,
+                    value : {}
                 }
             },
             /**
diff --git a/datalets/areachart-datalet/areachart-datalet.png b/datalets/areachart-datalet/areachart-datalet.png
old mode 100755
new mode 100644
index ddee318..b011bf6
Binary files a/datalets/areachart-datalet/areachart-datalet.png and b/datalets/areachart-datalet/areachart-datalet.png differ
diff --git a/datalets/areachart_stacked-datalet/areachart_stacked-datalet.html b/datalets/areachart_stacked-datalet/areachart_stacked-datalet.html
new file mode 100755
index 0000000..5020469
--- /dev/null
+++ b/datalets/areachart_stacked-datalet/areachart_stacked-datalet.html
@@ -0,0 +1,193 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
+
+<!--
+
+`areachart-datalet` is a areachart datalet based on highcharts project http://www.highcharts.com/
+
+Example:
+
+    <areachart-datalet
+        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+        fields='["field1","field2"]'>
+    </areachart-datalet>
+
+@element areachart-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+
+<dom-module name="areachart_stacked-datalet">
+    <template>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
+    </template>
+    <script>
+
+        var AreachartStackedBehavior = {
+
+            /**
+             * Bluid Highchart object
+             *
+             * @method transformData
+             */
+            presentData: function(){
+                options = {
+                    chart: {
+                        type: 'area',
+                        zoomType: 'xy',
+                    },
+                    title: {
+                        text: this._component.title
+                    },
+                    xAxis: {
+                        categories: this.properties.categories.value,
+                        title: {
+                            text: this._component.yAxisLabel
+                        }
+                    },
+                    yAxis: {
+                        min: 0,
+                        title: {
+                            text: this._component.xAxisLabel,
+                        },
+                    },
+                    tooltip: {
+                        valueSuffix: ' ' + this._component.suffix
+                    },
+                    plotOptions: {
+                        series: {
+                            stacking: this._component.stack
+                        },
+                        area: {
+                            marker: {
+                                enabled: false,
+                                symbol: 'circle',
+                                radius: 2,
+                                states: {
+                                    hover: {
+                                        enabled: true
+                                    }
+                                }
+                            }
+                        }
+//                        bar: {
+//                            dataLabels: {
+//                                enabled: true
+//                            }
+//                        }
+                    },
+                    series: this.properties.series.value
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
+
+                $(this._component.$.charts.$.container).highcharts(options);
+            }
+        };
+
+        AreachartStackedDatalet = Polymer({
+            is: 'areachart_stacked-datalet',
+
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the values suffix
+                 *
+                 * @attribute suffix
+                 * @type Strig
+                 * @default 'units'
+                 */
+                suffix : {
+                    type : String,
+                    value : ""
+                },
+
+                stack : {
+                    type : String,
+                    value : "normal"
+                },
+
+                theme : {
+                    type : String,
+                    value : ""
+                },
+                /**
+                 * It's the component behavior
+                 *
+                 * @attribute behavior
+                 * @type Object
+                 * @default {}
+                 */
+                behavior : {
+                    type : Object,
+                    value : {}
+                }
+
+            },
+
+            /**
+             * 'ready' callback extend the areachartComponentBehavior with HighchartsComponentBehavior and areachartBehavior
+             * and run the Datalet workcycle.
+             *
+             * @method ready
+             */
+            ready: function(){
+                this.behavior = $.extend(true, {}, HighchartsComponentBehavior, AreachartStackedBehavior);
+                this.async(function(){this.behavior.init(this)},0);
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/areachart_stacked-datalet/areachart_stacked-datalet.png b/datalets/areachart_stacked-datalet/areachart_stacked-datalet.png
new file mode 100644
index 0000000..6a2321f
Binary files /dev/null and b/datalets/areachart_stacked-datalet/areachart_stacked-datalet.png differ
diff --git a/datalets/bar-chart-datalet/bar-chart-datalet.html b/datalets/bar-chart-datalet/bar-chart-datalet.html
deleted file mode 100755
index 0d34c48..0000000
--- a/datalets/bar-chart-datalet/bar-chart-datalet.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!--
-@license
-    The MIT License (MIT)
-
-    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in
-    all copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-    THE SOFTWARE.
--->
-
-<!--
-* Developed by :
-* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
-*
--->
-
-<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
-
-<!--
-
-`barchart-datalet` is a barchart datalet based on highcharts project http://www.highcharts.com/
-
-Example:
-
-    <barchart-datalet
-        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
-        fields='["field1","field2"]'>
-    </barchart-datalet>
-
-@element barchart-datalet
-@status v0.1
-@demo demo/index.html
-@group datalets
--->
-
-<dom-module name="bar-chart-datalet">
-    <template>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
-    </template>
-    <script>
-
-        var Bar_chartBehavior = {
-
-            /**
-             * Bluid Highchart object
-             *
-             * @method transformData
-             */
-            presentData: function(){
-
-//                var a = "theme";//default
-//                var a = "themeDarkUnika";
-                var a = "themeSandSignika";
-//                var a = "themeGridLight";
-
-                Highcharts.setOptions(Highcharts[a]);
-
-                $(this._component.$.charts.$.container).highcharts({
-                    chart: {
-                        type: 'bar',
-                        zoomType: 'xy'
-                    },
-                    title: {
-                        text: this._component.title
-                    },
-                    xAxis: {
-                        categories: this.properties.categories.value,
-//                        categories: ['Cinesi', 'Albanesi', 'Rumeni', 'Pakistani', 'Marocchini', 'Altri stranieri'],
-                        title: {
-                            text: this._component.xAxisLabel
-                        }
-                    },
-                    yAxis: {
-                        min: 0,
-                        title: {
-                            text: this._component.yAxisLabel,
-                            align: 'high'
-                        },
-                        labels: {
-                            overflow: 'justify'
-                        }
-                    },
-                    tooltip: {
-                        valueSuffix: ' ' + this._component.suffix
-                    },
-                    plotOptions: {
-                        bar: {
-                            dataLabels: {
-                                enabled: true
-                            }
-                        }
-//
-//                        series: {
-//                            stacking: 'normal'
-//                        }
-                    },
-                    legend: {
-                        layout: 'vertical',
-                        align: 'right',
-                        verticalAlign: 'top',
-                        x: -40,
-                        y: 40,
-                        floating: true,
-                        borderWidth: 1,
-                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
-                        shadow: true
-                    },
-                    credits: {
-                        enabled: false
-                    },
-
-                    series: this.properties.series.value
-//                     series: [{
-//                         name: '2010',
-//                         data: [107, 31, 635, 203, 2]
-//                     }, {
-//                         name: '2011',
-//                         data: [1353, 156, 947, 408, 6]
-//                     }, {
-//                         name: '2012',
-//                         data: [133, 156, 947, 408, 64]
-//                     }, {
-//                         name: '2013',
-//                         data: [133, 156, 947, 48, 6]
-//                     }, {
-//                         name: '2014',
-//                         data: [1052, 954, 4250, 740, 38]
-//                     }]
-                });
-
-
-
-            }
-        };
-
-        BarchartDatalet = Polymer({
-            is: 'bar-chart-datalet',
-
-            properties: {
-                /**
-                 * It's the label for X axis
-                 *
-                 * @attribute xAxisLabel
-                 * @type String
-                 * @default ''
-                 */
-                xAxisLabel: {
-                    type: String,
-                    value: ""
-                },
-                /**
-                 * It's the label for Y axis
-                 *
-                 * @attribute yAxisLabel
-                 * @type String
-                 * @default ''
-                 */
-                yAxisLabel: {
-                    type: String,
-                    value: ""
-                },
-                /**
-                 * It's the values suffix
-                 *
-                 * @attribute suffix
-                 * @type Strig
-                 * @default 'units'
-                 */
-                suffix : {
-                    type : String,
-                    value : "units"
-                },
-                /**
-                 * It's the component behavior
-                 *
-                 * @attribute behavior
-                 * @type Object
-                 * @default {}
-                 */
-                behavior : {
-                    type : Object,
-                    value : {}
-                }
-
-            },
-
-            /**
-             * 'ready' callback extend the BarchartComponentBehavior with HighchartsComponentBehavior and BarchartBehavior
-             * and run the Datalet workcycle.
-             *
-             * @method ready
-             */
-            ready: function(){
-                this.behavior = $.extend(true, {}, HighchartsComponentBehavior, Bar_chartBehavior);
-                this.async(function(){this.behavior.init(this)},0);
-            }
-        });
-    </script>
-</dom-module>
\ No newline at end of file
diff --git a/datalets/bar-chart-datalet/bar-chart-datalet.png b/datalets/bar-chart-datalet/bar-chart-datalet.png
deleted file mode 100755
index b6b6810..0000000
Binary files a/datalets/bar-chart-datalet/bar-chart-datalet.png and /dev/null differ
diff --git a/datalets/barchart-datalet/barchart-datalet.html b/datalets/barchart-datalet/barchart-datalet.html
index 7d8dc06..1041551 100755
--- a/datalets/barchart-datalet/barchart-datalet.html
+++ b/datalets/barchart-datalet/barchart-datalet.html
@@ -62,8 +62,7 @@ Example:
              * @method transformData
              */
             presentData: function(){
-
-                $(this._component.$.charts.$.container).highcharts({
+                options = {
                     chart: {
                         type: 'bar',
                         zoomType: 'xy'
@@ -102,18 +101,22 @@ Example:
                         align: 'right',
                         verticalAlign: 'top',
                         x: -40,
-                        y: 100,
+                        y: 80,
                         floating: true,
                         borderWidth: 1,
-                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
+                        backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
                         shadow: true
                     },
                     credits: {
                         enabled: false
                     },
                     series: this.properties.series.value
-                });
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
 
+                $(this._component.$.charts.$.container).highcharts(options);
             }
         };
 
@@ -121,51 +124,26 @@ Example:
             is: 'barchart-datalet',
 
             properties: {
-                /**
-                 * It's the label for X axis
-                 *
-                 * @attribute xAxisLabel
-                 * @type String
-                 * @default ''
-                 */
                 xAxisLabel: {
                     type: String,
                     value: ""
                 },
-                /**
-                 * It's the label for Y axis
-                 *
-                 * @attribute yAxisLabel
-                 * @type String
-                 * @default ''
-                 */
                 yAxisLabel: {
                     type: String,
                     value: ""
                 },
-                /**
-                 * It's the values suffix
-                 *
-                 * @attribute suffix
-                 * @type Strig
-                 * @default 'units'
-                 */
                 suffix : {
                     type : String,
-                    value : "units"
+                    value : ""
+                },
+                theme : {
+                    type : String,
+                    value : ""
                 },
-                /**
-                 * It's the component behavior
-                 *
-                 * @attribute behavior
-                 * @type Object
-                 * @default {}
-                 */
                 behavior : {
                     type : Object,
                     value : {}
                 }
-
             },
 
             /**
diff --git a/datalets/barchart-datalet/barchart-datalet.png b/datalets/barchart-datalet/barchart-datalet.png
old mode 100755
new mode 100644
index b6b6810..320f17a
Binary files a/datalets/barchart-datalet/barchart-datalet.png and b/datalets/barchart-datalet/barchart-datalet.png differ
diff --git a/datalets/barchart_stacked-datalet/barchart_stacked-datalet.html b/datalets/barchart_stacked-datalet/barchart_stacked-datalet.html
new file mode 100755
index 0000000..6eb4c26
--- /dev/null
+++ b/datalets/barchart_stacked-datalet/barchart_stacked-datalet.html
@@ -0,0 +1,181 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
+
+<!--
+
+`barchart-datalet` is a barchart datalet based on highcharts project http://www.highcharts.com/
+
+Example:
+
+    <barchart-datalet
+        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+        fields='["field1","field2"]'>
+    </barchart-datalet>
+
+@element barchart-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+
+<dom-module name="barchart_stacked-datalet">
+    <template>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
+    </template>
+    <script>
+
+        var BarchartStackedBehavior = {
+
+            /**
+             * Bluid Highchart object
+             *
+             * @method transformData
+             */
+            presentData: function(){
+                options = {
+                    chart: {
+                        type: 'bar',
+                        zoomType: 'xy',
+                    },
+                    title: {
+                        text: this._component.title
+                    },
+                    xAxis: {
+                        categories: this.properties.categories.value,
+                        title: {
+                            text: this._component.yAxisLabel
+                        }
+                    },
+                    yAxis: {
+                        min: 0,
+                        title: {
+                            text: this._component.xAxisLabel,
+                        },
+                    },
+                    tooltip: {
+                        valueSuffix: ' ' + this._component.suffix
+                    },
+                    plotOptions: {
+                        series: {
+                            stacking: this._component.stack
+                        },
+//                        bar: {
+//                            dataLabels: {
+//                                enabled: true
+//                            }
+//                        }
+                    },
+                    series: this.properties.series.value
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
+
+                $(this._component.$.charts.$.container).highcharts(options);
+            }
+        };
+
+        BarchartStackedDatalet = Polymer({
+            is: 'barchart_stacked-datalet',
+
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the values suffix
+                 *
+                 * @attribute suffix
+                 * @type Strig
+                 * @default 'units'
+                 */
+                suffix : {
+                    type : String,
+                    value : ""
+                },
+
+                stack : {
+                    type : String,
+                    value : "normal"
+                },
+
+                theme : {
+                    type : String,
+                    value : ""
+                },
+                /**
+                 * It's the component behavior
+                 *
+                 * @attribute behavior
+                 * @type Object
+                 * @default {}
+                 */
+                behavior : {
+                    type : Object,
+                    value : {}
+                }
+
+            },
+
+            /**
+             * 'ready' callback extend the BarchartComponentBehavior with HighchartsComponentBehavior and BarchartBehavior
+             * and run the Datalet workcycle.
+             *
+             * @method ready
+             */
+            ready: function(){
+                this.behavior = $.extend(true, {}, HighchartsComponentBehavior, BarchartStackedBehavior);
+                this.async(function(){this.behavior.init(this)},0);
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/barchart_stacked-datalet/barchart_stacked-datalet.png b/datalets/barchart_stacked-datalet/barchart_stacked-datalet.png
new file mode 100644
index 0000000..2c5a140
Binary files /dev/null and b/datalets/barchart_stacked-datalet/barchart_stacked-datalet.png differ
diff --git a/datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js b/datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js
index d1ea02a..b68fa51 100755
--- a/datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js
+++ b/datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior.js
@@ -101,12 +101,6 @@ var AjaxJsonAlasqlBehavior = {
         for (var i=0; i < this._component.fields.length; i++)
             fields.push(this._fieldName(this._component.fields[i], provider));
 
-        //if(aggregators)
-        //    for (var i=0; i < aggregators.length; i++)
-        //        aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], provider);
-
-        //var jsonData = [this.properties.json_results.value];
-
         //jsdatachecker
         var _converter = new DataTypeConverter();
         var path2 = this._arrayPath(provider);
@@ -155,65 +149,46 @@ var AjaxJsonAlasqlBehavior = {
         pureSelect = pureSelect.slice(0, -2);
 
         //GROUP BY
-        //var groupBy = "";
-        //if(aggregators && aggregators.length) {
-        //
-        //    for (var i=0; i < aggregators.length; i++)
-        //        aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], provider);
-        //
-        //    groupBy = "GROUP BY " + aggregators[0]["field"];
-        //    select = "SELECT "  + aggregators[0]["field"];
-        //    for (var i = 1; i < aggregators.length; i++)
-        //        select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
-        //}
-
-        //var groupBy = "";
-        //if(aggregators && aggregators.length) {
-        //
-        //    groupBy = "GROUP BY " + this._fieldName(aggregators[0]["field"], "");
-        //    select = "SELECT "  + this._fieldName(aggregators[0]["field"], provider) + " as " + this._fieldName(aggregators[0]["field"], "");
-        //    for (var i = 1; i < aggregators.length; i++)
-        //        select += ", " + aggregators[i]["operation"] + "(" + this._fieldName(aggregators[i]["field"], provider) + ") as " + this._fieldName(aggregators[i]["field"], "");
-        //}
-
-        //GROUP BY
         var groupBy = "";
+        var select = "";
         if(aggregators && aggregators.length) {
 
             for (var i=0; i < aggregators.length; i++)
                 aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], "");
 
             groupBy = "GROUP BY " + aggregators[0]["field"];
-            var select = "SELECT "  + aggregators[0]["field"];
+            select = "SELECT "  + aggregators[0]["field"];
             for (var i = 1; i < aggregators.length; i++)
                 select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
+
+            if(aggregators[1] && aggregators[1]["operation"] == "GROUP BY") {
+                groupBy = "GROUP BY " + aggregators[0]["field"] + ", " + aggregators[1]["field"];
+                select = "SELECT "  + aggregators[0]["field"] + ", " + aggregators[1]["field"];
+                for (var i = 2; i < aggregators.length; i++)
+                    select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
+            }
         }
 
         //QUERY
         var path = this._path(this._component.fields[0], provider);
+        var query;
 
-        console.log('SELECT '+ path +' FROM ?');
-        var res = alasql("SELECT "+ path +" FROM ?", [jsonData]);
+        query = "SELECT "+ path +" FROM ?";
+        //console.log(query);
+        var res = alasql(query, [jsonData]);
 
         var records = res[0][path];
 
-        //console.log(select + ' FROM ? ' + where + ' ' + groupBy + ' ' + orderBy + '');
-        //var obj = alasql(select + " FROM ? " + where + " " + groupBy + " " + orderBy + "", [records]);
-
-        console.log(pureSelect + ' FROM ? ' + where);
-        var obj = alasql(pureSelect + " FROM ? " + where, [records]);
+        query = pureSelect + " FROM ? " + where  + " " + orderBy;
+        //console.log(query);
+        var obj = alasql(query, [records]);
 
         if (groupBy != "") {
-            console.log(select + ' FROM ? ' + groupBy + ' ' + orderBy + '');
-            obj = alasql(select + " FROM ? " + groupBy + " " + orderBy + "", [obj]);
+            query = select + " FROM ? " + groupBy + " " + orderBy;
+            //console.log(query);
+            obj = alasql(query, [obj]);
         }
 
-        //TEST
-        //var query = "SELECT [preteur], [annee] as [annee], SUM([capital_restant_du]) as [capital_restant_du] FROM ? GROUP BY [preteur], [annee]"
-        //var obj = alasql(query, [obj]);
-        //console.log(obj);
-        //this.data = obj;
-
         //PUSH DATA
         if(!obj || obj.length == 0)
             this.data = []
diff --git a/datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior_old2.js b/datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior_old2.js
new file mode 100755
index 0000000..d1ea02a
--- /dev/null
+++ b/datalets/base-ajax-json-alasql-datalet/static/js/AjaxJsonAlasqlBehavior_old2.js
@@ -0,0 +1,300 @@
+/*
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+*/
+
+/**
+ * Developed by :
+ * ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+ *
+*/
+
+
+var AjaxJsonAlasqlBehavior = {
+
+    properties: {
+
+        /**
+         * It contains the json data from async xhr call returned from core-ajax core component
+         *
+         * @attribute json_results
+         * @type object
+         * @default 'null'.
+         */
+        json_results: {
+            type: Object,
+            value: {}
+        }
+
+    },
+
+    /**
+     * Make an AJAX call to the dataset URL
+     *
+     * @method requestData
+     */
+    requestData: function(){
+
+        var comp = this;
+
+        $.ajax({
+            url: this._component.dataUrl,
+            dataType: "json",
+            success: function(e){
+                comp.handleResponse(e);
+            }
+        });
+    },
+
+    /**
+     * Called when core-ajax component receive the json data from called url.
+     *
+     * @method handleResponse
+     */
+    handleResponse: function(e) {
+        this.properties.json_results.value = e;
+        this.runWorkcycle();
+    },
+
+    /**
+     * selectData built a JSONPATH query based on the user selected fields then extract data from the JSON response.
+     * This method built an objects <name, data> for every user selected field and push it into the data array.
+     *
+     * @method selectData
+     */
+    selectData : function() {
+        this._component.fields = JSON.parse(this._component.fields);
+        var provider = this._getProvider(this._component.fields[0]);
+
+        var filters = JSON.parse(this._component.getAttribute("filters"));
+        var aggregators = JSON.parse(this._component.getAttribute("aggregators"));
+        var orders = JSON.parse(this._component.getAttribute("orders"));
+
+        //preview my space
+        if(filters && filters[0] && filters[0].constructor == Array){
+            filters = filters[0];
+            aggregators = aggregators[0];
+            orders = orders[0];
+        }
+
+        var fields = [];
+        for (var i=0; i < this._component.fields.length; i++)
+            fields.push(this._fieldName(this._component.fields[i], provider));
+
+        //if(aggregators)
+        //    for (var i=0; i < aggregators.length; i++)
+        //        aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], provider);
+
+        //var jsonData = [this.properties.json_results.value];
+
+        //jsdatachecker
+        var _converter = new DataTypeConverter();
+        var path2 = this._arrayPath(provider);
+        var processingResult = _converter.inferJsonDataType(this.properties.json_results.value, path2);
+        var processingResults = _converter.convert(processingResult);
+        var jsonData = [processingResults.dataset];
+
+        //WHERE
+        var where = "";
+        if(filters && filters.length) {
+
+            for (var i=0; i < filters.length; i++)
+                filters[i]["field"] = this._fieldName(filters[i]["field"], provider);
+
+            where = "WHERE ";
+            for (var i=0; i < filters.length; i++) {
+                if(filters[i]["operation"] == "contains")
+                    where += filters[i]["field"] + " like '%" + filters[i]["value"] + "%' AND ";
+                else if(filters[i]["operation"] == "start")
+                    where += filters[i]["field"] + " like '" + filters[i]["value"] + "%' AND ";
+                else if(filters[i]["operation"] == "ends")
+                    where += filters[i]["field"] + " like '%" + filters[i]["value"] + "' AND ";
+                else
+                    where += filters[i]["field"] + " " + filters[i]["operation"] + " " + filters[i]["value"] + " AND ";
+            }
+            where = where.slice(0, -5);
+        }
+
+        //ORDER BY
+        var orderBy = "";
+        if(orders && orders.length) {
+
+            for (var i=0; i < orders.length; i++)
+                orders[i]["field"] = this._fieldName(orders[i]["field"], "");
+
+            orderBy = "ORDER BY ";
+            for (var i = 0; i < orders.length; i++)
+                orderBy += orders[i]["field"] + " " + orders[i]["operation"] + ", ";
+            orderBy = orderBy.slice(0, -2);
+        }
+
+        //SELECT
+        var pureSelect = "SELECT ";
+        for (var i = 0; i < fields.length; i++)
+            pureSelect += fields[i] + " as " + this._fieldName(this._component.fields[i], "") + ", ";
+        pureSelect = pureSelect.slice(0, -2);
+
+        //GROUP BY
+        //var groupBy = "";
+        //if(aggregators && aggregators.length) {
+        //
+        //    for (var i=0; i < aggregators.length; i++)
+        //        aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], provider);
+        //
+        //    groupBy = "GROUP BY " + aggregators[0]["field"];
+        //    select = "SELECT "  + aggregators[0]["field"];
+        //    for (var i = 1; i < aggregators.length; i++)
+        //        select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
+        //}
+
+        //var groupBy = "";
+        //if(aggregators && aggregators.length) {
+        //
+        //    groupBy = "GROUP BY " + this._fieldName(aggregators[0]["field"], "");
+        //    select = "SELECT "  + this._fieldName(aggregators[0]["field"], provider) + " as " + this._fieldName(aggregators[0]["field"], "");
+        //    for (var i = 1; i < aggregators.length; i++)
+        //        select += ", " + aggregators[i]["operation"] + "(" + this._fieldName(aggregators[i]["field"], provider) + ") as " + this._fieldName(aggregators[i]["field"], "");
+        //}
+
+        //GROUP BY
+        var groupBy = "";
+        if(aggregators && aggregators.length) {
+
+            for (var i=0; i < aggregators.length; i++)
+                aggregators[i]["field"] = this._fieldName(aggregators[i]["field"], "");
+
+            groupBy = "GROUP BY " + aggregators[0]["field"];
+            var select = "SELECT "  + aggregators[0]["field"];
+            for (var i = 1; i < aggregators.length; i++)
+                select += ", " + aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"];
+        }
+
+        //QUERY
+        var path = this._path(this._component.fields[0], provider);
+
+        console.log('SELECT '+ path +' FROM ?');
+        var res = alasql("SELECT "+ path +" FROM ?", [jsonData]);
+
+        var records = res[0][path];
+
+        //console.log(select + ' FROM ? ' + where + ' ' + groupBy + ' ' + orderBy + '');
+        //var obj = alasql(select + " FROM ? " + where + " " + groupBy + " " + orderBy + "", [records]);
+
+        console.log(pureSelect + ' FROM ? ' + where);
+        var obj = alasql(pureSelect + " FROM ? " + where, [records]);
+
+        if (groupBy != "") {
+            console.log(select + ' FROM ? ' + groupBy + ' ' + orderBy + '');
+            obj = alasql(select + " FROM ? " + groupBy + " " + orderBy + "", [obj]);
+        }
+
+        //TEST
+        //var query = "SELECT [preteur], [annee] as [annee], SUM([capital_restant_du]) as [capital_restant_du] FROM ? GROUP BY [preteur], [annee]"
+        //var obj = alasql(query, [obj]);
+        //console.log(obj);
+        //this.data = obj;
+
+        //PUSH DATA
+        if(!obj || obj.length == 0)
+            this.data = []
+        else
+            this._pushData(obj, fields);
+
+        this._deleteWaitImage();
+    },
+
+    _pushData : function(obj, keys) {
+        this.data = [];
+
+        if (typeof keys == 'undefined')
+            keys = Object.keys(obj[0]);
+
+        for (var key in keys){
+
+            var name = keys[key].replace(/(\[|\]|fields->)/g, "");
+            var data = [];
+
+            for (var i in obj) {
+                data.push(obj[i][name]);
+            }
+
+            this.data.push({
+                name: name,
+                data: data
+            });
+        }
+    },
+
+    _getProvider : function(field) {
+        if(field.indexOf("result,records") > -1)
+            return "ckan";
+        else if(field.indexOf("records,fields") > -1)
+            return "openDataSoft";
+        else
+            return "provider";
+    },
+
+    _fieldName : function(field, provider) {
+        if(provider.indexOf("ckan") > -1) {
+            return "[" + field.substring(field.lastIndexOf(",") + 1, field.length) + "]";
+        }
+        else if(provider.indexOf("openDataSoft") > -1) {
+            return "fields->[" + field.substring(field.lastIndexOf(",") + 1, field.length)+ "]";
+        }
+        else {
+            return "[" + field.substring(field.lastIndexOf(",") + 1, field.length) + "]";
+        }
+    },
+
+    _path : function(field, provider) {
+        if(provider.indexOf("ckan") > -1) {
+            return "result->records"
+        }
+        else if(provider.indexOf("openDataSoft") > -1) {
+            return "records";
+        }
+        else {
+            return field.substring(0, field.lastIndexOf(",")).replace(",", "->");
+        }
+    },
+
+    _arrayPath : function(provider) {
+        if(provider.indexOf("ckan") > -1) {
+            return ["result", "records", "*"];
+        }
+        else if(provider.indexOf("openDataSoft") > -1) {
+            return ["records", "fields", "*"];
+        }
+        else {
+            return ["*"];
+        }
+    },
+
+    /**
+     * Delete a image after loading a datalet
+     */
+    _deleteWaitImage : function() {
+        $("img[src$='spin.svg']").remove();
+    }
+
+};
\ No newline at end of file
diff --git a/datalets/base-datalet/base-datalet.html b/datalets/base-datalet/base-datalet.html
index 0384a70..4e48c1f 100755
--- a/datalets/base-datalet/base-datalet.html
+++ b/datalets/base-datalet/base-datalet.html
@@ -182,23 +182,12 @@ Example :
                 }
             },
 
-            attached: function(){
-//                if(this.title == undefined)
-//                    this.title = "";
-//
-//                if(this.description == undefined)
-//                    this.description = "";
-//
-//                if(this.title != "" && this.description != "")
-//                    this.description = "- " + this.description;
-            },
-            
             /**
              * Set the domain url to show in the footer
              */
-            setDomain: function(url){
-                this.$.domain.textContent = url;
-            },
+//            setDomain: function(url){
+//                this.$.domain.textContent = url;
+//            },
 
             hideFooter: function() {
                 this.$.base_datalet_container.innerHTML = "";
diff --git a/datalets/base-datalet/static/js/BaseDataletBehavior.js b/datalets/base-datalet/static/js/BaseDataletBehavior.js
index d05a198..f3ac253 100755
--- a/datalets/base-datalet/static/js/BaseDataletBehavior.js
+++ b/datalets/base-datalet/static/js/BaseDataletBehavior.js
@@ -67,19 +67,27 @@ var BaseDataletBehavior ={
         data: {
             type: Array,
             value: []
+        },
+        title: {
+            type: String,
+            value: ""
+        },
+        description: {
+            type: String,
+            value: ""
         }
 
     },
 
-    factoryImpl: function(data_url, fields) {
-        this.data_url = data_url;
-        this.fields   = fields;
-    },
+    //factoryImpl: function(data_url, fields) {
+    //    this.dataUrl = data_url;
+    //    this.fields   = fields;
+    //},
 
-    setParameters: function(params)
-    {
-        this.title = params['title'];
-        this.description = params['description'];
-    }
+    //setParameters: function(params)
+    //{
+    //    this.title = params['title'];
+    //    this.description = params['description'];
+    //}
 
 };
\ No newline at end of file
diff --git a/datalets/columnchart-datalet/columnchart-datalet.html b/datalets/columnchart-datalet/columnchart-datalet.html
index c2e5b6b..aae83cc 100755
--- a/datalets/columnchart-datalet/columnchart-datalet.html
+++ b/datalets/columnchart-datalet/columnchart-datalet.html
@@ -63,7 +63,7 @@ Example:
              * @method transformData
              */
             presentData: function(){
-                $(this._component.$.charts.$.container).highcharts({
+                options = {
                     chart: {
                         type: 'column',
                         zoomType: 'xy',
@@ -75,7 +75,8 @@ Example:
                         categories: this.properties.categories.value,
                         title: {
                             text: this._component.xAxisLabel
-                        }
+                        },
+//                        crosshair: true
                     },
                     yAxis: {
                         min: 0,
@@ -87,11 +88,25 @@ Example:
                             overflow: 'justify'
                         }
                     },
+//                    tooltip: {
+//                        headerFormat: '<span style="font-size:16px; font-weight: bold">{point.key}</span><table  style="font-size:16px; white-space: nowrap ">',
+//                        pointFormat: '<tr style="color:{series.color}"><td>{series.name}: </td>' +
+//                        '<td>{point.y} ' + this._component.suffix + '</span></td></tr>',
+//                        footerFormat: '</table>',
+//                        shared: true,
+//                        useHTML: true
+//                    },
+//                    plotOptions: {
+//                        column: {
+//                            pointPadding: 0.2,
+//                            borderWidth: 0
+//                        }
+//                    },
                     tooltip: {
                         valueSuffix: ' ' + this._component.suffix
                     },
                     plotOptions: {
-                        bar: {
+                        column: {
                             dataLabels: {
                                 enabled: true
                             }
@@ -102,21 +117,25 @@ Example:
                         align: 'right',
                         verticalAlign: 'top',
                         x: -40,
-                        y: 100,
+                        y: 80,
                         floating: true,
                         borderWidth: 1,
-                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
+                        backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
                         shadow: true
                     },
                     credits: {
                         enabled: false
                     },
-                    series: this.properties.series.value//this._component.series
-                });
+                    series: this.properties.series.value
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
+
+                $(this._component.$.charts.$.container).highcharts(options);
             }
         };
 
-
         LinechartDatalet = Polymer({
             is: 'columnchart-datalet',
 
@@ -152,7 +171,12 @@ Example:
                  */
                 suffix : {
                     type : String,
-                    value : "units"
+                    value : ""
+                },
+
+                theme : {
+                    type : String,
+                    value : ""
                 },
                 /**
                  * It's the component behavior
diff --git a/datalets/columnchart-datalet/columnchart-datalet.png b/datalets/columnchart-datalet/columnchart-datalet.png
old mode 100755
new mode 100644
index 1e95ec6..c48b0eb
Binary files a/datalets/columnchart-datalet/columnchart-datalet.png and b/datalets/columnchart-datalet/columnchart-datalet.png differ
diff --git a/datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.html b/datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.html
new file mode 100755
index 0000000..6e19426
--- /dev/null
+++ b/datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.html
@@ -0,0 +1,181 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
+
+<!--
+
+`columnchart-datalet` is a columnchart datalet based on highcharts project http://www.highcharts.com/
+
+Example:
+
+    <columnchart-datalet
+        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+        fields='["field1","field2"]'>
+    </columnchart-datalet>
+
+@element columnchart-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+
+<dom-module name="columnchart_stacked-datalet">
+    <template>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
+    </template>
+    <script>
+
+        var ColumnchartStackedBehavior = {
+
+            /**
+             * Bluid Highchart object
+             *
+             * @method transformData
+             */
+            presentData: function(){
+                options = {
+                    chart: {
+                        type: 'column',
+                        zoomType: 'xy',
+                    },
+                    title: {
+                        text: this._component.title
+                    },
+                    xAxis: {
+                        categories: this.properties.categories.value,
+                        title: {
+                            text: this._component.yAxisLabel
+                        }
+                    },
+                    yAxis: {
+                        min: 0,
+                        title: {
+                            text: this._component.xAxisLabel,
+                        },
+                    },
+                    tooltip: {
+                        valueSuffix: ' ' + this._component.suffix
+                    },
+                    plotOptions: {
+                        series: {
+                            stacking: this._component.stack
+                        },
+//                        column: {
+//                            dataLabels: {
+//                                enabled: true
+//                            }
+//                        }
+                    },
+                    series: this.properties.series.value
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
+
+                $(this._component.$.charts.$.container).highcharts(options);
+            }
+        };
+
+        ColumnchartStackedDatalet = Polymer({
+            is: 'columnchart_stacked-datalet',
+
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the values suffix
+                 *
+                 * @attribute suffix
+                 * @type Strig
+                 * @default 'units'
+                 */
+                suffix : {
+                    type : String,
+                    value : ""
+                },
+
+                stack : {
+                    type : String,
+                    value : "normal"
+                },
+
+                theme : {
+                    type : String,
+                    value : ""
+                },
+                /**
+                 * It's the component behavior
+                 *
+                 * @attribute behavior
+                 * @type Object
+                 * @default {}
+                 */
+                behavior : {
+                    type : Object,
+                    value : {}
+                }
+
+            },
+
+            /**
+             * 'ready' callback extend the VolumnchartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior
+             * and run the Datalet workcycle.
+             *
+             * @method ready
+             */
+            ready: function(){
+                this.behavior = $.extend(true, {}, HighchartsComponentBehavior, ColumnchartStackedBehavior);
+                this.async(function(){this.behavior.init(this)},0);
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.png b/datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.png
new file mode 100644
index 0000000..f8c3352
Binary files /dev/null and b/datalets/columnchart_stacked-datalet/columnchart_stacked-datalet.png differ
diff --git a/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
index 352c22c..dae3366 100755
--- a/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
+++ b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
@@ -114,6 +114,14 @@ Example:
             :host ::content .children:hover rect.child {
                 fill: #bbb;
             }
+
+            /*:host ::content .children svg.foreignObject {*/
+                /*font: 9px sans-serif;*/
+                /*text-overflow: ellipsis;*/
+                /*text-align: left;*/
+                /*word-wrap: break-word;*/
+                /*overflow: hidden;*/
+            /*}*/
         </style>
         <div id="treemap_placeholder">
             <treemap-tooltip id="treemap_tooltip"></treemap-tooltip>
diff --git a/datalets/datasetexplorer-datalet/js/buildtreemap2.js b/datalets/datasetexplorer-datalet/js/buildtreemap2.js
index aa26769..9df2862 100755
--- a/datalets/datasetexplorer-datalet/js/buildtreemap2.js
+++ b/datalets/datasetexplorer-datalet/js/buildtreemap2.js
@@ -140,7 +140,7 @@ function build2(root, meta, place_holder, select_listener, width, height) {
             .attr("onmousemove", function(d) {
                 //var data = ["lvl", "name", "color", "description", "logoUrl", "datasets", "datasetUrl"];
                 var data = ["", d.name, d.color, "", "", d.value, ""];
-                console.log(d);
+                //console.log(d);
                 data[2] = ["#000000"];
                 var id = (d.name) ? d.name.split(':')[1] : undefined;
                 if (d.depth == 1) {
@@ -170,6 +170,14 @@ function build2(root, meta, place_holder, select_listener, width, height) {
             .attr("dy", ".75em")
             .call(text);
 
+        //g.append("svg")
+        //    .attr("class", "foreignObject")
+        //    .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
+        //    .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
+        //    .append("text")
+        //    .attr("dy", ".75em")
+        //    .call(text);
+
         function transition(d) {
             if (transitioning || !d) return;
             transitioning = true;
diff --git a/datalets/datatable-datalet/datatable-datalet.png b/datalets/datatable-datalet/datatable-datalet.png
old mode 100755
new mode 100644
index 86e049f..49cd78b
Binary files a/datalets/datatable-datalet/datatable-datalet.png and b/datalets/datatable-datalet/datatable-datalet.png differ
diff --git a/datalets/heatmap-datalet/heatmap-datalet.html b/datalets/heatmap-datalet/heatmap-datalet.html
index ace955d..c272ff4 100755
--- a/datalets/heatmap-datalet/heatmap-datalet.html
+++ b/datalets/heatmap-datalet/heatmap-datalet.html
@@ -30,10 +30,7 @@
 -->
 
 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
-<script src="https://code.highcharts.com/highcharts-more.js"></script>
-<script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script>
-
-<!--script src="https://code.highcharts.com/modules/heatmap.js"></script>
+<script src="js/heatmap.js"></script>
 
 <!--
 
@@ -66,38 +63,37 @@ Example:
              * @method presentData
              */
             presentData: function(){
-                campi = [];
-                serie = [];
-
-            for (i = 0; i < this.properties.series.value.length; i++) {
-                campi.push(this.properties.series.value[i].name);
-                for (j = 0; j < this.properties.series.value[i].data.length; j++) {
-                    serie.push([j,i,this.properties.series.value[i].data[j]])
+                var Xcategories = this.properties.categories.value
+                var Ycategories = [];
+                var series = [];
+                for (var i = 0; i < this.properties.series.value.length; i++) {
+                    Ycategories.push(this.properties.series.value[i].name);
+                    for (var j = 0; j < this.properties.series.value[i].data.length; j++) {
+                        series.push([j, i,this.properties.series.value[i].data[j]]);
+                    }
                 }
-            }
 
-                $(this._component.$.charts.$.container).highcharts({
+                options = {
                     chart: {
                         type: 'heatmap',
                         marginTop: 40,
-                        marginBottom: 80,
+//                        marginBottom: 80,
                         plotBorderWidth: 1
                     },
 
                     title: {
-                        text: this._component.Title
+                        text: this._component.title
                     },
 
                     xAxis: {
-                        categories: this.properties.categories.value,
+                        categories: Xcategories,
                         title: {
                             text: this._component.xAxisLabel
                         }
                     },
 
                     yAxis: {
-                        categories: campi,
-                        //categories: this.properties.categories.value,
+                        categories: Ycategories,
                         title: {
                             text: this._component.yAxisLabel
                         }
@@ -117,33 +113,27 @@ Example:
                         y: 25,
                         symbolHeight: 280
                     },
-                    /*tooltip: {
-                        formatter: function () {
-                            return '<b>' + this.series.xAxis.categories[this.point.x] + '</b><br>Abitanti:   <b>' +  this._component.prototype.xAxis
-                                this.point.value + '</b><br>Anno <b>' + this.series.yAxis.categories[this.point.y] + '</b>';
-                        }*/
-
-                    //},
-                   /* tooltip: {
-                     formatter: function () {
-                     return '<b>' + this.series.xAxis.categories[this.point.x] +  this._component.prototype.xAxis
-                     this.point.value  + this.series.yAxis.categories[this.point.y];
-                     }
-*/
-                     //},
+                    tooltip: {
+                        valueSuffix: ' ' + this._component.suffix
+                    },
+
                     credits: {
                         enabled: false
                     },
                     series: [{
-                        //name: 'Popolazione',
                         borderWidth: 1,
-                        data: serie,
+                        data: series,
                         dataLabels: {
                             enabled: true,
                             color: '#000000'
                         }
                     }]
-                });
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
+
+                $(this._component.$.charts.$.container).highcharts(options);
             }
         };
 
@@ -175,17 +165,6 @@ Example:
                     value: ""
                 },
                 /**
-                 * It's the title of the chart
-                 *
-                 * @attribute title
-                 * @type String
-                 * @default ''
-                 */
-                Title: {
-                    type: String,
-                    value: ""
-                },
-                /**
                  * It's the values suffix
                  *
                  * @attribute suffix
@@ -196,6 +175,10 @@ Example:
                     type : String,
                     value : ""
                 },
+                theme : {
+                    type : String,
+                    value : ""
+                },
                 /**
                  * It's the component behavior
                  *
diff --git a/datalets/heatmap-datalet/heatmap-datalet.png b/datalets/heatmap-datalet/heatmap-datalet.png
old mode 100755
new mode 100644
index 17afa87..838c17c
Binary files a/datalets/heatmap-datalet/heatmap-datalet.png and b/datalets/heatmap-datalet/heatmap-datalet.png differ
diff --git a/datalets/heatmap-datalet/js/heatmap.js b/datalets/heatmap-datalet/js/heatmap.js
new file mode 100644
index 0000000..e42aa3f
--- /dev/null
+++ b/datalets/heatmap-datalet/js/heatmap.js
@@ -0,0 +1,56 @@
+/*
+ Highmaps JS v1.1.6 (2015-06-12)
+ Highmaps as a plugin for Highcharts 4.0.x or Highstock 2.0.x (x being the patch version of this file)
+
+ (c) 2011-2014 Torstein Honsi
+
+ License: www.highcharts.com/license
+ */
+(function(l){function I(a,b){var c,d,e,f,g=!1,h=a.x,j=a.y;for(c=0,d=b.length-1;c<b.length;d=c++)e=b[c][1]>j,f=b[d][1]>j,e!==f&&h<(b[d][0]-b[c][0])*(j-b[c][1])/(b[d][1]-b[c][1])+b[c][0]&&(g=!g);return g}function J(a,b,c,d,e,f,g,h){return["M",a+e,b,"L",a+c-f,b,"C",a+c-f/2,b,a+c,b+f/2,a+c,b+f,"L",a+c,b+d-g,"C",a+c,b+d-g/2,a+c-g/2,b+d,a+c-g,b+d,"L",a+h,b+d,"C",a+h/2,b+d,a,b+d-h/2,a,b+d-h,"L",a,b+e,"C",a,b+e/2,a+e/2,b,a+e,b,"Z"]}var o=l.Axis,r=l.Chart,w=l.Color,t=l.Point,F=l.Pointer,C=l.Legend,G=l.LegendSymbolMixin,
+    N=l.Renderer,y=l.Series,H=l.SVGRenderer,K=l.VMLRenderer,L=l.addEvent,i=l.each,D=l.error,p=l.extend,u=l.extendClass,n=l.merge,m=l.pick,z=l.getOptions(),k=l.seriesTypes,v=z.plotOptions,s=l.wrap,q=function(){};s(o.prototype,"getSeriesExtremes",function(a){var b=this.isXAxis,c,d,e=[],f;b&&i(this.series,function(a,b){if(a.useMapGeometry)e[b]=a.xData,a.xData=[]});a.call(this);if(b&&(c=m(this.dataMin,Number.MAX_VALUE),d=m(this.dataMax,-Number.MAX_VALUE),i(this.series,function(a,b){if(a.useMapGeometry)c=
+        Math.min(c,m(a.minX,c)),d=Math.max(d,m(a.maxX,c)),a.xData=e[b],f=!0}),f))this.dataMin=c,this.dataMax=d});s(o.prototype,"setAxisTranslation",function(a){var b=this.chart,c=b.plotWidth/b.plotHeight,b=b.xAxis[0],d;a.call(this);this.coll==="yAxis"&&b.transA!==void 0&&i(this.series,function(a){a.preserveAspectRatio&&(d=!0)});if(d&&(this.transA=b.transA=Math.min(this.transA,b.transA),a=c/((b.max-b.min)/(this.max-this.min)),a=a<1?this:b,c=(a.max-a.min)*a.transA,a.pixelPadding=a.len-c,a.minPixelPadding=a.pixelPadding/
+        2,c=a.fixTo)){c=c[1]-a.toValue(c[0],!0);c*=a.transA;if(Math.abs(c)>a.minPixelPadding||a.min===a.dataMin&&a.max===a.dataMax)c=0;a.minPixelPadding-=c}});s(o.prototype,"render",function(a){a.call(this);this.fixTo=null});var B=l.ColorAxis=function(){this.isColorAxis=!0;this.init.apply(this,arguments)};p(B.prototype,o.prototype);p(B.prototype,{defaultColorAxisOptions:{lineWidth:0,gridLineWidth:1,tickPixelInterval:72,startOnTick:!0,endOnTick:!0,offset:0,marker:{animation:{duration:50},color:"gray",width:0.01},
+    labels:{overflow:"justify"},minColor:"#EFEFFF",maxColor:"#003875",tickLength:5},init:function(a,b){var c=a.options.legend.layout!=="vertical",d;d=n(this.defaultColorAxisOptions,{side:c?2:1,reversed:!c},b,{isX:c,opposite:!c,showEmpty:!1,title:null,isColor:!0});o.prototype.init.call(this,a,d);b.dataClasses&&this.initDataClasses(b);this.initStops(b);this.isXAxis=!0;this.horiz=c;this.zoomEnabled=!1},tweenColors:function(a,b,c){var d;!b.rgba.length||!a.rgba.length?a=b.raw||"none":(a=a.rgba,b=b.rgba,d=
+    b[3]!==1||a[3]!==1,a=(d?"rgba(":"rgb(")+Math.round(b[0]+(a[0]-b[0])*(1-c))+","+Math.round(b[1]+(a[1]-b[1])*(1-c))+","+Math.round(b[2]+(a[2]-b[2])*(1-c))+(d?","+(b[3]+(a[3]-b[3])*(1-c)):"")+")");return a},initDataClasses:function(a){var b=this,c=this.chart,d,e=0,f=this.options,g=a.dataClasses.length;this.dataClasses=d=[];this.legendItems=[];i(a.dataClasses,function(a,j){var i,a=n(a);d.push(a);if(!a.color)f.dataClassColor==="category"?(i=c.options.colors,a.color=i[e++],e===i.length&&(e=0)):a.color=
+    b.tweenColors(w(f.minColor),w(f.maxColor),g<2?0.5:j/(g-1))})},initStops:function(a){this.stops=a.stops||[[0,this.options.minColor],[1,this.options.maxColor]];i(this.stops,function(a){a.color=w(a[1])})},setOptions:function(a){o.prototype.setOptions.call(this,a);this.options.crosshair=this.options.marker;this.coll="colorAxis"},setAxisSize:function(){var a=this.legendSymbol,b=this.chart,c,d,e;if(a)this.left=c=a.attr("x"),this.top=d=a.attr("y"),this.width=e=a.attr("width"),this.height=a=a.attr("height"),
+    this.right=b.chartWidth-c-e,this.bottom=b.chartHeight-d-a,this.len=this.horiz?e:a,this.pos=this.horiz?c:d},toColor:function(a,b){var c,d=this.stops,e,f=this.dataClasses,g,h;if(f)for(h=f.length;h--;){if(g=f[h],e=g.from,d=g.to,(e===void 0||a>=e)&&(d===void 0||a<=d)){c=g.color;if(b)b.dataClass=h;break}}else{this.isLog&&(a=this.val2lin(a));c=1-(this.max-a)/(this.max-this.min||1);for(h=d.length;h--;)if(c>d[h][0])break;e=d[h]||d[h+1];d=d[h+1]||e;c=1-(d[0]-c)/(d[0]-e[0]||1);c=this.tweenColors(e.color,d.color,
+    c)}return c},getOffset:function(){var a=this.legendGroup,b=this.chart.axisOffset[this.side];if(a){o.prototype.getOffset.call(this);if(!this.axisGroup.parentGroup)this.axisGroup.add(a),this.gridGroup.add(a),this.labelGroup.add(a),this.added=!0,this.labelLeft=0,this.labelRight=this.width;this.chart.axisOffset[this.side]=b}},setLegendColor:function(){var a,b=this.options;a=this.reversed;a=this.horiz?[+a,0,+!a,0]:[0,+!a,0,+a];this.legendColor={linearGradient:{x1:a[0],y1:a[1],x2:a[2],y2:a[3]},stops:b.stops||
+[[0,b.minColor],[1,b.maxColor]]}},drawLegendSymbol:function(a,b){var c=a.padding,d=a.options,e=this.horiz,f=m(d.symbolWidth,e?200:12),g=m(d.symbolHeight,e?12:200),h=m(d.labelPadding,e?16:30),d=m(d.itemDistance,10);this.setLegendColor();b.legendSymbol=this.chart.renderer.rect(0,a.baseline-11,f,g).attr({zIndex:1}).add(b.legendGroup);b.legendSymbol.getBBox();this.legendItemWidth=f+c+(e?d:h);this.legendItemHeight=g+c+(e?h:0)},setState:q,visible:!0,setVisible:q,getSeriesExtremes:function(){var a;if(this.series.length)a=
+    this.series[0],this.dataMin=a.valueMin,this.dataMax=a.valueMax},drawCrosshair:function(a,b){var c=b&&b.plotX,d=b&&b.plotY,e,f=this.pos,g=this.len;if(b)e=this.toPixels(b[b.series.colorKey]),e<f?e=f-2:e>f+g&&(e=f+g+2),b.plotX=e,b.plotY=this.len-e,o.prototype.drawCrosshair.call(this,a,b),b.plotX=c,b.plotY=d,this.cross&&this.cross.attr({fill:this.crosshair.color}).add(this.legendGroup)},getPlotLinePath:function(a,b,c,d,e){return typeof e==="number"?this.horiz?["M",e-4,this.top-6,"L",e+4,this.top-6,e,
+    this.top,"Z"]:["M",this.left,e,"L",this.left-6,e+6,this.left-6,e-6,"Z"]:o.prototype.getPlotLinePath.call(this,a,b,c,d)},update:function(a,b){var c=this.chart,d=c.legend;i(this.series,function(a){a.isDirtyData=!0});if(a.dataClasses)i(d.allItems,function(a){a.isDataClass&&a.legendGroup.destroy()}),c.isDirtyLegend=!0;c.options[this.coll]=n(this.userOptions,a);o.prototype.update.call(this,a,b);this.legendItem&&(this.setLegendColor(),d.colorizeItem(this,!0))},getDataClassLegendSymbols:function(){var a=
+    this,b=this.chart,c=this.legendItems,d=b.options.legend,e=d.valueDecimals,f=d.valueSuffix||"",g;c.length||i(this.dataClasses,function(d,j){var x=!0,A=d.from,m=d.to;g="";A===void 0?g="< ":m===void 0&&(g="> ");A!==void 0&&(g+=l.numberFormat(A,e)+f);A!==void 0&&m!==void 0&&(g+=" - ");m!==void 0&&(g+=l.numberFormat(m,e)+f);c.push(p({chart:b,name:g,options:{},drawLegendSymbol:G.drawRectangle,visible:!0,setState:q,isDataClass:!0,setVisible:function(){x=this.visible=!x;i(a.series,function(a){i(a.points,
+    function(a){a.dataClass===j&&a.setVisible(x)})});b.legend.colorizeItem(this,x)}},d))});return c},name:""});i(["fill","stroke"],function(a){HighchartsAdapter.addAnimSetter(a,function(b){b.elem.attr(a,B.prototype.tweenColors(w(b.start),w(b.end),b.pos))})});s(r.prototype,"getAxes",function(a){var b=this.options.colorAxis;a.call(this);this.colorAxis=[];b&&new B(this,b)});s(C.prototype,"getAllItems",function(a){var b=[],c=this.chart.colorAxis[0];c&&(c.options.dataClasses?b=b.concat(c.getDataClassLegendSymbols()):
+    b.push(c),i(c.series,function(a){a.options.showInLegend=!1}));return b.concat(a.call(this))});C={pointAttrToOptions:{stroke:"borderColor","stroke-width":"borderWidth",fill:"color",dashstyle:"dashStyle"},pointArrayMap:["value"],axisTypes:["xAxis","yAxis","colorAxis"],optionalAxis:"colorAxis",trackerGroups:["group","markerGroup","dataLabelsGroup"],getSymbol:q,parallelArrays:["x","y","value"],colorKey:"value",translateColors:function(){var a=this,b=this.options.nullColor,c=this.colorAxis,d=this.colorKey;
+    i(this.data,function(e){var f=e[d];if(f=f===null?b:c&&f!==void 0?c.toColor(f,e):e.color||a.color)e.color=f})}};p(r.prototype,{renderMapNavigation:function(){var a=this,b=this.options.mapNavigation,c=b.buttons,d,e,f,g,h=function(){this.handler.call(a)};if(m(b.enableButtons,b.enabled)&&!a.renderer.forExport)for(d in c)if(c.hasOwnProperty(d))f=n(b.buttonOptions,c[d]),e=f.theme,e.style=n(f.theme.style,f.style),g=e.states,e=a.renderer.button(f.text,0,0,h,e,g&&g.hover,g&&g.select,0,d==="zoomIn"?"topbutton":
+    "bottombutton").attr({width:f.width,height:f.height,title:a.options.lang[d],zIndex:5}).add(),e.handler=f.onclick,e.align(p(f,{width:e.width,height:2*e.height}),null,f.alignTo)},fitToBox:function(a,b){i([["x","width"],["y","height"]],function(c){var d=c[0],c=c[1];a[d]+a[c]>b[d]+b[c]&&(a[c]>b[c]?(a[c]=b[c],a[d]=b[d]):a[d]=b[d]+b[c]-a[c]);a[c]>b[c]&&(a[c]=b[c]);a[d]<b[d]&&(a[d]=b[d])});return a},mapZoom:function(a,b,c,d,e){var f=this.xAxis[0],g=f.max-f.min,h=m(b,f.min+g/2),j=g*a,g=this.yAxis[0],i=g.max-
+    g.min,A=m(c,g.min+i/2);i*=a;h=this.fitToBox({x:h-j*(d?(d-f.pos)/f.len:0.5),y:A-i*(e?(e-g.pos)/g.len:0.5),width:j,height:i},{x:f.dataMin,y:g.dataMin,width:f.dataMax-f.dataMin,height:g.dataMax-g.dataMin});if(d)f.fixTo=[d-f.pos,b];if(e)g.fixTo=[e-g.pos,c];a!==void 0?(f.setExtremes(h.x,h.x+h.width,!1),g.setExtremes(h.y,h.y+h.height,!1)):(f.setExtremes(void 0,void 0,!1),g.setExtremes(void 0,void 0,!1));this.redraw()}});s(r.prototype,"render",function(a){var b=this,c=b.options.mapNavigation;b.renderMapNavigation();
+    a.call(b);(m(c.enableDoubleClickZoom,c.enabled)||c.enableDoubleClickZoomTo)&&L(b.container,"dblclick",function(a){b.pointer.onContainerDblClick(a)});m(c.enableMouseWheelZoom,c.enabled)&&L(b.container,document.onmousewheel===void 0?"DOMMouseScroll":"mousewheel",function(a){b.pointer.onContainerMouseWheel(a);return!1})});p(F.prototype,{onContainerDblClick:function(a){var b=this.chart,a=this.normalize(a);b.options.mapNavigation.enableDoubleClickZoomTo?b.pointer.inClass(a.target,"highcharts-tracker")&&
+b.hoverPoint.zoomTo():b.isInsidePlot(a.chartX-b.plotLeft,a.chartY-b.plotTop)&&b.mapZoom(0.5,b.xAxis[0].toValue(a.chartX),b.yAxis[0].toValue(a.chartY),a.chartX,a.chartY)},onContainerMouseWheel:function(a){var b=this.chart,c,a=this.normalize(a);c=a.detail||-(a.wheelDelta/120);b.isInsidePlot(a.chartX-b.plotLeft,a.chartY-b.plotTop)&&b.mapZoom(Math.pow(2,c),b.xAxis[0].toValue(a.chartX),b.yAxis[0].toValue(a.chartY),a.chartX,a.chartY)}});s(F.prototype,"init",function(a,b,c){a.call(this,b,c);if(m(c.mapNavigation.enableTouchZoom,
+        c.mapNavigation.enabled))this.pinchX=this.pinchHor=this.pinchY=this.pinchVert=this.hasZoom=!0});s(F.prototype,"pinchTranslate",function(a,b,c,d,e,f,g){a.call(this,b,c,d,e,f,g);this.chart.options.chart.type==="map"&&this.hasZoom&&(a=d.scaleX>d.scaleY,this.pinchTranslateDirection(!a,b,c,d,e,f,g,a?d.scaleX:d.scaleY))});var E=document.documentElement.style.vectorEffect!==void 0;v.map=n(v.scatter,{allAreas:!0,animation:!1,nullColor:"#F8F8F8",borderColor:"silver",borderWidth:1,marker:null,stickyTracking:!1,
+    dataLabels:{formatter:function(){return this.point.value},inside:!0,verticalAlign:"middle",crop:!1,overflow:!1,padding:0},turboThreshold:0,tooltip:{followPointer:!0,pointFormat:"{point.name}: {point.value}<br/>"},states:{normal:{animation:!0},hover:{brightness:0.2,halo:null}}});var M=u(t,{applyOptions:function(a,b){var c=t.prototype.applyOptions.call(this,a,b),d=this.series,e=d.joinBy;if(d.mapData)if(e=c[e[1]]!==void 0&&d.mapMap[c[e[1]]]){if(d.xyFromShape)c.x=e._midX,c.y=e._midY;p(c,e)}else c.value=
+    c.value||null;return c},setVisible:function(a){var b=this,c=a?"show":"hide";i(["graphic","dataLabel"],function(a){if(b[a])b[a][c]()})},onMouseOver:function(a){clearTimeout(this.colorInterval);if(this.value!==null)t.prototype.onMouseOver.call(this,a);else this.series.onMouseOut(a)},onMouseOut:function(){var a=this,b=+new Date,c=w(a.color),d=w(a.pointAttr.hover.fill),e=a.series.options.states.normal.animation,f=e&&(e.duration||500),g;if(f&&c.rgba.length===4&&d.rgba.length===4&&a.state!=="select")g=
+    a.pointAttr[""].fill,delete a.pointAttr[""].fill,clearTimeout(a.colorInterval),a.colorInterval=setInterval(function(){var e=(new Date-b)/f,g=a.graphic;e>1&&(e=1);g&&g.attr("fill",B.prototype.tweenColors.call(0,d,c,e));e>=1&&clearTimeout(a.colorInterval)},13);t.prototype.onMouseOut.call(a);if(g)a.pointAttr[""].fill=g},zoomTo:function(){var a=this.series;a.xAxis.setExtremes(this._minX,this._maxX,!1);a.yAxis.setExtremes(this._minY,this._maxY,!1);a.chart.redraw()}});k.map=u(k.scatter,n(C,{type:"map",
+    pointClass:M,supportsDrilldown:!0,getExtremesFromAll:!0,useMapGeometry:!0,forceDL:!0,searchPoint:q,preserveAspectRatio:!0,getBox:function(a){var b=Number.MAX_VALUE,c=-b,d=b,e=-b,f=b,g=b,h=this.xAxis,j=this.yAxis,x;i(a||[],function(a){if(a.path){if(typeof a.path==="string")a.path=l.splitPath(a.path);var h=a.path||[],j=h.length,i=!1,k=-b,n=b,p=-b,o=b,q=a.properties;if(!a._foundBox){for(;j--;)typeof h[j]==="number"&&!isNaN(h[j])&&(i?(k=Math.max(k,h[j]),n=Math.min(n,h[j])):(p=Math.max(p,h[j]),o=Math.min(o,
+        h[j])),i=!i);a._midX=n+(k-n)*(a.middleX||q&&q["hc-middle-x"]||0.5);a._midY=o+(p-o)*(a.middleY||q&&q["hc-middle-y"]||0.5);a._maxX=k;a._minX=n;a._maxY=p;a._minY=o;a.labelrank=m(a.labelrank,(k-n)*(p-o));a._foundBox=!0}c=Math.max(c,a._maxX);d=Math.min(d,a._minX);e=Math.max(e,a._maxY);f=Math.min(f,a._minY);g=Math.min(a._maxX-a._minX,a._maxY-a._minY,g);x=!0}});if(x){this.minY=Math.min(f,m(this.minY,b));this.maxY=Math.max(e,m(this.maxY,-b));this.minX=Math.min(d,m(this.minX,b));this.maxX=Math.max(c,m(this.maxX,
+        -b));if(h&&h.options.minRange===void 0)h.minRange=Math.min(5*g,(this.maxX-this.minX)/5,h.minRange||b);if(j&&j.options.minRange===void 0)j.minRange=Math.min(5*g,(this.maxY-this.minY)/5,j.minRange||b)}},getExtremes:function(){y.prototype.getExtremes.call(this,this.valueData);this.chart.hasRendered&&this.isDirtyData&&this.getBox(this.options.data);this.valueMin=this.dataMin;this.valueMax=this.dataMax;this.dataMin=this.minY;this.dataMax=this.maxY},translatePath:function(a){var b=!1,c=this.xAxis,d=this.yAxis,
+        e=c.min,f=c.transA,c=c.minPixelPadding,g=d.min,h=d.transA,d=d.minPixelPadding,j,i=[];if(a)for(j=a.length;j--;)typeof a[j]==="number"?(i[j]=b?(a[j]-e)*f+c:(a[j]-g)*h+d,b=!b):i[j]=a[j];return i},setData:function(a,b){var c=this.options,d=c.mapData,e=c.joinBy,f=e===null,g=[],h,j,k;f&&(e="_i");e=this.joinBy=l.splat(e);e[1]||(e[1]=e[0]);a&&i(a,function(b,c){typeof b==="number"&&(a[c]={value:b});if(f)a[c]._i=c});this.getBox(a);if(d){if(d.type==="FeatureCollection"){if(d["hc-transform"])for(h in this.chart.mapTransforms=
+        j=d["hc-transform"],j)if(j.hasOwnProperty(h)&&h.rotation)h.cosAngle=Math.cos(h.rotation),h.sinAngle=Math.sin(h.rotation);d=l.geojson(d,this.type,this)}this.getBox(d);this.mapData=d;this.mapMap={};for(k=0;k<d.length;k++)h=d[k],j=h.properties,h._i=k,e[0]&&j&&j[e[0]]&&(h[e[0]]=j[e[0]]),this.mapMap[h[e[0]]]=h;c.allAreas&&(a=a||[],e[1]&&i(a,function(a){g.push(a[e[1]])}),g="|"+g.join("|")+"|",i(d,function(b){(!e[0]||g.indexOf("|"+b[e[0]]+"|")===-1)&&a.push(n(b,{value:null}))}))}y.prototype.setData.call(this,
+        a,b)},drawGraph:q,drawDataLabels:q,doFullTranslate:function(){return this.isDirtyData||this.chart.isResizing||this.chart.renderer.isVML||!this.baseTrans},translate:function(){var a=this,b=a.xAxis,c=a.yAxis,d=a.doFullTranslate();a.generatePoints();i(a.data,function(e){e.plotX=b.toPixels(e._midX,!0);e.plotY=c.toPixels(e._midY,!0);if(d)e.shapeType="path",e.shapeArgs={d:a.translatePath(e.path)},E&&(e.shapeArgs["vector-effect"]="non-scaling-stroke")});a.translateColors()},drawPoints:function(){var a=this,
+        b=a.xAxis,c=a.yAxis,d=a.group,e=a.chart,f=e.renderer,g,h=this.baseTrans;if(!a.transformGroup)a.transformGroup=f.g().attr({scaleX:1,scaleY:1}).add(d),a.transformGroup.survive=!0;a.doFullTranslate()?(e.hasRendered&&a.pointAttrToOptions.fill==="color"&&i(a.points,function(a){a.graphic&&a.graphic.attr("fill",a.color)}),E||i(a.points,function(b){b=b.pointAttr[""];b["stroke-width"]===a.pointAttr[""]["stroke-width"]&&(b["stroke-width"]="inherit")}),a.group=a.transformGroup,k.column.prototype.drawPoints.apply(a),
+        a.group=d,i(a.points,function(a){a.graphic&&(a.name&&a.graphic.addClass("highcharts-name-"+a.name.replace(" ","-").toLowerCase()),a.properties&&a.properties["hc-key"]&&a.graphic.addClass("highcharts-key-"+a.properties["hc-key"].toLowerCase()),E||(a.graphic["stroke-widthSetter"]=q))}),this.baseTrans={originX:b.min-b.minPixelPadding/b.transA,originY:c.min-c.minPixelPadding/c.transA+(c.reversed?0:c.len/c.transA),transAX:b.transA,transAY:c.transA},this.transformGroup.animate({translateX:0,translateY:0,
+        scaleX:1,scaleY:1})):(g=b.transA/h.transAX,d=c.transA/h.transAY,b=b.toPixels(h.originX,!0),c=c.toPixels(h.originY,!0),g>0.99&&g<1.01&&d>0.99&&d<1.01&&(d=g=1,b=Math.round(b),c=Math.round(c)),this.transformGroup.animate({translateX:b,translateY:c,scaleX:g,scaleY:d}));E||a.group.element.setAttribute("stroke-width",a.options.borderWidth/(g||1));this.drawMapDataLabels()},drawMapDataLabels:function(){y.prototype.drawDataLabels.call(this);this.dataLabelsGroup&&this.dataLabelsGroup.clip(this.chart.clipRect)},
+    render:function(){var a=this,b=y.prototype.render;a.chart.renderer.isVML&&a.data.length>3E3?setTimeout(function(){b.call(a)}):b.call(a)},animate:function(a){var b=this.options.animation,c=this.group,d=this.xAxis,e=this.yAxis,f=d.pos,g=e.pos;if(this.chart.renderer.isSVG)b===!0&&(b={duration:1E3}),a?c.attr({translateX:f+d.len/2,translateY:g+e.len/2,scaleX:0.001,scaleY:0.001}):(c.animate({translateX:f,translateY:g,scaleX:1,scaleY:1},b),this.animate=null)},animateDrilldown:function(a){var b=this.chart.plotBox,
+        c=this.chart.drilldownLevels[this.chart.drilldownLevels.length-1],d=c.bBox,e=this.chart.options.drilldown.animation;if(!a)a=Math.min(d.width/b.width,d.height/b.height),c.shapeArgs={scaleX:a,scaleY:a,translateX:d.x,translateY:d.y},i(this.points,function(a){a.graphic&&a.graphic.attr(c.shapeArgs).animate({scaleX:1,scaleY:1,translateX:0,translateY:0},e)}),this.animate=null},drawLegendSymbol:G.drawRectangle,animateDrillupFrom:function(a){k.column.prototype.animateDrillupFrom.call(this,a)},animateDrillupTo:function(a){k.column.prototype.animateDrillupTo.call(this,
+        a)}}));v.mapline=n(v.map,{lineWidth:1,fillColor:"none"});k.mapline=u(k.map,{type:"mapline",pointAttrToOptions:{stroke:"color","stroke-width":"lineWidth",fill:"fillColor",dashstyle:"dashStyle"},drawLegendSymbol:k.line.prototype.drawLegendSymbol});v.mappoint=n(v.scatter,{dataLabels:{enabled:!0,formatter:function(){return this.point.name},crop:!1,defer:!1,overflow:!1,style:{color:"#000000"}}});k.mappoint=u(k.scatter,{type:"mappoint",forceDL:!0,pointClass:u(t,{applyOptions:function(a,b){var c=t.prototype.applyOptions.call(this,
+    a,b);a.lat!==void 0&&a.lon!==void 0&&(c=p(c,this.series.chart.fromLatLonToPoint(c)));return c}})});if(k.bubble)v.mapbubble=n(v.bubble,{animationLimit:500,tooltip:{pointFormat:"{point.name}: {point.z}"}}),k.mapbubble=u(k.bubble,{pointClass:u(t,{applyOptions:function(a,b){var c;a.lat!==void 0&&a.lon!==void 0?(c=t.prototype.applyOptions.call(this,a,b),c=p(c,this.series.chart.fromLatLonToPoint(c))):c=M.prototype.applyOptions.call(this,a,b);return c},ttBelow:!1}),xyFromShape:!0,type:"mapbubble",pointArrayMap:["z"],
+    getMapData:k.map.prototype.getMapData,getBox:k.map.prototype.getBox,setData:k.map.prototype.setData});z.plotOptions.heatmap=n(z.plotOptions.scatter,{animation:!1,borderWidth:0,nullColor:"#F8F8F8",dataLabels:{formatter:function(){return this.point.value},inside:!0,verticalAlign:"middle",crop:!1,overflow:!1,padding:0},marker:null,pointRange:null,tooltip:{pointFormat:"{point.x}, {point.y}: {point.value}<br/>"},states:{normal:{animation:!0},hover:{halo:!1,brightness:0.2}}});k.heatmap=u(k.scatter,n(C,
+    {type:"heatmap",pointArrayMap:["y","value"],hasPointSpecificOptions:!0,supportsDrilldown:!0,getExtremesFromAll:!0,directTouch:!0,init:function(){var a;k.scatter.prototype.init.apply(this,arguments);a=this.options;this.pointRange=a.pointRange=m(a.pointRange,a.colsize||1);this.yAxis.axisPointRange=a.rowsize||1},translate:function(){var a=this.options,b=this.xAxis,c=this.yAxis;this.generatePoints();i(this.points,function(d){var e=(a.colsize||1)/2,f=(a.rowsize||1)/2,g=Math.round(b.len-b.translate(d.x-
+            e,0,1,0,1)),e=Math.round(b.len-b.translate(d.x+e,0,1,0,1)),h=Math.round(c.translate(d.y-f,0,1,0,1)),f=Math.round(c.translate(d.y+f,0,1,0,1));d.plotX=d.clientX=(g+e)/2;d.plotY=(h+f)/2;d.shapeType="rect";d.shapeArgs={x:Math.min(g,e),y:Math.min(h,f),width:Math.abs(e-g),height:Math.abs(f-h)}});this.translateColors();this.chart.hasRendered&&i(this.points,function(a){a.shapeArgs.fill=a.options.color||a.color})},drawPoints:k.column.prototype.drawPoints,animate:q,getBox:q,drawLegendSymbol:G.drawRectangle,
+        getExtremes:function(){y.prototype.getExtremes.call(this,this.valueData);this.valueMin=this.dataMin;this.valueMax=this.dataMax;y.prototype.getExtremes.call(this)}}));r.prototype.transformFromLatLon=function(a,b){if(window.proj4===void 0)return D(21),{x:0,y:null};var c=window.proj4(b.crs,[a.lon,a.lat]),d=b.cosAngle||b.rotation&&Math.cos(b.rotation),e=b.sinAngle||b.rotation&&Math.sin(b.rotation),c=b.rotation?[c[0]*d+c[1]*e,-c[0]*e+c[1]*d]:c;return{x:((c[0]-(b.xoffset||0))*(b.scale||1)+(b.xpan||0))*
+(b.jsonres||1)+(b.jsonmarginX||0),y:(((b.yoffset||0)-c[1])*(b.scale||1)+(b.ypan||0))*(b.jsonres||1)-(b.jsonmarginY||0)}};r.prototype.transformToLatLon=function(a,b){if(window.proj4===void 0)D(21);else{var c={x:((a.x-(b.jsonmarginX||0))/(b.jsonres||1)-(b.xpan||0))/(b.scale||1)+(b.xoffset||0),y:((-a.y-(b.jsonmarginY||0))/(b.jsonres||1)+(b.ypan||0))/(b.scale||1)+(b.yoffset||0)},d=b.cosAngle||b.rotation&&Math.cos(b.rotation),e=b.sinAngle||b.rotation&&Math.sin(b.rotation),c=window.proj4(b.crs,"WGS84",
+    b.rotation?{x:c.x*d+c.y*-e,y:c.x*e+c.y*d}:c);return{lat:c.y,lon:c.x}}};r.prototype.fromPointToLatLon=function(a){var b=this.mapTransforms,c;if(b){for(c in b)if(b.hasOwnProperty(c)&&b[c].hitZone&&I({x:a.x,y:-a.y},b[c].hitZone.coordinates[0]))return this.transformToLatLon(a,b[c]);return this.transformToLatLon(a,b["default"])}else D(22)};r.prototype.fromLatLonToPoint=function(a){var b=this.mapTransforms,c,d;if(!b)return D(22),{x:0,y:null};for(c in b)if(b.hasOwnProperty(c)&&b[c].hitZone&&(d=this.transformFromLatLon(a,
+        b[c]),I({x:d.x,y:-d.y},b[c].hitZone.coordinates[0])))return d;return this.transformFromLatLon(a,b["default"])};l.geojson=function(a,b,c){var d=[],e=[],f=function(a){var b=0,c=a.length;for(e.push("M");b<c;b++)b===1&&e.push("L"),e.push(a[b][0],-a[b][1])},b=b||"map";i(a.features,function(a){var c=a.geometry,j=c.type,c=c.coordinates,a=a.properties,k;e=[];b==="map"||b==="mapbubble"?(j==="Polygon"?(i(c,f),e.push("Z")):j==="MultiPolygon"&&(i(c,function(a){i(a,f)}),e.push("Z")),e.length&&(k={path:e})):b===
+"mapline"?(j==="LineString"?f(c):j==="MultiLineString"&&i(c,f),e.length&&(k={path:e})):b==="mappoint"&&j==="Point"&&(k={x:c[0],y:-c[1]});k&&d.push(p(k,{name:a.name||a.NAME,properties:a}))});if(c&&a.copyrightShort)c.chart.mapCredits='<a href="http://www.highcharts.com">Highcharts</a> © <a href="'+a.copyrightUrl+'">'+a.copyrightShort+"</a>",c.chart.mapCreditsFull=a.copyright;return d};s(r.prototype,"showCredits",function(a,b){if(z.credits.text===this.options.credits.text&&this.mapCredits)b.text=this.mapCredits,
+    b.href=null;a.call(this,b);this.credits&&this.credits.attr({title:this.mapCreditsFull})});p(z.lang,{zoomIn:"Zoom in",zoomOut:"Zoom out"});z.mapNavigation={buttonOptions:{alignTo:"plotBox",align:"left",verticalAlign:"top",x:0,width:18,height:18,style:{fontSize:"15px",fontWeight:"bold",textAlign:"center"},theme:{"stroke-width":1}},buttons:{zoomIn:{onclick:function(){this.mapZoom(0.5)},text:"+",y:0},zoomOut:{onclick:function(){this.mapZoom(2)},text:"-",y:28}}};l.splitPath=function(a){var b,a=a.replace(/([A-Za-z])/g,
+    " $1 "),a=a.replace(/^\s*/,"").replace(/\s*$/,""),a=a.split(/[ ,]+/);for(b=0;b<a.length;b++)/[a-zA-Z]/.test(a[b])||(a[b]=parseFloat(a[b]));return a};l.maps={};H.prototype.symbols.topbutton=function(a,b,c,d,e){return J(a-1,b-1,c,d,e.r,e.r,0,0)};H.prototype.symbols.bottombutton=function(a,b,c,d,e){return J(a-1,b-1,c,d,0,0,e.r,e.r)};N===K&&i(["topbutton","bottombutton"],function(a){K.prototype.symbols[a]=H.prototype.symbols[a]});l.Map=function(a,b){var c={endOnTick:!1,gridLineWidth:0,lineWidth:0,minPadding:0,
+    maxPadding:0,startOnTick:!1,title:null,tickPositions:[]},d;d=a.series;a.series=null;a=n({chart:{panning:"xy",type:"map"},xAxis:c,yAxis:n(c,{reversed:!0})},a,{chart:{inverted:!1,alignTicks:!1}});a.series=d;return new r(a,b)}})(Highcharts);
\ No newline at end of file
diff --git a/datalets/highcharts-datalet/highcharts-datalet.html b/datalets/highcharts-datalet/highcharts-datalet.html
index eb4e7ff..9ee18d3 100755
--- a/datalets/highcharts-datalet/highcharts-datalet.html
+++ b/datalets/highcharts-datalet/highcharts-datalet.html
@@ -62,7 +62,7 @@ Example :
 
     <script src="static/js/highcharts.js"></script>
     <script src="static/js/exporting.js"></script>
-    <script src="themes/themes.js"></script>
+    <script src="static/themes/themes.js"></script>
 
     <script>
         var HighchartsBehavior = {
@@ -79,35 +79,35 @@ Example :
                     value: []
                 },
 
-                series_type:{
-                    type: String,
-                    value: "line"//spline,time
-                }
+//                series_type:{
+//                    type: String,
+//                    value: "line"//spline,time
+//                }
 
             },
             /**
              * Normalizes a number in agreement with javascript's conventions. Delete all NaN characters. Exception: number representing lat & long remain unchanged.
              */
-            jNumConverter: function(num) {
-                //lat-long
-                if(num.charAt(num.length-7) == "." && (num.match(/[\.,]/g) || []).length == 1)
-                    return num;
-
-                num = num.replace(/[^0-9\.]/, '');
-
-                var jNum = "";
-                for (var i = 0; i < num.length; i++) {
-                    if(num[i].match(/[\.,]/g))
-                        if (i == num.length - 3)
-                            jNum += ".";
-                        else
-                            ;
-                    else if (!isNaN(num[i]))
-                        jNum += num[i];
-                }
-
-                return jNum;
-            },
+//            jNumConverter: function(num) {
+//                //lat-long
+//                if(num.charAt(num.length-7) == "." && (num.match(/[\.,]/g) || []).length == 1)
+//                    return num;
+//
+//                num = num.replace(/[^0-9\.]/, '');
+//
+//                var jNum = "";
+//                for (var i = 0; i < num.length; i++) {
+//                    if(num[i].match(/[\.,]/g))
+//                        if (i == num.length - 3)
+//                            jNum += ".";
+//                        else
+//                            ;
+//                    else if (!isNaN(num[i]))
+//                        jNum += num[i];
+//                }
+//
+//                return jNum;
+//            },
             /**
              * Populate the categories and the series array.
              *
@@ -115,45 +115,89 @@ Example :
              *
              * @param {Event} e
              */
-            transformData: function () {
-
-                if(this.data.length == 0) return;
-
-                this.properties.categories.value = this.data[0].data;
+//            transformData: function () {
+//
+//                if(this.data.length == 0) return;
+//
+//                this.properties.categories.value = this.data[0].data;
+//
+//                for (var i = 1; i < this.data.length; i++)
+//                {
+//                    this.data[i].data.every(function (element, index, array) {
+//                        try {
+//                            var e = HighchartsBehavior.jNumConverter(element);
+//                            (isNaN(element)) ? array[index] = parseFloat(HighchartsBehavior.jNumConverter(element)) :
+//                                    array[index] = parseFloat(element);
+//                        }catch(e){
+//                            //console.log("Parsing data error. Highchart-datalet.selectData");
+//                        }
+//                        return true;
+//                    });
+//
+//                    this.properties.series.value.push(this.data[i]);
+//                }
+//            },
 
-                for (var i = 1; i < this.data.length; i++)
-                {
-                    this.data[i].data.every(function (element, index, array) {
-                        try {
-                            var e = HighchartsBehavior.jNumConverter(element);
-                            (isNaN(element)) ? array[index] = parseFloat(HighchartsBehavior.jNumConverter(element)) :
-                                    array[index] = parseFloat(element);
-                        }catch(e){
-                            //console.log("Parsing data error. Highchart-datalet.selectData");
-                        }
-                        return true;
-                    });
+            transformData: function () {
+                if(this.data.length == 0)
+                    return;
 
-                    this.properties.series.value.push(this.data[i]);
+                if(this.data.length == 2){
+                    this.properties.categories.value = this.data[0].data;
+                    this.properties.series.value = [this.data[1]];
                 }
-            },
-
-            setParameters: function(params)
-            {
-                this._component.title = params['title'];
-                this._component.description = params['description'];
 
-                var chart = $(this._component.$.charts.$.container).highcharts();
-
-                chart.setTitle({text: params['title']});
-                chart.xAxis[0].setTitle({text: params['x-axis-label']});
-                chart.yAxis[0].setTitle({text: params['y-axis-label']});
-
-                chart.tooltip.options.formatter = function() {
-                    return this.x + '<br/><br/><span style="fill:#7cb5ec" x="8" dy="15">●</span> ' + this.series.name + ': <b>' + this.y + ' ' + params['suffix'] + '</b>';
+                if(this.data.length == 3){//multi series
+                    var x = this.data[0]["data"];
+                    var gb = this.data[1]["data"];
+                    var y = this.data[2]["data"];
+
+                    var categories = x.filter(function(item, pos) {
+                        return x.indexOf(item) == pos;
+                    })
+
+                    var s = gb.filter(function(item, pos) {
+                        return gb.indexOf(item) == pos;
+                    })
+
+                    var series = [];
+                    for(var i = 0; i < s.length; i++) {
+                        series.push({name: s[i], data: new Array(categories.length+1).join('0').split('').map(parseFloat)});
+                    }
+
+                    for (var i = 0; i < y.length; i++){
+                        var index = categories.indexOf(x[i]);
+                        var s = series.filter(function( obj ) {
+                            return obj.name == gb[i];
+                        });
+                       s[0]["data"][index] = y[i];
+                    }
+
+                    this.properties.categories.value = categories;
+                    this.properties.series.value = series;
                 }
+            },
 
-            }
+//            setParameters: function(params)
+//            {
+//                this._component.title = params['title'];
+//                this._component.description = params['description'];
+//
+//                var chart = $(this._component.$.charts.$.container).highcharts();
+//
+//                chart.setTitle({text: params['title']});
+//                chart.xAxis[0].setTitle({text: params['x-axis-label']});
+//                chart.yAxis[0].setTitle({text: params['y-axis-label']});
+//
+//                chart.tooltip.options.formatter = function() {
+//                    return this.x + '<br/><br/><span style="fill:#7cb5ec" x="8" dy="15">●</span> ' + this.series.name + ': <b>' + this.y + ' ' + params['suffix'] + '</b>';
+//                }
+//
+//                //theme default
+//                Highcharts.setOptions(Highcharts[params['theme']]);
+//
+//                this._component.stack = params['stack'];
+//            }
 
         };
 
diff --git a/datalets/highcharts-datalet/static/themes/themeDarkUnika.js b/datalets/highcharts-datalet/static/themes/themeDarkUnika.js
new file mode 100755
index 0000000..53fe753
--- /dev/null
+++ b/datalets/highcharts-datalet/static/themes/themeDarkUnika.js
@@ -0,0 +1,210 @@
+/**
+ * Dark theme for Highcharts JS
+ * @author Torstein Honsi
+ */
+
+// Load the fonts
+Highcharts.createElement('link', {
+    href: '//fonts.googleapis.com/css?family=Unica+One',
+    rel: 'stylesheet',
+    type: 'text/css'
+}, null, document.getElementsByTagName('head')[0]);
+
+Highcharts.themeDarkUnika = {
+    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+    chart: {
+        backgroundColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
+            stops: [
+                [0, '#2a2a2b'],
+                [1, '#3e3e40']
+            ]
+        },
+        style: {
+            fontFamily: "'Unica One', sans-serif"
+        },
+        plotBorderColor: '#606063'
+    },
+    title: {
+        style: {
+            color: '#E0E0E3',
+            textTransform: 'uppercase',
+            fontSize: '20px'
+        }
+    },
+    subtitle: {
+        style: {
+            color: '#E0E0E3',
+            textTransform: 'uppercase'
+        }
+    },
+    xAxis: {
+        gridLineColor: '#707073',
+        labels: {
+            style: {
+                color: '#E0E0E3'
+            }
+        },
+        lineColor: '#707073',
+        minorGridLineColor: '#505053',
+        tickColor: '#707073',
+        title: {
+            style: {
+                color: '#A0A0A3'
+
+            }
+        }
+    },
+    yAxis: {
+        gridLineColor: '#707073',
+        labels: {
+            style: {
+                color: '#E0E0E3'
+            }
+        },
+        lineColor: '#707073',
+        minorGridLineColor: '#505053',
+        tickColor: '#707073',
+        tickWidth: 1,
+        title: {
+            style: {
+                color: '#A0A0A3'
+            }
+        }
+    },
+    tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.85)',
+        style: {
+            color: '#F0F0F0'
+        }
+    },
+    plotOptions: {
+        series: {
+            dataLabels: {
+                color: '#B0B0B3'
+            },
+            marker: {
+                lineColor: '#333'
+            }
+        },
+        boxplot: {
+            fillColor: '#505053'
+        },
+        candlestick: {
+            lineColor: 'white'
+        },
+        errorbar: {
+            color: 'white'
+        }
+    },
+    legend: {
+        itemStyle: {
+            color: '#E0E0E3'
+        },
+        itemHoverStyle: {
+            color: '#FFF'
+        },
+        itemHiddenStyle: {
+            color: '#606063'
+        }
+    },
+    credits: {
+        style: {
+            color: '#666'
+        }
+    },
+    labels: {
+        style: {
+            color: '#707073'
+        }
+    },
+
+    drilldown: {
+        activeAxisLabelStyle: {
+            color: '#F0F0F3'
+        },
+        activeDataLabelStyle: {
+            color: '#F0F0F3'
+        }
+    },
+
+    navigation: {
+        buttonOptions: {
+            symbolStroke: '#DDDDDD',
+            theme: {
+                fill: '#505053'
+            }
+        }
+    },
+
+    // scroll charts
+    rangeSelector: {
+        buttonTheme: {
+            fill: '#505053',
+            stroke: '#000000',
+            style: {
+                color: '#CCC'
+            },
+            states: {
+                hover: {
+                    fill: '#707073',
+                    stroke: '#000000',
+                    style: {
+                        color: 'white'
+                    }
+                },
+                select: {
+                    fill: '#000003',
+                    stroke: '#000000',
+                    style: {
+                        color: 'white'
+                    }
+                }
+            }
+        },
+        inputBoxBorderColor: '#505053',
+        inputStyle: {
+            backgroundColor: '#333',
+            color: 'silver'
+        },
+        labelStyle: {
+            color: 'silver'
+        }
+    },
+
+    navigator: {
+        handles: {
+            backgroundColor: '#666',
+            borderColor: '#AAA'
+        },
+        outlineColor: '#CCC',
+        maskFill: 'rgba(255,255,255,0.1)',
+        series: {
+            color: '#7798BF',
+            lineColor: '#A6C7ED'
+        },
+        xAxis: {
+            gridLineColor: '#505053'
+        }
+    },
+
+    scrollbar: {
+        barBackgroundColor: '#808083',
+        barBorderColor: '#808083',
+        buttonArrowColor: '#CCC',
+        buttonBackgroundColor: '#606063',
+        buttonBorderColor: '#606063',
+        rifleColor: '#FFF',
+        trackBackgroundColor: '#404043',
+        trackBorderColor: '#404043'
+    },
+
+    // special colors for some of the
+    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
+    background2: '#505053',
+    dataLabelsColor: '#B0B0B3',
+    textColor: '#C0C0C0',
+    contrastTextColor: '#F0F0F3',
+    maskColor: 'rgba(255,255,255,0.3)'
+};
\ No newline at end of file
diff --git a/datalets/highcharts-datalet/static/themes/themeGridLight.js b/datalets/highcharts-datalet/static/themes/themeGridLight.js
new file mode 100755
index 0000000..ba1eedc
--- /dev/null
+++ b/datalets/highcharts-datalet/static/themes/themeGridLight.js
@@ -0,0 +1,71 @@
+/**
+ * Grid-light theme for Highcharts JS
+ * @author Torstein Honsi
+ */
+
+// Load the fonts
+Highcharts.createElement('link', {
+    href: '//fonts.googleapis.com/css?family=Dosis:400,600',
+    rel: 'stylesheet',
+    type: 'text/css'
+}, null, document.getElementsByTagName('head')[0]);
+
+Highcharts.themeGridLight = {
+    colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+    chart: {
+        backgroundColor: null,
+        style: {
+            fontFamily: "Dosis, sans-serif"
+        }
+    },
+    title: {
+        style: {
+            fontSize: '16px',
+            fontWeight: 'bold',
+            textTransform: 'uppercase'
+        }
+    },
+    tooltip: {
+        borderWidth: 0,
+        backgroundColor: 'rgba(219,219,216,0.8)',
+        shadow: false
+    },
+    legend: {
+        itemStyle: {
+            fontWeight: 'bold',
+            fontSize: '13px'
+        }
+    },
+    xAxis: {
+        gridLineWidth: 1,
+        labels: {
+            style: {
+                fontSize: '12px'
+            }
+        }
+    },
+    yAxis: {
+        minorTickInterval: 'auto',
+        title: {
+            style: {
+                textTransform: 'uppercase'
+            }
+        },
+        labels: {
+            style: {
+                fontSize: '12px'
+            }
+        }
+    },
+    plotOptions: {
+        candlestick: {
+            lineColor: '#404048'
+        }
+    },
+
+
+    // General
+    background2: '#F0F0EA'
+
+};
\ No newline at end of file
diff --git a/datalets/highcharts-datalet/static/themes/themeSandSignika.js b/datalets/highcharts-datalet/static/themes/themeSandSignika.js
new file mode 100755
index 0000000..1cfb6da
--- /dev/null
+++ b/datalets/highcharts-datalet/static/themes/themeSandSignika.js
@@ -0,0 +1,101 @@
+/**
+ * Sand-Signika theme for Highcharts JS
+ * @author Torstein Honsi
+ */
+
+// Load the fonts
+Highcharts.createElement('link', {
+    href: '//fonts.googleapis.com/css?family=Signika:400,700',
+    rel: 'stylesheet',
+    type: 'text/css'
+}, null, document.getElementsByTagName('head')[0]);
+
+// Add the background image to the container
+Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
+    proceed.call(this);
+    this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
+});
+
+
+Highcharts.themeSandSignika = {
+    colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+    chart: {
+        backgroundColor: null,
+        style: {
+            fontFamily: "Signika, serif"
+        }
+    },
+    title: {
+        style: {
+            color: 'black',
+            fontSize: '16px',
+            fontWeight: 'bold'
+        }
+    },
+    subtitle: {
+        style: {
+            color: 'black'
+        }
+    },
+    tooltip: {
+        borderWidth: 0
+    },
+    legend: {
+        itemStyle: {
+            fontWeight: 'bold',
+            fontSize: '13px'
+        }
+    },
+    xAxis: {
+        labels: {
+            style: {
+                color: '#6e6e70'
+            }
+        }
+    },
+    yAxis: {
+        labels: {
+            style: {
+                color: '#6e6e70'
+            }
+        }
+    },
+    plotOptions: {
+        series: {
+            shadow: true
+        },
+        candlestick: {
+            lineColor: '#404048'
+        },
+        map: {
+            shadow: false
+        }
+    },
+
+    // Highstock specific
+    navigator: {
+        xAxis: {
+            gridLineColor: '#D0D0D8'
+        }
+    },
+    rangeSelector: {
+        buttonTheme: {
+            fill: 'white',
+            stroke: '#C0C0C8',
+            'stroke-width': 1,
+            states: {
+                select: {
+                    fill: '#D0D0D8'
+                }
+            }
+        }
+    },
+    scrollbar: {
+        trackBorderColor: '#C0C0C8'
+    },
+
+    // General
+    background2: '#E0E0E8'
+
+};
\ No newline at end of file
diff --git a/datalets/highcharts-datalet/static/themes/themes.js b/datalets/highcharts-datalet/static/themes/themes.js
new file mode 100755
index 0000000..f4d15b7
--- /dev/null
+++ b/datalets/highcharts-datalet/static/themes/themes.js
@@ -0,0 +1,392 @@
+Highcharts.themeSpod = {
+    colors: ["#2196F3", "#00BCD4", "#B6B6B6", "#F44336", "#FFEB3B", "#4CAF50", "#FF9800", "#795548", "#9C27B0", "#E91E63"],
+    chart: {
+        style: {
+            fontFamily: "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
+        }
+    }
+}
+
+/**
+ * Dark theme for Highcharts JS
+ * @author Torstein Honsi
+ */
+
+// Load the fonts
+Highcharts.createElement('link', {
+    href: '//fonts.googleapis.com/css?family=Unica+One',
+    rel: 'stylesheet',
+    type: 'text/css'
+}, null, document.getElementsByTagName('head')[0]);
+
+Highcharts.themeDarkUnika = {
+    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+    chart: {
+        backgroundColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
+            stops: [
+                [0, '#2a2a2b'],
+                [1, '#3e3e40']
+            ]
+        },
+        style: {
+            fontFamily: "'Unica One', sans-serif"
+        },
+        plotBorderColor: '#606063'
+    },
+    title: {
+        style: {
+            color: '#E0E0E3',
+            textTransform: 'uppercase',
+            fontSize: '20px'
+        }
+    },
+    subtitle: {
+        style: {
+            color: '#E0E0E3',
+            textTransform: 'uppercase'
+        }
+    },
+    xAxis: {
+        gridLineColor: '#707073',
+        labels: {
+            style: {
+                color: '#E0E0E3'
+            }
+        },
+        lineColor: '#707073',
+        minorGridLineColor: '#505053',
+        tickColor: '#707073',
+        title: {
+            style: {
+                color: '#A0A0A3'
+
+            }
+        }
+    },
+    yAxis: {
+        gridLineColor: '#707073',
+        labels: {
+            style: {
+                color: '#E0E0E3'
+            }
+        },
+        lineColor: '#707073',
+        minorGridLineColor: '#505053',
+        tickColor: '#707073',
+        tickWidth: 1,
+        title: {
+            style: {
+                color: '#A0A0A3'
+            }
+        }
+    },
+    tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.85)',
+        style: {
+            color: '#F0F0F0'
+        }
+    },
+    plotOptions: {
+        series: {
+            dataLabels: {
+                color: '#B0B0B3'
+            },
+            marker: {
+                lineColor: '#333'
+            }
+        },
+        boxplot: {
+            fillColor: '#505053'
+        },
+        candlestick: {
+            lineColor: 'white'
+        },
+        errorbar: {
+            color: 'white'
+        }
+    },
+    legend: {
+        itemStyle: {
+            color: '#E0E0E3'
+        },
+        itemHoverStyle: {
+            color: '#FFF'
+        },
+        itemHiddenStyle: {
+            color: '#606063'
+        }
+    },
+    credits: {
+        style: {
+            color: '#666'
+        }
+    },
+    labels: {
+        style: {
+            color: '#707073'
+        }
+    },
+
+    drilldown: {
+        activeAxisLabelStyle: {
+            color: '#F0F0F3'
+        },
+        activeDataLabelStyle: {
+            color: '#F0F0F3'
+        }
+    },
+
+    navigation: {
+        buttonOptions: {
+            symbolStroke: '#DDDDDD',
+            theme: {
+                fill: '#505053'
+            }
+        }
+    },
+
+    // scroll charts
+    rangeSelector: {
+        buttonTheme: {
+            fill: '#505053',
+            stroke: '#000000',
+            style: {
+                color: '#CCC'
+            },
+            states: {
+                hover: {
+                    fill: '#707073',
+                    stroke: '#000000',
+                    style: {
+                        color: 'white'
+                    }
+                },
+                select: {
+                    fill: '#000003',
+                    stroke: '#000000',
+                    style: {
+                        color: 'white'
+                    }
+                }
+            }
+        },
+        inputBoxBorderColor: '#505053',
+        inputStyle: {
+            backgroundColor: '#333',
+            color: 'silver'
+        },
+        labelStyle: {
+            color: 'silver'
+        }
+    },
+
+    navigator: {
+        handles: {
+            backgroundColor: '#666',
+            borderColor: '#AAA'
+        },
+        outlineColor: '#CCC',
+        maskFill: 'rgba(255,255,255,0.1)',
+        series: {
+            color: '#7798BF',
+            lineColor: '#A6C7ED'
+        },
+        xAxis: {
+            gridLineColor: '#505053'
+        }
+    },
+
+    scrollbar: {
+        barBackgroundColor: '#808083',
+        barBorderColor: '#808083',
+        buttonArrowColor: '#CCC',
+        buttonBackgroundColor: '#606063',
+        buttonBorderColor: '#606063',
+        rifleColor: '#FFF',
+        trackBackgroundColor: '#404043',
+        trackBorderColor: '#404043'
+    },
+
+    // special colors for some of the
+    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
+    background2: '#505053',
+    dataLabelsColor: '#B0B0B3',
+    textColor: '#C0C0C0',
+    contrastTextColor: '#F0F0F3',
+    maskColor: 'rgba(255,255,255,0.3)'
+};
+
+/**
+ * Sand-Signika theme for Highcharts JS
+ * @author Torstein Honsi
+ */
+
+// Load the fonts
+Highcharts.createElement('link', {
+    href: '//fonts.googleapis.com/css?family=Signika:400,700',
+    rel: 'stylesheet',
+    type: 'text/css'
+}, null, document.getElementsByTagName('head')[0]);
+
+//Add the background image to the container
+//Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
+//    proceed.call(this);
+//    this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
+//});
+
+Highcharts.themeSandSignika = {
+    colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+    chart: {
+        backgroundColor: null,
+        style: {
+            fontFamily: "Signika, serif"
+        }
+    },
+    title: {
+        style: {
+            color: 'black',
+            fontSize: '16px',
+            fontWeight: 'bold'
+        }
+    },
+    subtitle: {
+        style: {
+            color: 'black'
+        }
+    },
+    tooltip: {
+        borderWidth: 0
+    },
+    legend: {
+        itemStyle: {
+            fontWeight: 'bold',
+            fontSize: '13px'
+        }
+    },
+    xAxis: {
+        labels: {
+            style: {
+                color: '#6e6e70'
+            }
+        }
+    },
+    yAxis: {
+        labels: {
+            style: {
+                color: '#6e6e70'
+            }
+        }
+    },
+    plotOptions: {
+        series: {
+            shadow: true
+        },
+        candlestick: {
+            lineColor: '#404048'
+        },
+        map: {
+            shadow: false
+        }
+    },
+
+    // Highstock specific
+    navigator: {
+        xAxis: {
+            gridLineColor: '#D0D0D8'
+        }
+    },
+    rangeSelector: {
+        buttonTheme: {
+            fill: 'white',
+            stroke: '#C0C0C8',
+            'stroke-width': 1,
+            states: {
+                select: {
+                    fill: '#D0D0D8'
+                }
+            }
+        }
+    },
+    scrollbar: {
+        trackBorderColor: '#C0C0C8'
+    },
+
+    // General
+    background2: '#E0E0E8'
+
+};
+
+/**
+ * Grid-light theme for Highcharts JS
+ * @author Torstein Honsi
+ */
+
+// Load the fonts
+Highcharts.createElement('link', {
+    href: '//fonts.googleapis.com/css?family=Dosis:400,600',
+    rel: 'stylesheet',
+    type: 'text/css'
+}, null, document.getElementsByTagName('head')[0]);
+
+Highcharts.themeGridLight = {
+    colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+    chart: {
+        backgroundColor: null,
+        style: {
+            fontFamily: "Dosis, sans-serif"
+        }
+    },
+    title: {
+        style: {
+            fontSize: '16px',
+            fontWeight: 'bold',
+            textTransform: 'uppercase'
+        }
+    },
+    tooltip: {
+        borderWidth: 0,
+        backgroundColor: 'rgba(219,219,216,0.8)',
+        shadow: false
+    },
+    legend: {
+        itemStyle: {
+            fontWeight: 'bold',
+            fontSize: '13px'
+        }
+    },
+    xAxis: {
+        gridLineWidth: 1,
+        labels: {
+            style: {
+                fontSize: '12px'
+            }
+        }
+    },
+    yAxis: {
+        minorTickInterval: 'auto',
+        title: {
+            style: {
+                textTransform: 'uppercase'
+            }
+        },
+        labels: {
+            style: {
+                fontSize: '12px'
+            }
+        }
+    },
+    plotOptions: {
+        candlestick: {
+            lineColor: '#404048'
+        }
+    },
+
+
+    // General
+    background2: '#F0F0EA'
+
+};
\ No newline at end of file
diff --git a/datalets/highcharts-datalet/themes/dark_unica.js b/datalets/highcharts-datalet/themes/dark_unica.js
deleted file mode 100644
index 53fe753..0000000
--- a/datalets/highcharts-datalet/themes/dark_unica.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * Dark theme for Highcharts JS
- * @author Torstein Honsi
- */
-
-// Load the fonts
-Highcharts.createElement('link', {
-    href: '//fonts.googleapis.com/css?family=Unica+One',
-    rel: 'stylesheet',
-    type: 'text/css'
-}, null, document.getElementsByTagName('head')[0]);
-
-Highcharts.themeDarkUnika = {
-    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
-        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
-    chart: {
-        backgroundColor: {
-            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
-            stops: [
-                [0, '#2a2a2b'],
-                [1, '#3e3e40']
-            ]
-        },
-        style: {
-            fontFamily: "'Unica One', sans-serif"
-        },
-        plotBorderColor: '#606063'
-    },
-    title: {
-        style: {
-            color: '#E0E0E3',
-            textTransform: 'uppercase',
-            fontSize: '20px'
-        }
-    },
-    subtitle: {
-        style: {
-            color: '#E0E0E3',
-            textTransform: 'uppercase'
-        }
-    },
-    xAxis: {
-        gridLineColor: '#707073',
-        labels: {
-            style: {
-                color: '#E0E0E3'
-            }
-        },
-        lineColor: '#707073',
-        minorGridLineColor: '#505053',
-        tickColor: '#707073',
-        title: {
-            style: {
-                color: '#A0A0A3'
-
-            }
-        }
-    },
-    yAxis: {
-        gridLineColor: '#707073',
-        labels: {
-            style: {
-                color: '#E0E0E3'
-            }
-        },
-        lineColor: '#707073',
-        minorGridLineColor: '#505053',
-        tickColor: '#707073',
-        tickWidth: 1,
-        title: {
-            style: {
-                color: '#A0A0A3'
-            }
-        }
-    },
-    tooltip: {
-        backgroundColor: 'rgba(0, 0, 0, 0.85)',
-        style: {
-            color: '#F0F0F0'
-        }
-    },
-    plotOptions: {
-        series: {
-            dataLabels: {
-                color: '#B0B0B3'
-            },
-            marker: {
-                lineColor: '#333'
-            }
-        },
-        boxplot: {
-            fillColor: '#505053'
-        },
-        candlestick: {
-            lineColor: 'white'
-        },
-        errorbar: {
-            color: 'white'
-        }
-    },
-    legend: {
-        itemStyle: {
-            color: '#E0E0E3'
-        },
-        itemHoverStyle: {
-            color: '#FFF'
-        },
-        itemHiddenStyle: {
-            color: '#606063'
-        }
-    },
-    credits: {
-        style: {
-            color: '#666'
-        }
-    },
-    labels: {
-        style: {
-            color: '#707073'
-        }
-    },
-
-    drilldown: {
-        activeAxisLabelStyle: {
-            color: '#F0F0F3'
-        },
-        activeDataLabelStyle: {
-            color: '#F0F0F3'
-        }
-    },
-
-    navigation: {
-        buttonOptions: {
-            symbolStroke: '#DDDDDD',
-            theme: {
-                fill: '#505053'
-            }
-        }
-    },
-
-    // scroll charts
-    rangeSelector: {
-        buttonTheme: {
-            fill: '#505053',
-            stroke: '#000000',
-            style: {
-                color: '#CCC'
-            },
-            states: {
-                hover: {
-                    fill: '#707073',
-                    stroke: '#000000',
-                    style: {
-                        color: 'white'
-                    }
-                },
-                select: {
-                    fill: '#000003',
-                    stroke: '#000000',
-                    style: {
-                        color: 'white'
-                    }
-                }
-            }
-        },
-        inputBoxBorderColor: '#505053',
-        inputStyle: {
-            backgroundColor: '#333',
-            color: 'silver'
-        },
-        labelStyle: {
-            color: 'silver'
-        }
-    },
-
-    navigator: {
-        handles: {
-            backgroundColor: '#666',
-            borderColor: '#AAA'
-        },
-        outlineColor: '#CCC',
-        maskFill: 'rgba(255,255,255,0.1)',
-        series: {
-            color: '#7798BF',
-            lineColor: '#A6C7ED'
-        },
-        xAxis: {
-            gridLineColor: '#505053'
-        }
-    },
-
-    scrollbar: {
-        barBackgroundColor: '#808083',
-        barBorderColor: '#808083',
-        buttonArrowColor: '#CCC',
-        buttonBackgroundColor: '#606063',
-        buttonBorderColor: '#606063',
-        rifleColor: '#FFF',
-        trackBackgroundColor: '#404043',
-        trackBorderColor: '#404043'
-    },
-
-    // special colors for some of the
-    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
-    background2: '#505053',
-    dataLabelsColor: '#B0B0B3',
-    textColor: '#C0C0C0',
-    contrastTextColor: '#F0F0F3',
-    maskColor: 'rgba(255,255,255,0.3)'
-};
\ No newline at end of file
diff --git a/datalets/highcharts-datalet/themes/grid_light.js b/datalets/highcharts-datalet/themes/grid_light.js
deleted file mode 100644
index ba1eedc..0000000
--- a/datalets/highcharts-datalet/themes/grid_light.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Grid-light theme for Highcharts JS
- * @author Torstein Honsi
- */
-
-// Load the fonts
-Highcharts.createElement('link', {
-    href: '//fonts.googleapis.com/css?family=Dosis:400,600',
-    rel: 'stylesheet',
-    type: 'text/css'
-}, null, document.getElementsByTagName('head')[0]);
-
-Highcharts.themeGridLight = {
-    colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
-        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
-    chart: {
-        backgroundColor: null,
-        style: {
-            fontFamily: "Dosis, sans-serif"
-        }
-    },
-    title: {
-        style: {
-            fontSize: '16px',
-            fontWeight: 'bold',
-            textTransform: 'uppercase'
-        }
-    },
-    tooltip: {
-        borderWidth: 0,
-        backgroundColor: 'rgba(219,219,216,0.8)',
-        shadow: false
-    },
-    legend: {
-        itemStyle: {
-            fontWeight: 'bold',
-            fontSize: '13px'
-        }
-    },
-    xAxis: {
-        gridLineWidth: 1,
-        labels: {
-            style: {
-                fontSize: '12px'
-            }
-        }
-    },
-    yAxis: {
-        minorTickInterval: 'auto',
-        title: {
-            style: {
-                textTransform: 'uppercase'
-            }
-        },
-        labels: {
-            style: {
-                fontSize: '12px'
-            }
-        }
-    },
-    plotOptions: {
-        candlestick: {
-            lineColor: '#404048'
-        }
-    },
-
-
-    // General
-    background2: '#F0F0EA'
-
-};
\ No newline at end of file
diff --git a/datalets/highcharts-datalet/themes/sand_signika.js b/datalets/highcharts-datalet/themes/sand_signika.js
deleted file mode 100644
index 1cfb6da..0000000
--- a/datalets/highcharts-datalet/themes/sand_signika.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Sand-Signika theme for Highcharts JS
- * @author Torstein Honsi
- */
-
-// Load the fonts
-Highcharts.createElement('link', {
-    href: '//fonts.googleapis.com/css?family=Signika:400,700',
-    rel: 'stylesheet',
-    type: 'text/css'
-}, null, document.getElementsByTagName('head')[0]);
-
-// Add the background image to the container
-Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
-    proceed.call(this);
-    this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
-});
-
-
-Highcharts.themeSandSignika = {
-    colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
-        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
-    chart: {
-        backgroundColor: null,
-        style: {
-            fontFamily: "Signika, serif"
-        }
-    },
-    title: {
-        style: {
-            color: 'black',
-            fontSize: '16px',
-            fontWeight: 'bold'
-        }
-    },
-    subtitle: {
-        style: {
-            color: 'black'
-        }
-    },
-    tooltip: {
-        borderWidth: 0
-    },
-    legend: {
-        itemStyle: {
-            fontWeight: 'bold',
-            fontSize: '13px'
-        }
-    },
-    xAxis: {
-        labels: {
-            style: {
-                color: '#6e6e70'
-            }
-        }
-    },
-    yAxis: {
-        labels: {
-            style: {
-                color: '#6e6e70'
-            }
-        }
-    },
-    plotOptions: {
-        series: {
-            shadow: true
-        },
-        candlestick: {
-            lineColor: '#404048'
-        },
-        map: {
-            shadow: false
-        }
-    },
-
-    // Highstock specific
-    navigator: {
-        xAxis: {
-            gridLineColor: '#D0D0D8'
-        }
-    },
-    rangeSelector: {
-        buttonTheme: {
-            fill: 'white',
-            stroke: '#C0C0C8',
-            'stroke-width': 1,
-            states: {
-                select: {
-                    fill: '#D0D0D8'
-                }
-            }
-        }
-    },
-    scrollbar: {
-        trackBorderColor: '#C0C0C8'
-    },
-
-    // General
-    background2: '#E0E0E8'
-
-};
\ No newline at end of file
diff --git a/datalets/highcharts-datalet/themes/themes.js b/datalets/highcharts-datalet/themes/themes.js
deleted file mode 100644
index 721158f..0000000
--- a/datalets/highcharts-datalet/themes/themes.js
+++ /dev/null
@@ -1,384 +0,0 @@
-/**
- * Dark theme for Highcharts JS
- * @author Torstein Honsi
- */
-
-// Load the fonts
-Highcharts.createElement('link', {
-    href: '//fonts.googleapis.com/css?family=Unica+One',
-    rel: 'stylesheet',
-    type: 'text/css'
-}, null, document.getElementsByTagName('head')[0]);
-
-Highcharts.themeDarkUnika = {
-    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
-        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
-    chart: {
-        backgroundColor: {
-            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
-            stops: [
-                [0, '#2a2a2b'],
-                [1, '#3e3e40']
-            ]
-        },
-        style: {
-            fontFamily: "'Unica One', sans-serif"
-        },
-        plotBorderColor: '#606063'
-    },
-    title: {
-        style: {
-            color: '#E0E0E3',
-            textTransform: 'uppercase',
-            fontSize: '20px'
-        }
-    },
-    subtitle: {
-        style: {
-            color: '#E0E0E3',
-            textTransform: 'uppercase'
-        }
-    },
-    xAxis: {
-        gridLineColor: '#707073',
-        labels: {
-            style: {
-                color: '#E0E0E3'
-            }
-        },
-        lineColor: '#707073',
-        minorGridLineColor: '#505053',
-        tickColor: '#707073',
-        title: {
-            style: {
-                color: '#A0A0A3'
-
-            }
-        }
-    },
-    yAxis: {
-        gridLineColor: '#707073',
-        labels: {
-            style: {
-                color: '#E0E0E3'
-            }
-        },
-        lineColor: '#707073',
-        minorGridLineColor: '#505053',
-        tickColor: '#707073',
-        tickWidth: 1,
-        title: {
-            style: {
-                color: '#A0A0A3'
-            }
-        }
-    },
-    tooltip: {
-        backgroundColor: 'rgba(0, 0, 0, 0.85)',
-        style: {
-            color: '#F0F0F0'
-        }
-    },
-    plotOptions: {
-        series: {
-            dataLabels: {
-                color: '#B0B0B3'
-            },
-            marker: {
-                lineColor: '#333'
-            }
-        },
-        boxplot: {
-            fillColor: '#505053'
-        },
-        candlestick: {
-            lineColor: 'white'
-        },
-        errorbar: {
-            color: 'white'
-        }
-    },
-    legend: {
-        itemStyle: {
-            color: '#E0E0E3'
-        },
-        itemHoverStyle: {
-            color: '#FFF'
-        },
-        itemHiddenStyle: {
-            color: '#606063'
-        }
-    },
-    credits: {
-        style: {
-            color: '#666'
-        }
-    },
-    labels: {
-        style: {
-            color: '#707073'
-        }
-    },
-
-    drilldown: {
-        activeAxisLabelStyle: {
-            color: '#F0F0F3'
-        },
-        activeDataLabelStyle: {
-            color: '#F0F0F3'
-        }
-    },
-
-    navigation: {
-        buttonOptions: {
-            symbolStroke: '#DDDDDD',
-            theme: {
-                fill: '#505053'
-            }
-        }
-    },
-
-    // scroll charts
-    rangeSelector: {
-        buttonTheme: {
-            fill: '#505053',
-            stroke: '#000000',
-            style: {
-                color: '#CCC'
-            },
-            states: {
-                hover: {
-                    fill: '#707073',
-                    stroke: '#000000',
-                    style: {
-                        color: 'white'
-                    }
-                },
-                select: {
-                    fill: '#000003',
-                    stroke: '#000000',
-                    style: {
-                        color: 'white'
-                    }
-                }
-            }
-        },
-        inputBoxBorderColor: '#505053',
-        inputStyle: {
-            backgroundColor: '#333',
-            color: 'silver'
-        },
-        labelStyle: {
-            color: 'silver'
-        }
-    },
-
-    navigator: {
-        handles: {
-            backgroundColor: '#666',
-            borderColor: '#AAA'
-        },
-        outlineColor: '#CCC',
-        maskFill: 'rgba(255,255,255,0.1)',
-        series: {
-            color: '#7798BF',
-            lineColor: '#A6C7ED'
-        },
-        xAxis: {
-            gridLineColor: '#505053'
-        }
-    },
-
-    scrollbar: {
-        barBackgroundColor: '#808083',
-        barBorderColor: '#808083',
-        buttonArrowColor: '#CCC',
-        buttonBackgroundColor: '#606063',
-        buttonBorderColor: '#606063',
-        rifleColor: '#FFF',
-        trackBackgroundColor: '#404043',
-        trackBorderColor: '#404043'
-    },
-
-    // special colors for some of the
-    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
-    background2: '#505053',
-    dataLabelsColor: '#B0B0B3',
-    textColor: '#C0C0C0',
-    contrastTextColor: '#F0F0F3',
-    maskColor: 'rgba(255,255,255,0.3)'
-};
-
-/**
- * Sand-Signika theme for Highcharts JS
- * @author Torstein Honsi
- */
-
-// Load the fonts
-Highcharts.createElement('link', {
-    href: '//fonts.googleapis.com/css?family=Signika:400,700',
-    rel: 'stylesheet',
-    type: 'text/css'
-}, null, document.getElementsByTagName('head')[0]);
-
-// Add the background image to the container
-Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
-    proceed.call(this);
-    this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
-});
-
-
-Highcharts.themeSandSignika = {
-    colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
-        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
-    chart: {
-        backgroundColor: null,
-        style: {
-            fontFamily: "Signika, serif"
-        }
-    },
-    title: {
-        style: {
-            color: 'black',
-            fontSize: '16px',
-            fontWeight: 'bold'
-        }
-    },
-    subtitle: {
-        style: {
-            color: 'black'
-        }
-    },
-    tooltip: {
-        borderWidth: 0
-    },
-    legend: {
-        itemStyle: {
-            fontWeight: 'bold',
-            fontSize: '13px'
-        }
-    },
-    xAxis: {
-        labels: {
-            style: {
-                color: '#6e6e70'
-            }
-        }
-    },
-    yAxis: {
-        labels: {
-            style: {
-                color: '#6e6e70'
-            }
-        }
-    },
-    plotOptions: {
-        series: {
-            shadow: true
-        },
-        candlestick: {
-            lineColor: '#404048'
-        },
-        map: {
-            shadow: false
-        }
-    },
-
-    // Highstock specific
-    navigator: {
-        xAxis: {
-            gridLineColor: '#D0D0D8'
-        }
-    },
-    rangeSelector: {
-        buttonTheme: {
-            fill: 'white',
-            stroke: '#C0C0C8',
-            'stroke-width': 1,
-            states: {
-                select: {
-                    fill: '#D0D0D8'
-                }
-            }
-        }
-    },
-    scrollbar: {
-        trackBorderColor: '#C0C0C8'
-    },
-
-    // General
-    background2: '#E0E0E8'
-
-};
-
-/**
- * Grid-light theme for Highcharts JS
- * @author Torstein Honsi
- */
-
-// Load the fonts
-Highcharts.createElement('link', {
-    href: '//fonts.googleapis.com/css?family=Dosis:400,600',
-    rel: 'stylesheet',
-    type: 'text/css'
-}, null, document.getElementsByTagName('head')[0]);
-
-Highcharts.themeGridLight = {
-    colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
-        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
-    chart: {
-        backgroundColor: null,
-        style: {
-            fontFamily: "Dosis, sans-serif"
-        }
-    },
-    title: {
-        style: {
-            fontSize: '16px',
-            fontWeight: 'bold',
-            textTransform: 'uppercase'
-        }
-    },
-    tooltip: {
-        borderWidth: 0,
-        backgroundColor: 'rgba(219,219,216,0.8)',
-        shadow: false
-    },
-    legend: {
-        itemStyle: {
-            fontWeight: 'bold',
-            fontSize: '13px'
-        }
-    },
-    xAxis: {
-        gridLineWidth: 1,
-        labels: {
-            style: {
-                fontSize: '12px'
-            }
-        }
-    },
-    yAxis: {
-        minorTickInterval: 'auto',
-        title: {
-            style: {
-                textTransform: 'uppercase'
-            }
-        },
-        labels: {
-            style: {
-                fontSize: '12px'
-            }
-        }
-    },
-    plotOptions: {
-        candlestick: {
-            lineColor: '#404048'
-        }
-    },
-
-
-    // General
-    background2: '#F0F0EA'
-
-};
\ No newline at end of file
diff --git a/datalets/leafletjs-datalet/leafletjs-datalet.png b/datalets/leafletjs-datalet/leafletjs-datalet.png
old mode 100755
new mode 100644
index 19dd606..16e034e
Binary files a/datalets/leafletjs-datalet/leafletjs-datalet.png and b/datalets/leafletjs-datalet/leafletjs-datalet.png differ
diff --git a/datalets/linechart-datalet/linechart-datalet.html b/datalets/linechart-datalet/linechart-datalet.html
index 5e9ed9e..1d3d8ad 100755
--- a/datalets/linechart-datalet/linechart-datalet.html
+++ b/datalets/linechart-datalet/linechart-datalet.html
@@ -62,14 +62,13 @@ Example:
              * @method presentData
              */
             presentData: function(){
-
-                $(this._component.$.charts.$.container).highcharts({
-                    title: {
-                        text: "" + this._component.title
-                    },
+                options = {
                     chart: {
                         zoomType: 'xy'
                     },
+                    title: {
+                        text: this._component.title
+                    },
                     xAxis: {
                         categories: this.properties.categories.value,//this._component.categories,
                         title: {
@@ -77,14 +76,14 @@ Example:
                         }
                     },
                     yAxis: {
+                        min: 0,
                         title: {
-                            text: this._component.yAxisLabel
+                            text: this._component.yAxisLabel,
+                            align: 'high'
                         },
-                        plotLines: [{
-                            value: 0,
-                            width: 1,
-                            color: '#808080'
-                        }]
+                        labels: {
+                            overflow: 'justify'
+                        }
                     },
                     tooltip: {
                         valueSuffix: ' ' + this._component.suffix
@@ -94,17 +93,22 @@ Example:
                         align: 'right',
                         verticalAlign: 'top',
                         x: -40,
-                        y: 100,
+                        y: 80,
                         floating: true,
                         borderWidth: 1,
-                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
+                        backgroundColor: ((Highcharts[this._component.theme] && Highcharts[this._component.theme].legendBackgroundColor) || '#FFFFFF'),
                         shadow: true
                     },
                     credits: {
                         enabled: false
                     },
                     series: this.properties.series.value
-                });
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
+
+                $(this._component.$.charts.$.container).highcharts(options);
             }
         };
 
@@ -146,6 +150,10 @@ Example:
                     type : String,
                     value : "units"
                 },
+                theme : {
+                    type : String,
+                    value : ""
+                },
                 /**
                  * It's the component behavior
                  *
diff --git a/datalets/linechart-datalet/linechart-datalet.png b/datalets/linechart-datalet/linechart-datalet.png
old mode 100755
new mode 100644
index c0239b8..cfc9f50
Binary files a/datalets/linechart-datalet/linechart-datalet.png and b/datalets/linechart-datalet/linechart-datalet.png differ
diff --git a/datalets/piechart-datalet/piechart-datalet.html b/datalets/piechart-datalet/piechart-datalet.html
index 4a87eaf..143112d 100755
--- a/datalets/piechart-datalet/piechart-datalet.html
+++ b/datalets/piechart-datalet/piechart-datalet.html
@@ -31,7 +31,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
 
-
 <!--
 `piechart-datalet` is a piechart datalet based on highcharts project <http://www.highcharts.com/>
 
@@ -60,49 +59,65 @@ Example:
              * @method presentData
              */
             presentData: function(){
+                var series = [{"name": this.data[1].name, "data": []}];
+
+                var sum = 0;
+                for(var i = 0; i < this.data[0].data.length; i++)
+                    sum += this.data[1].data[i];
+
+                var other = ['other', 0];
+                for(var i = 0; i < this.data[0].data.length; i++) {
+                    if (this.data[0].data.length <= 20 || this.data[1].data[i] / sum >= 0.02) {
+                        var slice = ['' + this.data[0].data[i], this.data[1].data[i]];
+                        series[0].data.push(slice);
+                    }
+                    else {
+                        other[1] += this.data[1].data[i];
+                    }
+                }
 
-                var PieSeries = [{"name": this.data[1].name, "data":[]}];
+                if(other[1] > 0)
+                    series[0].data.push(other);
 
-                for(var i=0; i<this.data[0].data.length; i++)
-                {
-                    var PieArr = [this.data[0].data[i], this.data[1].data[i]];
-                    PieSeries[0].data.push(PieArr);
-                }
+                var innerSize = 0;
+                if(this._component.donut == "true")
+                    innerSize = 100;
 
-                //Build Highchart element
-                $(this._component.$.charts.$.container).highcharts({
+                options = {
                     chart: {
-                        plotBackgroundColor: null,
-                        plotBorderWidth: null,
-                        plotShadow: false,
-                        type: 'pie'
+                        type: 'pie',
+                        zoomType: 'xy',
                     },
                     title: {
-                        text: "" + this._component.title
+                        text: this._component.title
+                    },
+                    tooltip: {
+                        valueSuffix: ' ' + this._component.suffix
                     },
                     plotOptions: {
                         pie: {
+                            innerSize: innerSize,
                             allowPointSelect: true,
                             cursor: 'pointer',
                             dataLabels: {
                                 enabled: true,
-                                formatter: function() {
-                                    if (this.point.name.length > 10) {
-                                        return this.point.name.substr(0, 10) + "...";
-                                    } else {
-                                        return this.point.name;
-                                    }
+                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+                                style: {
+                                    color: (Highcharts[this._component.theme] && Highcharts[this._component.theme].contrastTextColor) || 'black'
                                 }
-                                },
-                            showInLegend: true
+                            }
                         }
                     },
-                    //hide link HighChart
                     credits: {
                         enabled: false
                     },
-                   series: PieSeries
-                });
+                    series: series
+                };
+
+                if(this._component.theme != "themeBase" && this._component.theme != "")
+                    jQuery.extend(true, options, Highcharts[this._component.theme]);
+
+                $(this._component.$.charts.$.container).highcharts(options);
             }
         };
 
@@ -111,13 +126,18 @@ Example:
             is: 'piechart-datalet',
 
             properties: {
-                /**
-                 * It's the component behavior
-                 *
-                 * @attribute behavior
-                 * @type Object
-                 * @default {}
-                 */
+                suffix : {
+                    type : String,
+                    value : ""
+                },
+                theme : {
+                    type : String,
+                    value : ""
+                },
+                donut : {
+                    type : String,
+                    value : "false"
+                },
                 behavior : {
                     type : Object,
                     value : {}
diff --git a/datalets/piechart-datalet/piechart-datalet.png b/datalets/piechart-datalet/piechart-datalet.png
old mode 100755
new mode 100644
index ff424b8..5f3efe7
Binary files a/datalets/piechart-datalet/piechart-datalet.png and b/datalets/piechart-datalet/piechart-datalet.png differ
diff --git a/locales/controllet_ln.js b/locales/controllet_ln.js
index aaeba6c..64cac4d 100755
--- a/locales/controllet_ln.js
+++ b/locales/controllet_ln.js
@@ -1,6 +1,107 @@
 var ln = [];
 
-/* IT */
+/******** EN ********/
+
+//PAGE SLIDER
+ln["slide1Title_en"] = "SELECT DATASET";
+ln["slide1Subtitle_en"] = "Search or copy and paste the url of dataset.";
+ln["slide2Title_en"] = "SELECT DATA";
+ln["slide2Subtitle_en"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";
+ln["slide3Title_en"] = "SELECT VISUALIZATION";
+ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and labels (optional).";
+ln["back_en"] = "Back";
+ln["forward_en"] = "Forward";
+
+//SELECT DATASET
+ln["listView_en"] = "LIST VIEW";
+ln["treeMapView_en"] = "TREE MAP VIEW";
+ln["availableDatasets_en"] = "Available datasets";
+ln["suggestedDatasets_en"] = "Suggested datasets";
+ln["selectedUrl_en"] = "Selected url";
+ln["wrongUrl_en"] = "Invalid url or data provider not supported yet.";
+
+//SELECT DATA
+ln["addFilters_en"] = "ADD FILTERS";
+
+//filters
+ln["filterField_en"] = "Field";
+ln["filterOperation_en"] = "Operation";
+ln["filterValue_en"] = "Value";
+ln["contains_en"] = "contains";
+ln["start_en"] = "start with";
+ln["ends_en"] = "ends with";
+
+//SELECT VISUALIZATION
+ln["inputs_en"] = "INPUTS";
+ln["baseInfo_en"] = "BASE INFO";
+ln["layouts_en"] = "LABELS / OPTIONS";
+ln["dataletPreview_en"] = "DATALET PREVIEW";
+ln["addDatalet_en"] = "ADD";
+ln["modifyDatalet_en"] = "MODIFY";
+
+//vslider
+ln["search_en"] = "Search";
+
+ln["datatable_en"] = "Table";
+ln["barchart_en"] = "Bar";
+ln["columnchart_en"] = "Column";
+ln["areachart_en"] = "Area";
+ln["linechart_en"] = "Line";
+ln["heatmap_en"] = "Heat Map";
+ln["barchart_stacked_en"] = "Stacked Bar";
+ln["columnchart_stacked_en"] = "Stacked Column";
+ln["areachart_stacked_en"] = "Stacked Area";
+ln["piechart_en"] = "Pie";
+//ln["scatterchart_en"] = "Scatter";
+//ln["bubblechart_en"] = "Bubble";
+//ln["treemap_en"] = "Tree Map";
+ln["leafletjs_en"] = "Map";
+
+//inputs
+ln["sortAscending_en"] = "sorted ascending";
+ln["sortDescending_en"] = "sorted descending";
+ln["unsort_en"] = "unsorted";
+
+ln["groupBy_en"] = "GROUP BY";
+ln["calculate_en"] = "CALCULATE";
+
+ln["COUNT_en"] = "COUNT of";
+ln["SUM_en"] = "SUM of";
+ln["MIN_en"] = "MIN of";
+ln["MAX_en"] = "MAX of";
+ln["AVG_en"] = "AVG of";
+ln["FIRST_en"] = "FIRST of";
+ln["LAST_en"] = "LAST of";
+
+ln["XAxis_en"] = "X AXIS";
+ln["YAxis_en"] = "Y AXIS (numeric)";
+ln["Column_en"] = "COLUMN";
+ln["SliceLabels_en"] = "LABELS";
+ln["SliceSizes_en"] = "SIZES (numeric)";
+ln["Latitude_en"] = "LATITUDE";
+ln["Longitude_en"] = "LONGITUDE";
+ln["BalloonContent_en"] = "BALLOON CONTENT";
+
+//options
+ln["title_en"] = "Title"
+ln["description_en"] = "Description";
+
+ln["x-axis-label_en"] = "X Axis Label";
+ln["y-axis-label_en"] = "Y Axis Label";
+ln["suffix_en"] = "Tooltip Suffix";
+ln["theme_en"] = "Theme";
+ln["stack_en"] = "Stack";
+ln["donut_en"] = "Donut";
+
+ln["x-axis-label_description_en"] = "X Axis Label";
+ln["y-axis-label_description_en"] = "Y Axis Label";
+ln["suffix_description_en"] = "Tooltip Suffix";
+ln["theme_description_en"] = "Theme";
+ln["stack_description_en"] = "Stack";
+ln["donut_description_en"] = "Donut";
+
+/******** IT ********/
+
 ln["slide1Title_it"] = "SELEZIONA IL DATASET";
 ln["slide1Subtitle_it"] = "Ricerca o copia e incolla la url del dataset.";
 ln["slide2Title_it"] = "SELEZIONA I DATI";
@@ -110,120 +211,8 @@ ln["LatitudeDescription_it"] = "Latitudine del punto da riportare sulla mappa.";
 ln["LongitudeDescription_it"] = "Longitudine del punto da riportare sulla mappa.";
 ln["BalloonContentDescription_it"] = "Descrizione del segnaposto o link all'immagine che visualizza il luogo specificato sulla mappa.";
 
-/* EN */
-ln["slide1Title_en"] = "SELECT DATASET";
-ln["slide1Subtitle_en"] = "Search or copy and paste the url of dataset.";
-ln["slide2Title_en"] = "SELECT DATA";
-ln["slide2Subtitle_en"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";
-ln["slide3Title_en"] = "SELECT VISUALIZATION";
-ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and labels (optional).";
-
-ln["back_en"] = "BACK";
-ln["forward_en"] = "FORWARD";
-
-ln["listView_en"] = "LIST VIEW";
-ln["treeMapView_en"] = "TREE MAP VIEW";
-ln["mostPopular_en"] = "MOST POPULAR";
-ln["availableDatasets_en"] = "Available datasets";
-ln["suggestedDatasets_en"] = "Suggested datasets";
-ln["selectedUrl_en"] = "Selected url";
-ln["wrongUrl_en"] = "Invalid url or data provider not supported yet.";
-
-ln["inputs_en"] = "INPUTS";
-ln["layouts_en"] = "LABELS / OPTIONS";
-ln["baseInfo_en"] = "BASE INFO";
-ln["comment_en"] = "COMMENT";
-ln["commentLabel_en"] = "comment (max 100 characters)";
-ln["dataletPreview_en"] = "PREVIEW";
-ln["addDatalet_en"] = "ADD";
-ln["modifyDatalet_en"] = "MODIFY";
+/******** FR ********/
 
-ln["addFilters_en"] = "ADD FILTERS";
-ln["filterField_en"] = "Field";
-ln["filterOperation_en"] = "Operation";
-ln["filterValue_en"] = "Value";
-ln["contains_en"] = "contains";
-ln["start_en"] = "start with";
-ln["ends_en"] = "ends with";
-ln["sortAscending_en"] = "sorted ascending";
-ln["sortDescending_en"] = "sorted descending";
-ln["unsort_en"] = "unsorted";
-ln["groupBy_en"] = "GROUP BY";
-ln["calculate_en"] = "CALCULATE";
-ln["COUNT_en"] = "COUNT of";
-ln["SUM_en"] = "SUM of";
-ln["MIN_en"] = "MIN of";
-ln["MAX_en"] = "MAX of";
-ln["AVG_en"] = "AVG of";
-ln["FIRST_en"] = "FIRST of";
-ln["LAST_en"] = "LAST of";
-
-ln["datatable_en"] = "table";
-ln["barchart_en"] = "bar-chart";
-//ln["bar-chart_en"] = "DDR bar-chart";
-ln["columnchart_en"] = "column-chart";
-ln["linechart_en"] = "line-chart";
-ln["column3Dchart_en"] = "3D column-chart";
-ln["areachart_en"] = "area-chart";
-ln["donutpie3dchart_en"] = "3D donutpie-chart";
-ln["piechart_en"] = "pie-chart";
-ln["treemap_en"] = "tree-map";
-ln["leafletjs_en"] = "map";
-ln["bubble3d_en"] = "3D bubble-chart";
-ln["bubblechart_en"] = "bubble-chart";
-ln["scatterchart_en"] = "scatter-chart";
-ln["heatmap_en"] = "heat-map";
-
-ln["title_en"] = "title";
-ln["description_en"] = "description";
-
-ln["Cell_en"] = "Cell";
-ln["Level_en"] = "Level";
-ln["Categories_en"] = "Categories";
-//ln["Category_en"] = "Category";
-ln["Series_en"] = "Series";
-ln["x-axis-label_en"] = "X axis label";
-ln["y-axis-label_en"] = "Y axis label";
-ln["z-axis-label_en"] = "Z axis label";
-ln["suffix_en"] = "Suffix";
-//ln["theme_en"] = "Theme";
-ln["Size_en"] = "Size";
-ln["Latitude_en"] = "Latitude";
-ln["Longitude_en"] = "Longitude";
-ln["Balloon content_en"] = "Balloon content";
-ln["X values_en"] = "X values";
-ln["Y values_en"] = "Y values";
-ln["Z values_en"] = "Z values";
-
-ln["cellDescription_en"] = "The cell of table.";
-ln["levelDescription_en"] = "It is the level field that the datalet will use to group the values at corrisponding field number level.";
-
-ln["categoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.";
-ln["seriesDescription_en"] = "The chart series. Its values will be put in the vertical axis.";
-
-ln["XAxisLabelDescription_en"] = "The label for the X axis.";
-ln["YAxisLabelDescription_en"] = "The label for the Y axis.";
-ln["suffixDescription_en"] = "The values suffix (eg units, dollars, euro, ...).";
-
-ln["pieSeriesDescription_en"] = "The chart series. Its values will be put on slice of each series.";
-ln["pieSizeDescription_en"] = "The size for each series to create a concentric rings.";
-
-ln["bubbleCategoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis. You need one value for each series.";
-ln["bubbleYValuesDescription_en"] = "The chart plots y values. Its values will be put in the vertical axis.";
-ln["bubbleZValuesDescription_en"] = "The chart plots z value. Its values represent the size of the bubble.";
-ln["bubbleSeriesDescription_en"] = "The chart series. Its values visualize multi- series bubbles chart.";
-
-ln["scatterCategoriesDescription_en"] = "The chart categories. You need one value for each series.";
-ln["scatterXValuesDescription_en"] = "The chart plots x values. Its values will be put in the horizontal axis.";
-ln["scatterYValuesDescription_en"] = "The chart plots y value. Its values will be put in the vertical axis.";
-
-ln["heatmapCategoriesDescription_en"] = "The chart categories. Its values will be put in the horizontal axis.";
-
-ln["LatitudeDescription_en"] = "It is latitude of the points you want to show in the map.";
-ln["LongitudeDescription_en"] = "It is longitude of the points you want to show in the map.";
-ln["BalloonContentDescription_en"] = "It is the text associated to the marker or the link to the image related to the camera associated to each points.";
-
-/* FR */
 ln["slide1Title_fr"] = "SELECTIONNER UN JEU DE DONNEES";
 ln["slide1Subtitle_fr"] = "Rechercher ou copier/coller l’url du jeu de données.";
 ln["slide2Title_fr"] = "SELECTIONNER DONNEES";
@@ -333,7 +322,8 @@ ln["LatitudeDescription_fr"] = "Latitude des points que vous souhaitez montrer s
 ln["LongitudeDescription_fr"] = "Longitude des points que vous souhaitez montrer sur la carte.";
 ln["BalloonContentDescription_fr"] = "It is the text associated to the marker or the link to the image related to the camera associated to each points.";
 
-/* NL */
+/******** NL ********/
+
 ln["slide1Title_nl"] = "SELECTEER DATASET";
 ln["slide1Subtitle_nl"] = "Zoek of kopieer en plak de url van de dataset.";
 ln["slide2Title_nl"] = "SELECTEER DATA";
--
libgit2 0.21.4