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

pina
2 parents bd478cd0 2b65b828
Showing 23 changed files with 108 additions and 346 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
controllets/datalet-selection-controllet/datalet-selection-controllet.html
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
datalets/areachart-datalet/areachart-datalet.html
datalets/barchart-datalet/barchart-datalet.html
datalets/base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html
datalets/base-datalet/base-datalet.html
datalets/base-datalet/static/js/BaseDataletBehavior.js
datalets/base-datalet/static/js/BaseDataletBehaviors.js
datalets/bubble3d-datalet/bubble3d-datalet.html
datalets/column3Dchart-datalet/column3Dchart-datalet.html
datalets/columnchart-datalet/columnchart-datalet.html
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
datalets/datatable-datalet/datatable-datalet.html
datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.html
datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html
datalets/graph-datalet/graph-datalet.html
datalets/highcharts-datalet/highcharts-datalet.html
datalets/leafletjs-datalet/leafletjs-datalet.html
datalets/linechart-datalet/linechart-datalet.html
@@ -135,7 +135,7 @@
 //                        slider.setTitle("SELECT DATA", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
                         if(this.modify){
                             slider.chevronLeft("invisible");
-                            slider.setAvatar("2");
+//                            slider.setAvatar("2");
                         }
                         else{
                             slider.chevronLeft(true);
@@ -209,7 +209,7 @@
                         <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
                             <paper-menu class="dropdown-content">
                                 <template is="dom-repeat" items={{fields}}>
-                                    <paper-item id={{index}} on-tap="_addInput">{{item}}</paper-item>
+                                    <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
                                     <!--{{_fieldName(item)}}-->
                                 </template>
                             </paper-menu>
@@ -374,8 +374,10 @@
  
                 //this.modify = true;//da eliminare in futuro
                 if(this.preselectedDatalet){
+                    if(this.modify)
+                        this._preselectDatalet();
+
                     this.modify = true;
-                    this._preselectDatalet();
                     this.preselectedDatalet = undefined;
                 }
             },
@@ -425,22 +427,29 @@
             },
  
             _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);
  
-                var inputs = document.getElementsByTagName("paper-dropdown-menu");
-                for(var i=0; i < inputs.length; i++)
-                    $(inputs[i]).find("paper-menu")[0].select(i);
+                this.async(function() {
+                    this.selectedFields = this._copy(this.fields);
  
-               //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 inputs = document.getElementsByTagName("paper-dropdown-menu");
+                    for (var i = 0; i < inputs.length; i++)
+                        $(inputs[i]).find("paper-menu")[0].select(i);
  
-                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];
+                    //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 labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");
+                    for (var i = 0; i < labels.length; i++)
+                        labels[i].value = this.dataletPreset[labels[i].label];
+                }, 300);
  
                 this.loadPreview = true;
                 this._loadDatalet(this.selectedFields);
@@ -461,6 +470,7 @@
                         var selection = inputs.selection;
                         inputs = [];
                         for (var i in this.fields)
+//                        for (var i = 0; i < Math.max(this.fields.length, 8); i++)//error
                             inputs.push({name: name + " " + i, description: description, selection: selection});
                     }
  
@@ -482,8 +492,12 @@
             _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 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);
  
@@ -546,7 +560,16 @@
                 ComponentService.deep_url = this.deepUrl;
                 ComponentService.getComponent(dataletParams);
  
-//                this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1000);
+//                console.log(this.params);
+
+
+//                this.async(function(){
+//                    if(this.$.datalet_selection_datalet_placeholder.children[1])
+//                        this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
+//                    this.$.add_button.removeAttribute("disabled");
+//                }, 300);
+
+//                this.async(function(){this.$.add_button.removeAttribute("disabled");}, 300);
                 this.$.add_button.removeAttribute("disabled");
             },
  
@@ -557,7 +580,7 @@
                     if(this.selectedFields[i])
                         selectedFields.push(this.selectedFields[i]);
  
-                console.log(this.params);
+//                console.log(this.params);
  
                 var data = {
                     dataUrl : this.dataUrl,
@@ -117,14 +117,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         },
  
         _computeCardClass: function(color) {
-            //var cls = 'card';
-            //return cls + ' ' + color;
             this.$.card = color;
         },
  
         _computeFixedBackgroundClass: function(color) {
-            //var cls = 'fixed';
-            //return cls + ' ' + color + '-l';
             this.$.fixed = color;
         }
  
