Mercurial > hg > NetworkVis

comparison d3s_examples/python-neo4jrestclient/static/platin/js/FuzzyTimeline/FuzzyTimelineRangePiechart.js @ 8:18ef6948d689

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
comparison
equal deleted inserted replaced
7:45dad9e38c82 8:18ef6948d689
1 /*
2 * FuzzyTimelineRangePiechart.js
3 *
4 * Copyright (c) 2013, Sebastian Kruse. All rights reserved.
5 *
6 * This library is free software; you can redistribute it and/or
7 * modify it under the terms of the GNU Lesser General Public
8 * License as published by the Free Software Foundation; either
9 * version 3 of the License, or (at your option) any later version.
10 *
11 * This library is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
14 * Lesser General Public License for more details.
15 *
16 * You should have received a copy of the GNU Lesser General Public
17 * License along with this library; if not, write to the Free Software
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
19 * MA 02110-1301 USA
20 */
21
22 /**
23 * @class FuzzyTimelineRangePiechart
24 * Implementation for a fuzzy time-ranges pie chart
25 * @author Sebastian Kruse (skruse@mpiwg-berlin.mpg.de)
26 *
27 * @param {HTML object} parent div to append the FuzzyTimeline
28 */
29 function FuzzyTimelineRangePiechart(parent,div) {
30
31 this.fuzzyTimeline = this;
32
33 this.parent = parent;
34 this.options = parent.options;
35
36 this.div = div;
37
38 this.selected = [];
39
40 this.maxSlices = 10;
41 }
42
43 FuzzyTimelineRangePiechart.prototype = {
44
45 initialize : function(datasets) {
46 var piechart = this;
47 if (piechart.parent.showRangePiechart){
48 piechart.datasets = datasets;
49 piechart.drawPieChart(piechart.datasets);
50 }
51 },
52
53 drawPieChart : function(datasets){
54 var piechart = this;
55 //build hashmap of spans (span length -> objects[])
56 var spans = [];
57 var index = 0;
58 $(datasets).each(function(){
59 var objects = this;
60 //check whether we got "real" dataset or just a set of DataObjects
61 if (typeof objects.objects !== "undefined")
62 objects = objects.objects;
63 $(objects).each(function(){
64 var dataObject = this;
65 var span;
66 if (dataObject.isTemporal){
67 span = SimileAjax.DateTime.MILLISECOND;
68 } else if (dataObject.isFuzzyTemporal){
69 span = dataObject.TimeSpanGranularity;
70 }
71
72 if (typeof span === "undefined")
73 return;
74
75 var found = false;
76 $(spans).each(function(){
77 if (this.span === span){
78 this.objects[index].push(dataObject);
79 found = true;
80 return false;
81 }
82 });
83 if (found === false){
84 var newObjectSet = [];
85 for (var i = 0; i < piechart.datasets.length; i++)
86 newObjectSet.push([]);
87 newObjectSet[index].push(dataObject);
88 spans.push({span:span,objects:newObjectSet});
89 }
90 });
91 index++;
92 });
93
94 //TODO: join elements of span array to keep below certain threshold
95
96 //sort array by span length
97 spans.sort(function(a,b){
98 return(a.span-b.span);
99 });
100
101 //create chart data
102 var chartData = [];
103 $(spans).each(function(){
104 var spanElem = this;
105 $(spanElem.objects).each(function(){
106 var label = "unknown";
107
108 if (spanElem.span === SimileAjax.DateTime.MILLENNIUM){
109 label = "millenia";
110 } else if (spanElem.span === SimileAjax.DateTime.DECADE){
111 label = "decades";
112 } else if (spanElem.span === SimileAjax.DateTime.CENTURY){
113 label = "centuries";
114 } else if (spanElem.span === SimileAjax.DateTime.YEAR){
115 label = "years";
116 } else if (spanElem.span === SimileAjax.DateTime.MONTH){
117 label = "months";
118 } else if (spanElem.span === SimileAjax.DateTime.DAY){
119 label = "days";
120 } else if (spanElem.span === SimileAjax.DateTime.HOUR){
121 label = "hours";
122 } else if (spanElem.span === SimileAjax.DateTime.MINUTE){
123 label = "minutes";
124 } else if (spanElem.span === SimileAjax.DateTime.SECOND){
125 label = "seconds";
126 } else if (spanElem.span === SimileAjax.DateTime.MILLISECOND){
127 label = "milliseconds";
128 }
129
130 chartData.push({label:label,data:this.length});
131 });
132 });
133
134 $(piechart.div).unbind("plotclick");
135 $(piechart.div).unbind("plothover");
136 $(piechart.div).empty();
137 if (spans.length === 0){
138 //TODO: language specific message
139 $(piechart.div).append("empty selection");
140 } else {
141 $.plot($(piechart.div), chartData,
142 {
143 series: {
144 // Make this a pie chart.
145 pie: {
146 show:true
147 }
148 },
149 legend: { show:false},
150 grid: {
151 hoverable: true,
152 clickable: true
153 },
154 tooltip: true,
155 }
156 );
157
158 var lastHighlighted;
159 var hoverFunction = function (event, pos, item) {
160 if (item) {
161 var highlightedSpan = Math.ceil(item.seriesIndex/piechart.datasets.length);
162 if (lastHighlighted !== highlightedSpan){
163 var highlightedObjects = [];
164 for(;highlightedSpan>=0;highlightedSpan--){
165 highlightedObjects = GeoTemConfig.mergeObjects(highlightedObjects,spans[highlightedSpan].objects);
166 }
167 lastHighlighted = highlightedSpan;
168 }
169 piechart.triggerHighlight(highlightedObjects);
170 } else {
171 piechart.triggerHighlight([]);
172 }
173 };
174 $(piechart.div).bind("plothover", hoverFunction);
175
176 $(piechart.div).bind("plotclick", function (event, pos, item) {
177 $(piechart.div).unbind("plothover");
178 if (item){
179 var selectedSpan = Math.ceil(item.seriesIndex/piechart.datasets.length);
180 var selectedObjects = [];
181 for(;selectedSpan>=0;selectedSpan--){
182 selectedObjects = GeoTemConfig.mergeObjects(selectedObjects,spans[selectedSpan].objects);
183 }
184 piechart.triggerSelection(selectedObjects);
185 } else {
186 //if it was a click outside of the pie-chart, enable highlight events
187 $(piechart.div).bind("plothover", hoverFunction);
188 //return to old state
189 piechart.triggerSelection(piechart.selected);
190 //and redraw piechart
191 piechart.highlightChanged([]);
192 }
193 });
194 }
195 },
196
197 highlightChanged : function(objects) {
198 var piechart = this;
199 if (piechart.parent.showRangePiechart){
200 //check if this is an empty highlight
201 var emptyHighlight = true;
202 $(objects).each(function(){
203 if ((this instanceof Array) && (this.length > 0)){
204 emptyHighlight = false;
205 return false;
206 }
207 });
208
209 if (emptyHighlight === false)
210 piechart.drawPieChart(GeoTemConfig.mergeObjects(piechart.selected, objects));
211 else{
212 //return to selection (or all objects, if no selection is active)
213 if (piechart.selected.length > 0)
214 piechart.drawPieChart(piechart.selected);
215 else
216 piechart.drawPieChart(piechart.datasets);
217 }
218 }
219 },
220
221 selectionChanged : function(selection) {
222 var piechart = this;
223 if (piechart.parent.showRangePiechart){
224 if( !GeoTemConfig.selectionEvents ){
225 return;
226 }
227 piechart.selected = selection;
228 piechart.highlightChanged([]);
229 }
230 },
231
232 triggerHighlight : function(highlightedObjects) {
233 this.parent.triggerHighlight(highlightedObjects);
234 },
235
236 triggerSelection : function(selectedObjects) {
237 this.parent.triggerSelection(selectedObjects);
238 },
239
240 deselection : function() {
241 },
242
243 filtering : function() {
244 },
245
246 inverseFiltering : function() {
247 },
248
249 triggerRefining : function() {
250 },
251
252 reset : function() {
253 },
254
255 show : function() {
256 },
257
258 hide : function() {
259 }
260 };