SGH / 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 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 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 40 <dom-module name="barchart-datalet">
5 41 <template>
6 42 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet>
7 43 </template>
8 44 <script>
9 45 var BarchartBehavior = {
  46 +
  47 +
  48 + /**
  49 + * Bluid Highchart object
  50 + *
  51 + * @method transformData
  52 + */
10 53 transformData: function(){
11   - //Bluid Highchart element
  54 +
12 55 $(this._component.$.charts.$.container).highcharts({
13 56 chart: {
14 57 type: 'bar',
... ... @@ -18,7 +61,7 @@
18 61 text: 'Bar chart'
19 62 },
20 63 xAxis: {
21   - categories: this.properties.categories.value,//this._component.categories,
  64 + categories: this.properties.categories.value,
22 65 title: {
23 66 text: null
24 67 }
... ... @@ -57,13 +100,20 @@
57 100 credits: {
58 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 108 BarchartDatalet = Polymer({
66 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 117 ready: function(){
68 118  
69 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 26 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 27 <link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
3   -
4   -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
5 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 44 <dom-module name="column3Dchart-datalet">
10 45  
... ... @@ -22,12 +57,14 @@
22 57  
23 58 var column3DchartBehavior = {
24 59  
25   -
  60 + /**
  61 + * Bluid Highchart object
  62 + *
  63 + * @method transformData
  64 + */
26 65 transformData: function(){
27   - //Bluid Highchart element
28 66 chart = new Highcharts.Chart({
29 67 chart: {
30   - //To Modify renderTo: 'container',
31 68 renderTo: this._component.$.charts.$.container,
32 69 borderColor: '#EBBA95',
33 70 borderWidth: 2,
... ... @@ -44,7 +81,7 @@
44 81 }
45 82 },
46 83 xAxis: {
47   - categories: this.properties.categories.value,//this._component.categories,
  84 + categories: this.properties.categories.value,
48 85 title: {
49 86 text: null
50 87 }
... ... @@ -62,7 +99,7 @@
62 99 },
63 100  
64 101 series: this.properties.series.value
65   - });//highcharts
  102 + });
66 103  
67 104 // Activate the sliders
68 105 $('#R0').on('change', function () {
... ... @@ -81,6 +118,12 @@
81 118 column3DchartDatalet = Polymer({
82 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 127 ready: function(){
85 128 var column3DchartComponentBehavior = $.extend({}, HighchartsComponentBehavior, column3DchartBehavior);
86 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 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 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 40 <dom-module id="columnchart-datalet">
5 41 <template>
6 42 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet>
7 43 </template>
8 44 <script>
9 45 var ColumnchartBehavior = {
  46 +
  47 +
  48 + /**
  49 + * Bluid Highchart object
  50 + *
  51 + * @method transformData
  52 + */
10 53 transformData: function(){
11   - //Bluid Highchart element
12 54 $(this._component.$.charts.$.container).highcharts({
13 55 chart: {
14 56 type: 'column',
... ... @@ -64,6 +106,13 @@
64 106  
65 107 LinechartDatalet = Polymer({
66 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 116 ready: function(){
68 117 var ColumnchartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, ColumnchartBehavior);
69 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 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 39 <dom-module name="leafletjs-datalet">
4 40 <template>
5 41 <link rel="stylesheet" href="leafletsjs/leaflet.css" />
... ... @@ -16,25 +52,18 @@
16 52  
17 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 55 var leafletjsBehavior = {
30 56  
  57 + /**
  58 + * Extract all the data from the dataset according to the queries.
  59 + *
  60 + * @method selectData
  61 + */
31 62 selectData: function(){
32 63  
33 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 67 var propName = this.getPropertyName(queries[i]);
39 68  
40 69 temp = jsonPath(this.properties.json_results.value, queries[i]);
... ... @@ -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 85 transformData: function(){
51 86  
52 87 var coordinates = [];
... ... @@ -70,36 +105,25 @@
70 105 Polymer({
71 106  
72 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 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 116 map :
98 117 {
99 118 type: Object,
100 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 127 markers :
104 128 {
105 129 type : Array,
... ... @@ -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 156 </script>
116 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 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 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 40 <dom-module id="linechart-datalet">
5 41 <template>
6 42 <highcharts-datalet id="charts" data-url="{{dataUrl}}" query="{{query}}" fields-order="{{fieldsOrder}}"></highcharts-datalet>
7 43 </template>
8 44 <script>
9 45 var LinechartBehavior = {
  46 +
  47 +
  48 + /**
  49 + * Bluid Highchart object
  50 + *
  51 + * @method transformData
  52 + */
10 53 transformData: function(){
11   - //Bluid Highchart element
  54 +
12 55 $(this._component.$.charts.$.container).highcharts({
13 56 title: {
14 57 text: 'Line chart'
... ... @@ -56,6 +99,13 @@
56 99  
57 100 LinechartDatalet = Polymer({
58 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 109 ready: function(){
60 110 var LinechartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, LinechartBehavior);
61 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 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 26 <link rel="import" href="../base-datalet/base-datalet.html">
3 27  
... ...