WebCompDev / COMPONENTS

Commit a69ff91ec8349eff9ad26486e8d732e94b6b8591

Authored by Luigi Serra
2 parents b7101429 20361455

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

Inline Side-by-side
Showing 10 changed files with 605 additions and 0 deletions
datalets/areachart-datalet/areachart-datalet.html 0 → 100644
  View file @a69ff91
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
  33 +
  34 +<!--
  35 +
  36 +`areachart-datalet` is an areachart datalet based on highcharts project <http://www.highcharts.com/>
  37 +
  38 +Example:
  39 +
  40 + <areachart-datalet
  41 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  42 + fields='["field1","field2"]'>
  43 + </areachart-datalet>
  44 +
  45 +@element areachart-datalet
  46 +@status v0.1
  47 +@demo demo/index.html
  48 +@group datalets
  49 +-->
  50 +
  51 +<dom-module id="areachart-datalet">
  52 + <template>
  53 + <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
  54 + </template>
  55 + <script>
  56 +
  57 + var AreachartBehavior = {
  58 +
  59 + /**
  60 + * Bluid Highchart object
  61 + *
  62 + * @method transformData
  63 + */
  64 + presentData: function(){
  65 + $(this._component.$.charts.$.container).highcharts({
  66 + chart: {
  67 + type: 'area',
  68 + zoomType: 'xy'
  69 + },
  70 + title: {
  71 + text: this._component.title
  72 + },
  73 + xAxis: {
  74 + categories: this.properties.categories.value,//this._component.categories,
  75 + title: {
  76 + text: this._component.xAxisLabel
  77 + }
  78 + },
  79 + yAxis: {
  80 + min: 0,
  81 + title: {
  82 + text: this._component.yAxisLabel,
  83 + align: 'high'
  84 + },
  85 + labels: {
  86 + overflow: 'justify'
  87 + }
  88 + },
  89 + tooltip: {
  90 + valueSuffix: ' ' + this._component.suffix
  91 + },
  92 + plotOptions: {
  93 + area: {
  94 +
  95 + }
  96 + },
  97 + legend: {
  98 + layout: 'vertical',
  99 + align: 'right',
  100 + verticalAlign: 'top',
  101 + x: -40,
  102 + y: 100,
  103 + floating: true,
  104 + borderWidth: 1,
  105 + backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
  106 + shadow: true
  107 + },
  108 + credits: {
  109 + enabled: false
  110 + },
  111 + series: this.properties.series.value//this._component.series
  112 + });
  113 + }
  114 + };
  115 +
  116 +
  117 + AreachartDatalet = Polymer({
  118 + is: 'areachart-datalet',
  119 +
  120 + properties: {
  121 + /**
  122 + * It's the label for X axis
  123 + *
  124 + * @attribute xAxisLabel
  125 + * @type String
  126 + * @default ''
  127 + */
  128 + xAxisLabel: {
  129 + type: String,
  130 + value: ""
  131 + },
  132 + /**
  133 + * It's the label for Y axis
  134 + *
  135 + * @attribute yAxisLabel
  136 + * @type String
  137 + * @default ''
  138 + */
  139 + yAxisLabel: {
  140 + type: String,
  141 + value: ""
  142 + },
  143 + /**
  144 + * It's the title of the chart
  145 + *
  146 + * @attribute title
  147 + * @type Strig
  148 + * @default ''
  149 + */
  150 + title: {
  151 + type: String,
  152 + value: "Heading"
  153 + },
  154 + /**
  155 + * It's the values suffix
  156 + *
  157 + * @attribute suffix
  158 + * @type Strig
  159 + * @default 'units'
  160 + */
  161 + suffix : {
  162 + type : String,
  163 + value : "units"
  164 + }
  165 + },
  166 +
  167 + /**
  168 + * 'ready' callback extend the AreachartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior
  169 + * and run the Datalet workcycle.
  170 + *
  171 + * @method ready
  172 + */
  173 + ready: function(){
  174 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, AreachartBehavior);
  175 + this.async(function(){this.behavior.init(this)},1000);
  176 + }
  177 + });
  178 + </script>
  179 +</dom-module>
0 \ No newline at end of file 180 \ No newline at end of file
datalets/areachart-datalet/areachart-datalet.png 0 → 100644
View file @a69ff91