@@ -50,7 +50,7 @@ Example:
  
 <dom-module id="areachart-datalet">
     <template>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
     </template>
     <script>
  
@@ -50,7 +50,7 @@ Example:
  
 <dom-module name="barchart-datalet">
     <template>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
     </template>
     <script>
  
@@ -117,7 +117,6 @@ Example:
             }
         };
  
-
         BarchartDatalet = Polymer({
             is: 'barchart-datalet',
  
@@ -176,7 +175,6 @@ Example:
              * @method ready
              */
             ready: function(){
-
                 this.behavior = $.extend(true, {}, HighchartsComponentBehavior, BarchartBehavior);
                 this.async(function(){this.behavior.init(this)},0);
             }
@@ -52,7 +52,7 @@ Example :
  
 <dom-module id="base-ajax-json-jsonpath-datalet">
     <template>
-        <base-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-datalet>
+        <base-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-datalet>
     </template>
  
     <script src="static/js/vendor/jsonpath-0.8.5.js"></script>
@@ -64,41 +64,40 @@ Example :
                 text-decoration: underline;
             }
             #base_datalet_container {
-                /*display: flex;*/
                 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                /*color: #212121;*/
                 padding-top: 2px;
-                /*padding: 16px;*/
                 border-top: 2px solid #B6B6B6;
             }
             #base_datalet_rtp {
-                /*background-color: red;*/
                 display: flex;
                 padding-top: 4px;
             }
             #rtp {
-                /*width: 152px;*/
                 padding-top: 8px;
                 padding-right: 8px;
                 font-size: small;
             }
             #rtpalogo {
-                height:32px;
+                height: 32px;
                 width: 32px;
             }
             #base_datalet_spin {
-                height:64px;
+                height: 64px;
                 width: 100%;
+                margin-top: 64px;
             }
-            /*#base_datalet_info{*/
-                /*padding-top: 8px;*/
-                /*/!*background-color: green;*!/*/
-                /*width: 100%;*/
-                /*/!*font-size: small;*!/*/
-            /*}*/
+
             #base_datalet_source_link{
                 padding-top: 12px;
             }
+
+            #span_title{
+                font-size: small;
+            }
+
+            #span_description{
+                color: #727272;
+            }
         </style>
  
         <div id="base_datalet_imgWaitDatalet">
@@ -108,7 +107,7 @@ Example :
         <div id="base_datalet_container">
  
             <div id="base_datalet_title_description">
-                <span id="span_title" style="font-size: small"><b>{{title}}</b><span id="span_description" style="color: #727272"> - {{description}}</span></span>
+                <span id="span_title"><b>{{title}}</b> <span id="span_description">{{description}}</span></span>
             </div>
  
             <div id="base_datalet_source_link">
