WebCompDev / COMPONENTS

Commit 584d6ecd825137aa455b0bbbee054476f68a9605

Authored by Luigi Serra
1 parent 5e6ba8af

Update components documentation

Inline Side-by-side
Showing 64 changed files with 361 additions and 44 deletions
README.md 100644 → 100755
  View file @584d6ec
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @584d6ec
1 1 <!--
2 2 @license
  3 + The MIT License (MIT)
3 4  
4   -The MIT License (MIT)
5   -
6   -Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
7 6  
8 7 Permission is hereby granted, free of charge, to any person obtaining a copy
9 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -65,7 +64,7 @@ Example:
65 64  
66 65 @element data-sevc-controllet
67 66 @status beta
68   -@homepage
  67 +@homepage index.html
69 68 @group controllets
70 69 -->
71 70  
... ...
controllets/data-sevc-controllet/docs.html
  View file @584d6ec
1 1 <!DOCTYPE html>
2 2 <html lang="en">
3 3 <head>
4   - <link rel="import" href="bower_components/iron-component-page/iron-component-page.html">
5   - <link rel="import" href="../../bower_components">
  4 + <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
6 5  
7 6 <meta charset="UTF-8">
8 7 </head>
9 8 <body>
10 9  
11   -<iron-component-page src="data-sevc-controllet.html"></iron-component-page>
  10 +<iron-component-page src="data-sevc-controllet.html" ></iron-component-page>
12 11  
13 12 </body>
14 13 </html>
15 14 \ No newline at end of file
... ...
controllets/draggable-element-controllet/draggable-element-controllet.html
  View file @584d6ec
1 1 <!--
2 2 @license
  3 + The MIT License (MIT)
3 4  
4   -The MIT License (MIT)
5   -
6   -Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
7 6  
8 7 Permission is hereby granted, free of charge, to any person obtaining a copy
9 8 of this software and associated documentation files (the "Software"), to deal
... ...
controllets/items-slider-controllet/items-slider-controllet.html
  View file @584d6ec
1 1 <!--
2 2 @license
  3 + The MIT License (MIT)
3 4  
4   -The MIT License (MIT)
5   -
6   -Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
7 6  
8 7 Permission is hereby granted, free of charge, to any person obtaining a copy
9 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -35,6 +34,23 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
35 34 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
36 35 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
37 36  
  37 +<!--
  38 + `items-slider-controllet` is a carousel of cards with a title and an image. Pass to it an array of objects with name and image fields and
  39 + a responsive slider will be created. Every time the user click on a card an event will be generate in order to get the card clicked information to
  40 + the component that use the slider.
  41 +
  42 +Example:
  43 +
  44 + <items-slider-controllet items='[{name : "myObject1", image : "pathToMyImage1"},...,{name : "myObjectN", image : "pathToMyImageN"}]' \>
  45 + </items-slider-controllet>
  46 +
  47 +
  48 +@element items-slider-controllet
  49 +@status beta
  50 +@homepage index.html
  51 +@group controllets
  52 +-->
  53 +