25.6 KB
datalets/areachart-datalet/demo/index.html 0 → 100644
  View file @a69ff91
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title></title>
  6 +
  7 + <script>
  8 + </script>
  9 +
  10 +</head>
  11 +<body>
  12 +
  13 +<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
  14 +<link rel="import" href="../areachart-datalet.html" />
  15 +
  16 +<areachart-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"
  17 + fields='["result,records,Lat","result,records,Lng"]'></areachart-datalet>
  18 +
  19 +</body>
  20 +</html>
0 \ No newline at end of file 21 \ No newline at end of file
datalets/areachart-datalet/docs.html 0 → 100644
  View file @a69ff91
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
  5 + <meta charset="UTF-8">
  6 +</head>
  7 +<body>
  8 +
  9 +<iron-component-page src="areachart-datalet.html"></iron-component-page>
  10 +
  11 +</body>
  12 +</html>
0 \ No newline at end of file 13 \ No newline at end of file
datalets/bubble3d-datalet/bubble3d-datalet.html 0 → 100644
  View file @a69ff91
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
  33 +<script src="http://code.highcharts.com/highcharts-more.js"></script>
  34 +
  35 +<!--
  36 +`bubble3d-datalet` is a 3D bubbles datalet based on highcharts project <http://www.highcharts.com/>
  37 +
  38 +Examples:
  39 +
  40 + An example to create a 3d Bubble chart with multiple series specified (fields4)
  41 +
  42 + <bubble3d-datalet
  43 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  44 + fields='["field1","field2","field3","field4"]'>
  45 + </bubble3d-datalet>
  46 +
  47 + An example to create a 3d Bubble chart with x and y values, and a size value (field3)
  48 +
  49 + <bubble3d-datalet
  50 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  51 + fields='["field1","field2","field3"]'>
  52 + </bubble3d-datalet>
  53 +
  54 +@element bubble3d-datalet
  55 +@status v0.1
  56 +@demo demo/index.html
  57 +@group datalets
  58 +-->
  59 +
  60 +<dom-module name="bubble3d-datalet">
  61 + <template>
  62 + <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
  63 + </template>
  64 + <script>
  65 +
  66 + var Bubble3dBehavior = {
  67 + /**
  68 + * Build Highchart object
  69 + *
  70 + * @method presentData
  71 + */
  72 + presentData: function() {
  73 + var categoryName = [];
  74 + var color = {};
  75 + var bubble3DSeriesData = {};
  76 + var b3dserie = [];
  77 +
  78 + Bubble3DArr = [];
  79 + var dataTmp = [];
  80 + //Example 1: No Series name is specified in the query
  81 + if(this.data.length == 3){
  82 + for (var i = 0; i < this.data[0].data.length; i++) {
  83 + Bubble3DArr = [this.data[0].data[i], parseFloat(this.data[1].data[i]), parseFloat(this.data[2].data[i])];
  84 + dataTmp.push(Bubble3DArr)
  85 + }
  86 + color = {
  87 + fillColor: {
  88 + radialGradient: {cx: 0.4, cy: 0.3, r: 0.7},
  89 + stops: [
  90 + [0, 'rgba(255,255,255,0.5)']
  91 + ]
  92 + }
  93 + }
  94 + //add data to the series
  95 + bubble3DSeriesData = {
  96 + name: "Series",
  97 + data: dataTmp,
  98 + marker: color
  99 + }
  100 + b3dserie.push(bubble3DSeriesData);
  101 + }
  102 + //Example 2: A multi-series 3d bubble charts
  103 + else{
  104 + var categoryNameDuplicateValue = [];
  105 + for (i = 0; i < this.data[0].data.length; i++) {
  106 + categoryNameDuplicateValue.push(this.data[3].data[i]);
  107 + }
  108 + categoryName = categoryNameDuplicateValue.filter(function (itm, i, categoryNameDuplicateValue) {
  109 + return i == categoryNameDuplicateValue.indexOf(itm);
  110 + });
  111 + for (var index = 0; index < categoryName.length; index++) {
  112 + for (var i = 0; i < this.data[0].data.length; i++) {
  113 + if (this.data[3].data[i] == categoryName[index]) {
  114 + Bubble3DArr = [this.data[0].data[i], this.data[1].data[i], parseFloat(this.data[2].data[i])];
  115 + dataTmp.push(Bubble3DArr);
  116 + //A different color for each series
  117 + color = {
  118 + fillColor: {
  119 + radialGradient: {cx: 0.4, cy: 0.3, r: 0.7},
  120 + stops: [
  121 + [0, 'rgba(255,255,255,0.5)'],
  122 + [1, Highcharts.Color(Highcharts.getOptions().colors[index]).setOpacity(0.5).get('rgba')]
  123 + ]
  124 + }
  125 + }
  126 + }
  127 + }
  128 + //add data to the series
  129 + bubble3DSeriesData = {
  130 + name: "Series: " + categoryName[index],
  131 + data: dataTmp,
  132 + marker: color
  133 + }
  134 +
  135 + b3dserie.push(bubble3DSeriesData);
  136 + dataTmp = [];
  137 + }
  138 + }
  139 + $(this._component.$.charts.$.container).highcharts({
  140 + chart: {
  141 + type: 'bubble',
  142 + plotBorderWidth: 1,
  143 + zoomType: 'xy'
  144 + },
  145 +
  146 + legend: {
  147 + enabled: true
  148 + },
  149 +
  150 + title: {
  151 + text: "" + this._component.title
  152 + },
  153 + xAxis: {
  154 + categories: this.properties.categories.value,
  155 + title: {
  156 + text: this._component.xAxisLabel
  157 + }
  158 + },
  159 +
  160 + yAxis: {
  161 + categories: this.properties.categories.value,
  162 + title: {
  163 + text: this._component.yAxisLabel
  164 + }
  165 + },
  166 + title: {
  167 + text: this._component.title
  168 + },
  169 + subtitle: {
  170 + text: this._component.title
  171 + },
  172 + //A custom tooltip
  173 + tooltip: {
  174 + shared: true,
  175 + useHTML: true,
  176 + headerFormat:
  177 + '<table ><tr><td style="color: {series.color}">{series.name}</td></tr>' +
  178 + '<tr><td <b> {point.key}</b> , <b>{point.y}</b></tr>',
  179 + pointFormat:
  180 + '<td style="text-align: right"><b>{point.z}</b></td></tr>',
  181 + footerFormat: '</table>',
  182 + followPointer: true
  183 + },
  184 + plotOptions: {
  185 + series: {
  186 + dataLabels: {
  187 + enabled: false, //enable for label for each bubble
  188 + format: '{point.z}'
  189 + }
  190 + }
  191 + },
  192 + //hide link HighChart
  193 + credits: {
  194 + enabled: false
  195 + },
  196 + series: b3dserie
  197 + });
  198 + }
  199 + };
  200 + /**
  201 + * Element registration
  202 + */
  203 + Bubble3dDatalet = Polymer({
  204 + is: 'bubble3d-datalet',
  205 + properties: {
  206 + /**
  207 + * It's the label for X axis
  208 + *
  209 + * @attribute xAxisLabel
  210 + * @type String
  211 + * @default ''
  212 + */
  213 + xAxisLabel: {
  214 + type: String,
  215 + value: ""
  216 + },
  217 + /**
  218 + * It's the label for Y axis
  219 + *
  220 + * @attribute yAxisLabel
  221 + * @type String
  222 + * @default ''
  223 + */
  224 + yAxisLabel: {
  225 + type: String,
  226 + value: ""
  227 + },
  228 + /**
  229 + * It's the title of the chart
  230 + *
  231 + * @attribute title
  232 + * @type Strig
  233 + * @default ''
  234 + */
  235 + title: {
  236 + type: String,
  237 + value: ""
  238 + },
  239 + /**
  240 + * It's the component behavior
  241 + *
  242 + * @attribute behavior
  243 + * @type Object
  244 + * @default {}
  245 + */
  246 + behavior : {
  247 + type : Object,
  248 + value : {}
  249 + }
  250 + },
  251 + /**
  252 + * 'ready' callback extend the Bubble3dBehavior with HighchartsComponentBehavior and Bubble3dBehavior
  253 + * and run the Datalet workcycle.
  254 + *
  255 + * @method ready
  256 + */
  257 + ready: function(){
  258 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, Bubble3dBehavior);
  259 + this.async(function(){this.behavior.init(this)},1);
  260 + }
  261 + });
  262 + </script>
  263 +</dom-module>