@@ -131,50 +130,9 @@ Example :
         BaseDatalet = Polymer({
             is: 'base-datalet',
  
-            properties: {
-
-                title : {
-                    type : String,
-                    value : ""
-                },
-
-                description : {
-                    type : String,
-                    value : ""
-                },
-
-                hideFooter : {
-                    type : Boolean,
-                    value : false
-                }
-
-            },
-
-            objectDatalet: {
-                /**
-                 * It contains the json data from async xhr call returned from core-ajax core component
-                 *
-                 * @attribute json_resultDatalet
-                 * @type object
-                 * @default 'null'.
-                 */
-                json_resultDatalet: {
-                    type: Object,
-                    value: {}
-                }
-            },
-
-            _setFooter: function() {
-                if (this.title == "" && this.description == "")
-                    this.$.base_datalet_title_description.innerHTML = "";
-                else if (this.description == "")
-                    this.$.span_description.innerHTML = "";
-
-                if (this.hideFooter) {
-                    this.$.base_datalet_source_link.innerHTML = "";
-                    this.$.base_datalet_rtp.innerHTML = "";
-                }
-
+            hideFooter: function() {
+                this.$.base_datalet_container.innerHTML = "";
+                this.$.base_datalet_container.style.border = 0;
             },
  
             /**
@@ -188,13 +146,14 @@ Example :
              *   from the entire URL and set the text content of the datalet footer.
              * @method ready
              */
-            ready: function(){
-                this._setFooter();
  
-                if(this.dataUrl != undefined) {
+            attached: function(){
+                if(this.title != "" && this.description != "")
+                    this.description = "- " + this.description;
+            },
  
-                    //cKan organized with or not catalog
-                    var queryInitial = this.dataUrl.substring(0,  this.dataUrl.indexOf("api")); //SOURCE
+            ready: function(){
+                if(this.dataUrl != undefined) {
  
                     var urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
                     this.$.base_datalet_source.innerHTML = urlSource;
@@ -204,101 +163,29 @@ Example :
                     //OpenDataSoft check
                     if(this.dataUrl.indexOf("/records/") > -1 )
                     {
-                        //Resourceid of a datalet
-                        var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
-                        var params  = this.decomponeQueryString(query);
-                        var resultIssyIdDatalet = params["dataset"];
-                        var resultIssyAPI = "explore/dataset/";
-                        var urlPageDatasetIssy = queryInitial + resultIssyAPI + resultIssyIdDatalet + "/";
-
-                        this.$.base_datalet_link.setAttribute("href", urlPageDatasetIssy);
+                        this.$.base_datalet_link.setAttribute("href", urlSource + "/explore/dataset/" + this.dataUrl.substring(this.dataUrl.indexOf("=")+1,this.dataUrl.indexOf("&")));
                     }
-                    else
+                    // CKAN
+                    else if(this.dataUrl.indexOf("datastore_search?resource_id") > -1 )
                     {
-                        //CKAN portal
-                        var urlDatalet;
-
-                        var apiIdResource = "resource_show?id=";
-
-                        //Resourceid of a datalet
-                        var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
-                        var params = this.decomponeQueryString(query);
-                        //CKAN
-                        var resultIdDatalet = params["resource_id"];
-
-                        //cKan organized with or not catalog
-                        var queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"), this.dataUrl.indexOf("datastore_search"));
-
-                        urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
-                        this.requestDataletData(urlDatalet);
+                        var comp = this;
+                        $.ajax({
+                            url: this.dataUrl.replace("datastore_search?resource_id", "resource_show?id"),
+                            dataType: "json",
+                            success: function(e){
+                                comp.$.base_datalet_link.setAttribute("href", urlSource + "/dataset/" + e.result.package_id + "/resource/" + e.result.id);
+                            }
+                        });
                     }
                 }
-
             },
+            
             /**
              * Set the domain url to show in the footer
              */
             setDomain: function(url){
                 this.$.domain.textContent = url;
             },
-            /**
-             * Get the (key, value)  query string parameters
-             **/
-            decomponeQueryString: function (querystring) {
-            // remove any preceding url and split
-            querystring = querystring.substring(querystring.indexOf('?')+1).split('&');
-            var params = {}, pair, d = decodeURIComponent;
-            // march and parse
-            for (var i = querystring.length - 1; i >= 0; i--) {
-                pair = querystring[i].split('=');
-                params[d(pair[0])] = d(pair[1]);
-            }
-            return params;
-            },
-            /**
-             * Make an AJAX call to the dataset URL to retrieve package_id
-             *
-             * @method urlDatalet
-             */
-            requestDataletData: function(urlDatalet){
-                var comp = this;
-                $.ajax({
-                    url: urlDatalet, //url con package
-                    dataType: "json",
-                    success: function(e){
-                        comp.handleDataletResponse(e);
-                    }
-                });
-            },
-            /**
-             * Called when core-ajax component receive the json data from called url.
-             *
-             * @method handleResponse
-             */
-            handleDataletResponse: function(e) {
-                this.objectDatalet.json_resultDatalet.value = e;
-                //packageId of a give datalet
-                packageIdDatalet = this.objectDatalet.json_resultDatalet.value.result.package_id;
-                resourceId = this.objectDatalet.json_resultDatalet.value.result.id;
-
-                //url complete of download
-                urlDatasetDownload = this.objectDatalet.json_resultDatalet.value.result.url;
-
-                if(this.dataUrl != undefined){
-                    //static url
-                    lastStringResourceId =  this.dataUrl.split("/")[5];
-                    resourceId  = lastStringResourceId.split('=')[1];
-                    var urlDatalet = this.dataUrl.split("/")[0]+ "//" + this.dataUrl.split("/")[2]  + "/dataset/" + packageIdDatalet +"/resource/" +resourceId;
-
-                    urlDatalet = urlDatasetDownload.replace(/\/download\/.*/, '');
-                    urlSource =  this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
-
-                    this.$.base_datalet_link.setAttribute("href", urlDatalet);
-                }
-            },
-
-
-
-        });
+         });
     </script>
 </dom-module>
 \ No newline at end of file
@@ -2,7 +2,7 @@
 @license
     The MIT License (MIT)
  
-    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+    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
@@ -74,6 +74,12 @@ var BaseDataletBehavior ={
     factoryImpl: function(data_url, fields) {
         this.data_url = data_url;
         this.fields   = fields;
+    },
+
+    setParameters: function(params)
+    {
+        this.title = params['title'];
+        this.description = params['description'];
     }
  
 };
 \ No newline at end of file
-/*
-@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.
-*/
-
-var BaseDataletBehavior ={
-
-    properties: {
-
-        /**
-         * It represent the dataset api url
-         *
-         * @attribute dataUrl
-         * @type string
-         * @default 'null'
-         */
-        dataUrl: {
-            type: String,
-            value: ""
-        },
-
-        /**
-         * It represents one or multiple fields selected by user
-         *
-         * @attribute fields
-         * @type Array
-         * @default empty
-         */
-        fields: {
-            type: String,
-            value: ""
-        },
-
-        /**
-         * The selected and transformed data you can use in presentation phase
-         *
-         * @attribute data
-         * @type Array
-         * @default empty
-         */
-        data: {
-            type: Array,
-            value: []
-        }
-
-    },
-
-    factoryImpl: function(data_url, fields) {
-        this.data_url = data_url;
-        this.fields   = fields;
-    }
-
-};
-
-var WorkcycleBehavior = {
-    /**
-     * A reference to Polymer object
-     *
-     */
-    _component: null,
-
-    /**
-     * Request data from source(e.g. CKAN by api) using some kind of technology(e.g. Ajax)
-     *
-     * @method requestData
-     */
-    requestData: function(){
-    },
-
-    /**
-     * Select the fields from data(typically json) previously retrieved by ajax request. The selection could be done by jsonPath but
-     * it depends on the representation data format(CKAN apies return a json representation of the dataset).
-     *
-     * @method selectData
-     */
-    selectData: function(){
-    },
-
-    /**
-     * Filter data previously selected. An example of filterting could be an expression such "fields > 30" or "fields = 'AAA'"
-     * If you are using jsonPath to select the datas you can apply an expression directly in the jsonPath query string.
-     *
-     * @method filterData
-     */
-    filterData: function(){
-    },
-
-    /**
-     * Transform the selected data in order to build the structure that the presentation phase needs.
-     *
-     * @method transformData
-     */
-    transformData: function(){
-    },
-
-    /**
-     * Build the object/s for presentation layer.
-     *
-     * @method presentData
-     */
-    presentData: function(){
-
-    },
-
-    /**
-     * This method represents the entire datalet workcycle.
-     *
-     * @method runWorkcycle
-     */
-    runWorkcycle: function() {
-        this.selectData();
-        this.filterData();
-        this.transformData();
-        this.presentData();
-    },
-
-    /**
-     * This method save the reference to the polymer object related to the datalet.
-     *
-     * @method init
-     */
-    init: function(component){
-        this._component = component;
-
-        if(this.properties.data.length == 0){
-            this.requestData();
-        }else{
-            this.transformData();
-            this.presentData();
-        }
-    }
-
-};
 \ No newline at end of file
@@ -59,7 +59,7 @@ Examples:
  
 <dom-module name="bubble3d-datalet">
     <template>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}"  fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}"  fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
     </template>
     <script>
  
