Commit ae17a8dc22d715d0939dabb59e8ea8a1c96d6811
1 parent
4e7eacf4
Controllet and datalets documentation upload
Showing
31 changed files
with
167 additions
and
326 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 27 | 36 | <link rel="import" href="../../bower_components/paper-styles/color.html"> |
| 28 | 37 | ... | ... |
controllets/draggable-element-controllet/draggable-element-controllet.html
| ... | ... | @@ -22,6 +22,14 @@ |
| 22 | 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | +<!-- | |
| 26 | +* Created by : | |
| 27 | +* Luigi Serra - luigser@gmail.com | |
| 28 | +* Andrea Petta - andrpet@gmail.com | |
| 29 | +* | |
| 30 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 31 | +* | |
| 32 | +--> | |
| 25 | 33 | |
| 26 | 34 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 27 | 35 | <link rel="import" href="../../bower_components/paper-styles/color.html"> | ... | ... |
controllets/items-slider-controllet/items-slider-controllet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 27 | 36 | <link rel="import" href="../../bower_components/paper-styles/color.html"> |
| 28 | 37 | ... | ... |
controllets/shared_js/behaviors/AjaxJsonControlletsDataRequestBehavior.js deleted
| 1 | -/** | |
| 2 | - * Created by Luigi Serra on 25/06/2015. | |
| 3 | - */ | |
| 4 | -var AjaxJsonControlletsDataRequestBehavior ={ | |
| 5 | - properties: { | |
| 6 | - /** | |
| 7 | - * It contains the json data from async xhr call returned from core-ajax core component | |
| 8 | - * | |
| 9 | - * @attribute json_results | |
| 10 | - * @type object | |
| 11 | - * @default 'null'. | |
| 12 | - */ | |
| 13 | - json_results: { | |
| 14 | - type: Object, | |
| 15 | - value: {} | |
| 16 | - } | |
| 17 | - }, | |
| 18 | - requestData: function(){ | |
| 19 | - | |
| 20 | - var comp = this; | |
| 21 | - | |
| 22 | - $.ajax({ | |
| 23 | - url: this._component.dataUrl, | |
| 24 | - dataType: "json", | |
| 25 | - success: function(e){ | |
| 26 | - comp.handleResponse(e); | |
| 27 | - } | |
| 28 | - }); | |
| 29 | - }, | |
| 30 | - /** | |
| 31 | - * Called when core-ajax component receive the json data from called url. It is responsible to | |
| 32 | - * extract data from response, coded in json, and refine it by using JsonPath queries in the query attribute. | |
| 33 | - * After this phase it parses the resulting object to populate the structure(keys,values) to fill the final table by using | |
| 34 | - * angularJs syntax. | |
| 35 | - * | |
| 36 | - * @method handleResponse | |
| 37 | - */ | |
| 38 | - handleResponse: function(e) { | |
| 39 | - this.properties.json_results.value = e; | |
| 40 | - } | |
| 41 | -} | |
| 42 | 0 | \ No newline at end of file |
controllets/text-element-controllet/text-element-controllet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 27 | 36 | <link rel="import" href="../../bower_components/paper-styles/color.html"> |
| 28 | 37 | ... | ... |
controllets/treeview-controllet/treeview-controllet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 27 | 36 | <link rel="import" href="../../bower_components/paper-styles/color.html"> |
| 28 | 37 | <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html"> | ... | ... |
datalets/barchart-datalet/barchart-datalet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> |
| 27 | 36 | |
| 28 | 37 | <!-- | ... | ... |
datalets/base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html
| ... | ... | @@ -22,6 +22,14 @@ |
| 22 | 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | +<!-- | |
| 26 | +* Created by : | |
| 27 | +* Luigi Serra - luigser@gmail.com | |
| 28 | +* Andrea Petta - andrpet@gmail.com | |
| 29 | +* | |
| 30 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 31 | +* | |
| 32 | +--> | |
| 25 | 33 | |
| 26 | 34 | <link rel="import" href="../base-datalet/base-datalet.html"> |
| 27 | 35 | ... | ... |
datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js
| ... | ... | @@ -23,6 +23,13 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | */ |
| 25 | 25 | |
| 26 | +/** Created by : | |
| 27 | +* Luigi Serra - luigser@gmail.com | |
| 28 | +* Andrea Petta - andrpet@gmail.com | |
| 29 | +* | |
| 30 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 31 | +*/ | |
| 32 | + | |
| 26 | 33 | |
| 27 | 34 | var AjaxJsonJsonPathBehavior = { |
| 28 | 35 | ... | ... |
datalets/base-csv-datalet/base-csv-datalet.html deleted
| 1 | -<!-- | |
| 2 | -@license | |
| 3 | - The MIT License (MIT) | |
| 4 | - | |
| 5 | - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 6 | - | |
| 7 | - Permission is hereby granted, free of charge, to any person obtaining a copy | |
| 8 | - of this software and associated documentation files (the "Software"), to deal | |
| 9 | - in the Software without restriction, including without limitation the rights | |
| 10 | - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| 11 | - copies of the Software, and to permit persons to whom the Software is | |
| 12 | - furnished to do so, subject to the following conditions: | |
| 13 | - | |
| 14 | - The above copyright notice and this permission notice shall be included in | |
| 15 | - all copies or substantial portions of the Software. | |
| 16 | - | |
| 17 | - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| 18 | - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
| 19 | - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
| 20 | - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
| 21 | - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
| 22 | - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
| 23 | - THE SOFTWARE. | |
| 24 | ---> | |
| 25 | - | |
| 26 | -<link rel="import" href="../../bower_components/polymer/polymer.html"> | |
| 27 | - | |
| 28 | -<dom-module id="base-csv-datalet"> | |
| 29 | - <template> | |
| 30 | - <style> | |
| 31 | - #footer { | |
| 32 | - position: relative; | |
| 33 | - bottom: 0; | |
| 34 | - width: 100%; | |
| 35 | - font-size: small; | |
| 36 | - } | |
| 37 | - | |
| 38 | - #rtpalogo{ | |
| 39 | - height:30px; | |
| 40 | - width: 30px; | |
| 41 | - } | |
| 42 | - </style> | |
| 43 | - | |
| 44 | - <b>Source : </b><span id="domain"></span><br><br> | |
| 45 | - <div id="footer">Powered by Route-to-PA  <a href="http://routetopa.eu/"><img src="static/images/rtpalogo.png" id="rtpalogo"></a></div><br> | |
| 46 | - </template> | |
| 47 | - | |
| 48 | - <script src="../shared_js/jquery-1.11.2.min.js"></script> | |
| 49 | - <script src="../shared_js/jsonpath-0.8.0.js"></script> | |
| 50 | - <script src="../shared_js/behaviors/BaseDataletBehaviors.js"></script> | |
| 51 | - <script src="../shared_js/behaviors/CSVDataRequestBehavior.js"></script> | |
| 52 | - | |
| 53 | - <script> | |
| 54 | - BaseDatalet = Polymer({ | |
| 55 | - is: 'base-csv-datalet', | |
| 56 | - ready: function(){ | |
| 57 | - this.$.domain.textContent = this.data_url.split("/")[0] + "//" + this.data_url.split("/")[2]; | |
| 58 | - } | |
| 59 | - }); | |
| 60 | - </script> | |
| 61 | -</dom-module> | |
| 62 | 0 | \ No newline at end of file |
datalets/base-csv-datalet/static/images/rtpalogo.png deleted
14.6 KB
datalets/base-datalet/base-datalet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 27 | 36 | |
| 28 | 37 | <!-- | ... | ... |
datalets/base-datalet/static/js/BaseDataletBehavior.js
| ... | ... | @@ -23,6 +23,13 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | */ |
| 25 | 25 | |
| 26 | +/** Created by : | |
| 27 | +* Luigi Serra - luigser@gmail.com | |
| 28 | +* Andrea Petta - andrpet@gmail.com | |
| 29 | +* | |
| 30 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 31 | +*/ | |
| 32 | + | |
| 26 | 33 | var BaseDataletBehavior ={ |
| 27 | 34 | |
| 28 | 35 | properties: { | ... | ... |
datalets/base-datalet/static/js/WorkcycleBehavior.js
| ... | ... | @@ -23,9 +23,12 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | */ |
| 25 | 25 | |
| 26 | -/** | |
| 27 | - * Created by Luigi Serra. | |
| 28 | - */ | |
| 26 | +/** Created by : | |
| 27 | +* Luigi Serra - luigser@gmail.com | |
| 28 | +* Andrea Petta - andrpet@gmail.com | |
| 29 | +* | |
| 30 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 31 | +*/ | |
| 29 | 32 | var WorkcycleBehavior = { |
| 30 | 33 | /** |
| 31 | 34 | * A reference to Polymer object | ... | ... |
datalets/column3Dchart-datalet/column3Dchart-datalet.html
| ... | ... | @@ -23,6 +23,16 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* Pina Palmieri - pinapalmieri@gmail.com | |
| 31 | +* | |
| 32 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 33 | +* | |
| 34 | +--> | |
| 35 | + | |
| 26 | 36 | |
| 27 | 37 | <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> |
| 28 | 38 | <script src="http://code.highcharts.com/highcharts-3d.js"></script> | ... | ... |
datalets/columnchart-datalet/columnchart-datalet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> |
| 27 | 36 | |
| 28 | 37 | <!-- | ... | ... |
datalets/datatable-datalet/datatable-datalet.html
| ... | ... | @@ -22,6 +22,14 @@ |
| 22 | 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | +<!-- | |
| 26 | +* Created by : | |
| 27 | +* Luigi Serra - luigser@gmail.com | |
| 28 | +* Andrea Petta - andrpet@gmail.com | |
| 29 | +* | |
| 30 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 31 | +* | |
| 32 | +--> | |
| 25 | 33 | |
| 26 | 34 | <link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> |
| 27 | 35 | ... | ... |
datalets/highcharts-datalet/highcharts-datalet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> |
| 27 | 36 | |
| 28 | 37 | <!-- | ... | ... |
datalets/leafletjs-datalet/leafletjs-datalet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> |
| 27 | 36 | |
| 28 | 37 | <!-- | ... | ... |
datalets/linechart-datalet/linechart-datalet.html
| ... | ... | @@ -23,6 +23,15 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 26 | 35 | <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> |
| 27 | 36 | |
| 28 | 37 | <!-- | ... | ... |
datalets/preview-datalet/preview-datalet.html
| ... | ... | @@ -22,6 +22,16 @@ |
| 22 | 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | + | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* | |
| 31 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 32 | +* | |
| 33 | +--> | |
| 34 | + | |
| 25 | 35 | <link rel="import" href="../base-datalet/base-datalet.html"> |
| 26 | 36 | |
| 27 | 37 | <!-- | ... | ... |
datalets/shared_js/behaviors/AjaxJsonDataRequestBehavior.js deleted
| 1 | -/** | |
| 2 | - * Created by Luigi Serra on 25/06/2015. | |
| 3 | - */ | |
| 4 | -var AjaxJsonDataRequestBehavior ={ | |
| 5 | - properties: { | |
| 6 | - /** | |
| 7 | - * It contains the json data from async xhr call returned from core-ajax core component | |
| 8 | - * | |
| 9 | - * @attribute json_results | |
| 10 | - * @type object | |
| 11 | - * @default 'null'. | |
| 12 | - */ | |
| 13 | - json_results: { | |
| 14 | - type: Object, | |
| 15 | - value: {} | |
| 16 | - } | |
| 17 | - }, | |
| 18 | - requestData: function(){ | |
| 19 | - | |
| 20 | - var comp = this; | |
| 21 | - | |
| 22 | - $.ajax({ | |
| 23 | - url: this._component.dataUrl, | |
| 24 | - dataType: "json", | |
| 25 | - success: function(e){ | |
| 26 | - comp.handleResponse(e); | |
| 27 | - } | |
| 28 | - }); | |
| 29 | - }, | |
| 30 | - /** | |
| 31 | - * Called when core-ajax component receive the json data from called url. It is responsible to | |
| 32 | - * extract data from response, coded in json, and refine it by using JsonPath queries in the query attribute. | |
| 33 | - * After this phase it parses the resulting object to populate the structure(keys,values) to fill the final table by using | |
| 34 | - * angularJs syntax. | |
| 35 | - * | |
| 36 | - * @method handleResponse | |
| 37 | - */ | |
| 38 | - handleResponse: function(e) { | |
| 39 | - this.properties.json_results.value = e; | |
| 40 | - this.runWorkcycle(); | |
| 41 | - }, | |
| 42 | - | |
| 43 | - getPropertyName: function(query){ | |
| 44 | - return query.substring(query.lastIndexOf("['") + 2, query.lastIndexOf("']") ); | |
| 45 | - } | |
| 46 | - | |
| 47 | -} | |
| 48 | 0 | \ No newline at end of file |
datalets/shared_js/behaviors/BaseDataletBehaviors.js deleted
| 1 | -/* | |
| 2 | - The MIT License (MIT) | |
| 3 | - | |
| 4 | - Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM | |
| 5 | - | |
| 6 | - Permission is hereby granted, free of charge, to any person obtaining a copy | |
| 7 | - of this software and associated documentation files (the "Software"), to deal | |
| 8 | - in the Software without restriction, including without limitation the rights | |
| 9 | - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| 10 | - copies of the Software, and to permit persons to whom the Software is | |
| 11 | - furnished to do so, subject to the following conditions: | |
| 12 | - | |
| 13 | - The above copyright notice and this permission notice shall be included in | |
| 14 | - all copies or substantial portions of the Software. | |
| 15 | - | |
| 16 | - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| 17 | - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
| 18 | - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
| 19 | - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
| 20 | - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
| 21 | - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
| 22 | - THE SOFTWARE. | |
| 23 | -*/ | |
| 24 | - | |
| 25 | -var BaseDataletBehavior ={ | |
| 26 | - | |
| 27 | - properties: { | |
| 28 | - | |
| 29 | - /** | |
| 30 | - * It represent the data url from CKAN api | |
| 31 | - * | |
| 32 | - * @attribute dataUrl | |
| 33 | - * @type string | |
| 34 | - * @default 'null' | |
| 35 | - */ | |
| 36 | - dataUrl: { | |
| 37 | - type: String, | |
| 38 | - value: "" | |
| 39 | - }, | |
| 40 | - /** | |
| 41 | - * It represents one or multiple fields selected by user | |
| 42 | - * | |
| 43 | - * @attribute fields | |
| 44 | - * @type Array | |
| 45 | - * @default empty | |
| 46 | - */ | |
| 47 | - fields:{ | |
| 48 | - type: Array, | |
| 49 | - value: [] | |
| 50 | - }, | |
| 51 | - /** | |
| 52 | - * The selected and transformed data you can use in presentation phase | |
| 53 | - * | |
| 54 | - * @attribute data | |
| 55 | - * @type Array | |
| 56 | - * @default empty | |
| 57 | - */ | |
| 58 | - data: { | |
| 59 | - type: Array, | |
| 60 | - value: [] | |
| 61 | - } | |
| 62 | - | |
| 63 | - }, | |
| 64 | - | |
| 65 | - factoryImpl: function(data_url, fields) { | |
| 66 | - this.data_url = data_url; | |
| 67 | - this.fields = fields; | |
| 68 | - } | |
| 69 | - | |
| 70 | -}; | |
| 71 | - | |
| 72 | -var WorkcycleBehavior = { | |
| 73 | - | |
| 74 | - _component: null, | |
| 75 | - /** | |
| 76 | - * Request data from source(e.g. CKAN by api) using some kind of technology(e.g. Ajax) | |
| 77 | - * | |
| 78 | - * @method requestData | |
| 79 | - */ | |
| 80 | - requestData: function(){ | |
| 81 | - | |
| 82 | - }, | |
| 83 | - | |
| 84 | - /** | |
| 85 | - * Select the fields from data(typically json) previously retrieved by ajax request. The selection could be done by jsonPath but | |
| 86 | - * it depends on the representation data format(CKAN apies return a json representation of the dataset). | |
| 87 | - * | |
| 88 | - * @method selectData | |
| 89 | - */ | |
| 90 | - selectData: function(){ | |
| 91 | - }, | |
| 92 | - | |
| 93 | - /** | |
| 94 | - * Filter data previously selected. An example of filterting could be an expression such "fields > 30" or "fields = 'AAA'" | |
| 95 | - * If you are using jsonPath to select the datas you can apply an expression directly in the jsonPath query string. | |
| 96 | - * | |
| 97 | - * @method filterData | |
| 98 | - */ | |
| 99 | - filterData: function(){ | |
| 100 | - }, | |
| 101 | - | |
| 102 | - /** | |
| 103 | - * Transform the selected data in order to build the structure that the presentation phase needs. | |
| 104 | - * | |
| 105 | - * @method transformData | |
| 106 | - */ | |
| 107 | - transformData: function(){ | |
| 108 | - }, | |
| 109 | - | |
| 110 | - /** | |
| 111 | - * Called when iron-ajax component receive the json data from called url. It is responsible to | |
| 112 | - * extract data from response, coded in json, and refine it by using JsonPath queries in the query attribute. | |
| 113 | - * After this phase it parses the resulting object to populate the structure(keys,values) to fill the final table by using | |
| 114 | - * angularJs syntax. | |
| 115 | - * | |
| 116 | - * @method handleResponse | |
| 117 | - */ | |
| 118 | - runWorkcycle: function() { | |
| 119 | - this.selectData(); | |
| 120 | - this.filterData(); | |
| 121 | - this.transformData(); | |
| 122 | - }, | |
| 123 | - | |
| 124 | - init: function(component){ | |
| 125 | - this._component = component; | |
| 126 | - this.requestData(); | |
| 127 | - } | |
| 128 | - | |
| 129 | -}; | |
| 130 | 0 | \ No newline at end of file |
datalets/shared_js/behaviors/CSVDataRequestBehavior.js deleted
| 1 | -/** | |
| 2 | - * Created by Luigi Serra on 25/06/2015. | |
| 3 | - */ | |
| 4 | -var CVSDataRequestBehavior = { | |
| 5 | - properties: { | |
| 6 | - /** | |
| 7 | - * It contains the json data from async xhr call returned from core-ajax core component | |
| 8 | - * | |
| 9 | - * @attribute json_results | |
| 10 | - * @type object | |
| 11 | - * @default 'null'. | |
| 12 | - */ | |
| 13 | - csv_results: { | |
| 14 | - type: Object, | |
| 15 | - value: {} | |
| 16 | - } | |
| 17 | - }, | |
| 18 | - requestData: function(){ | |
| 19 | - | |
| 20 | - var comp = this; | |
| 21 | - | |
| 22 | - $.ajax({ | |
| 23 | - url: this._component.dataUrl, | |
| 24 | - dataType: "text", | |
| 25 | - success: function(e){ | |
| 26 | - comp.handleResponse(e); | |
| 27 | - } | |
| 28 | - }); | |
| 29 | - }, | |
| 30 | - /** | |
| 31 | - * Called when core-ajax component receive the json data from called url. It is responsible to | |
| 32 | - * extract data from response, coded in json, and refine it by using JsonPath queries in the query attribute. | |
| 33 | - * After this phase it parses the resulting object to populate the structure(keys,values) to fill the final table by using | |
| 34 | - * angularJs syntax. | |
| 35 | - * | |
| 36 | - * @method handleResponse | |
| 37 | - */ | |
| 38 | - handleResponse: function(e) { | |
| 39 | - this.properties.csv_results.value = e; | |
| 40 | - this.runWorkcycle(); | |
| 41 | - } | |
| 42 | -}; | |
| 43 | 0 | \ No newline at end of file |
datalets/treemap-datalet/treemap-datalet.html
| ... | ... | @@ -23,6 +23,16 @@ |
| 23 | 23 | THE SOFTWARE. |
| 24 | 24 | --> |
| 25 | 25 | |
| 26 | +<!-- | |
| 27 | +* Created by : | |
| 28 | +* Luigi Serra - luigser@gmail.com | |
| 29 | +* Andrea Petta - andrpet@gmail.com | |
| 30 | +* Donato Pirozzi - donatopirozzi@gmail.com | |
| 31 | +* | |
| 32 | +* Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy | |
| 33 | +* | |
| 34 | +--> | |
| 35 | + | |
| 26 | 36 | <link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"> |
| 27 | 37 | |
| 28 | 38 | <!-- | ... | ... |
docs/ROUTETOPADataletDeveloperGuidev0.1.html
0 → 100644
| 1 | +<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url('https://themes.googleusercontent.com/fonts/css?kit=lhDjYqiy3mZ0x6ROQEUoUw');.lst-kix_caqenjpjbamt-2>li:before{content:"\0025a0 "}.lst-kix_caqenjpjbamt-1>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-3>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-0>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-4>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-6>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-5>li:before{content:"\0025a0 "}.lst-kix_caqenjpjbamt-7>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-8>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-0.start{counter-reset:lst-ctn-kix_cktmoc41t532-0 0}.lst-kix_w0lbiu9bsebc-1>li:before{content:"\0025cb "}.lst-kix_w0lbiu9bsebc-2>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-6.start{counter-reset:lst-ctn-kix_cktmoc41t532-6 0}.lst-kix_w0lbiu9bsebc-0>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-5>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-1.start{counter-reset:lst-ctn-kix_cktmoc41t532-1 0}.lst-kix_23werwvisbhd-0>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-7>li:before{content:"\0025cb "}.lst-kix_23werwvisbhd-1>li:before{content:"\0025cb "}.lst-kix_mwbvd56bd501-6>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-6>li:before{content:"\0025cf "}.lst-kix_23werwvisbhd-3>li:before{content:"\0025cf "}.lst-kix_23werwvisbhd-4>li:before{content:"\0025cb "}.lst-kix_w0lbiu9bsebc-3>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-5>li:before{content:"\0025a0 "}.lst-kix_mwbvd56bd501-7>li:before{content:"\0025cb "}.lst-kix_23werwvisbhd-2>li:before{content:"\0025a0 "}.lst-kix_mwbvd56bd501-8>li:before{content:"\0025a0 "}.lst-kix_w0lbiu9bsebc-4>li:before{content:"\0025cb "}.lst-kix_23werwvisbhd-7>li:before{content:"\0025cb "}.lst-kix_23werwvisbhd-8>li:before{content:"\0025a0 "}.lst-kix_23werwvisbhd-5>li:before{content:"\0025a0 "}.lst-kix_23werwvisbhd-6>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-8>li:before{content:"\0025a0 "}.lst-kix_cktmoc41t532-2>li{counter-increment:lst-ctn-kix_cktmoc41t532-2}ol.lst-kix_cktmoc41t532-7.start{counter-reset:lst-ctn-kix_cktmoc41t532-7 0}.lst-kix_cktmoc41t532-5>li{counter-increment:lst-ctn-kix_cktmoc41t532-5}.lst-kix_iy595p3cktj3-2>li:before{content:"\0025a0 "}.lst-kix_oia1ur76tkla-6>li:before{content:"\0025cf "}.lst-kix_oia1ur76tkla-4>li:before{content:"\0025cb "}.lst-kix_oia1ur76tkla-8>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-0>li:before{content:"\0025cf "}.lst-kix_z1db35cwkqzv-4>li:before{content:"\0025cb "}.lst-kix_iy595p3cktj3-6>li:before{content:"\0025cf "}ul.lst-kix_xpt451iyqej1-5{list-style-type:none}ul.lst-kix_xpt451iyqej1-4{list-style-type:none}ul.lst-kix_xpt451iyqej1-3{list-style-type:none}ul.lst-kix_xpt451iyqej1-2{list-style-type:none}.lst-kix_iy595p3cktj3-4>li:before{content:"\0025cb "}.lst-kix_cktmoc41t532-4>li{counter-increment:lst-ctn-kix_cktmoc41t532-4}ul.lst-kix_xpt451iyqej1-8{list-style-type:none}ul.lst-kix_xpt451iyqej1-7{list-style-type:none}ul.lst-kix_xpt451iyqej1-6{list-style-type:none}.lst-kix_z1db35cwkqzv-6>li:before{content:"\0025cf "}.lst-kix_xpt451iyqej1-5>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-8>li:before{content:"\0025a0 "}.lst-kix_iy595p3cktj3-8>li:before{content:"\0025a0 "}.lst-kix_cktmoc41t532-3>li{counter-increment:lst-ctn-kix_cktmoc41t532-3}.lst-kix_xpt451iyqej1-7>li:before{content:"\0025cb "}ol.lst-kix_cktmoc41t532-2.start{counter-reset:lst-ctn-kix_cktmoc41t532-2 0}ol.lst-kix_cktmoc41t532-5{list-style-type:none}ol.lst-kix_cktmoc41t532-6{list-style-type:none}ol.lst-kix_cktmoc41t532-7{list-style-type:none}ol.lst-kix_cktmoc41t532-8{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-8{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-6{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-7{list-style-type:none}ol.lst-kix_cktmoc41t532-0{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-4{list-style-type:none}.lst-kix_oia1ur76tkla-0>li:before{content:"\0025cf "}ol.lst-kix_cktmoc41t532-1{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-5{list-style-type:none}ol.lst-kix_cktmoc41t532-2{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-2{list-style-type:none}ol.lst-kix_cktmoc41t532-3{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-3{list-style-type:none}ol.lst-kix_cktmoc41t532-4{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-0{list-style-type:none}.lst-kix_oia1ur76tkla-2>li:before{content:"\0025a0 "}ul.lst-kix_w0lbiu9bsebc-1{list-style-type:none}.lst-kix_iy595p3cktj3-0>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-3>li:before{content:"\0025cf "}.lst-kix_z1db35cwkqzv-2>li:before{content:"\0025a0 "}.lst-kix_mwbvd56bd501-1>li:before{content:"\0025cb "}ol.lst-kix_cktmoc41t532-5.start{counter-reset:lst-ctn-kix_cktmoc41t532-5 0}.lst-kix_oldlfkxmjbuj-5>li:before{content:"\0025a0 "}.lst-kix_xpt451iyqej1-1>li:before{content:"\0025cb "}.lst-kix_oldlfkxmjbuj-7>li:before{content:"\0025cb "}.lst-kix_xpt451iyqej1-3>li:before{content:"\0025cf "}ol.lst-kix_cktmoc41t532-4.start{counter-reset:lst-ctn-kix_cktmoc41t532-4 0}ul.lst-kix_xpt451iyqej1-1{list-style-type:none}ul.lst-kix_xpt451iyqej1-0{list-style-type:none}ol.lst-kix_cktmoc41t532-3.start{counter-reset:lst-ctn-kix_cktmoc41t532-3 0}.lst-kix_cktmoc41t532-0>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-0,decimal) ". "}.lst-kix_cktmoc41t532-1>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-1,lower-latin) ". "}.lst-kix_oldlfkxmjbuj-4>li:before{content:"\0025cb "}ul.lst-kix_caqenjpjbamt-4{list-style-type:none}.lst-kix_cktmoc41t532-4>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-4,lower-latin) ". "}ul.lst-kix_caqenjpjbamt-3{list-style-type:none}ul.lst-kix_caqenjpjbamt-6{list-style-type:none}.lst-kix_oldlfkxmjbuj-3>li:before{content:"\0025cf "}ul.lst-kix_caqenjpjbamt-5{list-style-type:none}.lst-kix_j1pbyefbfchs-6>li:before{content:"\0025cf "}ul.lst-kix_caqenjpjbamt-8{list-style-type:none}.lst-kix_cktmoc41t532-2>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-2,lower-roman) ". "}.lst-kix_cktmoc41t532-6>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-6,decimal) ". "}ul.lst-kix_caqenjpjbamt-7{list-style-type:none}.lst-kix_cktmoc41t532-3>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-3,decimal) ". "}.lst-kix_cktmoc41t532-7>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-7,lower-latin) ". "}.lst-kix_oldlfkxmjbuj-2>li:before{content:"\0025a0 "}.lst-kix_j1pbyefbfchs-5>li:before{content:"\0025a0 "}.lst-kix_ucxv06xdi15q-7>li:before{content:"\0025cb "}.lst-kix_oldlfkxmjbuj-1>li:before{content:"\0025cb "}.lst-kix_j1pbyefbfchs-2>li:before{content:"\0025a0 "}.lst-kix_j1pbyefbfchs-4>li:before{content:"\0025cb "}.lst-kix_cktmoc41t532-5>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-5,lower-roman) ". "}.lst-kix_ucxv06xdi15q-8>li:before{content:"\0025a0 "}.lst-kix_oldlfkxmjbuj-0>li:before{content:"\0025cf "}.lst-kix_j1pbyefbfchs-3>li:before{content:"\0025cf "}ul.lst-kix_23werwvisbhd-7{list-style-type:none}ul.lst-kix_23werwvisbhd-8{list-style-type:none}.lst-kix_ucxv06xdi15q-1>li:before{content:"\0025cb "}.lst-kix_ucxv06xdi15q-3>li:before{content:"\0025cf "}.lst-kix_j1pbyefbfchs-0>li:before{content:"\0025cf "}.lst-kix_ucxv06xdi15q-2>li:before{content:"\0025a0 "}.lst-kix_ucxv06xdi15q-6>li:before{content:"\0025cf "}.lst-kix_j1pbyefbfchs-1>li:before{content:"\0025cb "}ul.lst-kix_23werwvisbhd-1{list-style-type:none}.lst-kix_cktmoc41t532-8>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-8,lower-roman) ". "}ul.lst-kix_23werwvisbhd-2{list-style-type:none}ul.lst-kix_23werwvisbhd-0{list-style-type:none}.lst-kix_ucxv06xdi15q-5>li:before{content:"\0025a0 "}ul.lst-kix_23werwvisbhd-5{list-style-type:none}ul.lst-kix_caqenjpjbamt-0{list-style-type:none}ul.lst-kix_23werwvisbhd-6{list-style-type:none}ul.lst-kix_23werwvisbhd-3{list-style-type:none}ul.lst-kix_caqenjpjbamt-2{list-style-type:none}ul.lst-kix_23werwvisbhd-4{list-style-type:none}.lst-kix_ucxv06xdi15q-4>li:before{content:"\0025cb "}ul.lst-kix_caqenjpjbamt-1{list-style-type:none}ul.lst-kix_ucxv06xdi15q-1{list-style-type:none}ul.lst-kix_ucxv06xdi15q-2{list-style-type:none}ul.lst-kix_ucxv06xdi15q-0{list-style-type:none}ul.lst-kix_ucxv06xdi15q-5{list-style-type:none}ul.lst-kix_ucxv06xdi15q-6{list-style-type:none}ul.lst-kix_ucxv06xdi15q-3{list-style-type:none}ul.lst-kix_ucxv06xdi15q-4{list-style-type:none}ul.lst-kix_ucxv06xdi15q-7{list-style-type:none}ul.lst-kix_ucxv06xdi15q-8{list-style-type:none}ol.lst-kix_cktmoc41t532-8.start{counter-reset:lst-ctn-kix_cktmoc41t532-8 0}.lst-kix_j1pbyefbfchs-7>li:before{content:"\0025cb "}.lst-kix_j1pbyefbfchs-8>li:before{content:"\0025a0 "}.lst-kix_cktmoc41t532-8>li{counter-increment:lst-ctn-kix_cktmoc41t532-8}.lst-kix_iy595p3cktj3-1>li:before{content:"\0025cb "}.lst-kix_iy595p3cktj3-3>li:before{content:"\0025cf "}.lst-kix_oia1ur76tkla-5>li:before{content:"\0025a0 "}.lst-kix_oia1ur76tkla-7>li:before{content:"\0025cb "}.lst-kix_z1db35cwkqzv-1>li:before{content:"\0025cb "}.lst-kix_z1db35cwkqzv-3>li:before{content:"\0025cf "}.lst-kix_iy595p3cktj3-5>li:before{content:"\0025a0 "}ul.lst-kix_oldlfkxmjbuj-0{list-style-type:none}.lst-kix_z1db35cwkqzv-5>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-7>li:before{content:"\0025cb "}ul.lst-kix_oldlfkxmjbuj-1{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-2{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-3{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-4{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-5{list-style-type:none}ul.lst-kix_oia1ur76tkla-1{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-6{list-style-type:none}ul.lst-kix_oia1ur76tkla-2{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-7{list-style-type:none}.lst-kix_xpt451iyqej1-4>li:before{content:"\0025cb "}.lst-kix_xpt451iyqej1-6>li:before{content:"\0025cf "}ul.lst-kix_oldlfkxmjbuj-8{list-style-type:none}ul.lst-kix_oia1ur76tkla-0{list-style-type:none}ul.lst-kix_oia1ur76tkla-5{list-style-type:none}ul.lst-kix_iy595p3cktj3-8{list-style-type:none}ul.lst-kix_oia1ur76tkla-6{list-style-type:none}ul.lst-kix_oia1ur76tkla-3{list-style-type:none}ul.lst-kix_oia1ur76tkla-4{list-style-type:none}ul.lst-kix_iy595p3cktj3-5{list-style-type:none}ul.lst-kix_iy595p3cktj3-4{list-style-type:none}.lst-kix_iy595p3cktj3-7>li:before{content:"\0025cb "}ul.lst-kix_iy595p3cktj3-7{list-style-type:none}ul.lst-kix_oia1ur76tkla-7{list-style-type:none}ul.lst-kix_iy595p3cktj3-6{list-style-type:none}.lst-kix_xpt451iyqej1-8>li:before{content:"\0025a0 "}ul.lst-kix_oia1ur76tkla-8{list-style-type:none}ul.lst-kix_iy595p3cktj3-1{list-style-type:none}ul.lst-kix_iy595p3cktj3-0{list-style-type:none}ul.lst-kix_iy595p3cktj3-3{list-style-type:none}ul.lst-kix_iy595p3cktj3-2{list-style-type:none}.lst-kix_cktmoc41t532-1>li{counter-increment:lst-ctn-kix_cktmoc41t532-1}.lst-kix_oia1ur76tkla-1>li:before{content:"\0025cb "}.lst-kix_oia1ur76tkla-3>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-4>li:before{content:"\0025cb "}ul.lst-kix_j1pbyefbfchs-8{list-style-type:none}.lst-kix_mwbvd56bd501-2>li:before{content:"\0025a0 "}ul.lst-kix_mwbvd56bd501-2{list-style-type:none}ul.lst-kix_mwbvd56bd501-3{list-style-type:none}ul.lst-kix_mwbvd56bd501-0{list-style-type:none}ul.lst-kix_mwbvd56bd501-1{list-style-type:none}.lst-kix_mwbvd56bd501-0>li:before{content:"\0025cf "}.lst-kix_cktmoc41t532-7>li{counter-increment:lst-ctn-kix_cktmoc41t532-7}.lst-kix_ucxv06xdi15q-0>li:before{content:"\0025cf "}ul.lst-kix_mwbvd56bd501-8{list-style-type:none}ul.lst-kix_mwbvd56bd501-6{list-style-type:none}ul.lst-kix_mwbvd56bd501-7{list-style-type:none}ul.lst-kix_mwbvd56bd501-4{list-style-type:none}ul.lst-kix_mwbvd56bd501-5{list-style-type:none}ul.lst-kix_j1pbyefbfchs-2{list-style-type:none}.lst-kix_cktmoc41t532-6>li{counter-increment:lst-ctn-kix_cktmoc41t532-6}ul.lst-kix_j1pbyefbfchs-3{list-style-type:none}ul.lst-kix_j1pbyefbfchs-0{list-style-type:none}ul.lst-kix_j1pbyefbfchs-1{list-style-type:none}.lst-kix_cktmoc41t532-0>li{counter-increment:lst-ctn-kix_cktmoc41t532-0}ul.lst-kix_j1pbyefbfchs-6{list-style-type:none}ul.lst-kix_j1pbyefbfchs-7{list-style-type:none}ul.lst-kix_j1pbyefbfchs-4{list-style-type:none}ul.lst-kix_j1pbyefbfchs-5{list-style-type:none}.lst-kix_oldlfkxmjbuj-6>li:before{content:"\0025cf "}ul.lst-kix_z1db35cwkqzv-2{list-style-type:none}ul.lst-kix_z1db35cwkqzv-3{list-style-type:none}ul.lst-kix_z1db35cwkqzv-0{list-style-type:none}.lst-kix_xpt451iyqej1-2>li:before{content:"\0025a0 "}ul.lst-kix_z1db35cwkqzv-1{list-style-type:none}.lst-kix_oldlfkxmjbuj-8>li:before{content:"\0025a0 "}ul.lst-kix_z1db35cwkqzv-8{list-style-type:none}ul.lst-kix_z1db35cwkqzv-6{list-style-type:none}ul.lst-kix_z1db35cwkqzv-7{list-style-type:none}ul.lst-kix_z1db35cwkqzv-4{list-style-type:none}ul.lst-kix_z1db35cwkqzv-5{list-style-type:none}.lst-kix_xpt451iyqej1-0>li:before{content:"\0025cf "}ol{margin:0;padding:0}.c25{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#3d85c6;border-left-style:solid;border-bottom-width:1pt;width:114.7pt;border-top-color:#000000;border-bottom-style:solid}.c49{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#3d85c6;border-left-style:solid;border-bottom-width:1pt;width:66.8pt;border-top-color:#000000;border-bottom-style:solid}.c46{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#3d85c6;border-left-style:solid;border-bottom-width:1pt;width:192.8pt;border-top-color:#000000;border-bottom-style:solid}.c47{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#3d85c6;border-left-style:solid;border-bottom-width:1pt;width:77.2pt;border-top-color:#000000;border-bottom-style:solid}.c64{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:66.8pt;border-top-color:#000000;border-bottom-style:solid}.c70{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:77.2pt;border-top-color:#000000;border-bottom-style:solid}.c72{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:114.7pt;border-top-color:#000000;border-bottom-style:solid}.c73{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:192.8pt;border-top-color:#000000;border-bottom-style:solid}.c45{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:225.7pt;border-top-color:#000000;border-bottom-style:solid}.c38{font-weight:normal;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c51{color:#ffffff;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c61{text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c27{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c34{background-color:#2b2b2b;font-size:8pt;font-family:"Courier New";color:#e8bf6a}.c36{background-color:#2b2b2b;font-size:8pt;font-family:"Courier New";color:#9876aa}.c22{background-color:#2b2b2b;font-size:8pt;font-family:"Courier New";color:#cc7832}.c23{background-color:#2b2b2b;font-size:9pt;font-family:"Courier New";color:#e8bf6a}.c60{padding-top:0pt;padding-bottom:0pt;line-height:1.15;text-align:left}.c13{font-size:12pt;font-family:"Trebuchet MS";color:#1155cc;text-decoration:underline}.c43{background-color:#ffffff;color:#1155cc;text-decoration:underline}.c19{padding-top:8pt;padding-bottom:0pt;page-break-after:avoid}.c26{font-size:12pt;font-family:"Trebuchet MS";color:#666666}.c77{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c39{background-color:#2b2b2b;font-family:"Courier New";color:#e8bf6a}.c28{padding-top:10pt;padding-bottom:0pt;page-break-after:avoid}.c54{background-color:#2b2b2b;font-family:"Courier New";color:#9876aa}.c57{background-color:#344134;font-family:"Courier New";color:#a9b7c6}.c21{border-collapse:collapse;margin-right:auto}.c74{background-color:#f9f2f4;font-size:10pt;color:#c7254e}.c0{font-size:9pt;font-family:"Consolas";color:#006666}.c1{orphans:2;widows:2;direction:ltr}.c52{font-size:21pt;font-family:"Trebuchet MS"}.c75{line-height:1.15;text-align:left}.c44{color:#1155cc;text-decoration:underline}.c53{background-color:#ffffff;color:#222222}.c11{margin-left:72pt;padding-left:0pt}.c67{font-size:8pt;color:#e8bf6a}.c18{padding:0;margin:0}.c24{font-size:13pt;font-family:"Trebuchet MS"}.c71{padding-bottom:0pt;text-align:center}.c69{background-color:#ffffff;color:#0086b3}.c59{font-size:16pt;font-family:"Trebuchet MS"}.c56{background-color:#ffffff;color:#000080}.c55{background-color:#ffffff;color:#dd1144}.c33{background-color:#ffffff;color:#212121}.c15{color:inherit;text-decoration:inherit}.c76{font-size:8pt;color:#cc7832}.c42{background-color:#ffffff;color:#333333}.c2{font-size:9pt;font-family:"Consolas"}.c3{margin-left:36pt;padding-left:0pt}.c10{margin-left:36pt}.c30{height:20pt}.c29{page-break-after:avoid}.c6{color:#660066}.c50{text-indent:36pt}.c12{line-height:1.5}.c14{height:0pt}.c8{color:#000088}.c31{line-height:1.0}.c58{text-align:justify}.c32{margin-left:18pt}.c63{background-color:#2b2b2b}.c35{font-size:12pt}.c5{color:#000000}.c20{font-weight:bold}.c7{height:11pt}.c37{height:14pt}.c65{padding-bottom:10pt}.c9{color:#880000}.c62{font-size:13pt}.c4{color:#666600}.c41{font-family:"Consolas"}.c68{font-family:"Trebuchet MS"}.c40{margin-left:54pt}.c16{font-style:italic}.c48{direction:ltr}.c66{text-decoration:underline}.c17{color:#008800}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c77"><p class="c1 c29 c71 title"><a name="h.pkp3s2laag2t"></a><span class="c52">ROUTE-TO-PA Datalet Developer Guide</span></p><p class="c1 c7 c65"><span></span></p><a href="#" name="ac16fd65acb962b3dcde43864cc851d202c45178"></a><a href="#" name="0"></a><table cellpadding="0" cellspacing="0" class="c21"><tbody><tr class="c14"><td class="c49" colspan="1" rowspan="1"><p class="c27 c48"><span class="c51 c20">Revision</span></p></td><td class="c47" colspan="1" rowspan="1"><p class="c27 c48"><span class="c20 c51">Date</span></p></td><td class="c46" colspan="1" rowspan="1"><p class="c27 c48"><span class="c51 c20">Authors</span></p></td><td class="c25" colspan="1" rowspan="1"><p class="c27 c48"><span class="c51 c20">Comments</span></p></td></tr><tr class="c14"><td class="c64" colspan="1" rowspan="1"><p class="c27 c48"><span class="c38 c5">0.1</span></p></td><td class="c70" colspan="1" rowspan="1"><p class="c27 c48"><span class="c5 c38">15.10.2015</span></p></td><td class="c73" colspan="1" rowspan="1"><p class="c27 c48"><span class="c38 c5">Andrea Petta, Luigi Serra</span></p></td><td class="c72" colspan="1" rowspan="1"><p class="c27 c48"><span class="c38 c5">First version</span></p></td></tr></tbody></table><p class="c1 c7"><span class="c35 c20"></span></p><p class="c1 c32"><span class="c13"><a class="c15" href="#h.couwk1phskca">An architectural overview</a></span></p><p class="c1 c32"><span class="c13"><a class="c15" href="#h.urv1litmuehw">Code control system</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.6d53fxfci78h">Prerequisites</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.3fwzssauigko">Git</a></span></p><p class="c1 c32"><span class="c13"><a class="c15" href="#h.kq0jx6d2gu42">Keywords</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.2xi4iyxti3it">Web Component</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.waf9mw9uy47v">Polymer</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.oylshnr4dqms">webcomponents.js polyfills</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.wtrwkodajjel">Datalet</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.oa5t1t1cc2mn">Datalet lifecycle</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.qor0wy2nd780">Controllet</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.c8d89fu6xb9y">DatalEts Ecosystem Provider (DEEP)</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.juucc2j3piae">DEEPCLIENT</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.k19gs218be3l">DEEPCLIENT Usage:</a></span></p><p class="c1 c32"><span class="c13"><a class="c15" href="#h.pz7vvqc2atb">Components Tutorial (Polymer 1.0)</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.ig6fal8a8s2x">A behaviors based architecture</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.23494m888vls">An example of datalet for Highchart js library</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.qqdl4o86ucxr">Ajax-Json-JsonPath behavior</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.lmehzpjkgz75">Base datalet</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.6otvlqmjxt9s">base-ajax-json-jsonpath-datalet Datalet</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.5kn6d9gehrxp">Highcharts component</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.ns7fynbyet5s">Linechart datalet</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.ve1g902t8v">Barchart datalet</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.l8rhx6bh9kf">Datatable-datalet</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.p6eipyeci0pi">Component documentation</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.hchmkvzcaha3">Deploy a new component</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.biecd569lsp">Datalet directory structure</a></span></p><p class="c1 c40"><span class="c13"><a class="c15" href="#h.8vkbn4c7d1kb">Deploy</a></span></p><p class="c1 c32"><span class="c13"><a class="c15" href="#h.j1ju11botx5f">MISC</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.lj7afoxzjwpx">Integrated Development Environment: phpStorm</a></span></p><p class="c1 c10"><span class="c13"><a class="c15" href="#h.dj5v4msbbn4q">Useful Links</a></span></p><h1 class="c28 c1 c30"><a name="h.s3f4husqykcg"></a></h1><hr style="page-break-before:always;display:none;"><h1 class="c28 c1 c30"><a name="h.njs1zyw12f7z"></a></h1><h1 class="c28 c1"><a name="h.couwk1phskca"></a><span class="c59">An architectural overview</span></h1><p class="c1 c7"><span class="c20 c62"></span></p><p class="c1"><span>We’ll briefly introduce our Datalet architectural design. </span></p><p class="c1 c7"><span></span></p><p class="c1"><span>We have three actors: </span></p><ul class="c18 lst-kix_oia1ur76tkla-0 start"><li class="c1 c3"><span>client page that exploit DEEP-Client functionality</span></li><li class="c1 c3"><span>DEEP (DatalEts Ecosystem Provider)</span></li><li class="c1 c3"><span>DEEP-Component</span></li></ul><p class="c1 c7"><span></span></p><p class="c1"><span>The DEEP-Client ask to DEEP for a specific Datalet, DEEP responds with the information necessary for the Datalet inclusion, the DEEP-Client retrieve the Datalet from DEEP-Component and include it into the page.</span></p><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 342.67px;"><img alt="SPOD__1_.png" src="images/image00.png" style="width: 624.00px; height: 342.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><ul class="c18 lst-kix_z1db35cwkqzv-0 start"><li class="c1 c3 c31"><span class="c53">A HTML web page that dynamically includes webcomponents must include the </span><span class="c53 c20">DEEPCLIENT </span><span class="c53">Javascript library, configured with the URL of the DEEP repository.</span></li><li class="c1 c3 c31"><span class="c53">In the above image, a web page contains a </span><span class="c53 c20">data-table</span><span class="c53"> webcomponent that is configured with a </span><span class="c74 c41">data_url</span><span class="c53"> elements (an URL to a data-source) and a </span><span class="c41 c74">params</span><span class="c53"> element (that may contain configuration parameters as requested by the webcomponent).</span></li><li class="c1 c3 c31"><span class="c53">DEEPCLIENT contacts DEEP and asks for the location of the data-table webcomponent.</span></li><li class="c1 c3 c31"><span class="c53">DEEP answers with the complete URL where the Client can download the data-table component.</span></li><li class="c1 c3 c31"><span class="c53">DEEPCLIENT sends a request to the aforementioned webcomponent URL and downloads the data-table webcomponent's code. We say that webcomponents are hosted by a DEEPCOMPONENT repository (basically a web server compatible with HTTP/Ajax that serves webcomponents' HTML code).</span></li><li class="c1 c3 c31"><span class="c53">Once downloaded the data-table webcomponent's code can be placed in the HTML client page and rendered within the browser.</span></li></ul><p class="c1 c7 c12"><span class="c53"></span></p><h1 class="c28 c1"><a name="h.urv1litmuehw"></a><span class="c59">Code control system</span></h1><h2 class="c28 c1 c58"><a name="h.6d53fxfci78h"></a><span class="c35 c20">Prerequisites</span></h2><p class="c1 c7"><span></span></p><ul class="c18 lst-kix_w0lbiu9bsebc-0 start"><li class="c1 c3"><span>Web server with PHP support (DEEP is currently developed in PHP)</span></li><li class="c1 c3"><span>Git client</span></li></ul><h2 class="c28 c1"><a name="h.3fwzssauigko"></a><span class="c20 c62">Git</span></h2><p class="c1 c7"><span></span></p><p class="c1 c58"><span>Go to </span><span class="c44"><a class="c15" href="https://www.google.com/url?q=http://service.routetopa.eu:7480/users/sign_in&sa=D&usg=AFQjCNGrCFMrZzF4Ao1w1RrmCkv-Dw-s2Q">http://service.routetopa.eu:7480/users/sign_in</a></span><span> and create an account.</span></p><p class="c1 c58"><span>Send an email to GIT system administrator (specifying your email account on GIT) to be added into </span><span class="c20">WebCompDev </span><span>group.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span>From terminal:</span></p><p class="c1 c7"><span></span></p><p class="c1"><span>$ git config --global user.name “YOUR NAME”</span></p><p class="c1"><span>$ git config --global user.mail “YOUR EMAIL ADDRESS”</span></p><p class="c1"><span> </span></p><p class="c1"><span>Create a directory inside your public HTML web server directory, then :</span></p><p class="c1 c7"><span></span></p><p class="c1"><span>$ git clone http://service.routetopa.eu:7480/isislab/DEEP.git</span></p><p class="c1"><span>$ git clone http://service.routetopa.eu:7480/isislab/DEEPCLIENT.git</span></p><p class="c1"><span>$ git clone http://service.routetopa.eu:7480/WebCompDev/COMPONENTS.git</span></p><p class="c1 c7"><span></span></p><p class="c1"><span>now in your web server's local directory there are 3 new directory DEEP, DEEPCLIENT, COMPONENTS. </span></p><p class="c1 c7"><span></span></p><p class="c1"><span>Now we have to configure DEEP and DEEPCLIENT to work correctly on your environment.</span></p><p class="c1"><span>In DEEP directory edit file datalets.xml. Substitute the <components_repository_url_reference> value with the full URL of COMPONENTS/datalets just cloned, repeat the same operation for controllets.xml.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span>In DEEPCLIENT edit file index.html and substitute ComponentService.deep_url with the correct DEEP URL.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span>Now you can test the Datalet demo pointing the browser to DEEPCLIENT/index.html</span></p><p class="c1 c7"><span></span></p><hr style="page-break-before:always;display:none;"><p class="c1 c7"><span></span></p><h1 class="c28 c1"><a name="h.kq0jx6d2gu42"></a><span class="c59">Keywords</span></h1><p class="c1 c7"><span class="c20"></span></p><h2 class="c28 c1"><a name="h.2xi4iyxti3it"></a><span class="c24 c20">Web Component </span></h2><p class="c1"><span>Are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications.<br>Web Components consist of 4 main elements which can be used separately or all together:</span></p><ul class="c18 lst-kix_ucxv06xdi15q-0 start"><li class="c1 c3"><span>Custom Elements</span></li><li class="c1 c3"><span>Shadow DOM</span></li><li class="c1 c3"><span>HTML Imports</span></li><li class="c1 c3"><span>HTML Templates</span></li></ul><h2 class="c28 c1"><a name="h.waf9mw9uy47v"></a><span class="c24 c20">Polymer </span></h2><p class="c1"><span>The Polymer library developed by Google is designed to make easier and faster for developers to create reusable components for the modern web.</span></p><p class="c1 c7"><span></span></p><h2 class="c28 c1"><a name="h.oylshnr4dqms"></a><span class="c24 c20">webcomponents.js polyfills</span></h2><p class="c1"><span>Are a set of polyfills built on top of the Web Components specifications. It makes possible for developers to use these standards today across all modern browsers. As these technologies are implemented in browsers, the polyfills will shrink and you'll gain the benefits of native implementations. webcomponents.js automatically detects native support and switches to the fast path when available. Your elements seamlessly start relying on the native implementation.</span></p><p class="c1 c7"><span class="c20"></span></p><h2 class="c28 c1"><a name="h.wtrwkodajjel"></a><span class="c24 c20">Datalet</span></h2><p class="c1"><span>It‘s responsible for data retrieving, filtering and visualization. From technological point of view it’s a web component built with </span><span class="c16">polymer library</span><span>. In our architecture each Datalet inherit from a base web component: base-datalet. </span></p><p class="c1"><span>The base-datalet have two main attributes: data_url and query. The data_url attribute specify the data url from which to take data. This data should be json formatted and available by ajax request. The query attribute is a string which represent a selection and, optionally, filtering to apply to retrieved data. </span></p><p class="c1 c7"><span></span></p><h3 class="c19 c1 c10"><a name="h.oa5t1t1cc2mn"></a><span class="c26 c20">Datalet lifecycle</span></h3><p class="c1 c10 c7"><span class="c20"></span></p><p class="c1 c10"><span>Each Datalet follow this lifecycle inherit from base-datalet:</span></p><p class="c1 c10 c7"><span></span></p><ol class="c18 lst-kix_cktmoc41t532-0 start" start="1"><li class="c1 c11"><span>Data retrieving through an ajax request</span></li><li class="c1 c11"><span>Data selection </span></li><li class="c1 c11"><span>Data filtering (optional)</span></li><li class="c1 c11"><span>Data transformation </span></li><li class="c1 c11"><span>Data presentation</span></li></ol><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p><p class="c1 c7"><span class="c20"></span></p><p class="c1 c7"><span class="c20"></span></p><h2 class="c28 c1"><a name="h.qor0wy2nd780"></a><span class="c20 c24">Controllet </span></h2><p class="c1"><span>It’s a web component created with Polymer library that implements control behaviour like form, slider, etc. It generally use a set of polymer core elements to realize a more complex component using composition paradigm.</span></p><p class="c1 c7"><span class="c20"></span></p><h2 class="c28 c1"><a name="h.c8d89fu6xb9y"></a><span class="c24 c20">DatalEts Ecosystem Provider (DEEP)</span></h2><p class="c1"><span>The DatalEts Ecosystem Provider (DEEP) is a RESTful web service written in PHP. It make available a public discovery service that retrieve all the Datalet available into the system and a service call that provide a specific Datalet.</span></p><p class="c1 c7"><span></span></p><h2 class="c28 c1"><a name="h.juucc2j3piae"></a><span class="c24 c20">DEEPCLIENT</span></h2><p class="c1"><span>Is a simple javascript library that allows the connection with DEEP and the inclusion of a Datalet/Controllet within a HTML page.</span></p><p class="c1 c7"><span></span></p><h3 class="c19 c1"><a name="h.k19gs218be3l"></a><span class="c20 c26">DEEPCLIENT Usage: </span></h3><p class="c1 c7"><span></span></p><p class="c1"><span>This is a minimal example of deep client usage. </span></p><p class="c1 c7"><span class="c56 c20 c16"></span></p><p class="c1"><span class="c2 c8"><html></span><span class="c2 c5"><br></span><span class="c2 c8"><head></span></p><p class="c1"><span class="c2 c8"><script</span><span class="c2 c5"> </span><span class="c2 c6">type</span><span class="c2 c4">=</span><span class="c2 c17">"text/javascript"</span><span class="c2 c5"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"js/jquery-1.11.2.min.js"</span><span class="c2 c8">></script></span><span class="c2 c5"><br></span><span class="c2 c8"><script</span><span class="c2 c5"> </span><span class="c2 c6">type</span><span class="c2 c4">=</span><span class="c2 c17">"text/javascript"</span><span class="c2 c5"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"js/webcomponents.js"</span><span class="c2 c8">></script></span><span class="c2 c5"><br></span><span class="c2 c8"><script</span><span class="c2 c5"> </span><span class="c2 c6">type</span><span class="c2 c4">=</span><span class="c2 c17">"text/javascript"</span><span class="c2 c5"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"js/deepClient.js"</span><span class="c2 c8">></script></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><script</span><span class="c2 c5"> </span><span class="c2 c6">type</span><span class="c2 c4">=</span><span class="c2 c17">"text/javascript"</span><span class="c2 c8">></span><span class="c2 c5"><br> jQuery(document).ready(function($) {<br> var datalet_params =</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">{</span><span class="c2 c5"><br> component </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"DATALET_NAME"</span><span class="c2 c4">, </span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">params</span><span class="c2 c5"> </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c4">{</span><span class="c2 c5"><br> data</span><span class="c2 c4">-</span><span class="c2 c5">url </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"DATA_URL",</span></p><p class="c1 c10 c50"><span class="c2 c5">layou</span><span class="c2 c4">-</span><span class="c2 c5">param</span><span class="c2 c4">-</span><span class="c0">1</span><span class="c2 c5"> </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"LAYOUT-VALUE",</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">}</span><span class="c2 c5"><br> fields </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">Array</span><span class="c2 c4">(</span><span class="c2 c17">"FIELD1"</span><span class="c2 c4">,</span><span class="c2 c5"> </span><span class="c2 c17">"FIELD2"</span><span class="c2 c4">),</span><span class="c2 c5"><br> placeHolder </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"HTML_PLACEHOLDER"</span></p><p class="c1"><span class="c2 c4">};</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c6">ComponentService</span><span class="c2 c4">.</span><span class="c2 c5">deep_url </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c17">'DEEP_URL'</span><span class="c2 c4">;</span><span class="c2 c5"><br> </span><span class="c2 c6">ComponentService</span><span class="c2 c4">.</span><span class="c2 c5">getComponent</span><span class="c2 c4">(</span><span class="c2 c5">datalet_params</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2 c5"><br> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2 c5"><br> </span><span class="c2 c8"></script></span></p><p class="c1"><span class="c2 c8"></head></span></p><p class="c1"><span class="c2 c8"><body></span></p><p class="c1"><span class="c2 c8"><div</span><span class="c2 c5"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"HTML_PLACEHOLDER"</span><span class="c2 c8">></div></span></p><p class="c1"><span class="c2 c8"></body></span></p><p class="c1"><span class="c2 c8"></html></span></p><p class="c1 c7"><span class="c56 c16"></span></p><p class="c1 c7"><span></span></p><p class="c1"><span>We create an empty HTML document with a single DIV. On document ready event we create a datalet_params object, this object contains information for Datalet retrieving and initialization.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span>datalet_params contains :</span></p><ul class="c18 lst-kix_iy595p3cktj3-0 start"><li class="c1 c3"><span class="c16">component :</span><span> the Datalet name to be sent to DEEP (Eg. </span><span class="c55">datatable-datalet</span><span>)</span></li><li class="c1 c3"><span class="c16">params.data-url (optional) :</span><span> the datasource URL (Eg.</span><span class="c43"><a class="c15" href="https://www.google.com/url?q=http://demo.ckan.org/api/action/datastore_search?resource_id%3D8324a4c9-66d6-47bf-a898-94237cc39b9f%26limit%3D50&sa=D&usg=AFQjCNGkCQWc7y9Rs22UreQdnCtpPZYVFw">http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50</a></span><span>)</span></li><li class="c1 c3"><span class="c16">params.layout-params (optional)</span><span>: e.g. chart title, axis labels </span></li><li class="c1 c3"><span class="c16">fields :</span><span> an array with user selected fields from datasource (Eg. </span><span class="c69">Array</span><span class="c42">(</span><span class="c55">"Supplier"</span><span class="c42">, </span><span class="c55">"Amount"</span><span class="c42">)</span><span>)</span></li><li class="c1 c3"><span class="c16">placeHolder :</span><span> the ID of the DOM element where place the Datalet </span></li></ul><p class="c1 c7"><span></span></p><p class="c1"><span class="c42 c16">ComponentService.getComponent </span><span>function</span><span class="c42 c16"> </span><span>take a datalet_params object as parameter. This function is responsible for Datalet info retrieving from DEPP and Datalet/Controllet code retrieving from DEEPCOMPONENTS. Once the Datalet/Controllet code is available DEEPCLIENT add the Datalet to the document DOM and initialize the Datalet with the </span><span class="c16">params </span><span>parameters. The Datalet/Controllet will use the fields data for the selection step.</span></p><p class="c1"><span>Now the Datalet is able to complete its lifecycle.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span>The programmer must specify the DEEP endpoint through the variable </span><span class="c42 c16">ComponentService.deep_url.</span><span><br></span><span>e.g.: ComponentService.deep_url = 'http://deep.routetopa.eu/DEEP/';</span></p><hr style="page-break-before:always;display:none;"><p class="c1 c7"><span></span></p><h1 class="c28 c1"><a name="h.pz7vvqc2atb"></a><span class="c59">Components Tutorial (Polymer 1.0)</span></h1><p class="c1"><span class="c20">[Knowledge required : javascript, html, Polymer 1.0]</span></p><p class="c1 c7"><span></span></p><h2 class="c28 c1"><a name="h.ig6fal8a8s2x"></a><span class="c24 c20">A behaviors based architecture </span></h2><p class="c1 c7"><span></span></p><p class="c1"><span>Since Polymer 1.0 doesn’t support components inheritance, we provide a way to have it in datalets, waiting for it in the next Polymer version.</span></p><p class="c1"><span>We provide a bundle of objects that implements all behaviors we want our datalets have. They are divided in two categories : BaseDataletsBehaviors and CustomDataletBehaviors. </span></p><p class="c1"><span>The BaseDataletBehaviors define the lifecycle for all Datalets. Every lifecycle step in BaseDataletBehaviors is implemented in the CustomDataletBehaviors. This mechanism provides a components hierarchy that standardize Datalet production and make reusable common behaviors.</span></p><p class="c1"><span> </span></p><p class="c1"><span>The BaseDataletBehaviors are:</span></p><ul class="c18 lst-kix_caqenjpjbamt-0 start"><li class="c1 c3"><span>BaseDataletBehavior</span></li><li class="c1 c3"><span>WorkcycleBehavior</span></li></ul><p class="c1 c7"><span></span></p><p class="c1"><span>The BaseDataletBehavior define the mandatory attributes that all datalet must have :</span></p><p class="c1 c7"><span></span></p><ul class="c18 lst-kix_mwbvd56bd501-0 start"><li class="c1 c3"><span class="c16">data_url (string) : </span><span>the URL used to get the data from the Open Data Provider (e.g. the CKAN API).</span></li><li class="c1 c3"><span class="c16">fields (String)</span><span>: it represents a JSON array of user selected dataset fields.</span></li><li class="c1 c3"><span class="c16">data (array): </span><span> data structure that store the data retrieved from Open Data Provider.</span></li></ul><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">BaseDataletBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> properties</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">It</span><span class="c2"> represent the data url </span><span class="c2 c8">from</span><span class="c2"> CKAN api</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@attribute</span><span class="c2"> dataUrl</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@type</span><span class="c2"> </span><span class="c2 c8">string</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@default</span><span class="c2"> </span><span class="c2 c17">'null'</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> dataUrl</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">""</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">It</span><span class="c2"> represents one </span><span class="c2 c8">or</span><span class="c2"> multiple fields selected </span><span class="c2 c8">by</span><span class="c2"> user</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@attribute</span><span class="c2"> fields</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@type</span><span class="c2"> </span><span class="c2 c6">String</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@default</span><span class="c2"> empty</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> fields</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">""</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">The</span><span class="c2"> selected </span><span class="c2 c8">and</span><span class="c2"> transformed data you can </span><span class="c2 c8">use</span><span class="c2"> </span><span class="c2 c8">in</span><span class="c2"> presentation phase</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@attribute</span><span class="c2"> data</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@type</span><span class="c2"> </span><span class="c2 c6">Array</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@default</span><span class="c2"> empty</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> data</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">Array,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c4">[]</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> factoryImpl</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(</span><span class="c2">data_url</span><span class="c2 c4">,</span><span class="c2"> fields</span><span class="c2 c4">)</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data_url </span><span class="c2 c4">=</span><span class="c2"> data_url;</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">fields </span><span class="c2 c4">=</span><span class="c2"> fields;</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c4">};</span></p><p class="c1 c7"><span class="c22 c20"></span></p><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p><p class="c1"><span>The WorkcycleBehavior implements the workcycle of each datalets, composed by this steps :</span></p><p class="c1 c7"><span></span></p><ul class="c18 lst-kix_oldlfkxmjbuj-0 start"><li class="c1 c3"><span class="c16">Get the data</span><span> </span><span class="c16">from a source</span><span> : It’s responsible for data retrieving from an Open Data Platform. It’s the starting point of Datalet work-cycle.</span></li><li class="c1 c3"><span class="c16">Select a subset of fields from the data</span><span> : this operation is data format dependent. It’s responsible for extract a query related subset of information from the entire dataset. An multidimensional array will be made available for the transformation step.</span></li><li class="c1 c3"><span class="c16">Filter </span><span>the data by applying logical operation( <, >, =, <=, >=, etc.): this function is designed to apply logical operation to the data created in the selection step (this step and the previous one could be merged together).</span></li><li class="c1 c3"><span class="c16">Transform </span><span>data in order to obtain a coherent data rapresentation</span></li><li class="c1 c3"><span class="c16">Present data </span><span>the data for a specific visualization : here we create the data structure necessary for visualization libraries initialization. At this point could be an interaction with component’s DOM. </span></li></ul><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">WorkcycleBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> _component</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">null,</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">Request</span><span class="c2"> data </span><span class="c2 c8">from</span><span class="c2"> source</span><span class="c2 c4">(</span><span class="c2">e</span><span class="c2 c4">.</span><span class="c2">g</span><span class="c2 c4">.</span><span class="c2"> CKAN </span><span class="c2 c8">by</span><span class="c2"> api</span><span class="c2 c4">)</span><span class="c2"> </span><span class="c2 c8">using</span><span class="c2"> some kind of technology</span><span class="c2 c4">(</span><span class="c2">e</span><span class="c2 c4">.</span><span class="c2">g</span><span class="c2 c4">.</span><span class="c2"> </span><span class="c2 c6">Ajax)</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> requestData</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> requestData</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">Select</span><span class="c2"> the fields </span><span class="c2 c8">from</span><span class="c2"> data</span><span class="c2 c4">(</span><span class="c2">typically json</span><span class="c2 c4">)</span><span class="c2"> previously retrieved </span><span class="c2 c8">by</span><span class="c2"> ajax request</span><span class="c2 c4">.</span><span class="c2"> </span><span class="c2 c6">The</span><span class="c2"> selection could be </span><span class="c2 c8">done</span><span class="c2"> </span><span class="c2 c8">by</span><span class="c2"> jsonPath but</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> it depends on the representation data format</span><span class="c2 c4">(</span><span class="c2">CKAN apies </span><span class="c2 c8">return</span><span class="c2"> a json representation of the dataset</span><span class="c2 c4">).</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> selectData</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> selectData</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">Filter</span><span class="c2"> data previously selected</span><span class="c2 c4">.</span><span class="c2"> </span><span class="c2 c6">An</span><span class="c2"> example of filterting could be an expression such </span><span class="c2 c17">"fields > 30"</span><span class="c2"> </span><span class="c2 c8">or</span><span class="c2"> </span><span class="c2 c17">"fields = 'AAA'"</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">If</span><span class="c2"> you are </span><span class="c2 c8">using</span><span class="c2"> jsonPath to </span><span class="c2 c8">select</span><span class="c2"> the datas you can apply an expression directly </span><span class="c2 c8">in</span><span class="c2"> the jsonPath query </span><span class="c2 c8">string.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> filterData</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> filterData</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">Transform</span><span class="c2"> the selected data </span><span class="c2 c8">in</span><span class="c2"> order to build the structure that the presentation phase needs.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> transformData</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> transformData</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">Build</span><span class="c2"> the </span><span class="c2 c8">object</span><span class="c2 c4">/</span><span class="c2">s </span><span class="c2 c8">for</span><span class="c2"> presentation layer.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> presentData</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> presentData</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">This</span><span class="c2"> method represents the entire datalet workcycle.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> runWorkcycle</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> runWorkcycle</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">()</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">selectData</span><span class="c2 c4">();</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">filterData</span><span class="c2 c4">();</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">transformData</span><span class="c2 c4">();</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">presentData</span><span class="c2 c4">();</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">This</span><span class="c2"> method save the reference to the polymer </span><span class="c2 c8">object</span><span class="c2"> related to the datalet.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> init</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> init</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(</span><span class="c2">component</span><span class="c2 c4">){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">_component </span><span class="c2 c4">=</span><span class="c2"> component;</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">requestData</span><span class="c2 c4">();</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c4">};</span></p><p class="c1 c7"><span class="c20 c22"></span></p><p class="c1"><span> </span></p><p class="c1"><span>The </span><span class="c16">CustomDataletBehaviors </span><span>represents the specific implementation for the work-cycle steps. </span></p><p class="c1"><span>This behaviours are a components hierarchy that use a particular communication channel, data format and visualization library.</span></p><h2 class="c28 c1"><a name="h.23494m888vls"></a><span class="c24 c20">An example of datalet for Highchart js library</span></h2><p class="c1 c7"><span></span></p><p class="c1"><span>We’ll describe for example purpose a Datalet that use a AJAX channal, handle JSON data format and use Highcharts for data visualization and JSONPATH library for data selection.</span></p><p class="c1 c7"><span></span></p><h3 class="c1 c19"><a name="h.qqdl4o86ucxr"></a><span class="c26 c20">Ajax-Json-JsonPath behavior</span></h3><p class="c1 c7"><span></span></p><p class="c1"><span>Here we exploit an AJAX communication channel that handle JSON data format and extends the base behaviors (in particular the requestData method). This behavior override the </span><span class="c16">select </span><span>method in order to perform a JSONPATH query according to the user selected fields stored in the </span><span class="c16">this._component.fields </span><span>variable.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8">var</span><span class="c2 c5"> </span><span class="c2 c6">AjaxJsonJsonPathBehavior</span><span class="c2 c5"> </span><span class="c2 c4">=</span><span class="c2 c5"> {</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> properties</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c5"> contains the json data </span><span class="c2 c8">from</span><span class="c2 c5"> async xhr call returned </span><span class="c2 c8">from</span><span class="c2 c5"> core</span><span class="c2 c4">-</span><span class="c2 c5">ajax core component</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> json_results</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c8">object</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">'null'.</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> json_results</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">Object,</span></p><p class="c1"><span class="c2 c5"> value</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c4">{}</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">Make</span><span class="c2 c5"> an AJAX call to the dataset URL</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@method</span><span class="c2 c5"> requestData</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> requestData</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">var</span><span class="c2 c5"> comp </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c8">this;</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> $</span><span class="c2 c4">.</span><span class="c2 c5">ajax</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2 c5"> url</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">dataUrl,</span></p><p class="c1"><span class="c2 c5"> dataType</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"json",</span></p><p class="c1"><span class="c2 c5"> success</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(</span><span class="c2 c5">e</span><span class="c2 c4">){</span></p><p class="c1"><span class="c2 c5"> comp</span><span class="c2 c4">.</span><span class="c2 c5">handleResponse</span><span class="c2 c4">(</span><span class="c2 c5">e</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">Called</span><span class="c2 c5"> </span><span class="c2 c8">when</span><span class="c2 c5"> core</span><span class="c2 c4">-</span><span class="c2 c5">ajax component receive the json data </span><span class="c2 c8">from</span><span class="c2 c5"> called url.</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@method</span><span class="c2 c5"> handleResponse</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> handleResponse</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(</span><span class="c2 c5">e</span><span class="c2 c4">)</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">properties</span><span class="c2 c4">.</span><span class="c2 c5">json_results</span><span class="c2 c4">.</span><span class="c2 c5">value </span><span class="c2 c4">=</span><span class="c2 c5"> e;</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">runWorkcycle</span><span class="c2 c4">();</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">Check</span><span class="c2 c5"> </span><span class="c2 c8">if</span><span class="c2 c5"> input field</span><span class="c2 c4">(</span><span class="c2 c5">passed </span><span class="c2 c8">as</span><span class="c2 c5"> an array of separated value that mach </span><span class="c2 c8">with</span><span class="c2 c5"> field path </span><span class="c2 c8">in</span><span class="c2 c5"> received </span><span class="c2 c8">object</span><span class="c2 c4">)</span><span class="c2 c5"> </span><span class="c2 c8">is</span><span class="c2 c5"> an array of objet.</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">The</span><span class="c2 c5"> field </span><span class="c2 c8">is</span><span class="c2 c5"> </span><span class="c2 c8">checked</span><span class="c2 c5"> on current json </span><span class="c2 c8">object</span><span class="c2 c5"> retrieved </span><span class="c2 c8">from</span><span class="c2 c5"> the async request.</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@param</span><span class="c2 c5"> field</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> isFieldArray </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(</span><span class="c2 c5">field</span><span class="c2 c4">){</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">if</span><span class="c2 c4">(</span><span class="c2 c5">field</span><span class="c2 c4">.</span><span class="c2 c5">length </span><span class="c2 c4">==</span><span class="c2 c5"> </span><span class="c0">0</span><span class="c2 c4">)</span><span class="c2 c5"> </span><span class="c2 c8">return</span><span class="c2 c5"> </span><span class="c2 c8">false;</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">var</span><span class="c2 c5"> obj </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">properties</span><span class="c2 c4">.</span><span class="c2 c5">json_results</span><span class="c2 c4">.</span><span class="c2 c5">value</span><span class="c2 c4">[</span><span class="c2 c5">field</span><span class="c2 c4">[</span><span class="c0">0</span><span class="c2 c4">]];</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">for</span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2 c5"> i</span><span class="c2 c4">=</span><span class="c0">1</span><span class="c2 c4">;</span><span class="c2 c5"> i </span><span class="c2 c4"><</span><span class="c2 c5"> field</span><span class="c2 c4">.</span><span class="c2 c5">length</span><span class="c2 c4">;</span><span class="c2 c5"> i</span><span class="c2 c4">++){</span></p><p class="c1"><span class="c2 c5"> obj </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c4">(</span><span class="c2 c5">obj</span><span class="c2 c4">.</span><span class="c2 c5">constructor </span><span class="c2 c4">==</span><span class="c2 c5"> </span><span class="c2 c6">Array</span><span class="c2 c4">)</span><span class="c2 c5"> </span><span class="c2 c4">?</span><span class="c2 c5"> obj</span><span class="c2 c4">[</span><span class="c0">0</span><span class="c2 c4">][</span><span class="c2 c5">field</span><span class="c2 c4">[</span><span class="c2 c5">i</span><span class="c2 c4">]]</span><span class="c2 c5"> </span><span class="c2 c4">:</span><span class="c2 c5"> obj</span><span class="c2 c4">[</span><span class="c2 c5">field</span><span class="c2 c4">[</span><span class="c2 c5">i</span><span class="c2 c4">]];</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">return</span><span class="c2 c5"> </span><span class="c2 c4">(</span><span class="c2 c5">obj</span><span class="c2 c4">.</span><span class="c2 c5">constructor </span><span class="c2 c4">===</span><span class="c2 c5"> </span><span class="c2 c6">Array</span><span class="c2 c5"> </span><span class="c2 c4">&&</span><span class="c2 c5"> obj</span><span class="c2 c4">[</span><span class="c0">0</span><span class="c2 c4">].</span><span class="c2 c5">constructor </span><span class="c2 c4">==</span><span class="c2 c5"> </span><span class="c2 c6">Object</span><span class="c2 c4">)</span><span class="c2 c5"> </span><span class="c2 c4">?</span><span class="c2 c5"> </span><span class="c2 c8">true</span><span class="c2 c5"> </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">false;</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> selectData built a JSONPATH query based on the user selected fields </span><span class="c2 c8">then</span><span class="c2 c5"> extract data </span><span class="c2 c8">from</span><span class="c2 c5"> the JSON response.</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">This</span><span class="c2 c5"> method built an objects </span><span class="c2 c4"><</span><span class="c2 c5">name</span><span class="c2 c4">,</span><span class="c2 c5"> data</span><span class="c2 c4">></span><span class="c2 c5"> </span><span class="c2 c8">for</span><span class="c2 c5"> every user selected field </span><span class="c2 c8">and</span><span class="c2 c5"> push it </span><span class="c2 c8">into</span><span class="c2 c5"> the data array.</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@method</span><span class="c2 c5"> selectData</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> selectData </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">data </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c4">[];</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">fields </span><span class="c2 c4">=</span><span class="c2 c5"> JSON</span><span class="c2 c4">.</span><span class="c2 c5">parse</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">fields</span><span class="c2 c4">);</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">for</span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2 c5"> i</span><span class="c2 c4">=</span><span class="c0">0</span><span class="c2 c4">;</span><span class="c2 c5">i </span><span class="c2 c4"><</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">fields</span><span class="c2 c4">.</span><span class="c2 c5">length</span><span class="c2 c4">;</span><span class="c2 c5"> i</span><span class="c2 c4">++){</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">var</span><span class="c2 c5"> query </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c17">"$";</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">var</span><span class="c2 c5"> query_elements </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">fields</span><span class="c2 c4">[</span><span class="c2 c5">i</span><span class="c2 c4">].</span><span class="c2 c5">split</span><span class="c2 c4">(</span><span class="c2 c17">','</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">for</span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2 c5"> j</span><span class="c2 c4">=</span><span class="c0">0</span><span class="c2 c4">;</span><span class="c2 c5"> j </span><span class="c2 c4"><</span><span class="c2 c5"> query_elements</span><span class="c2 c4">.</span><span class="c2 c5">length</span><span class="c2 c4">;</span><span class="c2 c5">j</span><span class="c2 c4">++){</span></p><p class="c1"><span class="c2 c5"> query </span><span class="c2 c4">+=</span><span class="c2 c5"> </span><span class="c2 c17">"['"</span><span class="c2 c5"> </span><span class="c2 c4">+</span><span class="c2 c5"> query_elements</span><span class="c2 c4">[</span><span class="c2 c5">j</span><span class="c2 c4">]</span><span class="c2 c5"> </span><span class="c2 c4">+</span><span class="c2 c5"> </span><span class="c2 c17">"']";</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">if</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">isFieldArray</span><span class="c2 c4">(</span><span class="c2 c5">query_elements</span><span class="c2 c4">.</span><span class="c2 c5">slice</span><span class="c2 c4">(</span><span class="c0">0</span><span class="c2 c4">,</span><span class="c2 c5">j</span><span class="c2 c4">+</span><span class="c0">1</span><span class="c2 c4">))){</span></p><p class="c1"><span class="c2 c5"> query </span><span class="c2 c4">+=</span><span class="c2 c5"> </span><span class="c2 c17">"[*]";</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">data</span><span class="c2 c4">.</span><span class="c2 c5">push</span><span class="c2 c4">({</span><span class="c2 c5">name </span><span class="c2 c4">:</span><span class="c2 c5"> query_elements</span><span class="c2 c4">[</span><span class="c2 c5">query_elements</span><span class="c2 c4">.</span><span class="c2 c5">length </span><span class="c2 c4">-</span><span class="c2 c5"> </span><span class="c0">1</span><span class="c2 c4">],</span><span class="c2 c5"> data </span><span class="c2 c4">:</span><span class="c2 c5"> jsonPath</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">properties</span><span class="c2 c4">.</span><span class="c2 c5">json_results</span><span class="c2 c4">.</span><span class="c2 c5">value</span><span class="c2 c4">,</span><span class="c2 c5"> query</span><span class="c2 c4">)});</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c4">};</span></p><p class="c1 c7"><span class="c2 c8"></span></p><p class="c1 c7"><span></span></p><ul class="c18 lst-kix_mwbvd56bd501-0"><li class="c1 c3"><span class="c16">json_results(object): </span><span>the object that will store the JSON results returned from data request. It will be used from the Datalets which will use this behavior in order to access to this response object everywhere. </span></li><li class="c1 c3"><span class="c16">requestData</span><span>: it’s an override of WorkcicleBehavior component to use AJAX to request data</span></li><li class="c1 c3"><span class="c16">handleResponse</span><span>: it’s callback for AJAX request that set the </span><span class="c16">json_response </span><span>attribute that will be used by the specialized behavior that will use the data (select, filter and transform) and </span><span class="c16 c66">run the workcycle</span><span>.</span></li></ul><p class="c1 c7"><span></span></p><h3 class="c19 c1"><a name="h.lmehzpjkgz75"></a><span class="c26 c20">Base datalet</span></h3><p class="c1 c7"><span></span></p><p class="c1"><span>We define a </span><span class="c16">base-datalet</span><span> that include BaseDataletBehavior</span><span class="c2"> </span><span>and a footer that contain a ROUTE-TO-PA logo and data source domain information.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8"><link</span><span class="c2"> </span><span class="c2 c6">rel</span><span class="c2 c4">=</span><span class="c2 c17">"import"</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"../../bower_components/polymer/polymer.html"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c8"><dom-module</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"base-datalet"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><template></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><style></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">#footer {</span></p><p class="c1"><span class="c2"> position</span><span class="c2 c4">:</span><span class="c2"> relative;</span></p><p class="c1"><span class="c2"> bottom</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c0">0;</span></p><p class="c1"><span class="c2"> width</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c0">100</span><span class="c2 c4">%;</span></p><p class="c1"><span class="c2"> font</span><span class="c2 c4">-</span><span class="c2">size</span><span class="c2 c4">:</span><span class="c2"> small;</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">#rtpalogo{</span></p><p class="c1"><span class="c2"> height</span><span class="c2 c4">:</span><span class="c0">30px;</span></p><p class="c1"><span class="c2"> width</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c0">30px;</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></style></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><b></span><span class="c2">Source : </span><span class="c2 c8"></b><span</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"domain"</span><span class="c2 c8">></span><br><br></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><div</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"footer"</span><span class="c2 c8">></span><span class="c2">Powered by Route-to-PA&nbsp&nbsp</span><span class="c2 c8"><a</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"http://routetopa.eu/"</span><span class="c2 c8">><img</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"static/images/rtpalogo.png"</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"rtpalogo"</span><span class="c2 c8">></a></div><br></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></template></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"static/js/BaseDataletBehaviors.js"</span><span class="c2 c8">></script></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script></span></p><p class="c1"><span class="c2"> </span><span class="c2 c6">BaseDatalet</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c6">Polymer</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">is</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">'base-datalet',</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">It</span><span class="c2"> </span><span class="c2 c8">is</span><span class="c2"> called after the element</span><span class="c2 c4">'</span><span class="c2">s </span><span class="c2 c8">template</span><span class="c2"> has been stamped </span><span class="c2 c8">and</span><span class="c2"> all elements inside the element</span><span class="c2 c4">'</span><span class="c2">s </span><span class="c2 c8">local</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> DOM have been configured </span><span class="c2 c4">(</span><span class="c2 c8">with</span><span class="c2"> values bound </span><span class="c2 c8">from</span><span class="c2"> parents</span><span class="c2 c4">,</span><span class="c2"> deserialized attributes</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c8">or</span><span class="c2"> </span><span class="c2 c8">else</span><span class="c2"> </span><span class="c2 c8">default</span><span class="c2"> values)</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c8">and</span><span class="c2"> had their ready method called.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">Extract</span><span class="c2"> the dataset domain </span><span class="c2 c8">from</span><span class="c2"> the entire URL </span><span class="c2 c8">and</span><span class="c2"> </span><span class="c2 c8">set</span><span class="c2"> the text content of the datalet footer.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> ready</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> ready</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">$</span><span class="c2 c4">.</span><span class="c2">domain</span><span class="c2 c4">.</span><span class="c2">textContent </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">dataUrl</span><span class="c2 c4">.</span><span class="c2">split</span><span class="c2 c4">(</span><span class="c2 c17">"/"</span><span class="c2 c4">)[</span><span class="c0">0</span><span class="c2 c4">]</span><span class="c2"> </span><span class="c2 c4">+</span><span class="c2"> </span><span class="c2 c17">"//"</span><span class="c2"> </span><span class="c2 c4">+</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">dataUrl</span><span class="c2 c4">.</span><span class="c2">split</span><span class="c2 c4">(</span><span class="c2 c17">"/"</span><span class="c2 c4">)[</span><span class="c0">2</span><span class="c2 c4">];</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></script></span></p><p class="c1"><span class="c2 c8"></dom-module></span></p><p class="c1 c7"><span class="c34"></span></p><p class="c1 c7"><span></span></p><p class="c1"><span>All components that import this one will include the BaseDataletBehavior.</span></p><p class="c1 c7"><span></span></p><h3 class="c19 c1"><a name="h.6otvlqmjxt9s"></a><span class="c26 c20">base-ajax-json-jsonpath-datalet Datalet</span></h3><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8"><link</span><span class="c2"> </span><span class="c2 c6">rel</span><span class="c2 c4">=</span><span class="c2 c17">"import"</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"../base-datalet/base-datalet.html"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c8"><dom-module</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"base-ajax-json-jsonpath-datalet"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><template></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><base-datalet</span><span class="c2"> </span><span class="c2 c6">data-url</span><span class="c2 c4">=</span><span class="c2 c17">"{{dataUrl}}"</span><span class="c2"> </span><span class="c2 c6">fields</span><span class="c2 c4">=</span><span class="c2 c17">"{{fields}}"</span><span class="c2 c8">></base-datalet></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></template></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"static/js/vendor/jsonpath-0.8.5.js"</span><span class="c2 c8">></script></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"static/js/AjaxJsonJsonPathBehavior.js"</span><span class="c2 c8">></script></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script></span></p><p class="c1"><span class="c2"> </span><span class="c2 c6">BaseDatalet</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c6">Polymer</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">is</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">'base-ajax-json-jsonpath-datalet'</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></script></span></p><p class="c1"><span class="c2 c8"></dom-module></span></p><p class="c1 c7"><span></span></p><p class="c1"><span>All components that import this one will include AjaxJsonJsonPathBehavior and JSONPath library. Since this Datalet handle JSON data, we use JSONPath (</span><span class="c44"><a class="c15" href="https://www.google.com/url?q=http://goessner.net/articles/JsonPath/&sa=D&usg=AFQjCNGOqQI4Dex9zLdrZuBzOrLQrcgPrw">http://goessner.net/articles/JsonPath/</a></span><span>) to select specific fields from entire dataset (an example of query is $.result.records..Supplier $.result.records..Amount). For a new datatype a new behavior and new way to select the fields should be provided.</span></p><h3 class="c19 c1"><a name="h.5kn6d9gehrxp"></a><span class="c26 c20">Highcharts component</span></h3><p class="c1 c7"><span class="c20 c35"></span></p><p class="c1"><span>The component we’ll present in this section include Highcharts javascript library (</span><span class="c44"><a class="c15" href="https://www.google.com/url?q=http://www.highcharts.com/&sa=D&usg=AFQjCNGff99OZ7OOqXVqP6dPX0ZQRv8QJw">http://www.highcharts.com/</a></span><span>) to visualize data in a several type of charts.</span></p><p class="c1"><span>Since all selected example charts use the same way to select the data to build the categories and series objects, we built a super Highchart component which all our specific chart datalet will “extend” in order to share the selection mechanism.</span></p><p class="c1"><span> </span></p><p class="c1"><span class="c2 c8"><link</span><span class="c2"> </span><span class="c2 c6">rel</span><span class="c2 c4">=</span><span class="c2 c17">"import"</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c8"><dom-module</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"highcharts-datalet"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><template></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><div</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"container"</span><span class="c2"> </span><span class="c2 c6">style</span><span class="c2 c4">=</span><span class="c2 c17">"</span><span class="c2">width</span><span class="c2 c4">:</span><span class="c2 c8">auto</span><span class="c2 c4">;</span><span class="c2"> height</span><span class="c2 c4">:</span><span class="c2 c8">auto</span><span class="c2 c4">;</span><span class="c2 c17">"</span><span class="c2 c8">></div></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><base-ajax-json-jsonpath-datalet</span><span class="c2"> </span><span class="c2 c6">data-url</span><span class="c2 c4">=</span><span class="c2 c17">"{{dataUrl}}"</span><span class="c2"> </span><span class="c2 c6">fields</span><span class="c2 c4">=</span><span class="c2 c17">"{{fields}}"</span><span class="c2 c8">></base-ajax-json-jsonpath-datalet></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></template></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"static/js/highcharts.js"</span><span class="c2 c8">></script></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"static/js/exporting.js"</span><span class="c2 c8">></script></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">HighchartsBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> properties</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> categories</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">Array,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c4">[]</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> series</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">Array,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c4">[]</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> series_type</span><span class="c2 c4">:{</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">"line"</span><span class="c2 c9">//spline,time</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">Populate</span><span class="c2"> the categories </span><span class="c2 c8">and</span><span class="c2"> the series array.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> transformData</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@param</span><span class="c2"> </span><span class="c2 c4">{</span><span class="c2 c6">Event</span><span class="c2 c4">}</span><span class="c2"> e</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> transformData</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2"> </span><span class="c2 c4">()</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">properties</span><span class="c2 c4">.</span><span class="c2">categories</span><span class="c2 c4">.</span><span class="c2">value </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c0">0</span><span class="c2 c4">].</span><span class="c2">data;</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">for</span><span class="c2"> </span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2"> i </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c0">1</span><span class="c2 c4">;</span><span class="c2"> i </span><span class="c2 c4"><</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">.</span><span class="c2">length</span><span class="c2 c4">;</span><span class="c2"> i</span><span class="c2 c4">++)</span></p><p class="c1"><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c2">i</span><span class="c2 c4">].</span><span class="c2">data</span><span class="c2 c4">.</span><span class="c2">every</span><span class="c2 c4">(</span><span class="c2 c8">function</span><span class="c2"> </span><span class="c2 c4">(</span><span class="c2">element</span><span class="c2 c4">,</span><span class="c2"> index</span><span class="c2 c4">,</span><span class="c2"> array</span><span class="c2 c4">)</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">try</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">// TODO fix this parsing mechanism</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">(</span><span class="c2">isNaN</span><span class="c2 c4">(</span><span class="c2">parseFloat</span><span class="c2 c4">(</span><span class="c2">element</span><span class="c2 c4">)))</span><span class="c2"> </span><span class="c2 c4">?</span><span class="c2"> array</span><span class="c2 c4">[</span><span class="c2">index</span><span class="c2 c4">]</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> parseFloat</span><span class="c2 c4">(</span><span class="c2">element</span><span class="c2 c4">.</span><span class="c2">match</span><span class="c2 c4">(</span><span class="c2 c17">/[0-9]+/</span><span class="c2">g</span><span class="c2 c4">).</span><span class="c2">join</span><span class="c2 c4">(</span><span class="c2 c17">"."</span><span class="c2 c4">))</span><span class="c2"> :</span></p><p class="c1"><span class="c2"> array</span><span class="c2 c4">[</span><span class="c2">index</span><span class="c2 c4">]</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> parseFloat</span><span class="c2 c4">(</span><span class="c2">element</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">}</span><span class="c2 c8">catch</span><span class="c2 c4">(</span><span class="c2">e</span><span class="c2 c4">){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">//console.log("Parsing data error. Highchart-datalet.selectData");</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">return</span><span class="c2"> </span><span class="c2 c8">true;</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">});</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">properties</span><span class="c2 c4">.</span><span class="c2">series</span><span class="c2 c4">.</span><span class="c2">value</span><span class="c2 c4">.</span><span class="c2">push</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c2">i</span><span class="c2 c4">]);</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">};</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">HighchartsComponentBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> $</span><span class="c2 c4">.</span><span class="c2">extend</span><span class="c2 c4">(</span><span class="c2 c8">true</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c4">{},</span><span class="c2"> </span><span class="c2 c6">BaseDataletBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">WorkcycleBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">AjaxJsonJsonPathBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">HighchartsBehavior</span><span class="c2 c4">);</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c6">HighchartsDatalet</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c6">Polymer</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">is</span><span class="c2"> </span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">'highcharts-datalet'</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></script></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c8"></dom-module></span></p><p class="c1 c7"><span class="c34"></span></p><p class="c1 c7"><span class="c34"></span></p><p class="c1"><span>First we have to import the base-ajax-json-jsonpath-datalet, in order to extend its behavior and include its DOM:</span></p><p class="c1 c7"><span class="c34"></span></p><p class="c1"><span class="c2 c8"><link</span><span class="c2"> </span><span class="c2 c6">rel</span><span class="c2 c4">=</span><span class="c2 c17">"import"</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"../base-datalet/base-datalet.html"></span></p><p class="c1 c7"><span class="c67 c63"></span></p><p class="c1 c7"><span class="c67 c63"></span></p><p class="c1"><span>In the template section (the DOM part of our new datalet) we include the superclass DOM (as footer) and create a div as placeholder for chart object. </span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8"><template></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><div</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"container"</span><span class="c2"> </span><span class="c2 c6">style</span><span class="c2 c4">=</span><span class="c2 c17">"</span><span class="c2">width</span><span class="c2 c4">:</span><span class="c2 c8">auto</span><span class="c2 c4">;</span><span class="c2"> height</span><span class="c2 c4">:</span><span class="c2 c8">auto</span><span class="c2 c4">;</span><span class="c2 c17">"</span><span class="c2 c8">></div></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><base-ajax-json-jsonpath-datalet</span><span class="c2"> </span><span class="c2 c6">data-url</span><span class="c2 c4">=</span><span class="c2 c17">"{{dataUrl}}"</span><span class="c2"> </span><span class="c2 c6">fields</span><span class="c2 c4">=</span><span class="c2 c17">"{{fields}}"</span><span class="c2 c8">></base-ajax-json-jsonpath-datalet></span></p><p class="c1"><span class="c2 c8"></template></span></p><p class="c1 c7"><span class="c34"></span></p><p class="c1"><span> </span></p><p class="c1"><span>At this point we include the Highchart javascript library used by all chart datalets which use Highchart as visualization library.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8"><script</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"static/js/highcharts.js"</span><span class="c2 c8">></script></span></p><p class="c1"><span class="c2 c8"><script</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"static/js/exporting.js"</span><span class="c2 c8">></script></span></p><p class="c1 c7"><span class="c34"></span></p><p class="c1 c7"><span class="c63 c67"></span></p><p class="c1"><span>Now we define a new behavior with all attribute that the specialized chart datalets can share (</span><span class="c16">categories</span><span> and </span><span class="c16">series</span><span>) and the implementation of a selection method. </span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">HighchartsBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> properties</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> categories</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">Array,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c4">[]</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> series</span><span class="c2 c4">:</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">Array,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c4">[]</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> series_type</span><span class="c2 c4">:{</span></p><p class="c1"><span class="c2"> type</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2"> value</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">"line"</span><span class="c2 c9">//spline,time</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c6">Populate</span><span class="c2"> the categories </span><span class="c2 c8">and</span><span class="c2"> the series array.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> transformData</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@param</span><span class="c2"> </span><span class="c2 c4">{</span><span class="c2 c6">Event</span><span class="c2 c4">}</span><span class="c2"> e</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> transformData</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2"> </span><span class="c2 c4">()</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">properties</span><span class="c2 c4">.</span><span class="c2">categories</span><span class="c2 c4">.</span><span class="c2">value </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c0">0</span><span class="c2 c4">].</span><span class="c2">data;</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">for</span><span class="c2"> </span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2"> i </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c0">1</span><span class="c2 c4">;</span><span class="c2"> i </span><span class="c2 c4"><</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">.</span><span class="c2">length</span><span class="c2 c4">;</span><span class="c2"> i</span><span class="c2 c4">++)</span></p><p class="c1"><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c2">i</span><span class="c2 c4">].</span><span class="c2">data</span><span class="c2 c4">.</span><span class="c2">every</span><span class="c2 c4">(</span><span class="c2 c8">function</span><span class="c2"> </span><span class="c2 c4">(</span><span class="c2">element</span><span class="c2 c4">,</span><span class="c2"> index</span><span class="c2 c4">,</span><span class="c2"> array</span><span class="c2 c4">)</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">try</span><span class="c2"> {</span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">// TODO fix this parsing mechanism</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">(</span><span class="c2">isNaN</span><span class="c2 c4">(</span><span class="c2">parseFloat</span><span class="c2 c4">(</span><span class="c2">element</span><span class="c2 c4">)))</span><span class="c2"> </span><span class="c2 c4">?</span><span class="c2"> array</span><span class="c2 c4">[</span><span class="c2">index</span><span class="c2 c4">]</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> parseFloat</span><span class="c2 c4">(</span><span class="c2">element</span><span class="c2 c4">.</span><span class="c2">match</span><span class="c2 c4">(</span><span class="c2 c17">/[0-9]+/</span><span class="c2">g</span><span class="c2 c4">).</span><span class="c2">join</span><span class="c2 c4">(</span><span class="c2 c17">"."</span><span class="c2 c4">))</span><span class="c2"> :</span></p><p class="c1"><span class="c2"> array</span><span class="c2 c4">[</span><span class="c2">index</span><span class="c2 c4">]</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> parseFloat</span><span class="c2 c4">(</span><span class="c2">element</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">}</span><span class="c2 c8">catch</span><span class="c2 c4">(</span><span class="c2">e</span><span class="c2 c4">){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">//console.log("Parsing data error. Highchart-datalet.selectData");</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">return</span><span class="c2"> </span><span class="c2 c8">true;</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">});</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">properties</span><span class="c2 c4">.</span><span class="c2">series</span><span class="c2 c4">.</span><span class="c2">value</span><span class="c2 c4">.</span><span class="c2">push</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c2">i</span><span class="c2 c4">]);</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2 c4">};</span></p><p class="c1 c7"><span class="c63 c76"></span></p><p class="c1"><span>We are overriding the </span><span class="c16">transformData </span><span>method of </span><span class="c16">WorkcycleBehavior </span><span>so to access to </span><span class="c16">data attribute</span><span> we have to use the reference to the Polymer component (</span><span class="c16">this._component</span><span>). This reference will be set by the final component that implements all workcycle (that visualize the chart in our example), as we will show you later. As you can notice in the </span><span class="c16">transformData </span><span>function we can access to </span><span class="c16">json_results </span><span>attribute defined in the Behavior that implements the communication channel.</span></p><p class="c1"><span>After defined the Behavior for Highchart component we have to extend it to include the BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior to crate a new behavior specific for our new Datalet. The order of the extension is crucial (see JQuery $.extend docs). </span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">HighchartsComponentBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> $</span><span class="c2 c4">.</span><span class="c2">extend</span><span class="c2 c4">(</span><span class="c2 c8">true</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c4">{},</span><span class="c2"> </span><span class="c2 c6">BaseDataletBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">WorkcycleBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">AjaxJsonJsonPathBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">HighchartsBehavior</span><span class="c2 c4">);</span></p><p class="c1 c7"><span class="c22"></span></p><p class="c1 c7"><span></span></p><p class="c1"><span>The last thing to do is to create the Polymer javascript object.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c6">HighchartsDatalet</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c6">Polymer</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">is</span><span class="c2"> </span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">'highcharts-datalet'</span></p><p class="c1"><span class="c2 c4">});</span></p><p class="c1 c7"><span class="c36"></span></p><p class="c1 c7"><span></span></p><h3 class="c19 c1"><a name="h.ns7fynbyet5s"></a><span class="c26 c20">Linechart datalet</span></h3><p class="c1 c7"><span></span></p><p class="c1"><span>The linechart-datalet will use the highchart-component to visualize a linechart. To do this we override the </span><span class="c16">presentData </span><span>method, in a new behavior(</span><span class="c16">LinechartBehavior</span><span>), in order to use the categories and series attributes, generated by “super class”, to build the chart.</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c8"><link</span><span class="c2"> </span><span class="c2 c6">rel</span><span class="c2 c4">=</span><span class="c2 c17">"import"</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"../highcharts-datalet/highcharts-datalet.html"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c8"><dom-module</span><span class="c2 c5"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"linechart-datalet"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><template></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><highcharts-datalet</span><span class="c2 c5"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"charts"</span><span class="c2 c5"> </span><span class="c2 c6">data-url</span><span class="c2 c4">=</span><span class="c2 c17">"{{dataUrl}}"</span><span class="c2 c5"> </span><span class="c2 c6">fields</span><span class="c2 c4">=</span><span class="c2 c17">"{{fields}}"</span><span class="c2 c8">></highcharts-datalet></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></template></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><script></span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">var</span><span class="c2 c5"> </span><span class="c2 c6">LinechartBehavior</span><span class="c2 c5"> </span><span class="c2 c4">=</span><span class="c2 c5"> {</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">Bluid</span><span class="c2 c5"> </span><span class="c2 c6">Highchart</span><span class="c2 c5"> </span><span class="c2 c8">object</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@method</span><span class="c2 c5"> presentData</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> presentData</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> $</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">$</span><span class="c2 c4">.</span><span class="c2 c5">charts</span><span class="c2 c4">.</span><span class="c2 c5">$</span><span class="c2 c4">.</span><span class="c2 c5">container</span><span class="c2 c4">).</span><span class="c2 c5">highcharts</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2 c5"> title</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> text</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">""</span><span class="c2 c5"> </span><span class="c2 c4">+</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">title</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> chart</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> zoomType</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'xy'</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> xAxis</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> categories</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">properties</span><span class="c2 c4">.</span><span class="c2 c5">categories</span><span class="c2 c4">.</span><span class="c2 c5">value</span><span class="c2 c4">,</span><span class="c2 c9">//this._component.categories,</span></p><p class="c1"><span class="c2 c5"> title</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> text</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">xAxisLabel</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> yAxis</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> title</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> text</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">yAxisLabel</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> plotLines</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c4">[{</span></p><p class="c1"><span class="c2 c5"> value</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c0">0,</span></p><p class="c1"><span class="c2 c5"> width</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c0">1,</span></p><p class="c1"><span class="c2 c5"> color</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'#808080'</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">}]</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> tooltip</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> valueSuffix</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">' '</span><span class="c2 c5"> </span><span class="c2 c4">+</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">suffix</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> legend</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> layout</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'vertical',</span></p><p class="c1"><span class="c2 c5"> align</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'right',</span></p><p class="c1"><span class="c2 c5"> verticalAlign</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'top',</span></p><p class="c1"><span class="c2 c5"> x</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c4">-</span><span class="c0">40,</span></p><p class="c1"><span class="c2 c5"> y</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c0">100,</span></p><p class="c1"><span class="c2 c5"> floating</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">true,</span></p><p class="c1"><span class="c2 c5"> borderWidth</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c0">1,</span></p><p class="c1"><span class="c2 c5"> backgroundColor</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c4">((</span><span class="c2 c6">Highcharts</span><span class="c2 c4">.</span><span class="c2 c5">theme </span><span class="c2 c4">&&</span><span class="c2 c5"> </span><span class="c2 c6">Highcharts</span><span class="c2 c4">.</span><span class="c2 c5">theme</span><span class="c2 c4">.</span><span class="c2 c5">legendBackgroundColor</span><span class="c2 c4">)</span><span class="c2 c5"> </span><span class="c2 c4">||</span><span class="c2 c5"> </span><span class="c2 c17">'#FFFFFF'</span><span class="c2 c4">),</span></p><p class="c1"><span class="c2 c5"> shadow</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">true</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> credits</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> enabled</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">false</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> series</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">properties</span><span class="c2 c4">.</span><span class="c2 c5">series</span><span class="c2 c4">.</span><span class="c2 c5">value</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">};</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c6">LinechartDatalet</span><span class="c2 c5"> </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c6">Polymer</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">is</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'linechart-datalet',</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> properties</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c17">'s the label for X axis</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> xAxisLabel</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c6">String</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">''</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> xAxisLabel</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2 c5"> value</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">""</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c17">'s the label for Y axis</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> yAxisLabel</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c6">String</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">''</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> yAxisLabel</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2 c5"> value</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">""</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c17">'s the title of the chart</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> title</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c6">Strig</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">''</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> title</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2 c5"> value</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"Heading"</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c17">'s the values suffix</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> suffix</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c6">Strig</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">'units'</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> suffix </span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2 c5"> value </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"units"</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c17">'ready'</span><span class="c2 c5"> callback extend the </span><span class="c2 c6">LinechartComponentBehavior</span><span class="c2 c5"> </span><span class="c2 c8">with</span><span class="c2 c5"> </span><span class="c2 c6">HighchartsComponentBehavior</span><span class="c2 c5"> </span><span class="c2 c8">and</span><span class="c2 c5"> </span><span class="c2 c6">LinechartBehavior</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c8">and</span><span class="c2 c5"> run the </span><span class="c2 c6">Datalet</span><span class="c2 c5"> workcycle.</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@method</span><span class="c2 c5"> ready</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> ready</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">var</span><span class="c2 c5"> </span><span class="c2 c6">LinechartComponentBehavior</span><span class="c2 c5"> </span><span class="c2 c4">=</span><span class="c2 c5"> $</span><span class="c2 c4">.</span><span class="c2 c5">extend</span><span class="c2 c4">(</span><span class="c2 c8">true</span><span class="c2 c4">,</span><span class="c2 c5"> </span><span class="c2 c4">{},</span><span class="c2 c5"> </span><span class="c2 c6">HighchartsComponentBehavior</span><span class="c2 c4">,</span><span class="c2 c5"> </span><span class="c2 c6">LinechartBehavior</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c6">LinechartComponentBehavior</span><span class="c2 c4">.</span><span class="c2 c5">init</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></script></span></p><p class="c1"><span class="c2 c8"></dom-module></span></p><p class="c1 c7"><span class="c2 c8"></span></p><p class="c1"><span> </span></p><p class="c1"><span>After creating the main component behavior (</span><span class="c16">LinechartComponentBehavior</span><span>) extending the </span><span class="c16">HighchartComponentBehavior </span><span>previously created, we have to initialize it by passing the reference to Polymer object associated to linechart-datalet. We do it in the </span><span class="c16">ready </span><span>handler of Polymer object.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c6">LinechartDatalet</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c6">Polymer</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">is</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">'linechart-datalet',</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c17">'ready'</span><span class="c2"> callback extend the </span><span class="c2 c6">LinechartComponentBehavior</span><span class="c2"> </span><span class="c2 c8">with</span><span class="c2"> </span><span class="c2 c6">HighchartsComponentBehavior</span><span class="c2"> </span><span class="c2 c8">and</span><span class="c2"> </span><span class="c2 c6">LinechartBehavior</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c2 c8">and</span><span class="c2"> run the </span><span class="c2 c6">Datalet</span><span class="c2"> workcycle.</span></p><p class="c1"><span class="c2"> *</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*</span><span class="c2"> </span><span class="c0">@method</span><span class="c2"> ready</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2"> ready</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">LinechartComponentBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> $</span><span class="c2 c4">.</span><span class="c2">extend</span><span class="c2 c4">(</span><span class="c2 c8">true</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c4">{},</span><span class="c2"> </span><span class="c2 c6">HighchartsComponentBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">LinechartBehavior</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2"> </span><span class="c2 c6">LinechartComponentBehavior</span><span class="c2 c4">.</span><span class="c2">init</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2 c4">});</span></p><p class="c1 c7"><span class="c36"></span></p><p class="c1 c7"><span></span></p><p class="c1"><span>The ready handler define a </span><span class="c33">lifecycle callback invoked when all local DOM children of this element have been created and "configured" with data bound from this element, attribute values, or defaults.</span></p><p class="c1"><span class="c33">The base behavior will use this reference to get information from the Polymer component like passed attributes, DOM, etc.</span></p><p class="c1"><span class="c33"> </span></p><p class="c1"><span class="c33">LinechartDatalet ha</span><span>s xAxisLabe,l yAxisLabel, title and suffix properties. This properties are used as layout params, and define respectively the label for the x-axis, y-axis, the title of the chart and the value suffix .</span></p><p class="c1 c7"><span class="c57"></span></p><p class="c1 c7"><span class="c54"></span></p><p class="c1 c7"><span class="c57"></span></p><p class="c1 c7"><span class="c33"></span></p><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 322.67px;"><img alt="" src="images/image02.png" style="width: 624.00px; height: 322.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p><h3 class="c19 c1"><a name="h.ve1g902t8v"></a><span class="c26 c20">Barchart datalet</span></h3><p class="c1 c7"><span></span></p><p class="c1"><span>The barchart-datalet will use the highchart-datalet to visualize a barchart. </span></p><p class="c1 c7"><span class="c39"></span></p><p class="c1"><span class="c2 c8"><link</span><span class="c2"> </span><span class="c2 c6">rel</span><span class="c2 c4">=</span><span class="c2 c17">"import"</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"../highcharts-datalet/highcharts-datalet.html"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c8"><dom-module</span><span class="c2 c5"> </span><span class="c2 c6">name</span><span class="c2 c4">=</span><span class="c2 c17">"barchart-datalet"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><template></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><highcharts-datalet</span><span class="c2 c5"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"charts"</span><span class="c2 c5"> </span><span class="c2 c6">data-url</span><span class="c2 c4">=</span><span class="c2 c17">"{{dataUrl}}"</span><span class="c2 c5"> </span><span class="c2 c6">fields</span><span class="c2 c4">=</span><span class="c2 c17">"{{fields}}"</span><span class="c2 c8">></highcharts-datalet></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></template></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><script></span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">var</span><span class="c2 c5"> </span><span class="c2 c6">BarchartBehavior</span><span class="c2 c5"> </span><span class="c2 c4">=</span><span class="c2 c5"> {</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">Bluid</span><span class="c2 c5"> </span><span class="c2 c6">Highchart</span><span class="c2 c5"> </span><span class="c2 c8">object</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@method</span><span class="c2 c5"> transformData</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> presentData</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> $</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">$</span><span class="c2 c4">.</span><span class="c2 c5">charts</span><span class="c2 c4">.</span><span class="c2 c5">$</span><span class="c2 c4">.</span><span class="c2 c5">container</span><span class="c2 c4">).</span><span class="c2 c5">highcharts</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2 c5"> chart</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'bar',</span></p><p class="c1"><span class="c2 c5"> zoomType</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'xy'</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> title</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> text</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">title</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> xAxis</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> categories</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">properties</span><span class="c2 c4">.</span><span class="c2 c5">categories</span><span class="c2 c4">.</span><span class="c2 c5">value,</span></p><p class="c1"><span class="c2 c5"> title</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> text</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">xAxisLabel</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> yAxis</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> min</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c0">0,</span></p><p class="c1"><span class="c2 c5"> title</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> text</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">yAxisLabel,</span></p><p class="c1"><span class="c2 c5"> align</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'high'</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> labels</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> overflow</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'justify'</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> tooltip</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> valueSuffix</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">' '</span><span class="c2 c5"> </span><span class="c2 c4">+</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">_component</span><span class="c2 c4">.</span><span class="c2 c5">suffix</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> plotOptions</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> bar</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> dataLabels</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> enabled</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">true</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> legend</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> layout</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'vertical',</span></p><p class="c1"><span class="c2 c5"> align</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'right',</span></p><p class="c1"><span class="c2 c5"> verticalAlign</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'top',</span></p><p class="c1"><span class="c2 c5"> x</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c4">-</span><span class="c0">40,</span></p><p class="c1"><span class="c2 c5"> y</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c0">100,</span></p><p class="c1"><span class="c2 c5"> floating</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">true,</span></p><p class="c1"><span class="c2 c5"> borderWidth</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c0">1,</span></p><p class="c1"><span class="c2 c5"> backgroundColor</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c4">((</span><span class="c2 c6">Highcharts</span><span class="c2 c4">.</span><span class="c2 c5">theme </span><span class="c2 c4">&&</span><span class="c2 c5"> </span><span class="c2 c6">Highcharts</span><span class="c2 c4">.</span><span class="c2 c5">theme</span><span class="c2 c4">.</span><span class="c2 c5">legendBackgroundColor</span><span class="c2 c4">)</span><span class="c2 c5"> </span><span class="c2 c4">||</span><span class="c2 c5"> </span><span class="c2 c17">'#FFFFFF'</span><span class="c2 c4">),</span></p><p class="c1"><span class="c2 c5"> shadow</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">true</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> credits</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> enabled</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">false</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> series</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2 c5">properties</span><span class="c2 c4">.</span><span class="c2 c5">series</span><span class="c2 c4">.</span><span class="c2 c5">value</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">};</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c6">BarchartDatalet</span><span class="c2 c5"> </span><span class="c2 c4">=</span><span class="c2 c5"> </span><span class="c2 c6">Polymer</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">is</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">'barchart-datalet',</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> properties</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c17">'s the label for X axis</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> xAxisLabel</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c6">String</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">''</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> xAxisLabel</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2 c5"> value</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">""</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c17">'s the label for Y axis</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> yAxisLabel</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c6">String</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">''</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> yAxisLabel</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2 c5"> value</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">""</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c17">'s the title of the chart</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> title</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c6">Strig</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">''</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> title</span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2 c5"> value</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"Heading"</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c6">It</span><span class="c2 c17">'s the values suffix</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@attribute</span><span class="c2 c5"> suffix</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@type</span><span class="c2 c5"> </span><span class="c2 c6">Strig</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@default</span><span class="c2 c5"> </span><span class="c2 c17">'units'</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> suffix </span><span class="c2 c4">:</span><span class="c2 c5"> {</span></p><p class="c1"><span class="c2 c5"> type </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c6">String,</span></p><p class="c1"><span class="c2 c5"> value </span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c17">"units"</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">},</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c9">/**</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c17">'ready'</span><span class="c2 c5"> callback extend the </span><span class="c2 c6">BarchartComponentBehavior</span><span class="c2 c5"> </span><span class="c2 c8">with</span><span class="c2 c5"> </span><span class="c2 c6">HighchartsComponentBehavior</span><span class="c2 c5"> </span><span class="c2 c8">and</span><span class="c2 c5"> </span><span class="c2 c6">BarchartBehavior</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c2 c8">and</span><span class="c2 c5"> run the </span><span class="c2 c6">Datalet</span><span class="c2 c5"> workcycle.</span></p><p class="c1"><span class="c2 c5"> *</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*</span><span class="c2 c5"> </span><span class="c0">@method</span><span class="c2 c5"> ready</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">*/</span></p><p class="c1"><span class="c2 c5"> ready</span><span class="c2 c4">:</span><span class="c2 c5"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1 c7"><span class="c2 c5"></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8">var</span><span class="c2 c5"> </span><span class="c2 c6">BarchartComponentBehavior</span><span class="c2 c5"> </span><span class="c2 c4">=</span><span class="c2 c5"> $</span><span class="c2 c4">.</span><span class="c2 c5">extend</span><span class="c2 c4">(</span><span class="c2 c8">true</span><span class="c2 c4">,</span><span class="c2 c5"> </span><span class="c2 c4">{},</span><span class="c2 c5"> </span><span class="c2 c6">HighchartsComponentBehavior</span><span class="c2 c4">,</span><span class="c2 c5"> </span><span class="c2 c6">BarchartBehavior</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c6">BarchartComponentBehavior</span><span class="c2 c4">.</span><span class="c2 c5">init</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2 c5"> }</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></script></span></p><p class="c1"><span class="c2 c8"></dom-module></span></p><p class="c1 c7"><span class="c2 c8"></span></p><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 324.00px;"><img alt="" src="images/image01.png" style="width: 624.00px; height: 324.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1 c7"><span></span></p><h3 class="c19 c1 c37"><a name="h.4krgu9mab6k2"></a></h3><h2 class="c28 c1"><a name="h.l8rhx6bh9kf"></a><span class="c24 c20">Datatable-datalet</span></h2><p class="c1 c7"><span></span></p><p class="c1"><span>To be more complete we present another example of datalet that is slightly different from previous ones: a table based datalet which use Datatables javascript library (</span><span class="c44"><a class="c15" href="https://www.google.com/url?q=https://www.datatables.net/&sa=D&usg=AFQjCNE6nKMIs1fA5sz4RDBfC7IHuWpY5w">https://www.datatables.net/</a></span><span>) to render a table. The main difference is that datatable-datalet component has a dynamic DOM built according to the size of data.</span></p><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8"><link</span><span class="c2"> </span><span class="c2 c6">rel</span><span class="c2 c4">=</span><span class="c2 c17">"import"</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2 c8"><dom-module</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"datatable-datalet"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><template></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><link</span><span class="c2"> </span><span class="c2 c6">rel</span><span class="c2 c4">=</span><span class="c2 c17">"stylesheet"</span><span class="c2"> </span><span class="c2 c6">href</span><span class="c2 c4">=</span><span class="c2 c17">"js/DataTables-master/media/css/jquery.dataTables.min.css"></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><table</span><span class="c2"> </span><span class="c2 c6">id</span><span class="c2 c4">=</span><span class="c2 c17">"datatable"</span><span class="c2"> </span><span class="c2 c6">class</span><span class="c2 c4">=</span><span class="c2 c17">"table table-striped table-bordered"</span><span class="c2"> </span><span class="c2 c6">cellspacing</span><span class="c2 c4">=</span><span class="c2 c17">"0"</span><span class="c2"> </span><span class="c2 c6">style</span><span class="c2 c4">=</span><span class="c2 c17">"</span><span class="c2">height</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">auto</span><span class="c2 c4">;</span><span class="c2"> width</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">auto</span><span class="c2 c4">;</span><span class="c2 c17">"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></table></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><base-ajax-json-jsonpath-datalet</span><span class="c2"> </span><span class="c2 c6">data-url</span><span class="c2 c4">=</span><span class="c2 c17">"{{dataUrl}}"</span><span class="c2"> </span><span class="c2 c6">fields</span><span class="c2 c4">=</span><span class="c2 c17">"{{fields}}"</span><span class="c2 c8">></base-ajax-json-jsonpath-datalet></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></template></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script</span><span class="c2"> </span><span class="c2 c6">src</span><span class="c2 c4">=</span><span class="c2 c17">"js/DataTables-master/media/js/jquery.dataTables.js"</span><span class="c2 c8">></script></span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"><script></span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">DatatableBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> {</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> presentData</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">if</span><span class="c2 c4">(!</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data </span><span class="c2 c4">||</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data </span><span class="c2 c4">==</span><span class="c2"> </span><span class="c2 c8">undefined</span><span class="c2 c4">)</span><span class="c2"> </span><span class="c2 c8">return;</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c2 c17">"";</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'<thead>'+</span></p><p class="c1"><span class="c2"> </span><span class="c2 c17">'<tr>';</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">for</span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2"> x </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c0">0</span><span class="c2 c4">;</span><span class="c2"> x</span><span class="c2 c4"><</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">.</span><span class="c2">length</span><span class="c2 c4">;</span><span class="c2"> x</span><span class="c2 c4">++){</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'<th>'</span><span class="c2"> </span><span class="c2 c4">+</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c2">x</span><span class="c2 c4">].</span><span class="c2">name </span><span class="c2 c4">+</span><span class="c2"> </span><span class="c2 c17">'</th>';</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'</tr>'</span><span class="c2"> +</span></p><p class="c1"><span class="c2"> </span><span class="c2 c17">'</thead>'</span><span class="c2"> +</span></p><p class="c1"><span class="c2"> </span><span class="c2 c17">'<tfoot>'</span><span class="c2"> +</span></p><p class="c1"><span class="c2"> </span><span class="c2 c17">'<tr>';</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">for</span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2"> x </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c0">0</span><span class="c2 c4">;</span><span class="c2"> x</span><span class="c2 c4"><</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">.</span><span class="c2">length</span><span class="c2 c4">;</span><span class="c2"> x</span><span class="c2 c4">++){</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'<th>'</span><span class="c2"> </span><span class="c2 c4">+</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c2">x</span><span class="c2 c4">].</span><span class="c2">name </span><span class="c2 c4">+</span><span class="c2"> </span><span class="c2 c17">'</th>';</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'</tr>'</span><span class="c2"> +</span></p><p class="c1"><span class="c2"> </span><span class="c2 c17">'</tfoot>'</span><span class="c2"> +</span></p><p class="c1"><span class="c2"> </span><span class="c2 c17">'<tbody>';</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">for</span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2"> i </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c0">0</span><span class="c2 c4">;</span><span class="c2"> i</span><span class="c2 c4"><</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c0">0</span><span class="c2 c4">].</span><span class="c2">data</span><span class="c2 c4">.</span><span class="c2">length</span><span class="c2 c4">;</span><span class="c2"> i</span><span class="c2 c4">++){</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'<tr>';</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">for</span><span class="c2 c4">(</span><span class="c2 c8">var</span><span class="c2"> x </span><span class="c2 c4">=</span><span class="c2"> </span><span class="c0">0</span><span class="c2 c4">;</span><span class="c2"> x</span><span class="c2 c4"><</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">.</span><span class="c2">length</span><span class="c2 c4">;</span><span class="c2"> x</span><span class="c2 c4">++){</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'<td>'</span><span class="c2"> </span><span class="c2 c4">+</span><span class="c2"> </span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c2">x</span><span class="c2 c4">].</span><span class="c2">data</span><span class="c2 c4">[</span><span class="c2">i</span><span class="c2 c4">]</span><span class="c2"> </span><span class="c2 c4">+</span><span class="c2"> </span><span class="c2 c17">'</td>';</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'</tr>';</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> html </span><span class="c2 c4">+=</span><span class="c2"> </span><span class="c2 c17">'</tbody>';</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> $</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">_component</span><span class="c2 c4">.</span><span class="c2">$</span><span class="c2 c4">.</span><span class="c2">datatable</span><span class="c2 c4">).</span><span class="c2">append</span><span class="c2 c4">(</span><span class="c2">html</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2"> $</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">.</span><span class="c2">_component</span><span class="c2 c4">.</span><span class="c2">$</span><span class="c2 c4">.</span><span class="c2">datatable</span><span class="c2 c4">).</span><span class="c2 c6">DataTable</span><span class="c2 c4">();</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">};</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c6">Polymer</span><span class="c2 c4">({</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">is</span><span class="c2"> </span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c17">'datatable-datalet'</span><span class="c2"> ,</span></p><p class="c1"><span class="c2"> ready</span><span class="c2 c4">:</span><span class="c2"> </span><span class="c2 c8">function</span><span class="c2 c4">(){</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8">var</span><span class="c2"> </span><span class="c2 c6">DatatableComponentBehavior</span><span class="c2"> </span><span class="c2 c4">=</span><span class="c2"> $</span><span class="c2 c4">.</span><span class="c2">extend</span><span class="c2 c4">(</span><span class="c2 c8">true</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c4">{},</span><span class="c2"> </span><span class="c2 c6">BaseDataletBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">WorkcycleBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">AjaxJsonJsonPathBehavior</span><span class="c2 c4">,</span><span class="c2"> </span><span class="c2 c6">DatatableBehavior</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2"> </span><span class="c2 c6">DatatableComponentBehavior</span><span class="c2 c4">.</span><span class="c2">init</span><span class="c2 c4">(</span><span class="c2 c8">this</span><span class="c2 c4">);</span></p><p class="c1"><span class="c2"> }</span></p><p class="c1 c7"><span class="c2"></span></p><p class="c1"><span class="c2"> </span><span class="c2 c4">});</span></p><p class="c1"><span class="c2"> </span><span class="c2 c8"></script></span></p><p class="c1"><span class="c2 c8"></dom-module></span></p><h2 class="c28 c1"><a name="h.p6eipyeci0pi"></a><span class="c24 c20">Component documentation</span></h2><p class="c1 c7"><span class="c35 c20"></span></p><p class="c1"><span>To document a web component you can use a </span><span class="c16">iron-component-page </span><span>polymer component (https://elements.polymer-project.org/elements/iron-component-page). Each component must be documented to make DEEP able to give information about available components and their usage.</span></p><p class="c1"><span>Documentation can be encoded into html comments (<!-- ... -->) or using JsDoc notation (/** ... */). Markdown format is supported.</span></p><p class="c1"><span>Once you have properly commented the code to include the new component (datalet or controllet) to documentation you have to add the component path to source attribute.</span></p><h2 class="c1 c29"><a name="h.hchmkvzcaha3"></a><span>Deploy a new component</span></h2><p class="c1"><span>Here are described all the mandatory steps for Datalet deploy on DEEP.</span></p><h3 class="c1 c29"><a name="h.biecd569lsp"></a><span>Datalet directory structure</span></h3><p class="c1 c7"><span class="c20"></span></p><p class="c1"><span class="c2 c5">datalet</span><span class="c2 c4">-</span><span class="c2 c5">name</span></p><p class="c1"><span class="c2 c4">|------------</span><span class="c2 c5">datalet</span><span class="c2 c4">-</span><span class="c2 c5">name</span><span class="c2 c4">.</span><span class="c2 c5">png</span></p><p class="c1"><span class="c2 c4">|------------</span><span class="c2 c5">datalet</span><span class="c2 c4">-</span><span class="c2 c5">name</span><span class="c2 c4">.</span><span class="c2 c5">html</span></p><p class="c1"><span class="c2 c4">|------------</span><span class="c2 c5">demo</span></p><p class="c1"><span class="c2 c4">|</span><span class="c2 c5"> </span><span class="c2 c4">|-----</span><span class="c2 c5">index</span><span class="c2 c4">.</span><span class="c2 c5">html</span></p><p class="c1"><span class="c2 c4">|------------</span><span class="c2 c5">docs</span><span class="c2 c4">.</span><span class="c2 c5">html</span></p><p class="c1"><span class="c2 c4">|------------</span><span class="c2 c5">js*</span></p><p class="c1 c10 c50"><span class="c2 c4">|------</span><span class="c2 c5">vendor*</span></p><p class="c1 c10 c50"><span class="c2 c4">|------</span><span class="c2 c5">files</span><span class="c2 c4">.</span><span class="c2 c5">js*</span></p><p class="c1"><span class="c2 c4">|------------</span><span class="c2 c5">images*</span></p><p class="c1 c7"><span></span></p><ul class="c18 lst-kix_j1pbyefbfchs-0 start"><li class="c1 c3"><span>datalet-name.png : is a thumbnail preview of the Datalet</span></li><li class="c1 c3"><span>datalet-name.html : contains all the Datalet html source code</span></li><li class="c1 c3"><span>demo/index.html : is a html page with a static demo of the Datalet </span></li><li class="c1 c3"><span>docs.html : is a static html page with the documentation of the Datalet, made with </span><span class="c16">iron-component-page </span><span>Polymer component</span></li><li class="c1 c3"><span>js : is an optional directory where all the vendor/3rd-parties js library goes and, eventually, the datalet external js code</span></li><li class="c1 c3"><span>images : is an optional directory cointaining all the images used by the Datalet</span></li></ul><p class="c1 c7"><span></span></p><h3 class="c1 c29"><a name="h.8vkbn4c7d1kb"></a><span>Deploy</span></h3><p class="c1 c7"><span class="c20"></span></p><p class="c1"><span>To deploy a new component you have to :</span></p><p class="c1 c7"><span></span></p><ul class="c18 lst-kix_xpt451iyqej1-0 start"><li class="c1 c3"><span>Upload the new component (html, javascripts and stylesheets) in /COMPONENTS/</span><span class="c20">type-of-component</span><span>{datalets/controllets}/</span><span class="c20">name-of-component</span><span> directory. For instance if you have created a </span><span class="c16">my-datalet </span><span>component you have to copy it in</span><span class="c16"> /COMPONENTS/datalets/my-datales/my-datalets-file</span><span>(html, js, css). </span></li><li class="c1 c3"><span>Add a component tag in xml file located in DEEP project: datalets.xml, for a new datalet, controllets.xml, for a new controllet. For instance if you created </span><span class="c16">my-datalet</span><span> component you have to add to datalets.xml the follow example snippet:</span></li></ul><p class="c1 c7"><span></span></p><p class="c1"><span class="c2 c8"><component></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">linechart-datalet</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><attributes></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><attribute></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">data-url</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></attribute></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><attribute></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">fields</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></attribute></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></attributes></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><idm></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><inputs></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">Categories</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><description></span><span class="c2 c5">The chart categories. Its values will be put in the horizontal axis. You need one value for each series.</span><span class="c2 c8"></description></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><scale></span><span class="c2 c5">nominal</span><span class="c2 c8"></scale></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><role></span><span class="c2 c5">domain</span><span class="c2 c8"></role></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><selection></span><span class="c2 c5">11</span><span class="c2 c8"></selection></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">Series</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><description></span><span class="c2 c5">The chart series. Its values will be put in the vertical axis.</span><span class="c2 c8"></description></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><scale></span><span class="c2 c5">nominal</span><span class="c2 c8"></scale></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><role></span><span class="c2 c5">domain</span><span class="c2 c8"></role></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><selection></span><span class="c2 c5">11</span><span class="c2 c8"></selection></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><layouts></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">title</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><description></span><span class="c2 c5">The label for the title of the chart</span><span class="c2 c8"></description></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">x-axis-label</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><description></span><span class="c2 c5">The label for the X axis</span><span class="c2 c8"></description></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">y-axis-label</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><description></span><span class="c2 c5">The label for the Y axis</span><span class="c2 c8"></description></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><name></span><span class="c2 c5">suffix</span><span class="c2 c8"></name></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"><description></span><span class="c2 c5">The values suffix(eg units, dollars, euro, ...)</span><span class="c2 c8"></description></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></input></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></layouts></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></inputs></span></p><p class="c1"><span class="c2 c5"> </span><span class="c2 c8"></idm></span></p><p class="c1"><span class="c2 c8"></component></span></p><p class="c1 c7"><span class="c2 c8"></span></p><p class="c1 c7"><span class="c2 c8"></span></p><p class="c1 c10 c7"><span class="c34"></span></p><p class="c1"><span>You should expose all attributes (adding attributes tags) in order to make the DEEP able to give this information when your component will be requested. </span></p><h1 class="c28 c1"><a name="h.j1ju11botx5f"></a><span class="c59">MISC</span></h1><h2 class="c1 c28"><a name="h.lj7afoxzjwpx"></a><span class="c20 c62">Integrated Development Environment: phpStorm</span></h2><p class="c1"><span>As an Integrated Development Environment (IDE) for PHP and web component, </span><span class="c16">JetBrains Phpstorm </span><span>(</span><span class="c44"><a class="c15" href="https://www.google.com/url?q=https://www.jetbrains.com/phpstorm/&sa=D&usg=AFQjCNEFja53k_-6LipN1wDXc50cD6czpw">https://www.jetbrains.com/phpstorm/</a></span><span> ) has been chosen, but any other ide can be used. PhpStorm provides an editor as support for PHP, HTML, Javascript, CSS and many other languages. </span></p><h2 class="c28 c1"><a name="h.dj5v4msbbn4q"></a><span class="c24 c20">Useful Links</span></h2><p class="c1 c7"><span></span></p><a href="#" name="a37771d9fdc78727aa7a964cfa21f98ee39440b1"></a><a href="#" name="1"></a><table cellpadding="0" cellspacing="0" class="c21"><tbody><tr class="c14"><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span class="c61 c5 c20">Description</span></p></td><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span class="c5 c20 c61">Link</span></p></td></tr><tr class="c14"><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span>Web Components</span></p></td><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span class="c44 c20"><a class="c15" href="https://www.google.com/url?q=http://webcomponents.org/&sa=D&usg=AFQjCNEXztPINwsn6FIolcu896CfGQRIYA">http://webcomponents.org/</a></span><span class="c61 c5 c20"> </span></p></td></tr><tr class="c14"><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span class="c38 c5">Polymer</span></p></td><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span class="c44"><a class="c15" href="https://www.google.com/url?q=https://www.polymer-project.org/1.0/&sa=D&usg=AFQjCNFlxPkCpKMiguvzlQy1HZn5v-2LGQ">https://www.polymer-project.org/1.0/</a></span><span class="c38 c5"> </span></p></td></tr><tr class="c14"><td class="c45" colspan="1" rowspan="1"><p class="c1 c27"><span class="c38 c5">Google Web Component: a collection of web component for Google APIs, built with Polymer</span></p></td><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span class="c44"><a class="c15" href="https://www.google.com/url?q=https://googlewebcomponents.github.io/&sa=D&usg=AFQjCNEqNNdAtF8iltMOlckek-14C97pYQ">https://googlewebcomponents.github.io/</a></span><span class="c38 c5"> </span></p></td></tr><tr class="c14"><td class="c45" colspan="1" rowspan="1"><p class="c1 c60"><span class="c38 c5">Web Components Current Status</span></p><p class="c27 c1 c7"><span class="c38 c5"></span></p></td><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span class="c44"><a class="c15" href="https://www.google.com/url?q=http://www.w3.org/standards/techs/components%23w3c_all&sa=D&usg=AFQjCNFhZyfEvNeFHc1IZSi2ejRauhat-w">http://www.w3.org/standards/techs/components#w3c_all</a></span></p></td></tr><tr class="c14"><td class="c45" colspan="1" rowspan="1"><p class="c60 c1"><span class="c38 c5">Introduction to Web Components</span></p><h1 class="c28 c1 c30 c75"><a name="h.mlmwy1tv4rs3"></a></h1></td><td class="c45" colspan="1" rowspan="1"><p class="c27 c1"><span class="c44"><a class="c15" href="https://www.google.com/url?q=http://www.w3.org/TR/components-intro/&sa=D&usg=AFQjCNGTGtqk71CcDN1m_cXzmI3juKxK1Q">http://www.w3.org/TR/components-intro/</a></span></p></td></tr></tbody></table><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p><p class="c1 c7"><span></span></p></body></html> | |
| 0 | 2 | \ No newline at end of file | ... | ... |
docs/ROUTETOPADeveloperGuidev0.1.html deleted
| 1 | -<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url('https://themes.googleusercontent.com/fonts/css?kit=lhDjYqiy3mZ0x6ROQEUoUw');.lst-kix_caqenjpjbamt-2>li:before{content:"\0025a0 "}.lst-kix_caqenjpjbamt-1>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-3>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-0>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-4>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-6>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-5>li:before{content:"\0025a0 "}.lst-kix_caqenjpjbamt-7>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-8>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-0.start{counter-reset:lst-ctn-kix_cktmoc41t532-0 0}.lst-kix_w0lbiu9bsebc-1>li:before{content:"\0025cb "}.lst-kix_w0lbiu9bsebc-2>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-6.start{counter-reset:lst-ctn-kix_cktmoc41t532-6 0}.lst-kix_w0lbiu9bsebc-0>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-5>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-1.start{counter-reset:lst-ctn-kix_cktmoc41t532-1 0}.lst-kix_w0lbiu9bsebc-7>li:before{content:"\0025cb "}.lst-kix_mwbvd56bd501-6>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-6>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-3>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-5>li:before{content:"\0025a0 "}.lst-kix_mwbvd56bd501-7>li:before{content:"\0025cb "}.lst-kix_mwbvd56bd501-8>li:before{content:"\0025a0 "}.lst-kix_w0lbiu9bsebc-4>li:before{content:"\0025cb "}.lst-kix_w0lbiu9bsebc-8>li:before{content:"\0025a0 "}.lst-kix_cktmoc41t532-2>li{counter-increment:lst-ctn-kix_cktmoc41t532-2}ol.lst-kix_cktmoc41t532-7.start{counter-reset:lst-ctn-kix_cktmoc41t532-7 0}.lst-kix_cktmoc41t532-5>li{counter-increment:lst-ctn-kix_cktmoc41t532-5}.lst-kix_iy595p3cktj3-2>li:before{content:"\0025a0 "}.lst-kix_oia1ur76tkla-6>li:before{content:"\0025cf "}.lst-kix_oia1ur76tkla-4>li:before{content:"\0025cb "}.lst-kix_oia1ur76tkla-8>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-0>li:before{content:"\0025cf "}.lst-kix_z1db35cwkqzv-4>li:before{content:"\0025cb "}.lst-kix_iy595p3cktj3-6>li:before{content:"\0025cf "}ul.lst-kix_xpt451iyqej1-5{list-style-type:none}ul.lst-kix_xpt451iyqej1-4{list-style-type:none}ul.lst-kix_xpt451iyqej1-3{list-style-type:none}ul.lst-kix_xpt451iyqej1-2{list-style-type:none}.lst-kix_iy595p3cktj3-4>li:before{content:"\0025cb "}.lst-kix_cktmoc41t532-4>li{counter-increment:lst-ctn-kix_cktmoc41t532-4}ul.lst-kix_xpt451iyqej1-8{list-style-type:none}ul.lst-kix_xpt451iyqej1-7{list-style-type:none}ul.lst-kix_xpt451iyqej1-6{list-style-type:none}.lst-kix_z1db35cwkqzv-6>li:before{content:"\0025cf "}.lst-kix_xpt451iyqej1-5>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-8>li:before{content:"\0025a0 "}.lst-kix_iy595p3cktj3-8>li:before{content:"\0025a0 "}.lst-kix_cktmoc41t532-3>li{counter-increment:lst-ctn-kix_cktmoc41t532-3}.lst-kix_xpt451iyqej1-7>li:before{content:"\0025cb "}ol.lst-kix_cktmoc41t532-2.start{counter-reset:lst-ctn-kix_cktmoc41t532-2 0}ol.lst-kix_cktmoc41t532-5{list-style-type:none}ol.lst-kix_cktmoc41t532-6{list-style-type:none}ol.lst-kix_cktmoc41t532-7{list-style-type:none}ol.lst-kix_cktmoc41t532-8{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-8{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-6{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-7{list-style-type:none}ol.lst-kix_cktmoc41t532-0{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-4{list-style-type:none}.lst-kix_oia1ur76tkla-0>li:before{content:"\0025cf "}ol.lst-kix_cktmoc41t532-1{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-5{list-style-type:none}ol.lst-kix_cktmoc41t532-2{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-2{list-style-type:none}ol.lst-kix_cktmoc41t532-3{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-3{list-style-type:none}ol.lst-kix_cktmoc41t532-4{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-0{list-style-type:none}.lst-kix_oia1ur76tkla-2>li:before{content:"\0025a0 "}ul.lst-kix_w0lbiu9bsebc-1{list-style-type:none}.lst-kix_iy595p3cktj3-0>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-3>li:before{content:"\0025cf "}.lst-kix_z1db35cwkqzv-2>li:before{content:"\0025a0 "}.lst-kix_mwbvd56bd501-1>li:before{content:"\0025cb "}ol.lst-kix_cktmoc41t532-5.start{counter-reset:lst-ctn-kix_cktmoc41t532-5 0}.lst-kix_oldlfkxmjbuj-5>li:before{content:"\0025a0 "}.lst-kix_xpt451iyqej1-1>li:before{content:"\0025cb "}.lst-kix_oldlfkxmjbuj-7>li:before{content:"\0025cb "}.lst-kix_xpt451iyqej1-3>li:before{content:"\0025cf "}ol.lst-kix_cktmoc41t532-4.start{counter-reset:lst-ctn-kix_cktmoc41t532-4 0}ul.lst-kix_xpt451iyqej1-1{list-style-type:none}ul.lst-kix_xpt451iyqej1-0{list-style-type:none}ol.lst-kix_cktmoc41t532-3.start{counter-reset:lst-ctn-kix_cktmoc41t532-3 0}.lst-kix_cktmoc41t532-0>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-0,decimal) ". "}.lst-kix_cktmoc41t532-1>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-1,lower-latin) ". "}.lst-kix_oldlfkxmjbuj-4>li:before{content:"\0025cb "}ul.lst-kix_caqenjpjbamt-4{list-style-type:none}.lst-kix_cktmoc41t532-4>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-4,lower-latin) ". "}ul.lst-kix_caqenjpjbamt-3{list-style-type:none}ul.lst-kix_caqenjpjbamt-6{list-style-type:none}.lst-kix_oldlfkxmjbuj-3>li:before{content:"\0025cf "}ul.lst-kix_caqenjpjbamt-5{list-style-type:none}ul.lst-kix_caqenjpjbamt-8{list-style-type:none}.lst-kix_cktmoc41t532-2>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-2,lower-roman) ". "}.lst-kix_cktmoc41t532-6>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-6,decimal) ". "}ul.lst-kix_caqenjpjbamt-7{list-style-type:none}.lst-kix_cktmoc41t532-3>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-3,decimal) ". "}.lst-kix_cktmoc41t532-7>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-7,lower-latin) ". "}.lst-kix_oldlfkxmjbuj-2>li:before{content:"\0025a0 "}.lst-kix_ucxv06xdi15q-7>li:before{content:"\0025cb "}.lst-kix_oldlfkxmjbuj-1>li:before{content:"\0025cb "}.lst-kix_cktmoc41t532-5>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-5,lower-roman) ". "}.lst-kix_ucxv06xdi15q-8>li:before{content:"\0025a0 "}.lst-kix_oldlfkxmjbuj-0>li:before{content:"\0025cf "}.lst-kix_ucxv06xdi15q-1>li:before{content:"\0025cb "}.lst-kix_ucxv06xdi15q-3>li:before{content:"\0025cf "}.lst-kix_ucxv06xdi15q-2>li:before{content:"\0025a0 "}.lst-kix_ucxv06xdi15q-6>li:before{content:"\0025cf "}.lst-kix_cktmoc41t532-8>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-8,lower-roman) ". "}.lst-kix_ucxv06xdi15q-5>li:before{content:"\0025a0 "}ul.lst-kix_caqenjpjbamt-0{list-style-type:none}ul.lst-kix_caqenjpjbamt-2{list-style-type:none}.lst-kix_ucxv06xdi15q-4>li:before{content:"\0025cb "}ul.lst-kix_caqenjpjbamt-1{list-style-type:none}ul.lst-kix_ucxv06xdi15q-1{list-style-type:none}ul.lst-kix_ucxv06xdi15q-2{list-style-type:none}ul.lst-kix_ucxv06xdi15q-0{list-style-type:none}ul.lst-kix_ucxv06xdi15q-5{list-style-type:none}ul.lst-kix_ucxv06xdi15q-6{list-style-type:none}ul.lst-kix_ucxv06xdi15q-3{list-style-type:none}ul.lst-kix_ucxv06xdi15q-4{list-style-type:none}ul.lst-kix_ucxv06xdi15q-7{list-style-type:none}ul.lst-kix_ucxv06xdi15q-8{list-style-type:none}ol.lst-kix_cktmoc41t532-8.start{counter-reset:lst-ctn-kix_cktmoc41t532-8 0}.lst-kix_cktmoc41t532-8>li{counter-increment:lst-ctn-kix_cktmoc41t532-8}.lst-kix_iy595p3cktj3-1>li:before{content:"\0025cb "}.lst-kix_iy595p3cktj3-3>li:before{content:"\0025cf "}.lst-kix_oia1ur76tkla-5>li:before{content:"\0025a0 "}.lst-kix_oia1ur76tkla-7>li:before{content:"\0025cb "}.lst-kix_z1db35cwkqzv-1>li:before{content:"\0025cb "}.lst-kix_z1db35cwkqzv-3>li:before{content:"\0025cf "}.lst-kix_iy595p3cktj3-5>li:before{content:"\0025a0 "}ul.lst-kix_oldlfkxmjbuj-0{list-style-type:none}.lst-kix_z1db35cwkqzv-5>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-7>li:before{content:"\0025cb "}ul.lst-kix_oldlfkxmjbuj-1{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-2{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-3{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-4{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-5{list-style-type:none}ul.lst-kix_oia1ur76tkla-1{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-6{list-style-type:none}ul.lst-kix_oia1ur76tkla-2{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-7{list-style-type:none}.lst-kix_xpt451iyqej1-4>li:before{content:"\0025cb "}.lst-kix_xpt451iyqej1-6>li:before{content:"\0025cf "}ul.lst-kix_oldlfkxmjbuj-8{list-style-type:none}ul.lst-kix_oia1ur76tkla-0{list-style-type:none}ul.lst-kix_oia1ur76tkla-5{list-style-type:none}ul.lst-kix_iy595p3cktj3-8{list-style-type:none}ul.lst-kix_oia1ur76tkla-6{list-style-type:none}ul.lst-kix_oia1ur76tkla-3{list-style-type:none}ul.lst-kix_oia1ur76tkla-4{list-style-type:none}ul.lst-kix_iy595p3cktj3-5{list-style-type:none}ul.lst-kix_iy595p3cktj3-4{list-style-type:none}.lst-kix_iy595p3cktj3-7>li:before{content:"\0025cb "}ul.lst-kix_iy595p3cktj3-7{list-style-type:none}ul.lst-kix_oia1ur76tkla-7{list-style-type:none}ul.lst-kix_iy595p3cktj3-6{list-style-type:none}.lst-kix_xpt451iyqej1-8>li:before{content:"\0025a0 "}ul.lst-kix_oia1ur76tkla-8{list-style-type:none}ul.lst-kix_iy595p3cktj3-1{list-style-type:none}ul.lst-kix_iy595p3cktj3-0{list-style-type:none}ul.lst-kix_iy595p3cktj3-3{list-style-type:none}ul.lst-kix_iy595p3cktj3-2{list-style-type:none}.lst-kix_cktmoc41t532-1>li{counter-increment:lst-ctn-kix_cktmoc41t532-1}.lst-kix_oia1ur76tkla-1>li:before{content:"\0025cb "}.lst-kix_oia1ur76tkla-3>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-4>li:before{content:"\0025cb "}.lst-kix_mwbvd56bd501-2>li:before{content:"\0025a0 "}ul.lst-kix_mwbvd56bd501-2{list-style-type:none}ul.lst-kix_mwbvd56bd501-3{list-style-type:none}ul.lst-kix_mwbvd56bd501-0{list-style-type:none}ul.lst-kix_mwbvd56bd501-1{list-style-type:none}.lst-kix_mwbvd56bd501-0>li:before{content:"\0025cf "}.lst-kix_cktmoc41t532-7>li{counter-increment:lst-ctn-kix_cktmoc41t532-7}.lst-kix_ucxv06xdi15q-0>li:before{content:"\0025cf "}ul.lst-kix_mwbvd56bd501-8{list-style-type:none}ul.lst-kix_mwbvd56bd501-6{list-style-type:none}ul.lst-kix_mwbvd56bd501-7{list-style-type:none}ul.lst-kix_mwbvd56bd501-4{list-style-type:none}ul.lst-kix_mwbvd56bd501-5{list-style-type:none}.lst-kix_cktmoc41t532-6>li{counter-increment:lst-ctn-kix_cktmoc41t532-6}.lst-kix_cktmoc41t532-0>li{counter-increment:lst-ctn-kix_cktmoc41t532-0}.lst-kix_oldlfkxmjbuj-6>li:before{content:"\0025cf "}ul.lst-kix_z1db35cwkqzv-2{list-style-type:none}ul.lst-kix_z1db35cwkqzv-3{list-style-type:none}ul.lst-kix_z1db35cwkqzv-0{list-style-type:none}.lst-kix_xpt451iyqej1-2>li:before{content:"\0025a0 "}ul.lst-kix_z1db35cwkqzv-1{list-style-type:none}.lst-kix_oldlfkxmjbuj-8>li:before{content:"\0025a0 "}ul.lst-kix_z1db35cwkqzv-8{list-style-type:none}ul.lst-kix_z1db35cwkqzv-6{list-style-type:none}ul.lst-kix_z1db35cwkqzv-7{list-style-type:none}ul.lst-kix_z1db35cwkqzv-4{list-style-type:none}ul.lst-kix_z1db35cwkqzv-5{list-style-type:none}.lst-kix_xpt451iyqej1-0>li:before{content:"\0025cf "}ol{margin:0;padding:0}.c9{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:225.7pt;border-top-color:#000000;border-bottom-style:solid}.c16{font-weight:normal;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c47{text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c2{orphans:2;widows:2;direction:ltr;height:11pt}.c39{background-color:#f9f2f4;font-size:10pt;font-family:"Consolas";color:#c7254e}.c41{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c22{background-color:#2b2b2b;font-size:8pt;font-family:"Courier New";color:#cc7832}.c55{padding-top:0pt;padding-bottom:0pt;line-height:1.15;text-align:left}.c13{font-size:16pt;font-family:"Trebuchet MS";color:#1155cc;text-decoration:underline}.c32{background-color:#2b2b2b;font-size:8pt;font-family:"Courier New";color:#e8bf6a}.c49{font-size:8pt;font-family:"Courier New";color:#9876aa}.c7{orphans:2;widows:2;direction:ltr}.c18{padding-top:10pt;padding-bottom:0pt;page-break-after:avoid}.c28{font-size:12pt;font-family:"Trebuchet MS";color:#666666}.c26{padding-top:8pt;padding-bottom:0pt;page-break-after:avoid}.c38{padding-bottom:0pt;page-break-after:avoid;text-align:center}.c43{line-height:1.15;text-align:left;height:20pt}.c57{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c59{border-collapse:collapse;margin-right:auto}.c37{font-size:12pt;font-family:"Courier New";color:#e8bf6a}.c36{font-size:21pt;font-family:"Trebuchet MS"}.c17{color:#1155cc;text-decoration:underline}.c30{font-size:16pt;font-family:"Trebuchet MS"}.c51{font-size:12pt;font-family:"Trebuchet MS"}.c45{background-color:#ffffff;color:#212121}.c35{font-size:8pt;color:#e8bf6a}.c50{background-color:#ffffff;color:#dd1144}.c11{background-color:#ffffff;color:#222222}.c27{background-color:#ffffff;color:#333333}.c31{padding:0;margin:0}.c40{margin-left:72pt;padding-left:0pt}.c46{font-family:"Courier New";color:#e8bf6a}.c54{background-color:#ffffff;color:#000080}.c12{color:inherit;text-decoration:inherit}.c0{font-size:9pt;font-family:"Consolas"}.c10{margin-left:36pt;padding-left:0pt}.c21{font-size:13pt;font-family:"Trebuchet MS"}.c58{background-color:#ffffff;color:#0086b3}.c48{font-size:8pt;color:#cc7832}.c60{font-size:9pt}.c56{height:14pt}.c19{text-decoration:underline}.c20{font-weight:bold}.c15{height:0pt}.c6{color:#006666}.c42{line-height:1.0}.c25{margin-left:54pt}.c24{color:#880000}.c4{color:#666600}.c23{margin-left:36pt}.c29{margin-left:18pt}.c34{background-color:#2b2b2b}.c14{color:#008800}.c5{color:#000000}.c33{font-size:13pt}.c44{line-height:1.5}.c3{color:#660066}.c53{text-align:justify}.c8{font-style:italic}.c52{font-size:12pt}.c1{color:#000088}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c57"><p class="c7 c38 title"><a name="h.x2s7wc1lb5an"></a><span class="c36">ROUTE-TO-PA Developer Guide</span></p><p class="c2"><span class="c20 c33"></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.couwk1phskca">An architectural overview</a></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.urv1litmuehw">Code control system</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.6d53fxfci78h">Prerequisites</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.3fwzssauigko">Git</a></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.kq0jx6d2gu42">Keywords</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.2xi4iyxti3it">Web Component</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.waf9mw9uy47v">Polymer</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.oylshnr4dqms">webcomponents.js polyfills</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.wtrwkodajjel">Datalet</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.oa5t1t1cc2mn">Datalet lifecycle</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.qor0wy2nd780">Controllet</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.xrfgk8xj3aux">DEalEr Provider (DEEP)</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.juucc2j3piae">DEEPCLIENT</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.k19gs218be3l">DEEPCLIENT Usage:</a></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.pz7vvqc2atb">Components Tutorial (Polymer 1.0)</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.ig6fal8a8s2x">A behaviors based architecture</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.23494m888vls">An example of datalet for Highchart js library</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.qqdl4o86ucxr">Ajax-Json-JsonPath behavior</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.lmehzpjkgz75">Base datalet</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.6otvlqmjxt9s">base-ajax-json-jsonpath-datalet Datalet</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.5kn6d9gehrxp">Highcharts component</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.ns7fynbyet5s">Linechart datalet</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.ve1g902t8v">Barchart datalet</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.l8rhx6bh9kf">Datatable-datalet</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.p6eipyeci0pi">Component documentation</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.hchmkvzcaha3">Deploy a new component</a></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.j1ju11botx5f">MISC</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.lj7afoxzjwpx">Integrated Development Environment: phpStorm</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.dj5v4msbbn4q">Useful Links</a></span></p><h1 class="c7 c18"><a name="h.couwk1phskca"></a><span class="c30">An architectural overview</span></h1><p class="c2"><span class="c20 c33"></span></p><p class="c7"><span>We’ll briefly introduce our Datalet architectural design. </span></p><p class="c2"><span></span></p><p class="c7"><span>We have three actors: </span></p><ul class="c31 lst-kix_oia1ur76tkla-0 start"><li class="c7 c10"><span>client page that exploit DEEP-Client functionality</span></li><li class="c7 c10"><span>DEEP (Dealer Provider)</span></li><li class="c7 c10"><span>DEEP-Component</span></li></ul><p class="c2"><span></span></p><p class="c7"><span>The DEEP-Client ask to DEEP for a specific Datalet, DEEP responds with the information necessary for the Datalet inclusion, the DEEP-Client retrieve the Datalet from DEEP-Component and include it into the page.</span></p><p class="c7"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 342.67px;"><img alt="SPOD__1_.png" src="images/image00.png" style="width: 624.00px; height: 342.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><ul class="c31 lst-kix_z1db35cwkqzv-0 start"><li class="c7 c10 c42"><span class="c11">A HTML web page that includes webcomponents must include the </span><span class="c11 c20">DEEP-Client</span><span class="c11"> Javascript library, configured with the URL of the DEEP repository.</span></li><li class="c7 c10 c42"><span class="c11">In the above image, a web page contains a </span><span class="c11 c20">data-table</span><span class="c11"> webcomponent that is configured with a </span><span class="c39">data_url</span><span class="c11"> elements (an URL to a data-source) and a </span><span class="c39">params</span><span class="c11"> element (that may contain configuration parameters as requested by the webcomponent).</span></li><li class="c7 c10 c42"><span class="c11">DEEPCLIENT contacts DEEP and asks for the location of the data-table webcomponent.</span></li><li class="c7 c10 c42"><span class="c11">DEEP answers with the complete URL where the Client can download the data-table component.</span></li><li class="c7 c10 c42"><span class="c11">DEEPCLIENT sends a request to the aforementioned webcomponent URL and downloads the data-table webcomponent's code. We say that webcomponents are hosted by a DEEPCOMPONENT repository (basically a web server compatible with HTTP/Ajax that serves webcomponents' HTML code).</span></li><li class="c7 c10 c42"><span class="c11">Once downloaded the data-table webcomponent's code can be placed in the HTML client page and rendered within the browser.</span></li></ul><p class="c2 c44"><span class="c11"></span></p><h1 class="c7 c18"><a name="h.urv1litmuehw"></a><span class="c30">Code control system</span></h1><h2 class="c7 c18 c53"><a name="h.6d53fxfci78h"></a><span class="c20 c52">Prerequisites</span></h2><p class="c2"><span></span></p><ul class="c31 lst-kix_w0lbiu9bsebc-0 start"><li class="c7 c10"><span>Web server with PHP support (DEEP is currently developed in PHP)</span></li><li class="c7 c10"><span>Git client</span></li></ul><h2 class="c7 c18"><a name="h.3fwzssauigko"></a><span class="c20 c33">Git</span></h2><p class="c2"><span></span></p><p class="c7 c53"><span>Go to </span><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://service.routetopa.eu:7480/users/sign_in&sa=D&usg=AFQjCNGrCFMrZzF4Ao1w1RrmCkv-Dw-s2Q">http://service.routetopa.eu:7480/users/sign_in</a></span><span> and create an account.</span></p><p class="c7 c53"><span>Send an email to GIT system administrator (specifying your email account on GIT) to be added into </span><span class="c20">WebCompDev </span><span>group.</span></p><p class="c2"><span></span></p><p class="c7"><span>From terminal:</span></p><p class="c2"><span></span></p><p class="c7"><span>$ git config --global user.name “YOUR NAME”</span></p><p class="c7"><span>$ git config --global user.mail “YOUR EMAIL ADDRESS”</span></p><p class="c7"><span> </span></p><p class="c7"><span>Create a directory inside your public HTML web server directory, then :</span></p><p class="c2"><span></span></p><p class="c7"><span>$ git clone http://service.routetopa.eu:7480/isislab/DEEP.git</span></p><p class="c7"><span>$ git clone http://service.routetopa.eu:7480/isislab/DEEPCLIENT.git</span></p><p class="c7"><span>$ git clone http://service.routetopa.eu:7480/WebCompDev/COMPONENTS.git</span></p><p class="c2"><span></span></p><p class="c7"><span>now in your web server's local directory there are 3 new directory DEEP, DEEPCLIENT, COMPONENTS. </span></p><p class="c2"><span></span></p><p class="c7"><span>Now we have to configure DEEP and DEEPCLIENT to work correctly on your environment.</span></p><p class="c7"><span>In DEEP directory edit file datalets.xml. Substitute the <components_repository_url_reference> value with the full URL of COMPONENTS/datalets just cloned, repeat the same operation for controllets.xml.</span></p><p class="c2"><span></span></p><p class="c7"><span>In DEEPCLIENT edit file index.html and substitute ComponentService.deep_url with the correct DEEP URL.</span></p><p class="c2"><span></span></p><p class="c7"><span>Now you can test the Datalet demo pointing the browser to DEEPCLIENT/index.html</span></p><p class="c2"><span></span></p><hr style="page-break-before:always;display:none;"><p class="c2"><span></span></p><h1 class="c7 c18"><a name="h.kq0jx6d2gu42"></a><span class="c30">Keywords</span></h1><p class="c2"><span class="c20"></span></p><h2 class="c7 c18"><a name="h.2xi4iyxti3it"></a><span class="c21 c20">Web Component </span></h2><p class="c7"><span>Are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications.<br>Web Components consist of 4 main elements which can be used separately or all together:</span></p><ul class="c31 lst-kix_ucxv06xdi15q-0 start"><li class="c7 c10"><span>Custom Elements</span></li><li class="c7 c10"><span>Shadow DOM</span></li><li class="c7 c10"><span>HTML Imports</span></li><li class="c7 c10"><span>HTML Templates</span></li></ul><h2 class="c7 c18"><a name="h.waf9mw9uy47v"></a><span class="c21 c20">Polymer </span></h2><p class="c7"><span>The Polymer library developed by Google is designed to make easier and faster for developers to create reusable components for the modern web.</span></p><p class="c2"><span></span></p><h2 class="c7 c18"><a name="h.oylshnr4dqms"></a><span class="c21 c20">webcomponents.js polyfills</span></h2><p class="c7"><span>Are a set of polyfills built on top of the Web Components specifications. It makes possible for developers to use these standards today across all modern browsers. As these technologies are implemented in browsers, the polyfills will shrink and you'll gain the benefits of native implementations. webcomponents.js automatically detects native support and switches to the fast path when available. Your elements seamlessly start relying on the native implementation.</span></p><p class="c2"><span class="c20"></span></p><h2 class="c7 c18"><a name="h.wtrwkodajjel"></a><span class="c21 c20">Datalet</span></h2><p class="c7"><span>It‘s responsible for data retrieving, filtering and visualization. From technological point of view it’s a web component built with </span><span class="c8">polymer library</span><span>. In our architecture each Datalet inherit from a base web component: base-datalet. </span></p><p class="c7"><span>The base-datalet have two main attributes: data_url and query. The data_url attribute specify the data url from which to take data. This data should be json formatted and available by ajax request. The query attribute is a string which represent a selection and, optionally, filtering to apply to retrieved data. </span></p><p class="c2"><span></span></p><h3 class="c7 c23 c26"><a name="h.oa5t1t1cc2mn"></a><span class="c20 c28">Datalet lifecycle</span></h3><p class="c2 c23"><span class="c20"></span></p><p class="c7 c23"><span>Each Datalet follow this lifecycle inherit from base-datalet:</span></p><p class="c2 c23"><span></span></p><ol class="c31 lst-kix_cktmoc41t532-0 start" start="1"><li class="c7 c40"><span>Data retrieving through an ajax request</span></li><li class="c7 c40"><span>Data selection </span></li><li class="c7 c40"><span>Data filtering (optional)</span></li><li class="c7 c40"><span>Data transformation </span></li><li class="c7 c40"><span>Data presentation</span></li></ol><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span class="c20"></span></p><p class="c2"><span class="c20"></span></p><h2 class="c7 c18"><a name="h.qor0wy2nd780"></a><span class="c20 c21">Controllet </span></h2><p class="c7"><span>It’s a web component created with Polymer library that implements control behaviour like form, slider, etc. It generally use a set of polymer core elements to realize a more complex component using composition paradigm.</span></p><p class="c2"><span class="c20"></span></p><h2 class="c7 c18"><a name="h.xrfgk8xj3aux"></a><span class="c21 c20">DEalEr Provider (DEEP)</span></h2><p class="c7"><span>The Dealer provider (DEEP) is a RESTful web service written in PHP. It make available a public discovery service that retrieve all the Datalet available into the system and a service call that provide a specific Datalet.</span></p><p class="c2"><span></span></p><h2 class="c7 c18"><a name="h.juucc2j3piae"></a><span class="c21 c20">DEEPCLIENT</span></h2><p class="c7"><span>Is a simple javascript library that allows the connection with DEEP and the inclusion of a Datalet within a HTML page.</span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.k19gs218be3l"></a><span class="c28 c20">DEEPCLIENT Usage: </span></h3><p class="c2"><span></span></p><p class="c7"><span>This is a minimal example of deep client usage. </span></p><p class="c2"><span class="c54 c20 c8"></span></p><p class="c7"><span class="c0 c1"><html></span><span class="c0 c5"><br></span><span class="c0 c1"><head></span></p><p class="c7"><span class="c0 c1"><script</span><span class="c0 c5"> </span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">"text/javascript"</span><span class="c0 c5"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"js/jquery-1.11.2.min.js"</span><span class="c0 c1">></script></span><span class="c0 c5"><br></span><span class="c0 c1"><script</span><span class="c0 c5"> </span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">"text/javascript"</span><span class="c0 c5"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"js/webcomponents.js"</span><span class="c0 c1">></script></span><span class="c0 c5"><br></span><span class="c0 c1"><script</span><span class="c0 c5"> </span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">"text/javascript"</span><span class="c0 c5"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"js/deepClient.js"</span><span class="c0 c1">></script></span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c1"><script</span><span class="c0 c5"> </span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">"text/javascript"</span><span class="c0 c1">></span><span class="c0 c5"><br> jQuery(document).ready(function($) {<br> var datalet_params =</span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c4">{</span><span class="c0 c5"><br> component </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c14">"DATALET_NAME"</span><span class="c0 c4">, </span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c1">params</span><span class="c0 c5"> </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c4">{</span><span class="c0 c5"><br> data</span><span class="c0 c4">-</span><span class="c0 c5">url </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c14">"DATA_URL",</span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c4">}</span><span class="c0 c5"><br> fields </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c3">Array</span><span class="c0 c4">(</span><span class="c0 c14">"FIELD1"</span><span class="c0 c4">,</span><span class="c0 c5"> </span><span class="c0 c14">"FIELD2"</span><span class="c0 c4">),</span><span class="c0 c5"><br> placeHolder </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c14">"HTML_PLACEHOLDER"</span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c3">ComponentService</span><span class="c0 c4">.</span><span class="c0 c5">deep_url </span><span class="c0 c4">=</span><span class="c0 c5"> </span><span class="c0 c14">'DEEP_URL'</span><span class="c0 c4">;</span><span class="c0 c5"><br> </span><span class="c0 c3">ComponentService</span><span class="c0 c4">.</span><span class="c0 c5">getComponent</span><span class="c0 c4">(</span><span class="c0 c5">datalet_params</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0 c5"><br> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0 c5"><br> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></head></span></p><p class="c7"><span class="c0 c1"><body></span></p><p class="c7"><span class="c0 c1"><div</span><span class="c0 c5"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"HTML_PLACEHOLDER"</span><span class="c0 c1">></div></span></p><p class="c7"><span class="c0 c1"></body></span></p><p class="c7"><span class="c0 c1"></html></span></p><p class="c2"><span class="c8 c54"></span></p><p class="c2"><span></span></p><p class="c7"><span>We create an empty HTML document with a single DIV. On document ready event we create a datalet_params object, this object contains information for Datalet retrieving and initialization.</span></p><p class="c2"><span></span></p><p class="c7"><span>datalet_params contains :</span></p><ul class="c31 lst-kix_iy595p3cktj3-0 start"><li class="c7 c10"><span class="c8">component :</span><span> the Datalet name to be sent to DEEP (Eg. </span><span class="c50">datatable-datalet</span><span>)</span></li><li class="c7 c10"><span class="c8">params.data-url :</span><span> the datasource URL (Eg.</span><span class="c50">http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50</span><span>)</span></li><li class="c7 c10"><span class="c8">fields :</span><span> an array with user selected fields from datasource (Eg. </span><span class="c58">Array</span><span class="c27">(</span><span class="c50">"Supplier"</span><span class="c27">, </span><span class="c50">"Amount"</span><span class="c27">)</span><span>)</span></li><li class="c7 c10"><span class="c8">placeHolder :</span><span> the ID of the DOM element where place the Datalet </span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c8 c27">ComponentService.getComponent </span><span>function</span><span class="c27 c8"> </span><span>take a datalet_params object as parameter. This function is responsible for Datalet info retrieving from DEPP and Datalet code retrieving from DEEPCOMPONENTS. Once the Datalet code is available DEEPCLIENT add the Datalet to the document DOM and initialize the Datalet with the </span><span class="c8">data </span><span>and </span><span class="c8">fields </span><span>parameters.</span></p><p class="c7"><span>Now the Datalet is able to complete its lifecycle.</span></p><p class="c2"><span></span></p><p class="c7"><span>The programmer must specify the DEEP endpoint through the variable </span><span class="c27 c8">ComponentService.deep_url.</span></p><hr style="page-break-before:always;display:none;"><p class="c2"><span></span></p><h1 class="c7 c18"><a name="h.pz7vvqc2atb"></a><span class="c30">Components Tutorial (Polymer 1.0)</span></h1><p class="c7"><span class="c20">[Knowledge required : javascript, html, Polymer 1.0]</span></p><p class="c2"><span></span></p><h2 class="c7 c18"><a name="h.ig6fal8a8s2x"></a><span class="c21 c20">A behaviors based architecture </span></h2><p class="c2"><span></span></p><p class="c7"><span>Since Polymer 1.0 doesn’t support components inheritance, we provide a way to have it in datalets, waiting for it in the next Polymer version.</span></p><p class="c7"><span>We provide a bundle of objects that implements all behaviors we want our datalets have. They are divided in two categories : BaseDataletsBehaviors and CustomDataletBehaviors. </span></p><p class="c7"><span>The BaseDataletBehaviors define the lifecycle for all Datalets. Every lifecycle step in BaseDataletBehaviors is implemented in the CustomDataletBehaviors. This mechanism provides a components hierarchy that standardize Datalet production and make reusable common behaviors.</span></p><p class="c7"><span> </span></p><p class="c7"><span>The BaseDataletBehaviors are:</span></p><ul class="c31 lst-kix_caqenjpjbamt-0 start"><li class="c7 c10"><span>BaseDataletBehavior</span></li><li class="c7 c10"><span>WorkcycleBehavior</span></li></ul><p class="c2"><span></span></p><p class="c7"><span>The BaseDataletBehavior define the mandatory attributes that all datalet must have :</span></p><p class="c2"><span></span></p><ul class="c31 lst-kix_mwbvd56bd501-0 start"><li class="c7 c10"><span class="c8">data_url (string) : </span><span>the URL used to get the data from the Open Data Provider (e.g. the CKAN API).</span></li><li class="c7 c10"><span class="c8">fields (String)</span><span>: it represents a JSON array of user selected dataset fields.</span></li><li class="c7 c10"><span class="c8">data (array): </span><span> data structure that store the data retrieved from Open Data Provider.</span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">BaseDataletBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> properties</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">It</span><span class="c0"> represent the data url </span><span class="c0 c1">from</span><span class="c0"> CKAN api</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@attribute</span><span class="c0"> dataUrl</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@type</span><span class="c0"> </span><span class="c0 c1">string</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@default</span><span class="c0"> </span><span class="c0 c14">'null'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> dataUrl</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">""</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">It</span><span class="c0"> represents one </span><span class="c0 c1">or</span><span class="c0"> multiple fields selected </span><span class="c0 c1">by</span><span class="c0"> user</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@attribute</span><span class="c0"> fields</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@type</span><span class="c0"> </span><span class="c0 c3">String</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@default</span><span class="c0"> empty</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> fields</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">""</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">The</span><span class="c0"> selected </span><span class="c0 c1">and</span><span class="c0"> transformed data you can </span><span class="c0 c1">use</span><span class="c0"> </span><span class="c0 c1">in</span><span class="c0"> presentation phase</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@attribute</span><span class="c0"> data</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@type</span><span class="c0"> </span><span class="c0 c3">Array</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@default</span><span class="c0"> empty</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> data</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> factoryImpl</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(</span><span class="c0">data_url</span><span class="c0 c4">,</span><span class="c0"> fields</span><span class="c0 c4">)</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data_url </span><span class="c0 c4">=</span><span class="c0"> data_url;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">fields </span><span class="c0 c4">=</span><span class="c0"> fields;</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c2"><span class="c22 c20"></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c7"><span>The WorkcycleBehavior implements the workcycle of each datalets, composed by this steps :</span></p><p class="c2"><span></span></p><ul class="c31 lst-kix_oldlfkxmjbuj-0 start"><li class="c7 c10"><span class="c8">Get the data</span><span> </span><span class="c8">from a source</span><span> : It’s responsible for data retrieving from an Open Data Platform. It’s the starting point of Datalet work-cycle.</span></li><li class="c7 c10"><span class="c8">Select a subset of fields from the data</span><span> : this operation is data format dependent. It’s responsible for extract a query related subset of information from the entire dataset. An multidimensional array will be made available for the transformation step.</span></li><li class="c7 c10"><span class="c8">Filter </span><span>the data by applying logical operation( <, >, =, <=, >=, etc.): this function is designed to apply logical operation to the data created in the selection step (this step and the previous one could be merged together).</span></li><li class="c7 c10"><span class="c8">Transform </span><span>data in order to obtain a coherent data rapresentation</span></li><li class="c7 c10"><span class="c8">Present data </span><span>the data for a specific visualization : here we create the data structure necessary for visualization libraries initialization. At this point could be an interaction with component’s DOM. </span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">WorkcycleBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> _component</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">null,</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Request</span><span class="c0"> data </span><span class="c0 c1">from</span><span class="c0"> source</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">.</span><span class="c0">g</span><span class="c0 c4">.</span><span class="c0"> CKAN </span><span class="c0 c1">by</span><span class="c0"> api</span><span class="c0 c4">)</span><span class="c0"> </span><span class="c0 c1">using</span><span class="c0"> some kind of technology</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">.</span><span class="c0">g</span><span class="c0 c4">.</span><span class="c0"> </span><span class="c0 c3">Ajax)</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> requestData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> requestData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Select</span><span class="c0"> the fields </span><span class="c0 c1">from</span><span class="c0"> data</span><span class="c0 c4">(</span><span class="c0">typically json</span><span class="c0 c4">)</span><span class="c0"> previously retrieved </span><span class="c0 c1">by</span><span class="c0"> ajax request</span><span class="c0 c4">.</span><span class="c0"> </span><span class="c0 c3">The</span><span class="c0"> selection could be </span><span class="c0 c1">done</span><span class="c0"> </span><span class="c0 c1">by</span><span class="c0"> jsonPath but</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> it depends on the representation data format</span><span class="c0 c4">(</span><span class="c0">CKAN apies </span><span class="c0 c1">return</span><span class="c0"> a json representation of the dataset</span><span class="c0 c4">).</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> selectData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> selectData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Filter</span><span class="c0"> data previously selected</span><span class="c0 c4">.</span><span class="c0"> </span><span class="c0 c3">An</span><span class="c0"> example of filterting could be an expression such </span><span class="c0 c14">"fields > 30"</span><span class="c0"> </span><span class="c0 c1">or</span><span class="c0"> </span><span class="c0 c14">"fields = 'AAA'"</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">If</span><span class="c0"> you are </span><span class="c0 c1">using</span><span class="c0"> jsonPath to </span><span class="c0 c1">select</span><span class="c0"> the datas you can apply an expression directly </span><span class="c0 c1">in</span><span class="c0"> the jsonPath query </span><span class="c0 c1">string.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> filterData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> filterData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Transform</span><span class="c0"> the selected data </span><span class="c0 c1">in</span><span class="c0"> order to build the structure that the presentation phase needs.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> transformData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> transformData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Build</span><span class="c0"> the </span><span class="c0 c1">object</span><span class="c0 c4">/</span><span class="c0">s </span><span class="c0 c1">for</span><span class="c0"> presentation layer.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> presentData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> presentData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">This</span><span class="c0"> method represents the entire datalet workcycle.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> runWorkcycle</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> runWorkcycle</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">()</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">selectData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">filterData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">transformData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">presentData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">This</span><span class="c0"> method save the reference to the polymer </span><span class="c0 c1">object</span><span class="c0"> related to the datalet.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> init</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> init</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(</span><span class="c0">component</span><span class="c0 c4">){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component </span><span class="c0 c4">=</span><span class="c0"> component;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">requestData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c2"><span class="c22 c20"></span></p><p class="c7"><span> </span></p><p class="c7"><span>The </span><span class="c8">CustomDataletBehaviors </span><span>represents the specific implementation for the work-cycle steps. </span></p><p class="c7"><span>This behaviours are a components hierarchy that use a particular communication channel, data format and visualization library.</span></p><h2 class="c7 c18"><a name="h.23494m888vls"></a><span class="c21 c20">An example of datalet for Highchart js library</span></h2><p class="c2"><span></span></p><p class="c7"><span>We’ll describe for example purpose a Datalet that use a AJAX channal, handle JSON data format and use Highcharts for data visualization and JSONPATH library for data selection.</span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.qqdl4o86ucxr"></a><span class="c28 c20">Ajax-Json-JsonPath behavior</span></h3><p class="c2"><span></span></p><p class="c7"><span>Here we exploit an AJAX communication channel that handle JSON data format and extends the base behaviors (in particular the requestData method). This behavior override the </span><span class="c8">select </span><span>method in order to perform a JSONPATH query according to the user selected fields stored in the </span><span class="c8">this._component.fields </span><span>variable.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> properties</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">It</span><span class="c0"> contains the json data </span><span class="c0 c1">from</span><span class="c0"> async xhr call returned </span><span class="c0 c1">from</span><span class="c0"> core</span><span class="c0 c4">-</span><span class="c0">ajax core component</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@attribute</span><span class="c0"> json_results</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@type</span><span class="c0"> </span><span class="c0 c1">object</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@default</span><span class="c0"> </span><span class="c0 c14">'null'.</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> json_results</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Object,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">{}</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Make</span><span class="c0"> an AJAX call to the dataset URL</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> requestData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> requestData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> comp </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">ajax</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> url</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">dataUrl,</span></p><p class="c7"><span class="c0"> dataType</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">"json",</span></p><p class="c7"><span class="c0"> success</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">){</span></p><p class="c7"><span class="c0"> comp</span><span class="c0 c4">.</span><span class="c0">handleResponse</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Called</span><span class="c0"> </span><span class="c0 c1">when</span><span class="c0"> core</span><span class="c0 c4">-</span><span class="c0">ajax component receive the json data </span><span class="c0 c1">from</span><span class="c0"> called url.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> handleResponse</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> handleResponse</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">)</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">json_results</span><span class="c0 c4">.</span><span class="c0">value </span><span class="c0 c4">=</span><span class="c0"> e;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">runWorkcycle</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> selectData built a JSONPATH query based on the user selected fields </span><span class="c0 c1">then</span><span class="c0"> extract data </span><span class="c0 c1">from</span><span class="c0"> the JSON response.</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">This</span><span class="c0"> method built an objects </span><span class="c0 c4"><</span><span class="c0">name</span><span class="c0 c4">,</span><span class="c0"> data</span><span class="c0 c4">></span><span class="c0"> </span><span class="c0 c1">for</span><span class="c0"> every user selected field </span><span class="c0 c1">and</span><span class="c0"> push it </span><span class="c0 c1">into</span><span class="c0"> the data array.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> selectData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> selectData </span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c4">[];</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">fields </span><span class="c0 c4">=</span><span class="c0"> JSON</span><span class="c0 c4">.</span><span class="c0">parse</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">fields</span><span class="c0 c4">);</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> i</span><span class="c0 c4">=</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0">i </span><span class="c0 c4"><</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">fields</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> query </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c14">"$";</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> query_elements </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">fields</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">].</span><span class="c0">split</span><span class="c0 c4">(</span><span class="c0 c14">','</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> j</span><span class="c0 c4">=</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> j </span><span class="c0 c4"><</span><span class="c0"> query_elements</span><span class="c0 c4">.</span><span class="c0">length </span><span class="c0 c4">-</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">;</span><span class="c0">j</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> query </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">"['"</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> query_elements</span><span class="c0 c4">[</span><span class="c0">j</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">"']";</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> query </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">"[*]"</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">"['"</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> query_elements</span><span class="c0 c4">[</span><span class="c0">query_elements</span><span class="c0 c4">.</span><span class="c0">length </span><span class="c0 c4">-</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">"']";</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">push</span><span class="c0 c4">({</span><span class="c0">name </span><span class="c0 c4">:</span><span class="c0"> query_elements</span><span class="c0 c4">[</span><span class="c0">query_elements</span><span class="c0 c4">.</span><span class="c0">length </span><span class="c0 c4">-</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">],</span><span class="c0"> data </span><span class="c0 c4">:</span><span class="c0"> jsonPath</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">json_results</span><span class="c0 c4">.</span><span class="c0">value</span><span class="c0 c4">,</span><span class="c0"> query</span><span class="c0 c4">)});</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c2"><span class="c22 c20"></span></p><p class="c2"><span></span></p><ul class="c31 lst-kix_mwbvd56bd501-0"><li class="c7 c10"><span class="c8">json_results(object): </span><span>the object that will store the JSON results returned from data request. It will be used from the Datalets which will use this behavior in order to access to this response object everywhere. </span></li><li class="c7 c10"><span class="c8">requestData</span><span>: it’s an override of WorkcicleBehavior component to use AJAX to request data</span></li><li class="c7 c10"><span class="c8">handleResponse</span><span>: it’s callback for AJAX request that set the </span><span class="c8">json_response </span><span>attribute that will be used by the specialized behavior that will use the data (select, filter and transform) and </span><span class="c8 c19">run the workcycle</span><span>.</span></li></ul><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.lmehzpjkgz75"></a><span class="c28 c20">Base datalet</span></h3><p class="c2"><span></span></p><p class="c7"><span>We define a </span><span class="c8">base-datalet</span><span> that include BaseDataletBehavior</span><span class="c0"> </span><span>and a footer that contain a ROUTE-TO-PA logo and data source domain information.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../../bower_components/polymer/polymer.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"base-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><style></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">#footer {</span></p><p class="c7"><span class="c0"> position</span><span class="c0 c4">:</span><span class="c0"> relative;</span></p><p class="c7"><span class="c0"> bottom</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">0;</span></p><p class="c7"><span class="c0"> width</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">100</span><span class="c0 c4">%;</span></p><p class="c7"><span class="c0"> font</span><span class="c0 c4">-</span><span class="c0">size</span><span class="c0 c4">:</span><span class="c0"> small;</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">#rtpalogo{</span></p><p class="c7"><span class="c0"> height</span><span class="c0 c4">:</span><span class="c0 c6">30px;</span></p><p class="c7"><span class="c0"> width</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">30px;</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></style></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><b></span><span class="c0">Source : </span><span class="c0 c1"></b><span</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"domain"</span><span class="c0 c1">></span><br><br></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><div</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"footer"</span><span class="c0 c1">></span><span class="c0">Powered by Route-to-PA&nbsp&nbsp</span><span class="c0 c1"><a</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"http://routetopa.eu/"</span><span class="c0 c1">><img</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/images/rtpalogo.png"</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"rtpalogo"</span><span class="c0 c1">></a></div><br></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/BaseDataletBehavior.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">BaseDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'base-datalet',</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">It</span><span class="c0"> </span><span class="c0 c1">is</span><span class="c0"> called after the element</span><span class="c0 c4">'</span><span class="c0">s </span><span class="c0 c1">template</span><span class="c0"> has been stamped </span><span class="c0 c1">and</span><span class="c0"> all elements inside the element</span><span class="c0 c4">'</span><span class="c0">s </span><span class="c0 c1">local</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> DOM have been configured </span><span class="c0 c4">(</span><span class="c0 c1">with</span><span class="c0"> values bound </span><span class="c0 c1">from</span><span class="c0"> parents</span><span class="c0 c4">,</span><span class="c0"> deserialized attributes</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c1">or</span><span class="c0"> </span><span class="c0 c1">else</span><span class="c0"> </span><span class="c0 c1">default</span><span class="c0"> values)</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> had their ready method called.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Extract</span><span class="c0"> the dataset domain </span><span class="c0 c1">from</span><span class="c0"> the entire URL </span><span class="c0 c1">and</span><span class="c0"> </span><span class="c0 c1">set</span><span class="c0"> the text content of the datalet footer.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> ready</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">domain</span><span class="c0 c4">.</span><span class="c0">textContent </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">dataUrl</span><span class="c0 c4">.</span><span class="c0">split</span><span class="c0 c4">(</span><span class="c0 c14">"/"</span><span class="c0 c4">)[</span><span class="c0 c6">0</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">"//"</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">dataUrl</span><span class="c0 c4">.</span><span class="c0">split</span><span class="c0 c4">(</span><span class="c0 c14">"/"</span><span class="c0 c4">)[</span><span class="c0 c6">2</span><span class="c0 c4">];</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c2"><span class="c32"></span></p><p class="c2"><span></span></p><p class="c7"><span>All components that import this one will include the BaseDataletBehavior.</span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.6otvlqmjxt9s"></a><span class="c28 c20">base-ajax-json-jsonpath-datalet Datalet</span></h3><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../base-datalet/base-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"base-ajax-json-jsonpath-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><base-datalet</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></base-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/vendor/jsonpath-0.8.5.js"</span><span class="c0 c1">></script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/AjaxJsonJsonPathBehavior.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">BaseDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'base-ajax-json-jsonpath-datalet'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c2"><span></span></p><p class="c7"><span>All components that import this one will include AjaxJsonJsonPathBehavior and JSONPath library. Since this Datalet handle JSON data, we use JSONPath (</span><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://goessner.net/articles/JsonPath/&sa=D&usg=AFQjCNGOqQI4Dex9zLdrZuBzOrLQrcgPrw">http://goessner.net/articles/JsonPath/</a></span><span>) to select specific fields from entire dataset (an example of query is $.result.records..Supplier $.result.records..Amount). For a new datatype a new behavior and new way to select the fields should be provided.</span></p><h3 class="c7 c26"><a name="h.5kn6d9gehrxp"></a><span class="c28 c20">Highcharts component</span></h3><p class="c2"><span class="c20 c52"></span></p><p class="c7"><span>The component we’ll present in this section include Highcharts javascript library (</span><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://www.highcharts.com/&sa=D&usg=AFQjCNGff99OZ7OOqXVqP6dPX0ZQRv8QJw">http://www.highcharts.com/</a></span><span>) to visualize data in a several type of charts.</span></p><p class="c7"><span>Since all selected example charts use the same way to select the data to build the categories and series objects, we built a super Highchart component which all our specific chart datalet will “extend” in order to share the selection mechanism.</span></p><p class="c7"><span> </span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"highcharts-datalet"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><div</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"container"</span><span class="c0"> </span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">"</span><span class="c0">width</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0"> height</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">"</span><span class="c0 c1">></div></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><base-ajax-json-jsonpath-datalet</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></base-ajax-json-jsonpath-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/highcharts.js"</span><span class="c0 c1">></script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/exporting.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">HighchartsBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> properties</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> categories</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> series</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> series_type</span><span class="c0 c4">:{</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">"line"</span><span class="c0 c24">//spline,time</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Populate</span><span class="c0"> the categories </span><span class="c0 c1">and</span><span class="c0"> the series array.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> transformData</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@param</span><span class="c0"> </span><span class="c0 c4">{</span><span class="c0 c3">Event</span><span class="c0 c4">}</span><span class="c0"> e</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> transformData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0"> </span><span class="c0 c4">()</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">categories</span><span class="c0 c4">.</span><span class="c0">value </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0 c6">0</span><span class="c0 c4">].</span><span class="c0">data;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0"> </span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> i </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">;</span><span class="c0"> i </span><span class="c0 c4"><</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4">++)</span></p><p class="c7"><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">].</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">every</span><span class="c0 c4">(</span><span class="c0 c1">function</span><span class="c0"> </span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">,</span><span class="c0"> index</span><span class="c0 c4">,</span><span class="c0"> array</span><span class="c0 c4">)</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">try</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">// TODO fix this parsing mechanism</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">(</span><span class="c0">isNaN</span><span class="c0 c4">(</span><span class="c0">parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">)))</span><span class="c0"> </span><span class="c0 c4">?</span><span class="c0"> array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">.</span><span class="c0">match</span><span class="c0 c4">(</span><span class="c0 c14">/[0-9]+/</span><span class="c0">g</span><span class="c0 c4">).</span><span class="c0">join</span><span class="c0 c4">(</span><span class="c0 c14">"."</span><span class="c0 c4">))</span><span class="c0"> :</span></p><p class="c7"><span class="c0"> array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">}</span><span class="c0 c1">catch</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">//console.log("Parsing data error. Highchart-datalet.selectData");</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">return</span><span class="c0"> </span><span class="c0 c1">true;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">series</span><span class="c0 c4">.</span><span class="c0">value</span><span class="c0 c4">.</span><span class="c0">push</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">]);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">HighchartsBehavior</span><span class="c0 c4">);</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">HighchartsDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0"> </span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'highcharts-datalet'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c2"><span class="c32"></span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span>First we have to import the base-ajax-json-jsonpath-datalet, in order to extend its behavior and include its DOM:</span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../base-datalet/base-datalet.html"></span></p><p class="c2"><span class="c35 c34"></span></p><p class="c2"><span class="c35 c34"></span></p><p class="c7"><span>In the template section (the DOM part of our new datalet) we include the superclass DOM (as footer) and create a div as placeholder for chart object. </span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><div</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"container"</span><span class="c0"> </span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">"</span><span class="c0">width</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0"> height</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">"</span><span class="c0 c1">></div></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><base-ajax-json-jsonpath-datalet</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></base-ajax-json-jsonpath-datalet></span></p><p class="c7"><span class="c0 c1"></template></span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span> </span></p><p class="c7"><span>At this point we include the Highchart javascript library used by all chart datalets which use Highchart as visualization library.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/highcharts.js"</span><span class="c0 c1">></script></span></p><p class="c7"><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/exporting.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c32"></span></p><p class="c2"><span class="c34 c35"></span></p><p class="c7"><span>Now we define a new behavior with all attribute that the specialized chart datalets can share (</span><span class="c8">categories</span><span> and </span><span class="c8">series</span><span>) and the implementation of a selection method. </span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">HighchartsBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> properties</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> categories</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> series</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> series_type</span><span class="c0 c4">:{</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">"line"</span><span class="c0 c24">//spline,time</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Populate</span><span class="c0"> the categories </span><span class="c0 c1">and</span><span class="c0"> the series array.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> transformData</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@param</span><span class="c0"> </span><span class="c0 c4">{</span><span class="c0 c3">Event</span><span class="c0 c4">}</span><span class="c0"> e</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> transformData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0"> </span><span class="c0 c4">()</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">categories</span><span class="c0 c4">.</span><span class="c0">value </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0 c6">0</span><span class="c0 c4">].</span><span class="c0">data;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0"> </span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> i </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">;</span><span class="c0"> i </span><span class="c0 c4"><</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4">++)</span></p><p class="c7"><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">].</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">every</span><span class="c0 c4">(</span><span class="c0 c1">function</span><span class="c0"> </span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">,</span><span class="c0"> index</span><span class="c0 c4">,</span><span class="c0"> array</span><span class="c0 c4">)</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">try</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">// TODO fix this parsing mechanism</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">(</span><span class="c0">isNaN</span><span class="c0 c4">(</span><span class="c0">parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">)))</span><span class="c0"> </span><span class="c0 c4">?</span><span class="c0"> array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">.</span><span class="c0">match</span><span class="c0 c4">(</span><span class="c0 c14">/[0-9]+/</span><span class="c0">g</span><span class="c0 c4">).</span><span class="c0">join</span><span class="c0 c4">(</span><span class="c0 c14">"."</span><span class="c0 c4">))</span><span class="c0"> :</span></p><p class="c7"><span class="c0"> array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">}</span><span class="c0 c1">catch</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">//console.log("Parsing data error. Highchart-datalet.selectData");</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">return</span><span class="c0"> </span><span class="c0 c1">true;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">series</span><span class="c0 c4">.</span><span class="c0">value</span><span class="c0 c4">.</span><span class="c0">push</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">]);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c2"><span class="c34 c48"></span></p><p class="c7"><span>We are overriding the </span><span class="c8">transformData </span><span>method of </span><span class="c8">WorkcycleBehavior </span><span>so to access to </span><span class="c8">data attribute</span><span> we have to use the reference to the Polymer component (</span><span class="c8">this._component</span><span>). This reference will be set by the final component that implements all workcycle (that visualize the chart in our example), as we will show you later. As you can notice in the </span><span class="c8">transformData </span><span>function we can access to </span><span class="c8">json_results </span><span>attribute defined in the Behavior that implements the communication channel.</span></p><p class="c7"><span>After defined the Behavior for Highchart component we have to extend it to include the BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior to crate a new behavior specific for our new Datalet. The order of the extension is crucial (see JQuery $.extend docs). </span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">HighchartsBehavior</span><span class="c0 c4">);</span></p><p class="c2"><span class="c22"></span></p><p class="c2"><span></span></p><p class="c7"><span>The last thing to do is to create the Polymer javascript object.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c3">HighchartsDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0"> </span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'highcharts-datalet'</span></p><p class="c7"><span class="c0 c4">});</span></p><p class="c2"><span class="c49 c34"></span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.ns7fynbyet5s"></a><span class="c28 c20">Linechart datalet</span></h3><p class="c2"><span></span></p><p class="c7"><span>The linechart-datalet will use the highchart-component to visualize a linechart. To do this we override the </span><span class="c8">presentData </span><span>method, in a new behavior(</span><span class="c8">LinechartBehavior</span><span>), in order to use the categories and series attributes, generated by “super class”, to build the chart.</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../highcharts-datalet/highcharts-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"linechart-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><highcharts-datalet</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"charts"</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></highcharts-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Bluid</span><span class="c0"> </span><span class="c0 c3">Highchart</span><span class="c0"> </span><span class="c0 c1">object</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> presentData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> presentData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">charts</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">container</span><span class="c0 c4">).</span><span class="c0">highcharts</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'Line chart'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> chart</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> zoomType</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'xy'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> xAxis</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> categories</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">categories</span><span class="c0 c4">.</span><span class="c0">value</span><span class="c0 c4">,</span><span class="c0 c24">//this._component.categories,</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">null</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> yAxis</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'Units'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> plotLines</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[{</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">0,</span></p><p class="c7"><span class="c0"> width</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0"> color</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'#808080'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">}]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> tooltip</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> valueSuffix</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">' units'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> legend</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> layout</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'vertical',</span></p><p class="c7"><span class="c0"> align</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'right',</span></p><p class="c7"><span class="c0"> verticalAlign</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'top',</span></p><p class="c7"><span class="c0"> x</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">-</span><span class="c0 c6">40,</span></p><p class="c7"><span class="c0"> y</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">100,</span></p><p class="c7"><span class="c0"> floating</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true,</span></p><p class="c7"><span class="c0"> borderWidth</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0"> backgroundColor</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">((</span><span class="c0 c3">Highcharts</span><span class="c0 c4">.</span><span class="c0">theme </span><span class="c0 c4">&&</span><span class="c0"> </span><span class="c0 c3">Highcharts</span><span class="c0 c4">.</span><span class="c0">theme</span><span class="c0 c4">.</span><span class="c0">legendBackgroundColor</span><span class="c0 c4">)</span><span class="c0"> </span><span class="c0 c4">||</span><span class="c0"> </span><span class="c0 c14">'#FFFFFF'</span><span class="c0 c4">),</span></p><p class="c7"><span class="c0"> shadow</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> credits</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> enabled</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">false</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> series</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">series</span><span class="c0 c4">.</span><span class="c0">value</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">LinechartDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'linechart-datalet',</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c14">'ready'</span><span class="c0"> callback extend the </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0"> </span><span class="c0 c1">with</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> run the </span><span class="c0 c3">Datalet</span><span class="c0"> workcycle.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> ready</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0 c4">.</span><span class="c0">init</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c7"><span> </span></p><p class="c7"><span>After creating the main component behavior (</span><span class="c8">LinechartComponentBehavior</span><span>) extending the </span><span class="c8">HighchartComponentBehavior </span><span>previously created, we have to initialize it by passing the reference to Polymer object associated to linechart-datalet. We do it in the </span><span class="c8">ready </span><span>handler of Polymer object.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c3">LinechartDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'linechart-datalet',</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c14">'ready'</span><span class="c0"> callback extend the </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0"> </span><span class="c0 c1">with</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> run the </span><span class="c0 c3">Datalet</span><span class="c0"> workcycle.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> ready</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0 c4">.</span><span class="c0">init</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0 c4">});</span></p><p class="c2"><span class="c34 c49"></span></p><p class="c2"><span></span></p><p class="c7"><span>The ready handler define a </span><span class="c45">lifecycle callback invoked when all local DOM children of this element have been created and "configured" with data bound from this element, attribute values, or defaults.</span></p><p class="c7"><span class="c45">The base behavior will use this reference to get information from the Polymer component like passed attributes, DOM, etc.</span></p><p class="c7"><span class="c45"> </span></p><p class="c7"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 322.67px;"><img alt="" src="images/image02.png" style="width: 624.00px; height: 322.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.ve1g902t8v"></a><span class="c28 c20">Barchart datalet</span></h3><p class="c2"><span></span></p><p class="c7"><span>The barchart-datalet will use the highchart-datalet to visualize a barchart. </span></p><p class="c2"><span class="c34 c46"></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../highcharts-datalet/highcharts-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">name</span><span class="c0 c4">=</span><span class="c0 c14">"barchart-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><highcharts-datalet</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"charts"</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></highcharts-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">BarchartBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Bluid</span><span class="c0"> </span><span class="c0 c3">Highchart</span><span class="c0"> </span><span class="c0 c1">object</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> transformData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> presentData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">charts</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">container</span><span class="c0 c4">).</span><span class="c0">highcharts</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> chart</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'bar',</span></p><p class="c7"><span class="c0"> zoomType</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'xy'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'Bar chart'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> xAxis</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> categories</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">categories</span><span class="c0 c4">.</span><span class="c0">value,</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">null</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> yAxis</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> min</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">0,</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'Foreclosure (units)',</span></p><p class="c7"><span class="c0"> align</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'high'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> labels</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> overflow</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'justify'</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> tooltip</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> valueSuffix</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">' units'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> plotOptions</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> bar</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> dataLabels</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> enabled</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> legend</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> layout</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'vertical',</span></p><p class="c7"><span class="c0"> align</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'right',</span></p><p class="c7"><span class="c0"> verticalAlign</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'top',</span></p><p class="c7"><span class="c0"> x</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">-</span><span class="c0 c6">40,</span></p><p class="c7"><span class="c0"> y</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">100,</span></p><p class="c7"><span class="c0"> floating</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true,</span></p><p class="c7"><span class="c0"> borderWidth</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0"> backgroundColor</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">((</span><span class="c0 c3">Highcharts</span><span class="c0 c4">.</span><span class="c0">theme </span><span class="c0 c4">&&</span><span class="c0"> </span><span class="c0 c3">Highcharts</span><span class="c0 c4">.</span><span class="c0">theme</span><span class="c0 c4">.</span><span class="c0">legendBackgroundColor</span><span class="c0 c4">)</span><span class="c0"> </span><span class="c0 c4">||</span><span class="c0"> </span><span class="c0 c14">'#FFFFFF'</span><span class="c0 c4">),</span></p><p class="c7"><span class="c0"> shadow</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> credits</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> enabled</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">false</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> series</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">series</span><span class="c0 c4">.</span><span class="c0">value</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">BarchartDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'barchart-datalet',</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c14">'ready'</span><span class="c0"> callback extend the </span><span class="c0 c3">BarchartComponentBehavior</span><span class="c0"> </span><span class="c0 c1">with</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> </span><span class="c0 c3">BarchartBehavior</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> run the </span><span class="c0 c3">Datalet</span><span class="c0"> workcycle.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> ready</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">BarchartComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">BarchartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">BarchartComponentBehavior</span><span class="c0 c4">.</span><span class="c0">init</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 324.00px;"><img alt="" src="images/image01.png" style="width: 624.00px; height: 324.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c2"><span></span></p><h3 class="c7 c26 c56"><a name="h.4krgu9mab6k2"></a></h3><h2 class="c7 c18"><a name="h.l8rhx6bh9kf"></a><span class="c21 c20">Datatable-datalet</span></h2><p class="c2"><span></span></p><p class="c7"><span>To be more complete we present another example of datalet that is slightly different from previous ones: a table based datalet which use Datatables javascript library (</span><span class="c17"><a class="c12" href="https://www.google.com/url?q=https://www.datatables.net/&sa=D&usg=AFQjCNE6nKMIs1fA5sz4RDBfC7IHuWpY5w">https://www.datatables.net/</a></span><span>) to render a table. The main difference is that datatable-datalet component has a dynamic DOM built according to the size of data.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"datatable-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"stylesheet"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"js/DataTables-master/media/css/jquery.dataTables.min.css"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><table</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"datatable"</span><span class="c0"> </span><span class="c0 c3">class</span><span class="c0 c4">=</span><span class="c0 c14">"table table-striped table-bordered"</span><span class="c0"> </span><span class="c0 c3">cellspacing</span><span class="c0 c4">=</span><span class="c0 c14">"0"</span><span class="c0"> </span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">"</span><span class="c0">height</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0"> width</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></table></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><base-ajax-json-jsonpath-datalet</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></base-ajax-json-jsonpath-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"js/DataTables-master/media/js/jquery.dataTables.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">DatatableBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> presentData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">if</span><span class="c0 c4">(!</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data </span><span class="c0 c4">||</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data </span><span class="c0 c4">==</span><span class="c0"> </span><span class="c0 c1">undefined</span><span class="c0 c4">)</span><span class="c0"> </span><span class="c0 c1">return;</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c14">"";</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<thead>'+</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'<tr>';</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> x </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4"><</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<th>'</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">x</span><span class="c0 c4">].</span><span class="c0">name </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">'</th>';</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'</tr>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'</thead>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'<tfoot>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'<tr>';</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> x </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4"><</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<th>'</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">x</span><span class="c0 c4">].</span><span class="c0">name </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">'</th>';</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'</tr>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'</tfoot>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'<tbody>';</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> i </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4"><</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0 c6">0</span><span class="c0 c4">].</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<tr>';</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> x </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4"><</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<td>'</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">x</span><span class="c0 c4">].</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">'</td>';</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'</tr>';</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'</tbody>';</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">datatable</span><span class="c0 c4">).</span><span class="c0">append</span><span class="c0 c4">(</span><span class="c0">html</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">datatable</span><span class="c0 c4">).</span><span class="c0 c3">DataTable</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0"> </span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'datatable-datalet'</span><span class="c0"> ,</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">DatatableComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">DatatableBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">DatatableComponentBehavior</span><span class="c0 c4">.</span><span class="c0">init</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><h2 class="c7 c18"><a name="h.p6eipyeci0pi"></a><span class="c21 c20">Component documentation</span></h2><p class="c2"><span class="c20 c52"></span></p><p class="c7"><span>To document a web component you can use a </span><span class="c8">iron-component-page </span><span>polymer component(https://elements.polymer-project.org/elements/iron-component-page). Each component must be documented to make DEEP able to give information about available components and their usage.</span></p><p class="c7"><span>Documentation can be encoded into html comments (<!-- ... -->) or using JsDoc notation (/** ... */). Markdown format is supported.</span></p><p class="c7"><span>Once you have properly commented the code to include the new component (datalet or controllet) to documentation you have to add the component path to source attribute.</span></p><p class="c2"><span></span></p><h2 class="c7 c18"><a name="h.hchmkvzcaha3"></a><span class="c21 c20">Deploy a new component</span></h2><p class="c2"><span class="c20"></span></p><p class="c7"><span>To deploy a new component we have to :</span></p><p class="c2"><span></span></p><ul class="c31 lst-kix_xpt451iyqej1-0 start"><li class="c7 c10"><span>Upload the new component (html, javascripts and stylesheets) in /COMPONENTS/</span><span class="c20">type-of-component</span><span>{datalets/controllets}/</span><span class="c20">name-of-component</span><span> directory. For instance if you have created a </span><span class="c8">my-datalet </span><span>component you have to copy it in</span><span class="c8"> /COMPONENTS/datalets/my-datales/my-datalets-file</span><span>(html, js, css). </span></li><li class="c7 c10"><span>Add a component tag in xml file located in DEEP project: datalets.xml, for a new datalet, controllets.xml, for a new controllet. For instance if you created </span><span class="c8">my-datalet</span><span> component you have to add to datalets.xml the follow snippet:</span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><component></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">barchart-datalet</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><attributes></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><attribute></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">data-url</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></attribute></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><attribute></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">query</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></attribute></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></attributes></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><idm></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><inputs></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">Categories</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><description></span><span class="c0">The chart categories. Its values will be put in the horizontal axis. You need one value for each series.</span><span class="c0 c1"></description></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><scale></span><span class="c0">nominal</span><span class="c0 c1"></scale></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><role></span><span class="c0">domain</span><span class="c0 c1"></role></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><selection></span><span class="c0">11</span><span class="c0 c1"></selection></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">Series</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><description></span><span class="c0">The chart series. Its values will be put in the vertical axis.</span><span class="c0 c1"></description></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><scale></span><span class="c0">nominal</span><span class="c0 c1"></scale></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><role></span><span class="c0">domain</span><span class="c0 c1"></role></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><selection></span><span class="c0">11</span><span class="c0 c1"></selection></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><layouts></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">x-axis-label</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></layouts></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></inputs></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></idm></span></p><p class="c7"><span class="c0 c1"></component></span></p><p class="c2"><span class="c0 c1"></span></p><p class="c2 c23"><span class="c32"></span></p><p class="c7"><span>You should expose all attributes (adding attributes tags) in order to make the DEEP able to give this information when your component will be requested. </span></p><h1 class="c7 c18"><a name="h.j1ju11botx5f"></a><span class="c30">MISC</span></h1><h2 class="c7 c18"><a name="h.lj7afoxzjwpx"></a><span class="c20 c33">Integrated Development Environment: phpStorm</span></h2><p class="c7"><span>As an Integrated Development Environment (IDE) for PHP and web component, </span><span class="c8">JetBrains Phpstorm </span><span>(</span><span class="c17"><a class="c12" href="https://www.google.com/url?q=https://www.jetbrains.com/phpstorm/&sa=D&usg=AFQjCNEFja53k_-6LipN1wDXc50cD6czpw">https://www.jetbrains.com/phpstorm/</a></span><span> ) has been chosen, but any other ide can be used. PhpStorm provides an editor as support for PHP, HTML, Javascript, CSS and many other languages. </span></p><h2 class="c7 c18"><a name="h.dj5v4msbbn4q"></a><span class="c21 c20">Useful Links</span></h2><p class="c2"><span></span></p><a href="#" name="a37771d9fdc78727aa7a964cfa21f98ee39440b1"></a><a href="#" name="0"></a><table cellpadding="0" cellspacing="0" class="c59"><tbody><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c47 c20 c5">Description</span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c47 c20 c5">Link</span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span>Web Components</span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17 c20"><a class="c12" href="https://www.google.com/url?q=http://webcomponents.org/&sa=D&usg=AFQjCNEXztPINwsn6FIolcu896CfGQRIYA">http://webcomponents.org/</a></span><span class="c47 c20 c5"> </span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c16 c5">Polymer</span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17"><a class="c12" href="https://www.google.com/url?q=https://www.polymer-project.org/1.0/&sa=D&usg=AFQjCNFlxPkCpKMiguvzlQy1HZn5v-2LGQ">https://www.polymer-project.org/1.0/</a></span><span class="c16 c5"> </span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c7 c41"><span class="c16 c5">Google Web Component: a collection of web component for Google APIs, built with Polymer</span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17"><a class="c12" href="https://www.google.com/url?q=https://googlewebcomponents.github.io/&sa=D&usg=AFQjCNEqNNdAtF8iltMOlckek-14C97pYQ">https://googlewebcomponents.github.io/</a></span><span class="c16 c5"> </span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c55 c7"><span class="c16 c5">Web Components Current Status</span></p><p class="c2 c41"><span class="c16 c5"></span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://www.w3.org/standards/techs/components%23w3c_all&sa=D&usg=AFQjCNFhZyfEvNeFHc1IZSi2ejRauhat-w">http://www.w3.org/standards/techs/components#w3c_all</a></span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c7 c55"><span class="c5 c16">Introduction to Web Components</span></p><h1 class="c7 c18 c43"><a name="h.mlmwy1tv4rs3"></a></h1></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://www.w3.org/TR/components-intro/&sa=D&usg=AFQjCNGTGtqk71CcDN1m_cXzmI3juKxK1Q">http://www.w3.org/TR/components-intro/</a></span></p></td></tr></tbody></table><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p></body></html> | |
| 2 | 0 | \ No newline at end of file |
docs/docs.html
| ... | ... | @@ -111,7 +111,7 @@ |
| 111 | 111 | <div>Documentation</div> |
| 112 | 112 | <div style="position: absolute;right:30px; top:10px;"><paper-icon-button style="background-color: white; border-radius: 50%;" src="images/source-code.png" on-click="_onSourceClick"></paper-icon-button></div> |
| 113 | 113 | </paper-toolbar> |
| 114 | - <div id="main_content" style="height: 100%; width: 100%"><iframe src="ROUTETOPADeveloperGuidev0.1.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe></div> | |
| 114 | + <div id="main_content" style="height: 100%; width: 100%"><iframe src="ROUTETOPADataletDeveloperGuidev0.1.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe></div> | |
| 115 | 115 | </paper-header-panel> |
| 116 | 116 | </paper-drawer-panel> |
| 117 | 117 | </template> |
| ... | ... | @@ -165,7 +165,7 @@ |
| 165 | 165 | }; |
| 166 | 166 | |
| 167 | 167 | Doc._onGeneralClick = function(event){ |
| 168 | - Doc.$.main_content.innerHTML = '<iframe src="ROUTETOPADeveloperGuidev0.1.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>'; | |
| 168 | + Doc.$.main_content.innerHTML = '<iframe src="ROUTETOPADataletDeveloperGuidev0.1.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>'; | |
| 169 | 169 | }; |
| 170 | 170 | |
| 171 | 171 | Doc._onSourceClick = function(event){ | ... | ... |
docs/images/image00.png
100755 → 100644
docs/images/image01.png
100755 → 100644
docs/images/image02.png
100755 → 100644
