|
0
|
1 /*
|
|
|
2 * PieChartGui.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 PieChartGui
|
|
|
24 * PieChart GUI Implementation
|
|
|
25 * @author Sebastian Kruse (skruse@mpiwg-berlin.mpg.de)
|
|
|
26 *
|
|
|
27 * @param {PieChartWidget} parent PieChart widget object
|
|
|
28 * @param {HTML object} div parent div to append the PieChart gui
|
|
|
29 * @param {JSON} options PieChart configuration
|
|
|
30 */
|
|
|
31 function PieChartGui(pieChart, div, options) {
|
|
|
32
|
|
|
33 this.parent = pieChart;
|
|
|
34 this.options = options;
|
|
|
35 var pieChartGui = this;
|
|
|
36
|
|
|
37 this.pieChartContainer = div;
|
|
|
38 this.pieChartContainer.style.position = 'relative';
|
|
|
39
|
|
|
40 this.columnSelectorDiv = document.createElement("div");
|
|
|
41 div.appendChild(this.columnSelectorDiv);
|
|
|
42 this.datasetSelect = document.createElement("select");
|
|
|
43 $(this.datasetSelect).change(function(event){
|
|
|
44 if (typeof pieChartGui.parent.datasets !== "undefined"){
|
|
|
45 var dataset = pieChartGui.parent.datasets[$(pieChartGui.datasetSelect).val()];
|
|
|
46 if (dataset.objects.length > 0){
|
|
|
47 //This implies that the dataObjects are homogenous
|
|
|
48 var firstObject = dataset.objects[0];
|
|
|
49 var firstTableContent = firstObject.tableContent;
|
|
|
50 $(pieChartGui.columnSelect).empty();
|
|
|
51
|
|
|
52 $(pieChartGui.columnSelect).append("<optgroup label='saved'>");
|
|
|
53
|
|
|
54 for(var key in localStorage){
|
|
|
55 //TODO: this is a somewhat bad idea, as it is used in multiple widgets.
|
|
|
56 //A global GeoTemCo option "prefix" could be better. But still..
|
|
|
57 var prefix = pieChartGui.options.localStoragePrefix;
|
|
|
58 if (key.startsWith(prefix)){
|
|
|
59 var saveObject = $.remember({name:key,json:true});
|
|
|
60 var label = key.substring(prefix.length);
|
|
|
61 //small safety-check: if the column is not part of this dataset, don't show it
|
|
|
62 if (typeof firstTableContent[saveObject.columnName] !== "undefined")
|
|
|
63 $(pieChartGui.columnSelect).append("<option isSaved=1 value='"+label+"'>"+decodeURIComponent(label)+"</option>");
|
|
|
64 }
|
|
|
65 }
|
|
|
66 $(pieChartGui.columnSelect).append("</optgroup>");
|
|
|
67
|
|
|
68 $(pieChartGui.columnSelect).append("<optgroup label='new'>");
|
|
|
69 for (var attribute in firstTableContent) {
|
|
|
70 $(pieChartGui.columnSelect).append("<option value='"+attribute+"'>"+attribute+"</option>");
|
|
|
71 }
|
|
|
72 if (firstObject.isTemporal)
|
|
|
73 $(pieChartGui.columnSelect).append("<option value='dates[0].date'>date</option>");
|
|
|
74 if (typeof firstObject.locations[0] !== "undefined"){
|
|
|
75 $(pieChartGui.columnSelect).append("<option value='locations[0].latitude'>lat</option>");
|
|
|
76 $(pieChartGui.columnSelect).append("<option value='locations[0].longitude'>lon</option>");
|
|
|
77 }
|
|
|
78 $(pieChartGui.columnSelect).append("</optgroup>");
|
|
|
79 }
|
|
|
80 }
|
|
|
81 });
|
|
|
82 this.columnSelectorDiv.appendChild(this.datasetSelect);
|
|
|
83 this.columnSelect = document.createElement("select");
|
|
|
84 this.columnSelectorDiv.appendChild(this.columnSelect);
|
|
|
85 this.buttonNewPieChart = document.createElement("button");
|
|
|
86 $(this.buttonNewPieChart).text("add");
|
|
|
87 this.columnSelectorDiv.appendChild(this.buttonNewPieChart);
|
|
|
88 $(this.buttonNewPieChart).click(function(){
|
|
|
89 //check if this is a local saved pie chart
|
|
|
90 var isSaved=$(pieChartGui.columnSelect).find("option:selected").first().attr("isSaved");
|
|
|
91 if ((typeof isSaved === "undefined") || (isSaved!=1)){
|
|
|
92 //create new pie chart (where each value is its own category)
|
|
|
93 pieChartGui.parent.addPieChart($(pieChartGui.datasetSelect).val(), $(pieChartGui.columnSelect).val());
|
|
|
94 } else {
|
|
|
95 //is local saved, get value
|
|
|
96 var name = pieChartGui.options.localStoragePrefix + $(pieChartGui.columnSelect).val();
|
|
|
97 var saveObject = $.remember({name:name,json:true});
|
|
|
98 if ((typeof saveObject !== "undefined") && (saveObject != null)){
|
|
|
99 var categories = saveObject.categories;
|
|
|
100 var type = saveObject.type;
|
|
|
101 var columnName = saveObject.columnName;
|
|
|
102
|
|
|
103 //create pie chart
|
|
|
104 pieChartGui.parent.addCategorizedPieChart(
|
|
|
105 $(pieChartGui.datasetSelect).val(), columnName,
|
|
|
106 type, categories);
|
|
|
107 }
|
|
|
108 }
|
|
|
109 });
|
|
|
110 this.buttonPieChartCategoryChooser = document.createElement("button");
|
|
|
111 $(this.buttonPieChartCategoryChooser).text("categorize");
|
|
|
112 this.columnSelectorDiv.appendChild(this.buttonPieChartCategoryChooser);
|
|
|
113 $(this.buttonPieChartCategoryChooser).click(function(){
|
|
|
114 //check if this is a local saved pie chart
|
|
|
115 var isSaved=$(pieChartGui.columnSelect).find("option:selected").first().attr("isSaved");
|
|
|
116 if ((typeof isSaved === "undefined") || (isSaved!=1)){
|
|
|
117 var chooser = new PieChartCategoryChooser( pieChartGui.parent,
|
|
|
118 pieChartGui.options,
|
|
|
119 $(pieChartGui.datasetSelect).val(),
|
|
|
120 $(pieChartGui.columnSelect).val() );
|
|
|
121 } else {
|
|
|
122 alert("Saved datasets can not be categorized again. Try loading and editing instead.");
|
|
|
123 }
|
|
|
124 });
|
|
|
125
|
|
|
126 this.refreshColumnSelector();
|
|
|
127
|
|
|
128 this.pieChartsDiv = document.createElement("div");
|
|
|
129 this.pieChartsDiv.id = "pieChartsDivID";
|
|
|
130 div.appendChild(this.pieChartsDiv);
|
|
|
131 $(this.pieChartsDiv).height("100%");
|
|
|
132 };
|
|
|
133
|
|
|
134 PieChartGui.prototype = {
|
|
|
135
|
|
|
136 refreshColumnSelector : function(){
|
|
|
137 $(this.datasetSelect).empty();
|
|
|
138 $(this.columnSelect).empty();
|
|
|
139
|
|
|
140 if ( (typeof this.parent.datasets !== "undefined") && (this.parent.datasets.length > 0)) {
|
|
|
141 var index = 0;
|
|
|
142 var pieChartGui = this;
|
|
|
143 $(this.parent.datasets).each(function(){
|
|
|
144 $(pieChartGui.datasetSelect).append("<option value="+index+">"+this.label+"</option>");
|
|
|
145 index++;
|
|
|
146 });
|
|
|
147
|
|
|
148 $(pieChartGui.datasetSelect).change();
|
|
|
149 }
|
|
|
150 }
|
|
|
151 };
|
