73bcce88
 luigser
COMPONENTS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../base-datalet/base-datalet.html">
<dom-module id="treemap-datalet">
<template>
<style>
h6 {
color: red;
}
#treemap_placeholder {
width: 100%;
height: 70%;
|
f974e824
 Luigi Serra
Bugs fix
|
15
|
min-height: 500px;
|
|
73bcce88
luigser
COMPONENTS
|
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
background: #ddd;
}
text {
pointer-events: none;
}
.grandparent text {
font-weight: bold;
}
rect {
fill: none;
stroke: #fff;
}
rect.parent,
.grandparent rect {
stroke-width: 2px;
}
.grandparent rect {
fill: orange;
}
.grandparent:hover rect {
fill: #ee9700;
}
.children rect.parent,
.grandparent rect {
cursor: pointer;
}
.children rect.parent {
fill: #bbb;
fill-opacity: .5;
}
.children:hover rect.child {
fill: #bbb;
}
</style>
<div id="treemap_placeholder"></div>
|
|
f974e824
Luigi Serra
Bugs fix
|
60
|
<base-datalet data-url="{{dataUrl}}" query="{{query}}"></base-datalet>
|
|
73bcce88
luigser
COMPONENTS
|
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
</template>
<script src="../shared_js/d3.js"></script>
<script src="js/buildtreemap.js"></script>
<script>
var TreemapBehavior = {
map : {
name : "Expenses",
children : []
},
selectData: function(e){
var queries = this._component.query.split("###");
if(queries.length > 1) {
for (i = 0; i < queries.length; i++) {
var propName = this.getPropertyName(queries[i]);
temp = jsonPath(this.properties.json_results.value, queries[i]);
for (j = 0; j < temp.length; j++) {
if (i == 0) this.properties.data.value[j] = {};
currObj = {};
currObj[propName] = temp[j];
jQuery.extend(this.properties.data.value[j], currObj);
}
}
}else{
this.properties.data.value = jsonPath(this.properties.json_results.value, queries[0]);
}
this.map.children = [];
|
|
73bcce88
luigser
COMPONENTS
|
92
|
for(var i = 0; i < this.properties.data.value.length; i++){
|
|
f974e824
Luigi Serra
Bugs fix
|
93
|
this.checkAggragationField(this.properties.data.value[i], queries.length - 1 , queries.length - 1);
|
|
73bcce88
luigser
COMPONENTS
|
94
95
96
97
98
99
100
101
102
103
104
105
106
|
}
//var json = JSON.stringify(this.map);
},
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;
},
|
|
f974e824
Luigi Serra
Bugs fix
|
107
|
checkAggragationField: function(object, levels, value_index){
|
|
73bcce88
luigser
COMPONENTS
|
108
109
|
var curchild = this.map;
var keys = Object.keys(object);
|
|
f974e824
Luigi Serra
Bugs fix
|
110
|
for(var level= 0; level < levels; level++){
|
|
73bcce88
luigser
COMPONENTS
|
111
|
|
|
f974e824
Luigi Serra
Bugs fix
|
112
|
var child = this.findChild(curchild, object[keys[level]]);
|
|
73bcce88
luigser
COMPONENTS
|
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
curchild = child;
}
if (curchild.value === undefined)
curchild.value = 0;
var value = curchild.value + parseFloat(object[keys[value_index]]);
curchild.children = null;
curchild.value = value;
},
transformData: function(){
build(this.map, "treemap_placeholder");
}
};
Polymer({
is : 'treemap-datalet' ,
ready: function(){
var TreemapComponentBehavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior,AjaxJsonDataRequestBehavior, TreemapBehavior);
TreemapComponentBehavior.init(this);
}
});
</script>
</dom-module>
|
