|
0
|
1 /*
|
|
|
2 * PieChartCategoryChooser.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 PieChartCategoryChooser
|
|
|
24 * PieChart dialog for category creation
|
|
|
25 * @author Sebastian Kruse (skruse@mpiwg-berlin.mpg.de)
|
|
|
26 *
|
|
|
27 * @param {PieChartWidget} parent PieChart widget object
|
|
|
28 * @param {JSON} options PieChart configuration
|
|
|
29 * @param {number} datasetIndex index of the dataset
|
|
|
30 * @param {String} columnName name of the column
|
|
|
31 */
|
|
|
32
|
|
|
33 function PieChartCategoryChooser(pieChart, options, datasetIndex, columnName, type, categories) {
|
|
|
34
|
|
|
35 var pieChartCategoryChooser = this;
|
|
|
36
|
|
|
37 this.parent = pieChart;
|
|
|
38 this.options = options;
|
|
|
39 this.datasetIndex = parseInt(datasetIndex);
|
|
|
40 this.columnName = columnName;
|
|
|
41 this.chartData;
|
|
|
42
|
|
|
43 this.dialog = $("<div></div>");
|
|
|
44 this.dialog.html("").dialog({modal: true}).dialog('open');
|
|
|
45
|
|
|
46 //to asure that the dialog is above (z-index of) the toolbars
|
|
|
47 $(".ui-front").css("z-index","10001");
|
|
|
48
|
|
|
49 var allNumeric = this.loadValues(datasetIndex, columnName);
|
|
|
50
|
|
|
51 if (typeof allNumeric === "undefined")
|
|
|
52 return;
|
|
|
53 if (allNumeric === true){
|
|
|
54 this.createNumeralBasedChooser(this.chartData, categories);
|
|
|
55 } else {
|
|
|
56 this.createTextBasedChooser(this.chartData, categories);
|
|
|
57 }
|
|
|
58 };
|
|
|
59
|
|
|
60 PieChartCategoryChooser.prototype = {
|
|
|
61
|
|
|
62 loadValues : function(datasetIndex, columnName){
|
|
|
63 var pieChartCategoryChooser = this;
|
|
|
64
|
|
|
65 var allNumeric = true;
|
|
|
66 pieChartCategoryChooser.chartData = [];
|
|
|
67 var chartData = pieChartCategoryChooser.chartData;
|
|
|
68 $(GeoTemConfig.datasets[datasetIndex].objects).each(function(){
|
|
|
69 var columnData =
|
|
|
70 pieChartCategoryChooser.parent.getElementData(this, columnName);
|
|
|
71
|
|
|
72 if (isNaN(parseFloat(columnData)))
|
|
|
73 allNumeric = false;
|
|
|
74
|
|
|
75 if ($.inArray(columnData, chartData) == -1)
|
|
|
76 chartData.push(columnData);
|
|
|
77 });
|
|
|
78
|
|
|
79 if (chartData.length === 0)
|
|
|
80 return;
|
|
|
81 else
|
|
|
82 return allNumeric;
|
|
|
83 },
|
|
|
84
|
|
|
85 createTextBasedChooser : function(chartData, categories){
|
|
|
86 var pieChartCategoryChooser = this;
|
|
|
87
|
|
|
88 var addCategory = function(name,elements){
|
|
|
89 var newCategoryContainer = document.createElement("fieldset");
|
|
|
90 var newCategoryLegend = document.createElement("legend");
|
|
|
91 var newCategoryName = document.createElement("input");
|
|
|
92 $(newCategoryName).width("80%");
|
|
|
93 newCategoryName.type = "text";
|
|
|
94 newCategoryName.value = name;
|
|
|
95 var newCategoryRemove = document.createElement("button");
|
|
|
96 $(newCategoryRemove).text("X");
|
|
|
97 $(newCategoryRemove).click(function(){
|
|
|
98 $(newCategoryContainer).find("li").each(function(){
|
|
|
99 //move all elements to unselected list
|
|
|
100 //("unselected" is defined below)
|
|
|
101 //prepend so the items appear on top
|
|
|
102 $(this).prependTo(unselected);
|
|
|
103 });
|
|
|
104 //and remove this category
|
|
|
105 $(newCategoryContainer).remove();
|
|
|
106 });
|
|
|
107 $(newCategoryLegend).append(newCategoryName);
|
|
|
108 $(newCategoryLegend).append(newCategoryRemove);
|
|
|
109 $(newCategoryContainer).append(newCategoryLegend);
|
|
|
110 $(newCategoryContainer).width("200px");
|
|
|
111 $(newCategoryContainer).css("float","left");
|
|
|
112 var newCategory = document.createElement("ul");
|
|
|
113 $(newCategory).addClass("connectedSortable");
|
|
|
114 $(newCategory).css("background", "#eee");
|
|
|
115 newCategoryContainer.appendChild(newCategory);
|
|
|
116 $(newCategory).append("<br/>");
|
|
|
117 cell.appendChild(newCategoryContainer);
|
|
|
118 //if there are pre-selected elements (e.g. "edit")
|
|
|
119 //add them and remove them from unselected value list
|
|
|
120 if (typeof elements !== "undefined"){
|
|
|
121 $(elements).each(function(){
|
|
|
122 var value = this;
|
|
|
123 //add to category
|
|
|
124 $(newCategory).append("<li>"+value+"</li>");
|
|
|
125 //remove from unselected list
|
|
|
126 $(unselected).find("li").filter(function(){
|
|
|
127 return ($(this).text() === ""+value);
|
|
|
128 }).remove();
|
|
|
129 });
|
|
|
130 }
|
|
|
131
|
|
|
132 $( ".connectedSortable" ).sortable({
|
|
|
133 connectWith: ".connectedSortable"
|
|
|
134 }).disableSelection();
|
|
|
135 };
|
|
|
136
|
|
|
137 var table = document.createElement("table");
|
|
|
138 var row = document.createElement("tr");
|
|
|
139 table.appendChild(row);
|
|
|
140 var cell = document.createElement("td");
|
|
|
141 row.appendChild(cell);
|
|
|
142 cell = document.createElement("td");
|
|
|
143 row.appendChild(cell);
|
|
|
144 var addCategoryButton = document.createElement("button");
|
|
|
145 $(addCategoryButton).text("add new category");
|
|
|
146 cell.appendChild(addCategoryButton);
|
|
|
147 var applyCategoryButton = document.createElement("button");
|
|
|
148 $(applyCategoryButton).text("apply");
|
|
|
149 cell.appendChild(applyCategoryButton);
|
|
|
150
|
|
|
151 row = document.createElement("tr");
|
|
|
152 table.appendChild(row);
|
|
|
153 cell = document.createElement("td");
|
|
|
154 row.appendChild(cell);
|
|
|
155 var unselected = document.createElement("ul");
|
|
|
156 $(unselected).addClass("connectedSortable");
|
|
|
157 cell.appendChild(unselected);
|
|
|
158 cell = document.createElement("td");
|
|
|
159 $(cell).attr("valign","top");
|
|
|
160 $(cell).width("100%");
|
|
|
161 row.appendChild(cell);
|
|
|
162
|
|
|
163 this.dialog.append(table);
|
|
|
164
|
|
|
165 $( ".connectedSortable" ).sortable({
|
|
|
166 connectWith: ".connectedSortable"
|
|
|
167 }).disableSelection();
|
|
|
168
|
|
|
169 $(chartData).each(function(){
|
|
|
170 $(unselected).append("<li class='ui-state-default'>"+this+"</li>");
|
|
|
171 });
|
|
|
172
|
|
|
173 if (typeof categories !== "undefined"){
|
|
|
174 $(categories).each(function(){
|
|
|
175 var category = this;
|
|
|
176 addCategory(category.label, category.values);
|
|
|
177 });
|
|
|
178 }
|
|
|
179
|
|
|
180 $(addCategoryButton).click(function(){addCategory();});
|
|
|
181
|
|
|
182 $(applyCategoryButton).click(function(){
|
|
|
183 var categories = [];
|
|
|
184 $(cell).children().each(function(){
|
|
|
185 var label = $(this).find("legend > input").val();
|
|
|
186 var values = [];
|
|
|
187 $(this).find("li").each(function(){
|
|
|
188 values.push($(this).text());
|
|
|
189 });
|
|
|
190
|
|
|
191 categories.push({label:label,values:values});
|
|
|
192 });
|
|
|
193
|
|
|
194 var values = [];
|
|
|
195 $(unselected).find("li").each(function(){
|
|
|
196 values.push($(this).text());
|
|
|
197 });
|
|
|
198
|
|
|
199 categories.push({label:"other",values:values});
|
|
|
200
|
|
|
201 //create pie chart
|
|
|
202 pieChartCategoryChooser.parent.addCategorizedPieChart(
|
|
|
203 pieChartCategoryChooser.datasetIndex, pieChartCategoryChooser.columnName,
|
|
|
204 "text", categories);
|
|
|
205
|
|
|
206 //close dialog
|
|
|
207 $(pieChartCategoryChooser.dialog).dialog("close");
|
|
|
208 });
|
|
|
209
|
|
|
210 //set dialog size
|
|
|
211 var wWidth = $(window).width();
|
|
|
212 var dWidth = wWidth * 0.9;
|
|
|
213 var wHeight = $(window).height();
|
|
|
214 var dHeight = wHeight * 0.9;
|
|
|
215 $(this.dialog).dialog("option", "width", dWidth);
|
|
|
216 $(this.dialog).dialog("option", "height", dHeight);
|
|
|
217 },
|
|
|
218
|
|
|
219 createNumeralBasedChooser : function(chartData, existingCategories){
|
|
|
220 var numericChartData = [];
|
|
|
221 for (var i = 0; i < chartData.length; i++){
|
|
|
222 numericChartData.push(parseFloat(chartData[i]));
|
|
|
223 }
|
|
|
224 chartData = numericChartData;
|
|
|
225 chartData = chartData.sort(function sortNumber(a,b){
|
|
|
226 return a - b;
|
|
|
227 });
|
|
|
228
|
|
|
229 var min = chartData[0];
|
|
|
230 var max = chartData[chartData.length-1];
|
|
|
231 //find minimum step width that is needed
|
|
|
232 //(otherwise there could be steps that contain more than one element)
|
|
|
233 var minStep=max-min;
|
|
|
234 for (var i = 1; i < chartData.length; i++){
|
|
|
235 var thisStep = chartData[i]-chartData[i-1];
|
|
|
236 if ((thisStep) < minStep)
|
|
|
237 minStep = thisStep;
|
|
|
238 }
|
|
|
239
|
|
|
240 var pieChartCategoryChooser = this;
|
|
|
241
|
|
|
242 var addCategoryButton = document.createElement("button");
|
|
|
243 $(addCategoryButton).text("add new category");
|
|
|
244 this.dialog.append(addCategoryButton);
|
|
|
245 var applyCategoryButton = document.createElement("button");
|
|
|
246 $(applyCategoryButton).text("apply");
|
|
|
247 this.dialog.append(applyCategoryButton);
|
|
|
248 this.dialog.append("tip: use left/right arrow key for finer adjustment");
|
|
|
249
|
|
|
250 var table = document.createElement("table");
|
|
|
251 row = document.createElement("tr");
|
|
|
252 table.appendChild(row);
|
|
|
253 cell = document.createElement("td");
|
|
|
254 row.appendChild(cell);
|
|
|
255 cell.colSpan = 2;
|
|
|
256 var slider = document.createElement("div");
|
|
|
257 cell.appendChild(slider);
|
|
|
258 var handles = [];
|
|
|
259 var categories = [];
|
|
|
260
|
|
|
261 row = document.createElement("tr");
|
|
|
262 table.appendChild(row);
|
|
|
263 cell = document.createElement("td");
|
|
|
264 $(cell).attr("valign","top");
|
|
|
265 row.appendChild(cell);
|
|
|
266 var unselected = document.createElement("ul");
|
|
|
267 cell.appendChild(unselected);
|
|
|
268
|
|
|
269 cell = document.createElement("td");
|
|
|
270 $(cell).attr("valign","top");
|
|
|
271 $(cell).width("100%");
|
|
|
272 row.appendChild(cell);
|
|
|
273
|
|
|
274 this.dialog.append(table);
|
|
|
275
|
|
|
276 $(chartData).each(function(){
|
|
|
277 $(unselected).append("<li class='ui-state-default'>"+this+"</li>");
|
|
|
278 });
|
|
|
279
|
|
|
280 var addCategory = function(boundary){
|
|
|
281 //check if another handle can be added
|
|
|
282 if ((handles.length>0) && (handles[handles.length-1] === max))
|
|
|
283 return false;
|
|
|
284 //destroy old slider (has to be recreated to show the new handle)
|
|
|
285 if (handles.length>0)
|
|
|
286 $(slider).slider("destroy");
|
|
|
287
|
|
|
288 if (typeof boundary === "undefined")
|
|
|
289 boundary = max;
|
|
|
290 handles.push(boundary);
|
|
|
291
|
|
|
292 $(slider).slider({
|
|
|
293 min:min,
|
|
|
294 max:max,
|
|
|
295 step:minStep,
|
|
|
296 values: handles
|
|
|
297 });
|
|
|
298
|
|
|
299 var placeValues = function(){
|
|
|
300 $(unselected).find("li").remove();
|
|
|
301 $(cell).children().find("li").remove();
|
|
|
302
|
|
|
303 var j = 0, i = 0;
|
|
|
304 for (; i < chartData.length; i++){
|
|
|
305 if (chartData[i]>handles[j])
|
|
|
306 j++;
|
|
|
307 if (j == handles.length)
|
|
|
308 break;
|
|
|
309 $(categories[j]).append("<li class='ui-state-default'>"+chartData[i]+"</li>");
|
|
|
310 }
|
|
|
311 for (; i < chartData.length; i++){
|
|
|
312 $(unselected).append("<li class='ui-state-default'>"+chartData[i]+"</li>");
|
|
|
313 }
|
|
|
314 };
|
|
|
315
|
|
|
316 $(slider).on( "slide", function( event, ui ){
|
|
|
317 var last = min;
|
|
|
318 //check whether handle values are increasing
|
|
|
319 for(var i = 0; i < ui.values.length; i++){
|
|
|
320 if (ui.values[i]<last)
|
|
|
321 return false;
|
|
|
322 last = ui.values[i];
|
|
|
323 }
|
|
|
324 handles = ui.values;
|
|
|
325 for(var i = 0; i < handles.length; i++){
|
|
|
326 $(categories[i]).parent().find("legend").text("<="+handles[i]);
|
|
|
327 }
|
|
|
328
|
|
|
329 placeValues();
|
|
|
330 });
|
|
|
331
|
|
|
332 var newCategoryContainer = document.createElement("fieldset");
|
|
|
333 $(newCategoryContainer).append("<legend><="+boundary+"</legend>");
|
|
|
334 $(newCategoryContainer).width("188px");
|
|
|
335 $(newCategoryContainer).css("float","left");
|
|
|
336 var newCategory = document.createElement("ul");
|
|
|
337 $(newCategory).addClass("connectedSortable");
|
|
|
338 $(newCategory).css("background", "#eee");
|
|
|
339 newCategoryContainer.appendChild(newCategory);
|
|
|
340 cell.appendChild(newCategoryContainer);
|
|
|
341 categories.push(newCategory);
|
|
|
342
|
|
|
343 placeValues();
|
|
|
344 };
|
|
|
345
|
|
|
346 $(addCategoryButton).click(function(){addCategory();});
|
|
|
347
|
|
|
348 if (typeof existingCategories !== "undefined"){
|
|
|
349 $(existingCategories).each(function(){
|
|
|
350 var boundary = this;
|
|
|
351 addCategory(boundary);
|
|
|
352 });
|
|
|
353 }
|
|
|
354
|
|
|
355 $(applyCategoryButton).click(function(){
|
|
|
356 var categorieBoundaries = handles;
|
|
|
357
|
|
|
358 //create pie chart
|
|
|
359 pieChartCategoryChooser.parent.addCategorizedPieChart(
|
|
|
360 pieChartCategoryChooser.datasetIndex, pieChartCategoryChooser.columnName,
|
|
|
361 "numeral", categorieBoundaries);
|
|
|
362
|
|
|
363 //close dialog
|
|
|
364 $(pieChartCategoryChooser.dialog).dialog("close");
|
|
|
365 });
|
|
|
366
|
|
|
367 //set dialog size
|
|
|
368 var wWidth = $(window).width();
|
|
|
369 var dWidth = wWidth * 0.9;
|
|
|
370 var wHeight = $(window).height();
|
|
|
371 var dHeight = wHeight * 0.9;
|
|
|
372 $(this.dialog).dialog("option", "width", dWidth);
|
|
|
373 $(this.dialog).dialog("option", "height", dHeight);
|
|
|
374 }
|
|
|
375 }; |