@@ -59,7 +59,7 @@ Example:
             <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
             <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
         </table>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
     </template>
  
     <script>
@@ -50,7 +50,7 @@ Example:
  
 <dom-module id="columnchart-datalet">
     <template>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
     </template>
     <script>
  
@@ -64,7 +64,7 @@ Example:
             :host ::content #treemap_placeholder {
                 width: 100%;
                 height: 70%;
-                min-height: 500px;
+                /*min-height: 500px;*/
                 background: #ffffff;
                 position: relative;
             }
@@ -125,8 +125,7 @@ Example:
                 children : []
             },
  
-            transformData: function(e)
-            {
+            transformData: function(e){
                 var treemapData = [];
                 DatasetexplorerBehavior.map.name = this._component.title;
  
@@ -225,6 +224,8 @@ Example:
             },
  
             ready: function(){
+                $(this).find("base-datalet")[0].hideFooter();
+
                 this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatasetexplorerBehavior);
                 this.async(function(){this.behavior.init(this)},0);
             }
@@ -54,7 +54,7 @@ Example:
  
         <table id="datatable" class="stripe row-border" cellspacing="0" style="height: auto; width: auto;">
         </table>
-        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-jsonpath-datalet>
     </template>
  
     <script type="text/javascript" src="js/DataTables/datatables.js"></script>
