WebCompDev / COMPONENTS

Commit 06cb7c2ab944d0c321bab520a36c10fe55b730f3

Authored by lucvic
1 parent 83662c3e

Added Areachart datalet

Inline Side-by-side
Showing 4 changed files with 211 additions and 0 deletions
datalets/areachart-datalet/areachart-datalet.html 0 → 100644
  View file @06cb7c2
  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 @06cb7c2

25.6 KB
datalets/areachart-datalet/demo/index.html 0 → 100644
  View file @06cb7c2
  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 @06cb7c2
  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