0 \ No newline at end of file 264 \ No newline at end of file
datalets/bubble3d-datalet/bubble3d-datalet.png 0 → 100644
View file @a69ff91

15.8 KB
datalets/bubble3d-datalet/bubble3d-datalet.xml 0 → 100644
  View file @a69ff91
  1 +<component>
  2 + <name>bubble3d-datalet</name>
  3 + <attributes>
  4 + <attribute>
  5 + <name>data-url</name>
  6 + </attribute>
  7 + <attribute>
  8 + <name>fields</name>
  9 + </attribute>
  10 + </attributes>
  11 + <idm>
  12 + <inputs>
  13 + <input>
  14 + <name>Categories</name>
  15 + <description>The chart categories. Its values will be put in the horizontal axis. You need one value for each series.</description>
  16 + <scale>nominal</scale>
  17 + <role>domain</role>
  18 + <selection>11</selection>
  19 + </input>
  20 + <input>
  21 + <name>Y values</name>
  22 + <description>The chart plots y values. Its values will be put in the vertical axis.</description>
  23 + <scale>nominal</scale>
  24 + <role>domain</role>
  25 + <selection>11</selection>
  26 + </input>
  27 + <input>
  28 + <name>Z values</name>
  29 + <description>The chart plots z value. Its values represent the size of the bubble.</description>
  30 + <scale>nominal</scale>
  31 + <role>domain</role>
  32 + <selection>11</selection>
  33 + </input>
  34 + <input>
  35 + <name>Series</name>
  36 + <description>The chart series. Its values visualize multi- series bubbles chart.</description>
  37 + <scale>nominal</scale>
  38 + <role>domain</role>
  39 + <selection>11</selection>
  40 + </input>
  41 + <layouts>
  42 + <input>
  43 + <name>title</name>
  44 + <description>The label for the title of the chart</description>
  45 + </input>
  46 + <input>
  47 + <name>x-axis-label</name>
  48 + <description>The label for the X axis</description>
  49 + </input>
  50 + <input>
  51 + <name>y-axis-label</name>
  52 + <description>The label for the Y axis</description>
  53 + </input>
  54 + <input>
  55 + <name>suffix</name>
  56 + <description>The values suffix(eg units, dollars, euro, ...)</description>
  57 + </input>
  58 + <input>
  59 + <name>comment</name>
  60 + <description>The values suffix(eg units, dollars, euro, ...)</description>
  61 + </input>
  62 + </layouts>
  63 + </inputs>
  64 + </idm>
  65 +</component>
