Blame view

datalets/treemap-datalet/treemap-datalet.html 7.05 KB
a508f993   isisadmin   added datalet doc...
1
  <!--

5e6ba8af   isisadmin   datalet doc update
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  @license

      The MIT License (MIT)

  

      Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy

  

      Permission is hereby granted, free of charge, to any person obtaining a copy

      of this software and associated documentation files (the "Software"), to deal

      in the Software without restriction, including without limitation the rights

      to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

      copies of the Software, and to permit persons to whom the Software is

      furnished to do so, subject to the following conditions:

  

      The above copyright notice and this permission notice shall be included in

      all copies or substantial portions of the Software.

  

      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

      IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

      FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

      AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

      LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

      OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

      THE SOFTWARE.

a508f993   isisadmin   added datalet doc...
24
25
  -->

  

ae17a8dc   Luigi Serra   Controllet and da...
26
  <!--

950d181d   Luigi Serra   license updates
27
28
  * Developed by :

  * ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu

ae17a8dc   Luigi Serra   Controllet and da...
29
30
31
  *

  -->

  

a1f0799c   isisadmin   datalet global re...
32
  <link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">

73bcce88   luigser   COMPONENTS
33
  

5e6ba8af   isisadmin   datalet doc update
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
  <!--

  

  `treemap-datalet` is a treemap datalet based on d3js treemap project http://bl.ocks.org/mbostock/4063582

  A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value.

  

  Example:

  

      <treemap-datalet

          data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"

          fields='["field1","field2"]'>

      </treemap-datalet>

  

  @element barchart-datalet

  @status v0.1

  @demo demo/index.html

  @group datalets

  -->

  

73bcce88   luigser   COMPONENTS
52
53
  <dom-module id="treemap-datalet">

      <template>

74249687   Luigi Serra   Cross browser con...
54
          <style is="custom-style">

73bcce88   luigser   COMPONENTS
55
  

74249687   Luigi Serra   Cross browser con...
56
              :host ::content h6 {

73bcce88   luigser   COMPONENTS
57
58
59
                  color: red;

              }

  

74249687   Luigi Serra   Cross browser con...
60
              :host ::content #treemap_placeholder {

73bcce88   luigser   COMPONENTS
61
62
                  width: 100%;

                  height: 70%;

f974e824   Luigi Serra   Bugs fix
63
                  min-height: 500px;

73bcce88   luigser   COMPONENTS
64
65
66
                  background: #ddd;

              }

  

74249687   Luigi Serra   Cross browser con...
67
              :host ::content text {

73bcce88   luigser   COMPONENTS
68
69
70
                  pointer-events: none;

              }

  

74249687   Luigi Serra   Cross browser con...
71
              :host ::content .grandparent text {

73bcce88   luigser   COMPONENTS
72
73
74
                  font-weight: bold;

              }

  

74249687   Luigi Serra   Cross browser con...
75
              :host ::content rect {

73bcce88   luigser   COMPONENTS
76
77
78
79
                  fill: none;

                  stroke: #fff;

              }

  

74249687   Luigi Serra   Cross browser con...
80
              :host ::content rect.parent,

73bcce88   luigser   COMPONENTS
81
82
83
84
              .grandparent rect {

                  stroke-width: 2px;

              }

  

74249687   Luigi Serra   Cross browser con...
85
              :host ::content .grandparent rect {

73bcce88   luigser   COMPONENTS
86
87
88
                  fill: orange;

              }

  

74249687   Luigi Serra   Cross browser con...
89
              :host ::content .grandparent:hover rect {

73bcce88   luigser   COMPONENTS
90
91
92
                  fill: #ee9700;

              }

  

74249687   Luigi Serra   Cross browser con...
93
              :host ::content .children rect.parent,

73bcce88   luigser   COMPONENTS
94
95
96
97
              .grandparent rect {

                  cursor: pointer;

              }

  

74249687   Luigi Serra   Cross browser con...
98
              :host ::content .children rect.parent {

73bcce88   luigser   COMPONENTS
99
100
101
102
                  fill: #bbb;

                  fill-opacity: .5;

              }

  

74249687   Luigi Serra   Cross browser con...
103
              :host ::content .children:hover rect.child {

73bcce88   luigser   COMPONENTS
104
105
106
107
                  fill: #bbb;

              }

          </style>

          <div id="treemap_placeholder"></div>

ec5b0925   isisadmin   datalet chaching ...
108
          <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>

73bcce88   luigser   COMPONENTS
109
110
111
112
113
      </template>

  

      <script src="../shared_js/d3.js"></script>

      <script src="js/buildtreemap.js"></script>

      <script>

a1f0799c   isisadmin   datalet global re...
114
  