@@ -49,7 +49,7 @@ Example:
 -->
 <dom-module id="donutpie3dchart-datalet">
     <template>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}"  fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}"  fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
     </template>
     <script>
  
@@ -121,6 +121,8 @@ Example:
             },
  
             ready: function(){
+                $(this).find("base-datalet")[0].hideFooter();
+
                 this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DynamicDatatableBehavior);
                 this.async(function(){this.behavior.init(this)}, 0);
             },
@@ -148,7 +148,6 @@ Example:
                 scale = (1.0);
                 //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
                 translate = [0, 0];
-                console.log("w: " + width + " h:" + height);
                 this.svg.transition()
                         .duration(750)
                         .attr("transform", "translate(" + translate + ")scale(" + scale +    ")")
@@ -237,7 +236,6 @@ Example:
  
             zoom: function() {
                 svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
-                console.log(d3.event.scale);
             },
  
             text: function (t)
@@ -361,7 +359,6 @@ Example:
                 g.nodes[0].x = this.width / 2;
                 g.nodes[0].y = this.height / 8;
                 this.buildGraph(g);
-                console.log(g.nodes.length);
             }
         });
     </script>
@@ -57,7 +57,7 @@ Example :
  
     <template>
         <div id="container" style="width:auto; height:auto;"></div>
-        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-jsonpath-datalet>
     </template>
  
     <script src="static/js/highcharts.js"></script>
@@ -82,6 +82,7 @@ Example :
                     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.
@@ -137,6 +138,9 @@ Example :
  
             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']});
@@ -147,7 +151,8 @@ Example :
                     return this.x + '<br/><br/><span style="fill:#7cb5ec" x="8" dy="15">●</span> ' + this.series.name + ': <b>' + this.y + ' ' + params['suffix'] + '</b>';
                 }
  
-            },
+            }
+
         };
  
         var HighchartsComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, HighchartsBehavior);
@@ -56,7 +56,7 @@ Example:
         </style>
  
         <div id="leafletjs"></div>
-        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-jsonpath-datalet>
  
     </template>
  
@@ -50,7 +50,7 @@ Example:
  
 <dom-module id="linechart-datalet">
     <template>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
     </template>
     <script>
  
@@ -49,7 +49,7 @@ Example:
 -->
 <dom-module id="piechart-datalet">
     <template>
-        <highcharts-datalet id="charts" data-url="{{dataUrl}}"  fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}"  fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></highcharts-datalet>
     </template>
     <script>
  
@@ -129,7 +129,7 @@ Example:
              *
              */
             ready: function(){
-                this.$.base.setDomain(this.url.split("/")[0] + "//" + this.url.split("/")[2]);
+                //this.$.base.setDomain(this.url.split("/")[0] + "//" + this.url.split("/")[2]);
             }
         });
     </script>
@@ -105,7 +105,7 @@ Example:
             }
         </style>
         <div id="treemap_placeholder"></div>
-        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}"></base-ajax-json-jsonpath-datalet>
     </template>
  
     <script src="../shared_js/d3.js"></script>