0 \ No newline at end of file 66 \ No newline at end of file
datalets/bubble3d-datalet/demo/index.html 0 → 100644
  View file @a69ff91
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title></title>
  6 +
  7 + <script>
  8 + </script>
  9 +
  10 +</head>
  11 +<body>
  12 +
  13 +<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
  14 +<link rel="import" href="../bubble3d-datalet.html" />
  15 +<bubble3d-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"
  16 + fields='["result,records,risorsa","result,records,capitolo","result,records,movimento", "result,records,categoria"]'></bubble3d-datalet>
  17 +
  18 +</body>
  19 +</html>
datalets/bubble3d-datalet/docs.html 0 → 100644
  View file @a69ff91
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
  5 + <meta charset="UTF-8">
  6 +</head>
  7 +<body>
  8 +
  9 +<iron-component-page src="bubble3d-datalet.html"></iron-component-page>
  10 +
  11 +</body>
  12 +</html>
0 \ No newline at end of file 13 \ No newline at end of file
datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.xml 0 → 100644
  View file @a69ff91
  1 +<component>
  2 +<name>donutpie3dchart-datalet</name>
  3 +<attributes>
  4 +<attribute>
  5 + <name>data-url</name>
  6 +</attribute>
  7 +<attribute>
  8 + <name>fields</name>
  9 +</attribute>
  10 +</attributes>
  11 +<idm>
  12 +<inputs>
  13 + <input>
  14 + <name>Series</name>
  15 + <description>The chart series. Its values will be put on slice of each series.</description>
  16 + <scale>nominal</scale>
  17 + <role>domain</role>
  18 + <selection>11</selection>
  19 + </input>
  20 + <input>
  21 + <name>Size </name>
  22 + <description>The size for each series to create a concentric rings</description>
  23 + <scale>nominal</scale>
  24 + <role>domain</role>
  25 + <selection>11</selection>
  26 + </input>
  27 + <layouts>
  28 + <input>
  29 + <name>title</name>
  30 + <description>The label for the title of the chart</description>
  31 + </input>
  32 + </layouts>
  33 +</inputs>
  34 +</idm>
  35 +</component>
0 \ No newline at end of file 36 \ No newline at end of file