73bcce88   luigser   COMPONENTS
115
          var TreemapBehavior = {

5bc002a2   isisadmin   datalet refactoring
116
  

73bcce88   luigser   COMPONENTS
117
              map : {

4e7eacf4   Luigi Serra   Controllets and d...
118
                  name : "",

73bcce88   luigser   COMPONENTS
119
120
                  children : []

              },

5bc002a2   isisadmin   datalet refactoring
121
122
  

              transformData: function(e)

a1f0799c   isisadmin   datalet global re...
123
124
              {

                  var treemapData = [];

4e7eacf4   Luigi Serra   Controllets and d...
125
                  TreemapBehavior.map.name = this._component.name;

73bcce88   luigser   COMPONENTS
126
  

a1f0799c   isisadmin   datalet global re...
127
128
129
                  if(this.data.length > 1) {

                      for (i = 0; i < this.data.length; i++) {

                          var propName = this.data[i].name;

73bcce88   luigser   COMPONENTS
130
  

a1f0799c   isisadmin   datalet global re...
131
132
                          for (var j = 0; j < this.data[i].data.length; j++) {

                              if (i == 0) treemapData[j] = {};

73bcce88   luigser   COMPONENTS
133
                              currObj = {};

a1f0799c   isisadmin   datalet global re...
134
135
                              currObj[propName] = this.data[i].data[j];

                              jQuery.extend(treemapData[j], currObj);

73bcce88   luigser   COMPONENTS
136
137
138
                          }

                      }

                  }else{

a1f0799c   isisadmin   datalet global re...
139
                      treemapData = this.data[0].data;

73bcce88   luigser   COMPONENTS
140
141
142
143
                  }

  

                  this.map.children = [];

  

a1f0799c   isisadmin   datalet global re...
144
                  for(var i = 0; i < treemapData.length; i++){

9bb60e44   Luigi Serra   updates
145
                      this.checkAggragationField(treemapData[i], this.data.length , this.data.length - 1);

73bcce88   luigser   COMPONENTS
146
                  }

5bc002a2   isisadmin   datalet refactoring
147
  

74249687   Luigi Serra   Cross browser con...
148
                  var json = JSON.stringify(this.map);

5bc002a2   isisadmin   datalet refactoring
149
  

73bcce88   luigser   COMPONENTS
150
              },

5bc002a2   isisadmin   datalet refactoring
151
  

73bcce88   luigser   COMPONENTS
152
153
154
155
156
157
158
159
160
161
              findChild: function(child, category){

                  var children = child.children;

                  for (var i=0; i<children.length; i++) {

                      if (children[i].name == category)

                          return children[i];

                  }

                  var nchild = {name : category , children : []};

                  children.push(nchild);

                  return nchild;

              },

5bc002a2   isisadmin   datalet refactoring
162
  

f974e824   Luigi Serra   Bugs fix
163
              checkAggragationField: function(object, levels, value_index){

73bcce88   luigser   COMPONENTS
164
165
                  var curchild = this.map;

                  var keys = Object.keys(object);

f974e824   Luigi Serra   Bugs fix
166
                  for(var level= 0; level < levels; level++){

73bcce88   luigser   COMPONENTS
167
  

f974e824   Luigi Serra   Bugs fix
168
                      var child = this.findChild(curchild, object[keys[level]]);

73bcce88   luigser   COMPONENTS
169
170
171
172
173
174
175
176
177
178
                      curchild = child;

                  }

  

                  if (curchild.value === undefined)

                      curchild.value = 0;

  

                  var value = curchild.value + parseFloat(object[keys[value_index]]);

                  curchild.children = null;

                  curchild.value = value;

              },

5bc002a2   isisadmin   datalet refactoring
179
180
  

              presentData: function(){

8fcc0f36   Luigi Serra   treeview bug fixing
181
182
                  //build(this.map, "treemap_placeholder");

                  build(this.map, this._component.$.treemap_placeholder);

73bcce88   luigser   COMPONENTS
183
184
185
186
187
188
              }

          };

  

  

          Polymer({

              is : 'treemap-datalet' ,

a1f0799c   isisadmin   datalet global re...
189
  

035bbee3   Luigi Serra   Datalets and cont...
190
191
192
193
194
195
196
197
198
199
200
              properties: {

                  /**

                   * It's the name for treemap

                   *

                   * @attribute name

                   * @type String

                   * @default ''

                   */

                  name: {

                      type: String,

                      value: ""

e5b73e81   isisadmin   addded behavior p...
201
202
203
204
205
206
207
208
209
210
211
                  },

                  /**

                   * It's the component behavior

                   *

                   * @attribute behavior

                   * @type Object

                   * @default {}

                   */

                  behavior : {

                      type : Object,

                      value : {}

035bbee3   Luigi Serra   Datalets and cont...
212
213
214
                  }

              },

  

73bcce88   luigser   COMPONENTS
215
              ready: function(){

e5b73e81   isisadmin   addded behavior p...
216
                  this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, TreemapBehavior);

eb240478   Luigi Serra   public room cards...
217
                  this.async(function(){this.behavior.init(this)},1000);

73bcce88   luigser   COMPONENTS
218
219
220
221
222
              }

  

          });

      </script>

  </dom-module>