WebCompDev / COMPONENTS

Commit e726d1a08b02f1001e925aa18b23ca99e8420171

Authored by pina
0 parents

donut update

Inline Side-by-side
Showing 4 changed files with 173 additions and 0 deletions
demo/index.html 0 โ†’ 100644
  View file @e726d1a
  1 +++ a/demo/index.html
  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="../donutpie3dchart-datalet.html" />
  15 +
  16 +<donutpie3dchart-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"
  17 + fields='["facet_groups,facets,facets,path","facet_groups,facets,facets,count"]'></donutpie3dchart-datalet>
  18 +
  19 +</body>
  20 +</html>
  21 +
... ...
docs.html 0 โ†’ 100644
  View file @e726d1a
  1 +++ a/docs.html
  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="donutpie3dchart-datalet.html"></iron-component-page>
  10 +
  11 +</body>
  12 +</html>
... ...
donutpie3Dchart-datalet.png 0 โ†’ 100644
View file @e726d1a

50.5 KB
donutpie3dchart-datalet.html 0 โ†’ 100644
  View file @e726d1a
  1 +++ a/donutpie3dchart-datalet.html
  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 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  26 +<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
  27 +<script src="http://code.highcharts.com/highcharts-3d.js"></script>
  28 +
  29 +<!--
  30 +
  31 +`donutpie3dchart-datalet` is a donutpie3dchart datalet based on highcharts project <http://www.highcharts.com/>
  32 +
  33 +Example:
  34 +
  35 + <donutpie3dchart-datalet>
  36 + data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
  37 + fields='["field1","field2"]'>
  38 + </donutpie3dchart-datalet>
  39 +
  40 +@element donut3dchart-datalet
  41 +@status v0.1
  42 +@demo demo/index.html
  43 +@group datalets
  44 +-->
  45 +<dom-module id="donutpie3dchart-datalet">
  46 + <template>
  47 + <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
  48 + </template>
  49 + <script>
  50 +
  51 + var DonutPiechartBehavior = {
  52 + /**
  53 + * Build Highchart object
  54 + *
  55 + * @method presentData
  56 + */
  57 + presentData: function(){
  58 +
  59 + var DonutPie3DSeries = [{"name": this.data[1].name, "data":[]}];
  60 +
  61 + for(var i=0; i<this.data[0].data.length; i++)
  62 + {
  63 + var DonutPie3DArr = [this.data[0].data[i], this.data[1].data[i]];
  64 + DonutPie3DSeries[0].data.push(DonutPie3DArr);
  65 + }
  66 +
  67 + var titleDataset = "";
  68 + //Build Highchart element
  69 + $(this._component.$.charts.$.container).highcharts({
  70 + chart: {
  71 + type: 'pie',
  72 + options3d: {
  73 + enabled: true,
  74 + alpha: 45
  75 + }
  76 + },
  77 + title: {
  78 + text: this.properties.title
  79 + },
  80 + subtitle: {
  81 + text: this._component.title
  82 + },
  83 + plotOptions: {
  84 + pie: {
  85 + innerSize: 100,
  86 + depth: 45,
  87 + allowPointSelect: true,
  88 + cursor: 'pointer',
  89 + dataLabels: {
  90 + enabled: true,
  91 + formatter: function() {
  92 + if (this.point.name.length > 10) {
  93 + return this.point.name.substr(0, 10) + "...";
  94 + } else {
  95 + return this.point.name;
  96 + }
  97 + }
  98 + },
  99 + showInLegend: true
  100 + }
  101 + },
  102 + //hide link HighChart
  103 + credits: {
  104 + enabled: false
  105 + },
  106 + series: DonutPie3DSeries//this.properties.series.value
  107 + });
  108 + }
  109 + };
  110 +
  111 + var DonutPiechartComponentBehavior = $.extend(true, {}, HighchartsComponentBehavior, DonutPiechartBehavior);
  112 +
  113 + DonutPiechartDatalet = Polymer({
  114 + is: 'donutpie3dchart-datalet',
  115 +
  116 + properties: {
  117 + /**
  118 + * It's the title of the chart
  119 + *
  120 + * @attribute title
  121 + * @type String
  122 + * @default ''
  123 + */
  124 + title: {
  125 + type: String,
  126 + value: "Heading"
  127 + }
  128 + },
  129 + /**
  130 + * 'ready' callback extend the DonutPiechartComponentBehavior with HighchartsComponentBehavior and DonutPiechartBehavior
  131 + * and run the Datalet workcycle.
  132 + *
  133 + * @method ready
  134 + */
  135 + ready: function(){
  136 + DonutPiechartComponentBehavior.init(this);
  137 + }
  138 + });
  139 + </script>
  140 +</dom-module>
0 141 \ No newline at end of file
... ...