WebCompDev / COMPONENTS

Commit a508f993cba28a028abb86861d38862d03188f97

Authored by isisadmin
1 parent db98fc0d

added datalet documentation

Inline Side-by-side
Showing 6 changed files with 306 additions and 49 deletions
datalets/barchart-datalet/barchart-datalet.html
  View file @a508f99
  1 +<!--
  2 +The MIT License (MIT)
  3 +
  4 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 +
  6 +Permission is hereby granted, free of charge, to any person obtaining a copy
  7 +of this software and associated documentation files (the "Software"), to deal
  8 +in the Software without restriction, including without limitation the rights
  9 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10 +copies of the Software, and to permit persons to whom the Software is
  11 +furnished to do so, subject to the following conditions:
  12 +
  13 +The above copyright notice and this permission notice shall be included in
  14 +all copies or substantial portions of the Software.
  15 +
  16 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  17 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  18 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  19 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  20 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  21 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  22 +THE SOFTWARE.
  23 +-->
  24 +
1 <link rel="import" href="../../bower_components/polymer/polymer.html"> 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> 26 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
3 27
  28 +<!--
  29 +
  30 +`barchart-datalet` is a barchart datalet based on highcharts project <http://www.highcharts.com/>
  31 +
  32 +Example:
  33 +
  34 +<barchart-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"
  35 + query="$['result']['records'][*]['Lat']###$['result']['records'][*]['Lng']">
  36 +
  37 +
  38 +-->
  39 +
