WebCompDev / COMPONENTS

Commit 02de6132a784c3dbb16b002f951f821a873d623c

Authored by pina
1 parent 20361455

a new datalet pie chart

Inline Side-by-side
Showing 5 changed files with 216 additions and 0 deletions
datalets/piechart-datalet/demo/index.html 0 → 100644
  View file @02de613
  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="../piechart-datalet.html" />
  15 +<piechart-datalet data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"
  16 + fields='["facet_groups,facets,facets,path","facet_groups,facets,facets,count"]'></piechart-datalet>
  17 +</body>
  18 +</html>
  19 +
datalets/piechart-datalet/docs.html 0 → 100644
  View file @02de613
  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="piechart-datalet.html"></iron-component-page>
  10 +
  11 +</body>
  12 +</html>
datalets/piechart-datalet/piechart-datalet.html 0 → 100644
  View file @02de613
  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 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  32 +<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
  33 +
  34 +
  35 +<!--
  36 +`piechart-datalet` is a piechart datalet based on highcharts project <http://www.highcharts.com/>
  37 +
  38 +Example:
  39 +
  40 + <piechart-datalet>
  41 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  42 + fields='["field1","field2"]'>
  43 + </piechart-datalet>
  44 +
  45 +@element piechart-datalet
  46 +@status v0.1
  47 +@demo demo/index.html
  48 +@group datalets
  49 +-->
  50 +<dom-module id="piechart-datalet">
  51 + <template>
  52 + <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
  53 + </template>
  54 + <script>
  55 +
  56 + var PiechartBehavior = {
  57 + /**
  58 + * Build Highchart object
  59 + *
  60 + * @method presentData
  61 + */
  62 + presentData: function(){
  63 +
  64 + var PieSeries = [{"name": this.data[1].name, "data":[]}];
  65 +
  66 + for(var i=0; i<this.data[0].data.length; i++)
  67 + {
  68 + var PieArr = [this.data[0].data[i], this.data[1].data[i]];
  69 + PieSeries[0].data.push(PieArr);
  70 + }
  71 +
  72 + //Build Highchart element
  73 + $(this._component.$.charts.$.container).highcharts({
  74 + chart: {
  75 + plotBackgroundColor: null,
  76 + plotBorderWidth: null,
  77 + plotShadow: false,
  78 + type: 'pie'
  79 + },
  80 + title: {
  81 + text: "" + this._component.title
  82 + },
  83 + plotOptions: {
  84 + pie: {
  85 + allowPointSelect: true,
  86 + cursor: 'pointer',
  87 + dataLabels: {
  88 + enabled: true,
  89 + formatter: function() {
  90 + if (this.point.name.length > 10) {
  91 + return this.point.name.substr(0, 10) + "...";
  92 + } else {
  93 + return this.point.name;
  94 + }
  95 + }
  96 + },
  97 + showInLegend: true
  98 + }
  99 + },
  100 + //hide link HighChart
  101 + credits: {
  102 + enabled: false
  103 + },
  104 + series: PieSeries
  105 + });
  106 + }
  107 + };
  108 +
  109 +
  110 + PiechartDatalet = Polymer({
  111 + is: 'piechart-datalet',
  112 +
  113 + properties: {
  114 + /**
  115 + * It's the component behavior
  116 + *
  117 + * @attribute behavior
  118 + * @type Object
  119 + * @default {}
  120 + */
  121 + behavior : {
  122 + type : Object,
  123 + value : {}
  124 + },
  125 + /**
  126 + * It's the title of the chart
  127 + *
  128 + * @attribute title
  129 + * @type Strig
  130 + * @default ''
  131 + */
  132 + title: {
  133 + type: String,
  134 + value: ""
  135 + }
  136 + },
  137 +
  138 + /**
  139 + * 'ready' callback extend the PiechartComponentBehavior with HighchartsComponentBehavior and PiechartBehavior
  140 + * and run the Datalet workcycle.
  141 + *
  142 + * @method ready
  143 + */
  144 + ready: function(){
  145 + this.behavior = $.extend(true, {}, HighchartsComponentBehavior, PiechartBehavior);
  146 + this.async(function(){this.behavior.init(this)},1000);
  147 + }
  148 + });
  149 + </script>
  150 +</dom-module>
0 \ No newline at end of file 151 \ No newline at end of file
datalets/piechart-datalet/piechart-datalet.png 0 → 100644
View file @02de613

7.47 KB
datalets/piechart-datalet/piechart-datalet.xml 0 → 100644
  View file @02de613
  1 +<component>
  2 +<name>piechart-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