38 54 <dom-module id="items-slider-controllet">
39 55 <template>
40 56  
... ... @@ -166,7 +182,13 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
166 182  
167 183 Polymer({
168 184  
169   - is : 'items-slider-controllet',
  185 + is : 'items-slider-controllet',
  186 +
  187 + /**
  188 + * Fired when the user selects a card from slider by clicking on it.
  189 + *
  190 + * @event items-slider-controllet_item-selected
  191 + */
170 192  
171 193 properties : {
172 194  
... ... @@ -188,15 +210,11 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
188 210 /**
189 211 * It stores all items to put in the slider
190 212 *
191   - * @attribute tools
192   - * @type array
193   - * @default 'null'
194 213 */
195 214 items : {
196 215 type: Array,
197 216 value: []
198 217 },
199   -
200 218 itemsPages : {
201 219 type : Array,
202 220 value : []
... ...
controllets/treeview-controllet/treeview-controllet.html
  View file @584d6ec
1 1 <!--
2   -The MIT License (MIT)
  2 +@license
  3 + The MIT License (MIT)
3 4  
4   -Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
5 6  
6 7 Permission is hereby granted, free of charge, to any person obtaining a copy
7 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -26,6 +27,26 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
26 27 <link rel="import" href="../../bower_components/paper-styles/color.html">
27 28 <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
28 29  
  30 +<!--
  31 + `treeview-controllet` build a treeview from an input object. Each leaf fields of the object has a material design checkbox. When the user select a field
  32 + an event will broadcast in order to make the component that use the treeview to get the current selected filed.
  33 + After insert the `treeview-controllet` in the DOM you have to initialize it with the object you want put in the tree because of to make this component able
  34 + to work with async object request.
  35 +
  36 +Example:
  37 +
  38 + <treeview-controllet id="treeviewID"></treeview-controllet>
  39 +
  40 + in the javascript code:
  41 +
  42 + this.$.treeviewID.init(object);
  43 +
  44 +@element items-slider-controllet
  45 +@status beta
  46 +@homepage index.html
  47 +@group controllets
  48 +-->
  49 +
29 50 <dom-module id="treeview-controllet">
30 51 <template>
31 52  
... ... @@ -204,14 +225,20 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
204 225 },
205 226  
206 227 properties : {
207   -
  228 + /**
  229 + * It stores the fields structure of the tree
  230 + *
  231 + */
208 232 fieldsMap : {
209 233 type : Map,
210 234 value : null
211 235 }
212 236  
213 237 },
214   -
  238 + /**
  239 + * Create the container for all leaf node fields when a field has a children set.
  240 + *
  241 + */
215 242 createFieldsContainer : function(id, heading){
216 243  
217 244 var ul = document.createElement('ul');
... ... @@ -236,7 +263,10 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
236 263 return ul;
237 264  
238 265 },
239   -
  266 + /**
  267 + * Create the checkbox for current leaf node field.
  268 + *
  269 + */
240 270 createListItem : function(id, label) {
241 271  
242 272 return '<li class="list__item">' +
... ... @@ -251,7 +281,10 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
251 281 '</div>' +
252 282 '</li>';
253 283 },
254   -
  284 + /**
  285 + * Recursively analyze the input object and build the treeview
  286 + *
  287 + */
255 288 analyzeObject : function(parent_list, curr_field, object) {
256 289 if(object == null) return;
257 290 if(curr_field != null){
... ... @@ -288,7 +321,11 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
288 321 }
289 322 }
290 323 },
291   -
  324 + /**
  325 + * Initialize treeview with the object you want put in the tree because of to make this component able
  326 + * to work with async object request.
  327 + *
  328 + */
292 329 init : function(data){
293 330 //crete root node and insert it in to shadow dom
294 331 var mainPanel = this.createFieldsContainer("root", "Data fields");
... ... @@ -303,7 +340,10 @@ Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
303 340 this.analyzeObject(new Array("root"), null, data);
304 341  
305 342 },
306   -
  343 + /**
  344 + * When a user click on a checkbox it retrieves all checked fields and fire an event with this information.
  345 + *
  346 + */
307 347 fireSelectedFields : function(){
308 348  
309 349 var cbs = Polymer.dom(this.$.treeview_placeholder).querySelectorAll('input[type=checkbox]:checked');
... ...
datalets/barchart-datalet/demo/index.html 100644 → 100755
  View file @584d6ec
datalets/base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html 100644 → 100755
  View file @584d6ec
datalets/base-ajax-json-jsonpath-datalet/docs.html 100644 → 100755
  View file @584d6ec
datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js 100644 → 100755
  View file @584d6ec
datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.json 0 → 100644
  View file @584d6ec
  1 +{
  2 + "elements": [],
  3 + "elementsByTagName": {},
  4 + "behaviors": [
  5 + {
  6 + "type": "behaviour",
  7 + "desc": "Defined in `AjaxJsonJsonPathBehaviour.js`. Itos a specific implemetation that uses Ajax to get the data in Json format and uses JsonPath to select and filtering the data",
  8 + "events": [],
  9 + "properties": [
  10 + {
  11 + "name": "json_results",
  12 + "type": "Object",
  13 + "desc": "It contains the json data from async xhr call returned from core-ajax core component",
  14 + "published": true
  15 + },
  16 + {
  17 + "name": "requestData",
  18 + "type": "Function",
  19 + "desc": "Make an AJAX call to the dataset URL",
  20 + "params": [
  21 + ],
  22 + "published": true,
  23 + "function": true
  24 + },
  25 + {
  26 + "name": "handleResponse",
  27 + "type": "Function",
  28 + "desc": "Called when core-ajax component receive the json data from called url.",
  29 + "params": [
  30 + ],
  31 + "published": true,
  32 + "function": true
  33 + },
  34 + {
  35 + "name": "selectData",
  36 + "type": "Function",
  37 + "desc": "selectData built a JSONPATH query based on the user selected fields then extract data from the JSON response. This method built an objects <name, data> for every user selected field and push it into the data array.",
  38 + "params": [
  39 + ],
  40 + "published": true,
  41 + "function": true
  42 + }
  43 + ],
  44 + "is": "AjaxJsonJsonPathBehaviour"
  45 + }
  46 + ]
  47 +}
0 48 \ No newline at end of file
... ...
datalets/base-ajax-json-jsonpath-datalet/static/js/vendor/jsonpath-0.8.5.js 100644 → 100755
  View file @584d6ec
datalets/base-datalet/static/js/BaseDataletBehavior.json 0 → 100644
  View file @584d6ec
  1 +{
  2 + "elements": [],
  3 + "elementsByTagName": {},
  4 + "behaviors": [
  5 + {
  6 + "type": "behaviour",
  7 + "desc": "Defined in `BaseDataletBehaviours.js`. It is the base behavior for all datalets. it contains the main properties common in all visualization : Dataset url, fields and transformed data array",
  8 + "events": [],
  9 + "properties": [
  10 + {
  11 + "name": "dataUrl",
  12 + "type": "String",
  13 + "desc": "It represent the dataset api url",
  14 + "published": true
  15 + },
  16 + {
  17 + "name": "fields",
  18 + "type": "Array",
  19 + "desc": "It represents one or multiple fields selected by user",
  20 + "published": true
  21 + },
  22 + {
  23 + "name": "data",
  24 + "type": "Array",
  25 + "desc": "The selected and transformed data you can use in presentation phase",
  26 + "published": true
  27 + },
  28 + {
  29 + "name": "factoryImpl",
  30 + "type": "Function",
  31 + "desc": "Contructor to create the datalet via javascript",
  32 + "params": [
  33 + {
  34 + "name": "data_url",
  35 + "type": "String",
  36 + "desc": "",
  37 + "published": true
  38 + },
  39 + {
  40 + "name": "fields",
  41 + "type": "Array",
  42 + "desc": "",
  43 + "published": true
  44 + }
  45 + ],
  46 + "private": true,
  47 + "function": true
  48 + }
  49 + ],
  50 + "is": "BaseDataletBehaviour"
  51 + }
  52 + ]
  53 +}
0 54 \ No newline at end of file
... ...
datalets/base-datalet/static/js/BaseDataletBehaviors.js 100644 → 100755
  View file @584d6ec
... ... @@ -28,7 +28,7 @@ var BaseDataletBehavior ={
28 28 properties: {
29 29  
30 30 /**
31   - * It represent the data url from CKAN api
  31 + * It represent the dataset api url
32 32 *
33 33 * @attribute dataUrl
34 34 * @type string
... ... @@ -73,7 +73,10 @@ var BaseDataletBehavior ={
73 73 };
74 74  
75 75 var WorkcycleBehavior = {
76   -
  76 + /**
  77 + * A reference to Polymer object
  78 + *
  79 + */
77 80 _component: null,
78 81  
79 82 /**
... ...
datalets/base-datalet/static/js/WorkcycleBehavior.json 0 → 100644
  View file @584d6ec
  1 +{
  2 + "elements": [],
  3 + "elementsByTagName": {},
  4 + "behaviors": [
  5 + {
  6 + "type": "behaviour",
  7 + "desc": "Defined in `BaseDataletBehaviours.js`. It represents the datalet lifecycle and contains all methods that the specific implementation will override to define a way to get, select, filter, transform and present the data",
  8 + "events": [],
  9 + "properties": [
  10 + {
  11 + "name": "_component",
  12 + "type": "Object",
  13 + "desc": "A reference to Polymer object",
  14 + "published": true
  15 + },
  16 + {
  17 + "name": "requestData",
  18 + "type": "Function",
  19 + "desc": "Request data from source(e.g. CKAN by api) using some kind of technology(e.g. Ajax)",
  20 + "params": [],
  21 + "published": true,
  22 + "function": true
  23 + },
  24 + {
  25 + "name": "selectData",
  26 + "type": "Function",
  27 + "desc": "Select the fields from data(typically json) previously retrieved by ajax request. The selection could be done by jsonPath but it depends on the representation data format(CKAN apies return a json representation of the dataset).",
  28 + "params": [],
  29 + "published": true,
  30 + "function": true
  31 + },
  32 + {
  33 + "name": "filterData",
  34 + "type": "Function",
  35 + "desc": "Filter data previously selected. An example of filterting could be an expression such \"fields > 30\" or \"fields = 'AAA'\" If you are using jsonPath to select the datas you can apply an expression directly in the jsonPath query string.",
  36 + "params": [],
  37 + "published": true,
  38 + "function": true
  39 + },
  40 + {
  41 + "name": "transformData",
  42 + "type": "Function",
  43 + "desc": "Transform the selected data in order to build the structure that the presentation phase needs.",
  44 + "params": [],
  45 + "published": true,
  46 + "function": true
  47 + },
  48 + {
  49 + "name": "presentData",
  50 + "type": "Function",
  51 + "desc": "Build the object/s for presentation layer.",
  52 + "params": [],
  53 + "published": true,
  54 + "function": true
  55 + },
  56 + {
  57 + "name": "runWorkcycle",
  58 + "type": "Function",
  59 + "desc": "This method represents the entire datalet workcycle.",
  60 + "params": [],
  61 + "published": true,
  62 + "function": true
  63 + },
  64 + {
  65 + "name": "init",
  66 + "type": "Function",
  67 + "desc": "This method save the reference to the polymer object related to the datalet.",
  68 + "params": [],
  69 + "published": true,
  70 + "function": true
  71 + }
  72 + ],
  73 + "is": "WorkcycleBehavior"
  74 + }
  75 + ]
  76 +}
0 77 \ No newline at end of file
... ...
datalets/column3Dchart-datalet/demo/index.html 100644 → 100755
  View file @584d6ec
datalets/columnchart-datalet/demo/index.html 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/demo/index.html 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/.datatables-commit-sync 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/.gitignore 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/Contributing.md 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/Readme.md 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/bower.json 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/composer.json 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/dataTables.jquery.json 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/license.txt 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/dataTables.bootstrap.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/dataTables.bootstrap.min.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/dataTables.foundation.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/dataTables.foundation.min.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/dataTables.jqueryui.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/dataTables.jqueryui.min.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/jquery.dataTables.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/jquery.dataTables.min.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/css/jquery.dataTables_themeroller.css 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/images/Sorting icons.psd 100644 → 100755
View file @584d6ec
No preview for this file type
datalets/datatable-datalet/js/DataTables-master/media/images/favicon.ico 100644 → 100755
View file @584d6ec
No preview for this file type
datalets/datatable-datalet/js/DataTables-master/media/images/sort_asc.png 100644 → 100755
View file @584d6ec

160 Bytes | W: | H:

160 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/datatable-datalet/js/DataTables-master/media/images/sort_asc_disabled.png 100644 → 100755
View file @584d6ec

148 Bytes | W: | H:

148 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/datatable-datalet/js/DataTables-master/media/images/sort_both.png 100644 → 100755
View file @584d6ec

201 Bytes | W: | H:

201 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/datatable-datalet/js/DataTables-master/media/images/sort_desc.png 100644 → 100755
View file @584d6ec

158 Bytes | W: | H:

158 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/datatable-datalet/js/DataTables-master/media/images/sort_desc_disabled.png 100644 → 100755
View file @584d6ec

146 Bytes | W: | H:

146 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
datalets/datatable-datalet/js/DataTables-master/media/js/dataTables.bootstrap.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/js/dataTables.bootstrap.min.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/js/dataTables.foundation.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/js/dataTables.foundation.min.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/js/dataTables.jqueryui.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/js/dataTables.jqueryui.min.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/js/jquery.dataTables.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/js/jquery.dataTables.min.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/media/js/jquery.js 100644 → 100755
  View file @584d6ec
datalets/datatable-datalet/js/DataTables-master/package.json 100644 → 100755
  View file @584d6ec
datalets/highcharts-datalet/highcharts-datalet.html
  View file @584d6ec
... ... @@ -77,7 +77,27 @@ Example :
77 77 value: "line"//spline,time
78 78 }
79 79 },
  80 + /**
  81 + * Normalizes a number in agreement with javascript's conventions. Delete all NaN characters. Exception: number representing lat & long remain unchanged.
  82 + */
  83 + jNumConverter: function(num) {
  84 + //lat-long
  85 + if(num.charAt(num.length-7) == "." && (num.match(/[\.,]/g) || []).length == 1)
  86 + return num;
  87 +
  88 + var jNum = "";
  89 + for (var i = 0; i < num.length; i++) {
  90 + if(num[i].match(/[\.,]/g))
  91 + if (i == num.length - 3)
  92 + jNum += ".";
  93 + else
  94 + ;
  95 + else if (!isNaN(num[i]))
  96 + jNum += num[i];
  97 + }
80 98  
  99 + return jNum;
  100 + },
81 101 /**
82 102 * Populate the categories and the series array.
83 103 *
... ... @@ -94,8 +114,8 @@ Example :
94 114  
95 115 this.data[i].data.every(function (element, index, array) {
96 116 try {
97   - // TODO fix this parsing mechanism
98   - (isNaN(parseFloat(element))) ? array[index] = parseFloat(element.match(/[0-9]+/g).join(".")) :
  117 + var e = HighchartsBehavior.jNumConverter(element);
  118 + (isNaN(element)) ? array[index] = parseFloat(HighchartsBehavior.jNumConverter(element)) :
99 119 array[index] = parseFloat(element);
100 120 }catch(e){
101 121 //console.log("Parsing data error. Highchart-datalet.selectData");
... ...
datalets/highcharts-datalet/static/js/exporting.js 100644 → 100755
  View file @584d6ec
datalets/highcharts-datalet/static/js/highcharts.js 100644 → 100755
  View file @584d6ec
datalets/leafletjs-datalet/demo/index.html 100644 → 100755
  View file @584d6ec
datalets/linechart-datalet/demo/index.html 100644 → 100755
  View file @584d6ec
datalets/treemap-datalet/demo/index.html 100644 → 100755
  View file @584d6ec
docs/ROUTETOPADeveloperGuidev0.1.html 0 → 100644
  View file @584d6ec
  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&rsquo;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">&nbsp;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">&nbsp;webcomponent that is configured with a </span><span class="c39">data_url</span><span class="c11">&nbsp;elements (an URL to a data-source) and a </span><span class="c39">params</span><span class="c11">&nbsp;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&#39;s code. We say that webcomponents are hosted by a DEEPCOMPONENT repository (basically a web server compatible with HTTP/Ajax that serves webcomponents&#39; HTML code).</span></li><li class="c7 c10 c42"><span class="c11">Once downloaded the data-table webcomponent&#39;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&amp;sa=D&amp;usg=AFQjCNGrCFMrZzF4Ao1w1RrmCkv-Dw-s2Q">http://service.routetopa.eu:7480/users/sign_in</a></span><span>&nbsp;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 &ldquo;YOUR NAME&rdquo;</span></p><p class="c7"><span>$ git config --global user.mail &ldquo;YOUR EMAIL ADDRESS&rdquo;</span></p><p class="c7"><span>&nbsp;</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&#39;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 &lt;components_repository_url_reference&gt; 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&#39;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&lsquo;s responsible for data retrieving, filtering and visualization. From technological point of view it&rsquo;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&rsquo;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">&lt;html&gt;</span><span class="c0 c5"><br></span><span class="c0 c1">&lt;head&gt;</span></p><p class="c7"><span class="c0 c1">&lt;script</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">&quot;text/javascript&quot;</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;js/jquery-1.11.2.min.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span><span class="c0 c5"><br></span><span class="c0 c1">&lt;script</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">&quot;text/javascript&quot;</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;js/webcomponents.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span><span class="c0 c5"><br></span><span class="c0 c1">&lt;script</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">&quot;text/javascript&quot;</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;js/deepClient.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span></p><p class="c7"><span class="c0 c5">&nbsp;</span><span class="c0 c1">&lt;script</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">&quot;text/javascript&quot;</span><span class="c0 c1">&gt;</span><span class="c0 c5"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery(document).ready(function($) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; var datalet_params =</span></p><p class="c7"><span class="c0 c5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">{</span><span class="c0 c5"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;component &nbsp; </span><span class="c0 c4">:</span><span class="c0 c5">&nbsp;</span><span class="c0 c14">&quot;DATALET_NAME&quot;</span><span class="c0 c4">, </span></p><p class="c7"><span class="c0 c5">&nbsp; &nbsp; &nbsp; </span><span class="c0 c1">params</span><span class="c0 c5">&nbsp;</span><span class="c0 c4">:</span><span class="c0 c5">&nbsp;</span><span class="c0 c4">{</span><span class="c0 c5"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data</span><span class="c0 c4">-</span><span class="c0 c5">url &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">:</span><span class="c0 c5">&nbsp;</span><span class="c0 c14">&quot;DATA_URL&quot;,</span></p><p class="c7"><span class="c0 c5">&nbsp; &nbsp; &nbsp; </span><span class="c0 c4">}</span><span class="c0 c5"><br> &nbsp; &nbsp; fields &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">:</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">Array</span><span class="c0 c4">(</span><span class="c0 c14">&quot;FIELD1&quot;</span><span class="c0 c4">,</span><span class="c0 c5">&nbsp;</span><span class="c0 c14">&quot;FIELD2&quot;</span><span class="c0 c4">),</span><span class="c0 c5"><br> &nbsp; &nbsp; placeHolder </span><span class="c0 c4">:</span><span class="c0 c5">&nbsp;</span><span class="c0 c14">&quot;HTML_PLACEHOLDER&quot;</span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c7"><span class="c0 c5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</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">&nbsp;</span><span class="c0 c14">&#39;DEEP_URL&#39;</span><span class="c0 c4">;</span><span class="c0 c5"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; </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> &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0 c5"><br> &nbsp;</span><span class="c0 c1">&lt;/script&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/head&gt;</span></p><p class="c7"><span class="c0 c1">&lt;body&gt;</span></p><p class="c7"><span class="c0 c1">&lt;div</span><span class="c0 c5">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;HTML_PLACEHOLDER&quot;</span><span class="c0 c1">&gt;&lt;/div&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/body&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/html&gt;</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>&nbsp;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>&nbsp;the datasource URL (Eg.</span><span class="c50">http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&amp;limit=50</span><span>)</span></li><li class="c7 c10"><span class="c8">fields :</span><span>&nbsp;an array with user selected fields from datasource (Eg. </span><span class="c58">Array</span><span class="c27">(</span><span class="c50">&quot;Supplier&quot;</span><span class="c27">, </span><span class="c50">&quot;Amount&quot;</span><span class="c27">)</span><span>)</span></li><li class="c7 c10"><span class="c8">placeHolder :</span><span>&nbsp;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">&nbsp;</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&rsquo;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 &nbsp;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>&nbsp;</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>&nbsp;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">&nbsp;</span><span class="c0 c3">BaseDataletBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;properties</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">It</span><span class="c0">&nbsp;represent the data url </span><span class="c0 c1">from</span><span class="c0">&nbsp;CKAN api</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@attribute</span><span class="c0">&nbsp;dataUrl</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@type</span><span class="c0">&nbsp;</span><span class="c0 c1">string</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@default</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;null&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;dataUrl</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;&quot;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">It</span><span class="c0">&nbsp;represents one </span><span class="c0 c1">or</span><span class="c0">&nbsp;multiple fields selected </span><span class="c0 c1">by</span><span class="c0">&nbsp;user</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@attribute</span><span class="c0">&nbsp;fields</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@type</span><span class="c0">&nbsp;</span><span class="c0 c3">String</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@default</span><span class="c0">&nbsp;empty</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;fields</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;&quot;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">The</span><span class="c0">&nbsp;selected </span><span class="c0 c1">and</span><span class="c0">&nbsp;transformed data you can </span><span class="c0 c1">use</span><span class="c0">&nbsp;</span><span class="c0 c1">in</span><span class="c0">&nbsp;presentation phase</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@attribute</span><span class="c0">&nbsp;data</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@type</span><span class="c0">&nbsp;</span><span class="c0 c3">Array</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@default</span><span class="c0">&nbsp;empty</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;data</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;factoryImpl</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp;fields</span><span class="c0 c4">)</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;data_url;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">fields &nbsp; </span><span class="c0 c4">=</span><span class="c0">&nbsp;fields;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;}</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>&nbsp;</span><span class="c8">from a source</span><span>&nbsp;: It&rsquo;s responsible for data retrieving from an Open Data Platform. It&rsquo;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>&nbsp;: this operation is data format dependent. It&rsquo;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( &lt;, &gt;, =, &lt;=, &gt;=, 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&rsquo;s DOM. &nbsp; &nbsp; </span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">WorkcycleBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;_component</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">null,</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Request</span><span class="c0">&nbsp;data </span><span class="c0 c1">from</span><span class="c0">&nbsp;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">&nbsp;CKAN </span><span class="c0 c1">by</span><span class="c0">&nbsp;api</span><span class="c0 c4">)</span><span class="c0">&nbsp;</span><span class="c0 c1">using</span><span class="c0">&nbsp;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">&nbsp;</span><span class="c0 c3">Ajax)</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;requestData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;requestData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Select</span><span class="c0">&nbsp;the fields </span><span class="c0 c1">from</span><span class="c0">&nbsp;data</span><span class="c0 c4">(</span><span class="c0">typically json</span><span class="c0 c4">)</span><span class="c0">&nbsp;previously retrieved </span><span class="c0 c1">by</span><span class="c0">&nbsp;ajax request</span><span class="c0 c4">.</span><span class="c0">&nbsp;</span><span class="c0 c3">The</span><span class="c0">&nbsp;selection could be </span><span class="c0 c1">done</span><span class="c0">&nbsp;</span><span class="c0 c1">by</span><span class="c0">&nbsp;jsonPath but</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;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">&nbsp;a json representation of the dataset</span><span class="c0 c4">).</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;selectData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;selectData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Filter</span><span class="c0">&nbsp;data previously selected</span><span class="c0 c4">.</span><span class="c0">&nbsp;</span><span class="c0 c3">An</span><span class="c0">&nbsp;example of filterting could be an expression such </span><span class="c0 c14">&quot;fields &gt; 30&quot;</span><span class="c0">&nbsp;</span><span class="c0 c1">or</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;fields = &#39;AAA&#39;&quot;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">If</span><span class="c0">&nbsp;you are </span><span class="c0 c1">using</span><span class="c0">&nbsp;jsonPath to </span><span class="c0 c1">select</span><span class="c0">&nbsp;the datas you can apply an expression directly </span><span class="c0 c1">in</span><span class="c0">&nbsp;the jsonPath query </span><span class="c0 c1">string.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;filterData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;filterData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Transform</span><span class="c0">&nbsp;the selected data </span><span class="c0 c1">in</span><span class="c0">&nbsp;order to build the structure that the presentation phase needs.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;transformData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;transformData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Build</span><span class="c0">&nbsp;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">&nbsp;presentation layer.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;presentData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;presentData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">This</span><span class="c0">&nbsp;method represents the entire datalet workcycle.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;runWorkcycle</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;runWorkcycle</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">()</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">This</span><span class="c0">&nbsp;method save the reference to the polymer </span><span class="c0 c1">object</span><span class="c0">&nbsp;related to the datalet.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;init</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;init</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;component;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp;}</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>&nbsp;</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&rsquo;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">&nbsp;</span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;properties</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">It</span><span class="c0">&nbsp;contains the json data </span><span class="c0 c1">from</span><span class="c0">&nbsp;async xhr call returned </span><span class="c0 c1">from</span><span class="c0">&nbsp;core</span><span class="c0 c4">-</span><span class="c0">ajax core component</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@attribute</span><span class="c0">&nbsp;json_results</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@type</span><span class="c0">&nbsp;</span><span class="c0 c1">object</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@default</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;null&#39;.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;json_results</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">Object,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">{}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Make</span><span class="c0">&nbsp;an AJAX call to the dataset URL</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;requestData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;requestData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;comp </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c1">this;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;$</span><span class="c0 c4">.</span><span class="c0">ajax</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;url</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataType</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;json&quot;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;success</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Called</span><span class="c0">&nbsp;</span><span class="c0 c1">when</span><span class="c0">&nbsp;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">&nbsp;called url.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;handleResponse</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;handleResponse</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;e;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;selectData built a JSONPATH query based on the user selected fields </span><span class="c0 c1">then</span><span class="c0">&nbsp;extract data </span><span class="c0 c1">from</span><span class="c0">&nbsp;the JSON response.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">This</span><span class="c0">&nbsp;method built an objects </span><span class="c0 c4">&lt;</span><span class="c0">name</span><span class="c0 c4">,</span><span class="c0">&nbsp;data</span><span class="c0 c4">&gt;</span><span class="c0">&nbsp;</span><span class="c0 c1">for</span><span class="c0">&nbsp;every user selected field </span><span class="c0 c1">and</span><span class="c0">&nbsp;push it </span><span class="c0 c1">into</span><span class="c0">&nbsp;the data array.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;selectData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;selectData </span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</span><span class="c0 c4">[];</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;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">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0">&nbsp;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">&lt;</span><span class="c0">&nbsp;</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">&nbsp;i</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;query </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;$&quot;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;query_elements </span><span class="c0 c4">=</span><span class="c0">&nbsp;</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">&#39;,&#39;</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0">&nbsp;j</span><span class="c0 c4">=</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0">&nbsp;j </span><span class="c0 c4">&lt;</span><span class="c0">&nbsp;query_elements</span><span class="c0 c4">.</span><span class="c0">length </span><span class="c0 c4">-</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;query </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;[&#39;&quot;</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;query_elements</span><span class="c0 c4">[</span><span class="c0">j</span><span class="c0 c4">]</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;&#39;]&quot;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;query </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;[*]&quot;</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;[&#39;&quot;</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;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">&nbsp;</span><span class="c0 c6">1</span><span class="c0 c4">]</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;&#39;]&quot;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;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">&nbsp;</span><span class="c0 c6">1</span><span class="c0 c4">],</span><span class="c0">&nbsp;data </span><span class="c0 c4">:</span><span class="c0">&nbsp;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">&nbsp;query</span><span class="c0 c4">)});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;}</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&rsquo;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&rsquo;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>&nbsp;that include BaseDataletBehavior</span><span class="c0">&nbsp;</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">&lt;link</span><span class="c0">&nbsp;</span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">&quot;import&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;../../bower_components/polymer/polymer.html&quot;&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1">&lt;dom-module</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;base-datalet&quot;&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;style&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">#footer {</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position</span><span class="c0 c4">:</span><span class="c0">&nbsp;relative;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;bottom</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">0;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">100</span><span class="c0 c4">%;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;font</span><span class="c0 c4">-</span><span class="c0">size</span><span class="c0 c4">:</span><span class="c0">&nbsp;small;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">#rtpalogo{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height</span><span class="c0 c4">:</span><span class="c0 c6">30px;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">30px;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;/style&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;b&gt;</span><span class="c0">Source : </span><span class="c0 c1">&lt;/b&gt;&lt;span</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;domain&quot;</span><span class="c0 c1">&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;div</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;footer&quot;</span><span class="c0 c1">&gt;</span><span class="c0">Powered by Route-to-PA&amp;nbsp&amp;nbsp</span><span class="c0 c1">&lt;a</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;http://routetopa.eu/&quot;</span><span class="c0 c1">&gt;&lt;img</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;static/images/rtpalogo.png&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;rtpalogo&quot;</span><span class="c0 c1">&gt;&lt;/a&gt;&lt;/div&gt;&lt;br&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/template&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;static/js/BaseDataletBehaviors.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c3">BaseDatalet</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;base-datalet&#39;,</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">It</span><span class="c0">&nbsp;</span><span class="c0 c1">is</span><span class="c0">&nbsp;called after the element</span><span class="c0 c4">&#39;</span><span class="c0">s </span><span class="c0 c1">template</span><span class="c0">&nbsp;has been stamped </span><span class="c0 c1">and</span><span class="c0">&nbsp;all elements inside the element</span><span class="c0 c4">&#39;</span><span class="c0">s </span><span class="c0 c1">local</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;DOM have been configured </span><span class="c0 c4">(</span><span class="c0 c1">with</span><span class="c0">&nbsp;values bound </span><span class="c0 c1">from</span><span class="c0">&nbsp;parents</span><span class="c0 c4">,</span><span class="c0">&nbsp;deserialized attributes</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c1">or</span><span class="c0">&nbsp;</span><span class="c0 c1">else</span><span class="c0">&nbsp;</span><span class="c0 c1">default</span><span class="c0">&nbsp;values)</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c1">and</span><span class="c0">&nbsp;had their ready method called.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Extract</span><span class="c0">&nbsp;the dataset domain </span><span class="c0 c1">from</span><span class="c0">&nbsp;the entire URL </span><span class="c0 c1">and</span><span class="c0">&nbsp;</span><span class="c0 c1">set</span><span class="c0">&nbsp;the text content of the datalet footer.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;ready</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ready</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</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">&quot;/&quot;</span><span class="c0 c4">)[</span><span class="c0 c6">0</span><span class="c0 c4">]</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;//&quot;</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</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">&quot;/&quot;</span><span class="c0 c4">)[</span><span class="c0 c6">2</span><span class="c0 c4">];</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/script&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/dom-module&gt;</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">&lt;link</span><span class="c0">&nbsp;</span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">&quot;import&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;../base-datalet/base-datalet.html&quot;&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1">&lt;dom-module</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;base-ajax-json-jsonpath-datalet&quot;&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;base-datalet</span><span class="c0">&nbsp;</span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{dataUrl}}&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{fields}}&quot;</span><span class="c0 c1">&gt;&lt;/base-datalet&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/template&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;static/js/vendor/jsonpath-0.8.5.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;static/js/AjaxJsonJsonPathBehavior.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c3">BaseDatalet</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;base-ajax-json-jsonpath-datalet&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/script&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/dom-module&gt;</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/&amp;sa=D&amp;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&rsquo;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/&amp;sa=D&amp;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 &ldquo;extend&rdquo; in order to share the selection mechanism.</span></p><p class="c7"><span>&nbsp;</span></p><p class="c7"><span class="c0 c1">&lt;link</span><span class="c0">&nbsp;</span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">&quot;import&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html&quot;&gt;</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">&lt;dom-module</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;highcharts-datalet&quot;&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;div</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;container&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">&quot;</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">&nbsp;height</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">&quot;</span><span class="c0 c1">&gt;&lt;/div&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;base-ajax-json-jsonpath-datalet</span><span class="c0">&nbsp;</span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{dataUrl}}&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{fields}}&quot;</span><span class="c0 c1">&gt;&lt;/base-ajax-json-jsonpath-datalet&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/template&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;static/js/highcharts.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;static/js/exporting.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">HighchartsBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;properties</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;categories</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;series</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;series_type</span><span class="c0 c4">:{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;line&quot;</span><span class="c0 c24">//spline,time</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Populate</span><span class="c0">&nbsp;the categories </span><span class="c0 c1">and</span><span class="c0">&nbsp;the series array.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;transformData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@param</span><span class="c0">&nbsp;</span><span class="c0 c4">{</span><span class="c0 c3">Event</span><span class="c0 c4">}</span><span class="c0">&nbsp;e</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transformData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0">&nbsp;</span><span class="c0 c4">()</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">for</span><span class="c0">&nbsp;</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0">&nbsp;i </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c6">1</span><span class="c0 c4">;</span><span class="c0">&nbsp;i </span><span class="c0 c4">&lt;</span><span class="c0">&nbsp;</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">&nbsp;i</span><span class="c0 c4">++)</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">,</span><span class="c0">&nbsp;index</span><span class="c0 c4">,</span><span class="c0">&nbsp;array</span><span class="c0 c4">)</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">try</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">// TODO fix this parsing mechanism</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</span><span class="c0 c4">?</span><span class="c0">&nbsp;array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;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">&quot;.&quot;</span><span class="c0 c4">))</span><span class="c0">&nbsp;:</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">//console.log(&quot;Parsing data error. Highchart-datalet.selectData&quot;);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">return</span><span class="c0">&nbsp;</span><span class="c0 c1">true;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;$</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">&nbsp;</span><span class="c0 c4">{},</span><span class="c0">&nbsp;</span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c3">HighchartsDatalet</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">is</span><span class="c0">&nbsp;</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;highcharts-datalet&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/script&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1">&lt;/dom-module&gt;</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">&lt;link</span><span class="c0">&nbsp;</span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">&quot;import&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;../base-datalet/base-datalet.html&quot;&gt;</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">&lt;template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;div</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;container&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">&quot;</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">&nbsp;height</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">&quot;</span><span class="c0 c1">&gt;&lt;/div&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;base-ajax-json-jsonpath-datalet</span><span class="c0">&nbsp;</span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{dataUrl}}&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{fields}}&quot;</span><span class="c0 c1">&gt;&lt;/base-ajax-json-jsonpath-datalet&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/template&gt;</span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span>&nbsp; &nbsp;</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">&lt;script</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;static/js/highcharts.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span></p><p class="c7"><span class="c0 c1">&lt;script</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;static/js/exporting.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</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>&nbsp;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">&nbsp;</span><span class="c0 c3">HighchartsBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;properties</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;categories</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;series</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;series_type</span><span class="c0 c4">:{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;line&quot;</span><span class="c0 c24">//spline,time</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Populate</span><span class="c0">&nbsp;the categories </span><span class="c0 c1">and</span><span class="c0">&nbsp;the series array.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;transformData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@param</span><span class="c0">&nbsp;</span><span class="c0 c4">{</span><span class="c0 c3">Event</span><span class="c0 c4">}</span><span class="c0">&nbsp;e</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;transformData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0">&nbsp;</span><span class="c0 c4">()</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">for</span><span class="c0">&nbsp;</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0">&nbsp;i </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c6">1</span><span class="c0 c4">;</span><span class="c0">&nbsp;i </span><span class="c0 c4">&lt;</span><span class="c0">&nbsp;</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">&nbsp;i</span><span class="c0 c4">++)</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">,</span><span class="c0">&nbsp;index</span><span class="c0 c4">,</span><span class="c0">&nbsp;array</span><span class="c0 c4">)</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">try</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">// TODO fix this parsing mechanism</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</span><span class="c0 c4">?</span><span class="c0">&nbsp;array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;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">&quot;.&quot;</span><span class="c0 c4">))</span><span class="c0">&nbsp;:</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">//console.log(&quot;Parsing data error. Highchart-datalet.selectData&quot;);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">return</span><span class="c0">&nbsp;</span><span class="c0 c1">true;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;}</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>&nbsp;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">&nbsp;</span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;$</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">&nbsp;</span><span class="c0 c4">{},</span><span class="c0">&nbsp;</span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</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 &nbsp;the Polymer javascript object.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c3">HighchartsDatalet</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">is</span><span class="c0">&nbsp;</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;highcharts-datalet&#39;</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>), &nbsp;in order to use the categories and series attributes, generated by &ldquo;super class&rdquo;, to build the chart.</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1">&lt;link</span><span class="c0">&nbsp;</span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">&quot;import&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;../highcharts-datalet/highcharts-datalet.html&quot;&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1">&lt;dom-module</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;linechart-datalet&quot;&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;highcharts-datalet</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;charts&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{dataUrl}}&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{fields}}&quot;</span><span class="c0 c1">&gt;&lt;/highcharts-datalet&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">LinechartBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Bluid</span><span class="c0">&nbsp;</span><span class="c0 c3">Highchart</span><span class="c0">&nbsp;</span><span class="c0 c1">object</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;presentData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;presentData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;Line chart&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;chart</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;zoomType</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;xy&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xAxis</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;categories</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">null</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;yAxis</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;Units&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;plotLines</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">[{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">0,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;#808080&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">}]</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tooltip</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;valueSuffix</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39; units&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;legend</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;layout</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;vertical&#39;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;align</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;right&#39;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;verticalAlign</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;top&#39;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">-</span><span class="c0 c6">40,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;y</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">100,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;floating</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">true,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;borderWidth</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;backgroundColor</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&amp;&amp;</span><span class="c0">&nbsp;</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">&nbsp;</span><span class="c0 c4">||</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;#FFFFFF&#39;</span><span class="c0 c4">),</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;shadow</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">true</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;credits</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;enabled</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">false</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;series</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c3">LinechartDatalet</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;linechart-datalet&#39;,</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;ready&#39;</span><span class="c0">&nbsp;callback extend the </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c1">with</span><span class="c0">&nbsp;</span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c1">and</span><span class="c0">&nbsp;</span><span class="c0 c3">LinechartBehavior</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c1">and</span><span class="c0">&nbsp;run the </span><span class="c0 c3">Datalet</span><span class="c0">&nbsp;workcycle.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;ready</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ready</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;$</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">&nbsp;</span><span class="c0 c4">{},</span><span class="c0">&nbsp;</span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">LinechartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/script&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/dom-module&gt;</span></p><p class="c7"><span>&nbsp;</span></p><p class="c7"><span>After creating the main component behavior (</span><span class="c8">LinechartComponentBehavior</span><span>) &nbsp;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 &nbsp;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">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;linechart-datalet&#39;,</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;ready&#39;</span><span class="c0">&nbsp;callback extend the </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c1">with</span><span class="c0">&nbsp;</span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c1">and</span><span class="c0">&nbsp;</span><span class="c0 c3">LinechartBehavior</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c1">and</span><span class="c0">&nbsp;run the </span><span class="c0 c3">Datalet</span><span class="c0">&nbsp;workcycle.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;ready</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;ready</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;$</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">&nbsp;</span><span class="c0 c4">{},</span><span class="c0">&nbsp;</span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">LinechartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp;}</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 &quot;configured&quot; 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">&nbsp;</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">&lt;link</span><span class="c0">&nbsp;</span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">&quot;import&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;../highcharts-datalet/highcharts-datalet.html&quot;&gt;</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">&lt;dom-module</span><span class="c0">&nbsp;</span><span class="c0 c3">name</span><span class="c0 c4">=</span><span class="c0 c14">&quot;barchart-datalet&quot;&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;highcharts-datalet</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;charts&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{dataUrl}}&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{fields}}&quot;</span><span class="c0 c1">&gt;&lt;/highcharts-datalet&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">BarchartBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c3">Bluid</span><span class="c0">&nbsp;</span><span class="c0 c3">Highchart</span><span class="c0">&nbsp;</span><span class="c0 c1">object</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;transformData</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;presentData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;chart</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;bar&#39;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;zoomType</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;xy&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;Bar chart&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xAxis</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;categories</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">null</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;yAxis</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;min</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">0,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;Foreclosure (units)&#39;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;align</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;high&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;labels</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;overflow</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;justify&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tooltip</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;valueSuffix</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39; units&#39;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;plotOptions</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;bar</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataLabels</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;enabled</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">true</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;legend</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;layout</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;vertical&#39;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;align</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;right&#39;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;verticalAlign</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;top&#39;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c4">-</span><span class="c0 c6">40,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;y</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">100,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;floating</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">true,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;borderWidth</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;backgroundColor</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&amp;&amp;</span><span class="c0">&nbsp;</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">&nbsp;</span><span class="c0 c4">||</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;#FFFFFF&#39;</span><span class="c0 c4">),</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;shadow</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">true</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;credits</span><span class="c0 c4">:</span><span class="c0">&nbsp;{</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;enabled</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">false</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">},</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;series</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c3">BarchartDatalet</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;barchart-datalet&#39;,</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;ready&#39;</span><span class="c0">&nbsp;callback extend the </span><span class="c0 c3">BarchartComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c1">with</span><span class="c0">&nbsp;</span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c1">and</span><span class="c0">&nbsp;</span><span class="c0 c3">BarchartBehavior</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c1">and</span><span class="c0">&nbsp;run the </span><span class="c0 c3">Datalet</span><span class="c0">&nbsp;workcycle.</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*</span><span class="c0">&nbsp;</span><span class="c0 c6">@method</span><span class="c0">&nbsp;ready</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ready</span><span class="c0 c4">:</span><span class="c0">&nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">BarchartComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;$</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">&nbsp;</span><span class="c0 c4">{},</span><span class="c0">&nbsp;</span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">BarchartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/script&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/dom-module&gt;</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/&amp;sa=D&amp;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">&lt;link</span><span class="c0">&nbsp;</span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">&quot;import&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html&quot;&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1">&lt;dom-module</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;datatable-datalet&quot;&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;template&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;link</span><span class="c0">&nbsp;</span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">&quot;stylesheet&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">&quot;js/DataTables-master/media/css/jquery.dataTables.min.css&quot;&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;table</span><span class="c0">&nbsp;</span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">&quot;datatable&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">class</span><span class="c0 c4">=</span><span class="c0 c14">&quot;table table-striped table-bordered&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">cellspacing</span><span class="c0 c4">=</span><span class="c0 c14">&quot;0&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">&quot;</span><span class="c0">height</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0">&nbsp;width</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">&quot;&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;/table&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">&lt;base-ajax-json-jsonpath-datalet</span><span class="c0">&nbsp;</span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{dataUrl}}&quot;</span><span class="c0">&nbsp;</span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">&quot;{{fields}}&quot;</span><span class="c0 c1">&gt;&lt;/base-ajax-json-jsonpath-datalet&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/template&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script</span><span class="c0">&nbsp;</span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">&quot;js/DataTables-master/media/js/jquery.dataTables.js&quot;</span><span class="c0 c1">&gt;&lt;/script&gt;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;script&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">DatatableBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp;{</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;presentData</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp;</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">&nbsp;</span><span class="c0 c1">undefined</span><span class="c0 c4">)</span><span class="c0">&nbsp;</span><span class="c0 c1">return;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c14">&quot;&quot;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;thead&gt;&#39;+</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c14">&#39;&lt;tr&gt;&#39;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0">&nbsp;x </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0">&nbsp;x</span><span class="c0 c4">&lt;</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">&nbsp;x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;th&gt;&#39;</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</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">&nbsp;</span><span class="c0 c14">&#39;&lt;/th&gt;&#39;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">+=</span><span class="c0">&nbsp; </span><span class="c0 c14">&#39;&lt;/tr&gt;&#39;</span><span class="c0">&nbsp;+</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c14">&#39;&lt;/thead&gt;&#39;</span><span class="c0">&nbsp;+</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c14">&#39;&lt;tfoot&gt;&#39;</span><span class="c0">&nbsp;+</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c14">&#39;&lt;tr&gt;&#39;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0">&nbsp;x </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0">&nbsp;x</span><span class="c0 c4">&lt;</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">&nbsp;x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;th&gt;&#39;</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</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">&nbsp;</span><span class="c0 c14">&#39;&lt;/th&gt;&#39;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;/tr&gt;&#39;</span><span class="c0">&nbsp;+</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c14">&#39;&lt;/tfoot&gt;&#39;</span><span class="c0">&nbsp;+</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c14">&#39;&lt;tbody&gt;&#39;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0">&nbsp;i </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0">&nbsp;i</span><span class="c0 c4">&lt;</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">&nbsp;i</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;tr&gt;&#39;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0">&nbsp;x </span><span class="c0 c4">=</span><span class="c0">&nbsp;</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0">&nbsp;x</span><span class="c0 c4">&lt;</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">&nbsp;x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;td&gt;&#39;</span><span class="c0">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</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">&nbsp;</span><span class="c0 c4">+</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;/td&gt;&#39;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;/tr&gt;&#39;;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;html </span><span class="c0 c4">+=</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;&lt;/tbody&gt;&#39;;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">is</span><span class="c0">&nbsp;</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c14">&#39;datatable-datalet&#39;</span><span class="c0">&nbsp;,</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ready</span><span class="c0 c4">:</span><span class="c0">&nbsp;</span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c1">var</span><span class="c0">&nbsp;</span><span class="c0 c3">DatatableComponentBehavior</span><span class="c0">&nbsp;</span><span class="c0 c4">=</span><span class="c0">&nbsp; $</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">&nbsp;</span><span class="c0 c4">{},</span><span class="c0">&nbsp;</span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0">&nbsp;</span><span class="c0 c3">DatatableBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c0 c4">});</span></p><p class="c7"><span class="c0">&nbsp; &nbsp;</span><span class="c0 c1">&lt;/script&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/dom-module&gt;</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 (&lt;!-- ... --&gt;) 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>&nbsp;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">&nbsp;/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>&nbsp;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">&lt;component&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c1">&lt;name&gt;</span><span class="c0">barchart-datalet</span><span class="c0 c1">&lt;/name&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c1">&lt;attributes&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;attribute&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;name&gt;</span><span class="c0">data-url</span><span class="c0 c1">&lt;/name&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;/attribute&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;attribute&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;name&gt;</span><span class="c0">query</span><span class="c0 c1">&lt;/name&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;/attribute&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c1">&lt;/attributes&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c1">&lt;idm&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;inputs&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;input&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;name&gt;</span><span class="c0">Categories</span><span class="c0 c1">&lt;/name&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;description&gt;</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">&lt;/description&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;scale&gt;</span><span class="c0">nominal</span><span class="c0 c1">&lt;/scale&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;role&gt;</span><span class="c0">domain</span><span class="c0 c1">&lt;/role&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;selection&gt;</span><span class="c0">11</span><span class="c0 c1">&lt;/selection&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;/input&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;input&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;name&gt;</span><span class="c0">Series</span><span class="c0 c1">&lt;/name&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;description&gt;</span><span class="c0">The chart series. Its values will be put in the vertical axis.</span><span class="c0 c1">&lt;/description&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;scale&gt;</span><span class="c0">nominal</span><span class="c0 c1">&lt;/scale&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;role&gt;</span><span class="c0">domain</span><span class="c0 c1">&lt;/role&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;selection&gt;</span><span class="c0">11</span><span class="c0 c1">&lt;/selection&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;/input&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;layouts&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;input&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;name&gt;</span><span class="c0">x-axis-label</span><span class="c0 c1">&lt;/name&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;/input&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;/layouts&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c0 c1">&lt;/inputs&gt;</span></p><p class="c7"><span class="c0">&nbsp; &nbsp; </span><span class="c0 c1">&lt;/idm&gt;</span></p><p class="c7"><span class="c0 c1">&lt;/component&gt;</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 &nbsp;component, &nbsp;</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/&amp;sa=D&amp;usg=AFQjCNEFja53k_-6LipN1wDXc50cD6czpw">https://www.jetbrains.com/phpstorm/</a></span><span>&nbsp;) 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/&amp;sa=D&amp;usg=AFQjCNEXztPINwsn6FIolcu896CfGQRIYA">http://webcomponents.org/</a></span><span class="c47 c20 c5">&nbsp;</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/&amp;sa=D&amp;usg=AFQjCNFlxPkCpKMiguvzlQy1HZn5v-2LGQ">https://www.polymer-project.org/1.0/</a></span><span class="c16 c5">&nbsp;</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/&amp;sa=D&amp;usg=AFQjCNEqNNdAtF8iltMOlckek-14C97pYQ">https://googlewebcomponents.github.io/</a></span><span class="c16 c5">&nbsp;</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&amp;sa=D&amp;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/&amp;sa=D&amp;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>
0 2 \ No newline at end of file
... ...
docs/docs.html
  View file @584d6ec
... ... @@ -3,49 +3,111 @@
3 3 <head>
4 4 <link rel="import" href="../bower_components/iron-component-page/iron-component-page.html">
5 5 <link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
  6 + <link rel="import" href="../bower_components/paper-menu/paper-menu.html">
  7 + <link rel="import" href="../bower_components/paper-item/paper-item.html">
  8 + <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
  9 +
  10 + <script type="text/javascript" src="../datalets/shared_js/jquery-1.11.2.min.js"></script>
6 11  
7 12 <meta charset="UTF-8">
  13 +
  14 +
  15 + <script type="text/javascript">
  16 + selected_component_url = "";
  17 +
  18 + $(document).ready(function () {
  19 + $("paper-item").bind('click', function () {
  20 + switch($(this).attr('class').split(" ")[0]){
  21 + case 'datalet':
  22 + //$("#main-content").html('<iron-component-page src="../datalets/' + $(this).html().trim() + '/' + $(this).html().trim() + '.html"></iron-component-page>');
  23 + $("#main-content").html('<iframe src="../datalets/' + $(this).html().trim() + '/docs.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>');
  24 + break;
  25 + case 'controllet':
  26 + $("#main-content").html('<iron-component-page src="../controllets/' + $(this).html().trim() + '/' + $(this).html().trim() + '.html"></iron-component-page>');
  27 + break;
  28 + case 'behaviour':
  29 + $("#main-content").html('<iron-component-page doc-src="../datalets/' + $(this).attr('class').split(" ")[1] + '/static/js/' + $(this).html().trim() + '.json"></iron-component-page>');
  30 + break;
  31 + }
  32 + });
  33 +
  34 + $('#general-documentation').bind('click', function(){
  35 + $("#main-content").html('<iframe src="ROUTETOPADeveloperGuidev0.1.html" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;"></iframe>');
  36 + });
  37 + });
  38 + </script>
  39 + <style>
  40 + .avatar
  41 + {
  42 + display: inline-block;
  43 + height: 0.5em;
  44 + width: 0.5em;
  45 + border-radius: 50%;
  46 + background: #3f51b5;
  47 + color: white;
  48 + line-height: 2em;
  49 + font-size: 1.87em;
  50 + text-align: center;
  51 + margin-right: 5px;
  52 + }
  53 + </style>
8 54 </head>
9 55 <body>
10 56  
11 57 <paper-drawer-panel>
12 58 <paper-header-panel drawer>
13 59 <paper-toolbar>
14   - <div>Components</div>
  60 + <div><h3>Components</h3></div>
15 61 </paper-toolbar>
16 62 <div style="margin: 20px;">
17 63 <div class="horizontal-section-container">
18 64 <div>
19   - <h3><b>Controllets</b></h3>
  65 + <h3><paper-menu><paper-item id="general-documentation"><h3><span class="avatar"></span>General documentation</h3></paper-item></paper-menu></h3>
  66 + <h3><span class="avatar"></span>Controllets</h3>
20 67 <div class="horizontal-section">
21 68 <paper-menu>
22   - <paper-item>Inbox</paper-item>
23   - <paper-item>Starred</paper-item>
24   - <paper-item>Sent mail</paper-item>
25   - <paper-item>Drafts</paper-item>
  69 + <paper-item class="controllet">data-sevc-controllet</paper-item>
  70 + <paper-item class="controllet">draggable-element-controllet</paper-item>
  71 + <paper-item class="controllet">items-slider-controllet</paper-item>
  72 + <paper-item class="controllet">treeview-controllet</paper-item>
26 73 </paper-menu>
27 74 </div>
28 75 </div>
29 76 <div>
30   - <h3><b>Datalets</b></h3>
  77 + <h3><span class="avatar"></span>Datalets</h3>
31 78 <div class="horizontal-section">
32 79 <paper-menu>
33   - <paper-item>Inbox</paper-item>
34   - <paper-item>Starred</paper-item>
35   - <paper-item>Sent mail</paper-item>
36   - <paper-item>Drafts</paper-item>
  80 + <paper-item class="datalet">base-datalet</paper-item>
  81 + <paper-item class="datalet">base-ajax-json-jsonpath-datalet</paper-item>
  82 + <paper-item class="datalet">highcharts-datalet</paper-item>
  83 + <paper-item class="datalet">column3Dchart-datalet</paper-item>
  84 + <paper-item class="datalet">columnchart-datalet</paper-item>
  85 + <paper-item class="datalet">barchart-datalet</paper-item>
  86 + <paper-item class="datalet">linechart-datalet</paper-item>
  87 + <paper-item class="datalet">datatable-datalet</paper-item>
  88 + <paper-item class="datalet">treemap-datalet</paper-item>
  89 + <paper-item class="datalet">leafletjs-datalet</paper-item>
37 90 </paper-menu>
38 91 </div>
39 92 </div>
  93 + <h3><span class="avatar"></span>Behaviors</h3>
  94 + <div class="horizontal-section">
  95 + <paper-menu>
  96 + <paper-item class="behaviour base-datalet">BaseDataletBehavior</paper-item>
  97 + <paper-item class="behaviour base-datalet">WorkcycleBehavior</paper-item>
  98 + <paper-item class="behaviour base-ajax-json-jsonpath-datalet">AjaxJsonJsonPathBehavior</paper-item>
  99 + </paper-menu>
  100 + </div>
  101 + </div>
40 102 </div>
41 103 </div>
42 104 </paper-header-panel>
43 105 <paper-header-panel main>
44 106 <paper-toolbar>
45   - <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
46   - <div>Documentation</div>
  107 + <div><h3>Documentation</h3></div>
  108 + <div style="position: absolute;right:30px; top:10px;"><paper-icon-button style="background-color: white; border-radius: 50%;" src="images/source-code.png"></paper-icon-button></div>
47 109 </paper-toolbar>
48   - <div><iron-component-page src="../controllets/data-sevc-controllet/data-sevc-controllet.html"></iron-component-page></div>
  110 + <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>
49 111 </paper-header-panel>
50 112 </paper-drawer-panel>
51 113  
... ...
docs/images/image00.png 0 → 100644
View file @584d6ec

41.4 KB
docs/images/image01.png 0 → 100644
View file @584d6ec

27.5 KB
docs/images/image02.png 0 → 100644
View file @584d6ec

41.4 KB
docs/images/source-code.png 0 → 100644
View file @584d6ec

5.2 KB