4 <dom-module name="barchart-datalet"> 40 <dom-module name="barchart-datalet">
5 <template> 41 <template>
6 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet> 42 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet>
7 </template> 43 </template>
8 <script> 44 <script>
9 var BarchartBehavior = { 45 var BarchartBehavior = {
  46 +
  47 +
  48 + /**
  49 + * Bluid Highchart object
  50 + *
  51 + * @method transformData
  52 + */
10 transformData: function(){ 53 transformData: function(){
11 - //Bluid Highchart element 54 +
12 $(this._component.$.charts.$.container).highcharts({ 55 $(this._component.$.charts.$.container).highcharts({
13 chart: { 56 chart: {
14 type: 'bar', 57 type: 'bar',
@@ -18,7 +61,7 @@ @@ -18,7 +61,7 @@
18 text: 'Bar chart' 61 text: 'Bar chart'
19 }, 62 },
20 xAxis: { 63 xAxis: {
21 - categories: this.properties.categories.value,//this._component.categories, 64 + categories: this.properties.categories.value,
22 title: { 65 title: {
23 text: null 66 text: null
24 } 67 }
@@ -57,13 +100,20 @@ @@ -57,13 +100,20 @@
57 credits: { 100 credits: {
58 enabled: false 101 enabled: false
59 }, 102 },
60 - series: this.properties.series.value//this._component.series 103 + series: this.properties.series.value
61 }); 104 });
62 } 105 }
63 }; 106 };
64 107
65 BarchartDatalet = Polymer({ 108 BarchartDatalet = Polymer({
66 is: 'barchart-datalet', 109 is: 'barchart-datalet',
  110 +
  111 + /**
  112 + * 'ready' callback extend the BarchartComponentBehavior with HighchartsComponentBehavior and BarchartBehavior
  113 + * and run the Datalet workcycle.
  114 + *
  115 + * @method ready
  116 + */
67 ready: function(){ 117 ready: function(){
68 118
69 var BarchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, BarchartBehavior); 119 var BarchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, BarchartBehavior);
datalets/column3Dchart-datalet/column3Dchart-datalet.html
  View file @a508f99
  1 +<!--
  2 +The MIT License (MIT)
  3 +
  4 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 +
  6 +Permission is hereby granted, free of charge, to any person obtaining a copy
  7 +of this software and associated documentation files (the "Software"), to deal
  8 +in the Software without restriction, including without limitation the rights
  9 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10 +copies of the Software, and to permit persons to whom the Software is
  11 +furnished to do so, subject to the following conditions:
  12 +
  13 +The above copyright notice and this permission notice shall be included in
  14 +all copies or substantial portions of the Software.
  15 +
  16 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  17 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  18 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  19 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  20 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  21 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  22 +THE SOFTWARE.
  23 +-->
  24 +
  25 +
1 <link rel="import" href="../../bower_components/polymer/polymer.html"> 26 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> 27 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
3 -  
4 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
5 <script src="http://code.highcharts.com/highcharts-3d.js"></script> 28 <script src="http://code.highcharts.com/highcharts-3d.js"></script>
6 29
7 30
  31 +<!--
  32 +
  33 +`column3Dchart-datalet` is a column3Dchart datalet based on highcharts project <http://www.highcharts.com/>
  34 +
  35 +Example:
  36 +
  37 +<column3dchart-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"
  38 + query="$['result']['records'][*]['Lat']###$['result']['records'][*]['Lng']">
  39 +
  40 +
  41 +-->
  42 +
8 43
9 <dom-module name="column3Dchart-datalet"> 44 <dom-module name="column3Dchart-datalet">
10 45
@@ -22,12 +57,14 @@ @@ -22,12 +57,14 @@
22 57
23 var column3DchartBehavior = { 58 var column3DchartBehavior = {
24 59
25 - 60 + /**
  61 + * Bluid Highchart object
  62 + *
  63 + * @method transformData
  64 + */
26 transformData: function(){ 65 transformData: function(){
27 - //Bluid Highchart element  
28 chart = new Highcharts.Chart({ 66 chart = new Highcharts.Chart({
29 chart: { 67 chart: {
30 - //To Modify renderTo: 'container',  
31 renderTo: this._component.$.charts.$.container, 68 renderTo: this._component.$.charts.$.container,
32 borderColor: '#EBBA95', 69 borderColor: '#EBBA95',
33 borderWidth: 2, 70 borderWidth: 2,
@@ -44,7 +81,7 @@ @@ -44,7 +81,7 @@
44 } 81 }
45 }, 82 },
46 xAxis: { 83 xAxis: {
47 - categories: this.properties.categories.value,//this._component.categories, 84 + categories: this.properties.categories.value,
48 title: { 85 title: {
49 text: null 86 text: null
50 } 87 }
@@ -62,7 +99,7 @@ @@ -62,7 +99,7 @@
62 }, 99 },
63 100
64 series: this.properties.series.value 101 series: this.properties.series.value
65 - });//highcharts 102 + });
66 103
67 // Activate the sliders 104 // Activate the sliders
68 $('#R0').on('change', function () { 105 $('#R0').on('change', function () {
@@ -81,6 +118,12 @@ @@ -81,6 +118,12 @@
81 column3DchartDatalet = Polymer({ 118 column3DchartDatalet = Polymer({
82 is: 'column3Dchart-datalet', 119 is: 'column3Dchart-datalet',
83 120
  121 + /**
  122 + * 'ready' callback extend the column3DchartComponentBehavior with HighchartsComponentBehavior and column3DchartBehavior
  123 + * and run the Datalet workcycle.
  124 + *
  125 + * @method ready
  126 + */
84 ready: function(){ 127 ready: function(){
85 var column3DchartComponentBehavior = $.extend({}, HighchartsComponentBehavior, column3DchartBehavior); 128 var column3DchartComponentBehavior = $.extend({}, HighchartsComponentBehavior, column3DchartBehavior);
86 column3DchartComponentBehavior.properties = $.extend({}, HighchartsComponentBehavior.properties, column3DchartBehavior.properties); 129 column3DchartComponentBehavior.properties = $.extend({}, HighchartsComponentBehavior.properties, column3DchartBehavior.properties);
datalets/columnchart-datalet/columnchart-datalet.html
  View file @a508f99
  1 +<!--
  2 +The MIT License (MIT)
  3 +
  4 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 +
  6 +Permission is hereby granted, free of charge, to any person obtaining a copy
  7 +of this software and associated documentation files (the "Software"), to deal
  8 +in the Software without restriction, including without limitation the rights
  9 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10 +copies of the Software, and to permit persons to whom the Software is
  11 +furnished to do so, subject to the following conditions:
  12 +
  13 +The above copyright notice and this permission notice shall be included in
  14 +all copies or substantial portions of the Software.
  15 +
  16 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  17 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  18 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  19 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  20 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  21 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  22 +THE SOFTWARE.
  23 +-->
  24 +
1 <link rel="import" href="../../bower_components/polymer/polymer.html"> 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> 26 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
3 27
  28 +<!--
  29 +
  30 +`columnchart-datalet` is a columnchart datalet based on highcharts project <http://www.highcharts.com/>
  31 +
  32 +Example:
  33 +
  34 +<columnchart-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"
  35 + query="$['result']['records'][*]['Lat']###$['result']['records'][*]['Lng']">
  36 +
  37 +
  38 +-->
  39 +
4 <dom-module id="columnchart-datalet"> 40 <dom-module id="columnchart-datalet">
5 <template> 41 <template>
6 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet> 42 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet>
7 </template> 43 </template>
8 <script> 44 <script>
9 var ColumnchartBehavior = { 45 var ColumnchartBehavior = {
  46 +
  47 +
  48 + /**
  49 + * Bluid Highchart object
  50 + *
  51 + * @method transformData
  52 + */
10 transformData: function(){ 53 transformData: function(){
11 - //Bluid Highchart element  
12 $(this._component.$.charts.$.container).highcharts({ 54 $(this._component.$.charts.$.container).highcharts({
13 chart: { 55 chart: {
14 type: 'column', 56 type: 'column',
@@ -64,6 +106,13 @@ @@ -64,6 +106,13 @@
64 106
65 LinechartDatalet = Polymer({ 107 LinechartDatalet = Polymer({
66 is: 'columnchart-datalet', 108 is: 'columnchart-datalet',
  109 +
  110 + /**
  111 + * 'ready' callback extend the ColumnchartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior
  112 + * and run the Datalet workcycle.
  113 + *
  114 + * @method ready
  115 + */
67 ready: function(){ 116 ready: function(){
68 var ColumnchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, ColumnchartBehavior); 117 var ColumnchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, ColumnchartBehavior);
69 ColumnchartComponentBehavior.init(this); 118 ColumnchartComponentBehavior.init(this);
datalets/leafletjs-datalet/leafletjs-datalet.html
  View file @a508f99
  1 +<!--
  2 +The MIT License (MIT)
  3 +
  4 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 +
  6 +Permission is hereby granted, free of charge, to any person obtaining a copy
  7 +of this software and associated documentation files (the "Software"), to deal
  8 +in the Software without restriction, including without limitation the rights
  9 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10 +copies of the Software, and to permit persons to whom the Software is
  11 +furnished to do so, subject to the following conditions:
  12 +
  13 +The above copyright notice and this permission notice shall be included in
  14 +all copies or substantial portions of the Software.
  15 +
  16 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  17 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  18 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  19 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  20 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  21 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  22 +THE SOFTWARE.
  23 +-->
  24 +
1 <link rel="import" href="../base-datalet/base-datalet.html"> 25 <link rel="import" href="../base-datalet/base-datalet.html">
2 26
  27 +<!--
  28 +
  29 +`leafletjs-datalet` is a map datalet based on open source project leafletjs <http://leafletjs.com/>
  30 +
  31 +Example:
  32 +
  33 +<leafletjs-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"
  34 + query="$['result']['records'][*]['Lat']###$['result']['records'][*]['Lng']###$['result']['records'][*]['Link']">
  35 +
  36 +
  37 +-->
  38 +
3 <dom-module name="leafletjs-datalet"> 39 <dom-module name="leafletjs-datalet">
4 <template> 40 <template>
5 <link rel="stylesheet" href="leafletsjs/leaflet.css" /> 41 <link rel="stylesheet" href="leafletsjs/leaflet.css" />
@@ -16,25 +52,18 @@ @@ -16,25 +52,18 @@
16 52
17 <script> 53 <script>
18 54
19 - $(document).ready(function(){  
20 -/* var map = L.map("leafletjs").setView([51.505, -0.09], 13);  
21 -  
22 - L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {  
23 - maxZoom: 18,  
24 - attribution: 'Map data ยฉ <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'  
25 - }).addTo(map);*/  
26 - });  
27 -  
28 -  
29 var leafletjsBehavior = { 55 var leafletjsBehavior = {
30 56
  57 + /**
  58 + * Extract all the data from the dataset according to the queries.
  59 + *
  60 + * @method selectData
  61 + */
31 selectData: function(){ 62 selectData: function(){
32 63
33 var queries = this._component.query.split("###"); 64 var queries = this._component.query.split("###");
34 65
35 - for (i = 0; i < queries.length; i++) {  
36 - /*propsName = queries[i].split(".");  
37 - var propName = "" + propsName[propsName.length - 1];*/ 66 + for (var i = 0; i < queries.length; i++) {
38 var propName = this.getPropertyName(queries[i]); 67 var propName = this.getPropertyName(queries[i]);
39 68
40 temp = jsonPath(this.properties.json_results.value, queries[i]); 69 temp = jsonPath(this.properties.json_results.value, queries[i]);
@@ -47,6 +76,12 @@ @@ -47,6 +76,12 @@
47 } 76 }
48 }, 77 },
49 78
  79 + /**
  80 + * Read markers coordinates from the data object and add the marker to the map.
  81 + * Call a method for the map redraw and set the viewport in order to fit all the markers in the viewport.
  82 + *
  83 + * @method transformData
  84 + */
50 transformData: function(){ 85 transformData: function(){
51 86
52 var coordinates = []; 87 var coordinates = [];
@@ -70,36 +105,25 @@ @@ -70,36 +105,25 @@
70 Polymer({ 105 Polymer({
71 106
72 is : 'leafletjs-datalet', 107 is : 'leafletjs-datalet',
73 - ready: function(){  
74 -  
75 - this.map = L.map(this.$.leafletjs).setView([0, 0], 13);  
76 - //this.map = L.map("leafletjs").setView([0, 0], 13);  
77 -  
78 - L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {  
79 - maxZoom: 18,  
80 - attribution: 'Map data ยฉ <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'  
81 - }).addTo(this.map);  
82 -  
83 - L.Icon.Default.imagePath = 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';  
84 -  
85 - var leafletjsComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonDataRequestBehavior, leafletjsBehavior);  
86 - leafletjsComponentBehavior.init(this);  
87 - },  
88 -  
89 - attached : function(){  
90 -  
91 -  
92 -  
93 - },  
94 108
95 properties : { 109 properties : {
96 110
  111 + /**
  112 + * Store a reference to the leafletjs map object created in 'ready' callback
  113 + * @attribute map
  114 + * @type Object
  115 + */
97 map : 116 map :
98 { 117 {
99 type: Object, 118 type: Object,
100 value:null 119 value:null
101 }, 120 },
102 121
  122 + /**
  123 + * An Array with all the markers extracted from the dataset
  124 + * @attribute markers
  125 + * @type Array
  126 + */
103 markers : 127 markers :
104 { 128 {
105 type : Array, 129 type : Array,
@@ -107,10 +131,27 @@ @@ -107,10 +131,27 @@
107 } 131 }
108 }, 132 },
109 133
110 - log : function(item){  
111 - console.log(item);  
112 - } 134 + /**
  135 + * 'ready' callback create the map object, set the tileLayer to openstreetmap and the default icon image path.
  136 + * Moreover extend the leafletjsComponentBehavior with BaseDataletBehavior, WorkcycleBehavior and leafletjsBehavior
  137 + * and run the Datalet workcycle.
  138 + *
  139 + * @method ready
  140 + */
  141 + ready: function(){
  142 +
  143 + this.map = L.map(this.$.leafletjs).setView([0, 0], 13);
  144 +
  145 + L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  146 + maxZoom: 18,
  147 + attribution: 'Map data ยฉ <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
  148 + }).addTo(this.map);
113 149
  150 + L.Icon.Default.imagePath = 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images';
  151 +
  152 + var leafletjsComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonDataRequestBehavior, leafletjsBehavior);
  153 + leafletjsComponentBehavior.init(this);
  154 + }
114 }); 155 });
115 </script> 156 </script>
116 </dom-module> 157 </dom-module>
datalets/linechart-datalet/linechart-datalet.html
  View file @a508f99
  1 +<!--
  2 +The MIT License (MIT)
  3 +
  4 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 +
  6 +Permission is hereby granted, free of charge, to any person obtaining a copy
  7 +of this software and associated documentation files (the "Software"), to deal
  8 +in the Software without restriction, including without limitation the rights
  9 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10 +copies of the Software, and to permit persons to whom the Software is
  11 +furnished to do so, subject to the following conditions:
  12 +
  13 +The above copyright notice and this permission notice shall be included in
  14 +all copies or substantial portions of the Software.
  15 +
  16 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  17 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  18 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  19 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  20 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  21 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  22 +THE SOFTWARE.
  23 +-->
  24 +
1 <link rel="import" href="../../bower_components/polymer/polymer.html"> 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html"> 26 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
3 27
  28 +<!--
  29 +
  30 +`linechart-datalet` is a linechart datalet based on highcharts project <http://www.highcharts.com/>
  31 +
  32 +Example:
  33 +
  34 +<linechart-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"
  35 + query="$['result']['records'][*]['Lat']###$['result']['records'][*]['Lng']">
  36 +
  37 +
  38 +-->
  39 +
4 <dom-module id="linechart-datalet"> 40 <dom-module id="linechart-datalet">
5 <template> 41 <template>
6 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet> 42 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet>
7 </template> 43 </template>
8 <script> 44 <script>
9 var LinechartBehavior = { 45 var LinechartBehavior = {
  46 +
  47 +
  48 + /**
  49 + * Bluid Highchart object
  50 + *
  51 + * @method transformData
  52 + */
10 transformData: function(){ 53 transformData: function(){
11 - //Bluid Highchart element 54 +
12 $(this._component.$.charts.$.container).highcharts({ 55 $(this._component.$.charts.$.container).highcharts({
13 title: { 56 title: {
14 text: 'Line chart' 57 text: 'Line chart'
@@ -56,6 +99,13 @@ @@ -56,6 +99,13 @@
56 99
57 LinechartDatalet = Polymer({ 100 LinechartDatalet = Polymer({
58 is: 'linechart-datalet', 101 is: 'linechart-datalet',
  102 +
  103 + /**
  104 + * 'ready' callback extend the LinechartComponentBehavior with HighchartsComponentBehavior and LinechartBehavior
  105 + * and run the Datalet workcycle.
  106 + *
  107 + * @method ready
  108 + */
59 ready: function(){ 109 ready: function(){
60 var LinechartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, LinechartBehavior); 110 var LinechartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, LinechartBehavior);
61 LinechartComponentBehavior.init(this); 111 LinechartComponentBehavior.init(this);
datalets/treemap-datalet/treemap-datalet.html
  View file @a508f99
  1 +<!--
  2 +The MIT License (MIT)
  3 +
  4 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 +
  6 +Permission is hereby granted, free of charge, to any person obtaining a copy
  7 +of this software and associated documentation files (the "Software"), to deal
  8 +in the Software without restriction, including without limitation the rights
  9 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10 +copies of the Software, and to permit persons to whom the Software is
  11 +furnished to do so, subject to the following conditions:
  12 +
  13 +The above copyright notice and this permission notice shall be included in
  14 +all copies or substantial portions of the Software.
  15 +
  16 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  17 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  18 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  19 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  20 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  21 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  22 +THE SOFTWARE.
  23 +-->
  24 +
1 <link rel="import" href="../../bower_components/polymer/polymer.html"> 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 <link rel="import" href="../base-datalet/base-datalet.html"> 26 <link rel="import" href="../base-datalet/base-datalet.html">
3 27