30 | Shows the percentage of open amenities (based on all opening_hours in OSM) for a given time of the week. For more information, check out the Blog entry by ypid. 31 |
32 |
18 |
19 | opening_hours statistics
20 | 21 | 22 | 23 | 24 | 25 |How many amenities are open for a given time?
26 |
27 |
28 |
29 |
33 |
34 | What is in the database?
35 |
36 |
57 |
58 |
37 |
38 |
48 |
49 |
39 |
47 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
50 |
51 |
52 |
53 | 54 | The purpose of this statistic is to show the data quality and growth over time. For more information, check out the Blog entry by ypid. 55 |
56 |
59 | For the internals check out the README on GitHub.
60 |
61 |
62 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/js/jquery.flot.selection.js:
--------------------------------------------------------------------------------
1 | /* Flot plugin for selecting regions of a plot.
2 |
3 | Copyright (c) 2007-2014 IOLA and Ole Laursen.
4 | Licensed under the MIT license.
5 |
6 | The plugin supports these options:
7 |
8 | selection: {
9 | mode: null or "x" or "y" or "xy",
10 | color: color,
11 | shape: "round" or "miter" or "bevel",
12 | minSize: number of pixels
13 | }
14 |
15 | Selection support is enabled by setting the mode to one of "x", "y" or "xy".
16 | In "x" mode, the user will only be able to specify the x range, similarly for
17 | "y" mode. For "xy", the selection becomes a rectangle where both ranges can be
18 | specified. "color" is color of the selection (if you need to change the color
19 | later on, you can get to it with plot.getOptions().selection.color). "shape"
20 | is the shape of the corners of the selection.
21 |
22 | "minSize" is the minimum size a selection can be in pixels. This value can
23 | be customized to determine the smallest size a selection can be and still
24 | have the selection rectangle be displayed. When customizing this value, the
25 | fact that it refers to pixels, not axis units must be taken into account.
26 | Thus, for example, if there is a bar graph in time mode with BarWidth set to 1
27 | minute, setting "minSize" to 1 will not make the minimum selection size 1
28 | minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent
29 | "plotunselected" events from being fired when the user clicks the mouse without
30 | dragging.
31 |
32 | When selection support is enabled, a "plotselected" event will be emitted on
33 | the DOM element you passed into the plot function. The event handler gets a
34 | parameter with the ranges selected on the axes, like this:
35 |
36 | placeholder.bind( "plotselected", function( event, ranges ) {
37 | alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
38 | // similar for yaxis - with multiple axes, the extra ones are in
39 | // x2axis, x3axis, ...
40 | });
41 |
42 | The "plotselected" event is only fired when the user has finished making the
43 | selection. A "plotselecting" event is fired during the process with the same
44 | parameters as the "plotselected" event, in case you want to know what's
45 | happening while it's happening,
46 |
47 | A "plotunselected" event with no arguments is emitted when the user clicks the
48 | mouse to remove the selection. As stated above, setting "minSize" to 0 will
49 | destroy this behavior.
50 |
51 | The plugin allso adds the following methods to the plot object:
52 |
53 | - setSelection( ranges, preventEvent )
54 |
55 | Set the selection rectangle. The passed in ranges is on the same form as
56 | returned in the "plotselected" event. If the selection mode is "x", you
57 | should put in either an xaxis range, if the mode is "y" you need to put in
58 | an yaxis range and both xaxis and yaxis if the selection mode is "xy", like
59 | this:
60 |
61 | setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
62 |
63 | setSelection will trigger the "plotselected" event when called. If you don't
64 | want that to happen, e.g. if you're inside a "plotselected" handler, pass
65 | true as the second parameter. If you are using multiple axes, you can
66 | specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of
67 | xaxis, the plugin picks the first one it sees.
68 |
69 | - clearSelection( preventEvent )
70 |
71 | Clear the selection rectangle. Pass in true to avoid getting a
72 | "plotunselected" event.
73 |
74 | - getSelection()
75 |
76 | Returns the current selection in the same format as the "plotselected"
77 | event. If there's currently no selection, the function returns null.
78 |
79 | */
80 |
81 | (function ($) {
82 | function init(plot) {
83 | var selection = {
84 | first: { x: -1, y: -1}, second: { x: -1, y: -1},
85 | show: false,
86 | active: false
87 | };
88 |
89 | // FIXME: The drag handling implemented here should be
90 | // abstracted out, there's some similar code from a library in
91 | // the navigation plugin, this should be massaged a bit to fit
92 | // the Flot cases here better and reused. Doing this would
93 | // make this plugin much slimmer.
94 | var savedhandlers = {};
95 |
96 | var mouseUpHandler = null;
97 |
98 | function onMouseMove(e) {
99 | if (selection.active) {
100 | updateSelection(e);
101 |
102 | plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
103 | }
104 | }
105 |
106 | function onMouseDown(e) {
107 | if (e.which != 1) // only accept left-click
108 | return;
109 |
110 | // cancel out any text selections
111 | document.body.focus();
112 |
113 | // prevent text selection and drag in old-school browsers
114 | if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
115 | savedhandlers.onselectstart = document.onselectstart;
116 | document.onselectstart = function () { return false; };
117 | }
118 | if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
119 | savedhandlers.ondrag = document.ondrag;
120 | document.ondrag = function () { return false; };
121 | }
122 |
123 | setSelectionPos(selection.first, e);
124 |
125 | selection.active = true;
126 |
127 | // this is a bit silly, but we have to use a closure to be
128 | // able to whack the same handler again
129 | mouseUpHandler = function (e) { onMouseUp(e); };
130 |
131 | $(document).one("mouseup", mouseUpHandler);
132 | }
133 |
134 | function onMouseUp(e) {
135 | mouseUpHandler = null;
136 |
137 | // revert drag stuff for old-school browsers
138 | if (document.onselectstart !== undefined)
139 | document.onselectstart = savedhandlers.onselectstart;
140 | if (document.ondrag !== undefined)
141 | document.ondrag = savedhandlers.ondrag;
142 |
143 | // no more dragging
144 | selection.active = false;
145 | updateSelection(e);
146 |
147 | if (selectionIsSane())
148 | triggerSelectedEvent();
149 | else {
150 | // this counts as a clear
151 | plot.getPlaceholder().trigger("plotunselected", [ ]);
152 | plot.getPlaceholder().trigger("plotselecting", [ null ]);
153 | }
154 |
155 | return false;
156 | }
157 |
158 | function getSelection() {
159 | if (!selectionIsSane())
160 | return null;
161 |
162 | if (!selection.show) return null;
163 |
164 | var r = {}, c1 = selection.first, c2 = selection.second;
165 | $.each(plot.getAxes(), function (name, axis) {
166 | if (axis.used) {
167 | var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]);
168 | r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
169 | }
170 | });
171 | return r;
172 | }
173 |
174 | function triggerSelectedEvent() {
175 | var r = getSelection();
176 |
177 | plot.getPlaceholder().trigger("plotselected", [ r ]);
178 |
179 | // backwards-compat stuff, to be removed in future
180 | if (r.xaxis && r.yaxis)
181 | plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
182 | }
183 |
184 | function clamp(min, value, max) {
185 | return value < min ? min: (value > max ? max: value);
186 | }
187 |
188 | function setSelectionPos(pos, e) {
189 | var o = plot.getOptions();
190 | var offset = plot.getPlaceholder().offset();
191 | var plotOffset = plot.getPlotOffset();
192 | pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
193 | pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
194 |
195 | if (o.selection.mode == "y")
196 | pos.x = pos == selection.first ? 0 : plot.width();
197 |
198 | if (o.selection.mode == "x")
199 | pos.y = pos == selection.first ? 0 : plot.height();
200 | }
201 |
202 | function updateSelection(pos) {
203 | if (pos.pageX == null)
204 | return;
205 |
206 | setSelectionPos(selection.second, pos);
207 | if (selectionIsSane()) {
208 | selection.show = true;
209 | plot.triggerRedrawOverlay();
210 | }
211 | else
212 | clearSelection(true);
213 | }
214 |
215 | function clearSelection(preventEvent) {
216 | if (selection.show) {
217 | selection.show = false;
218 | plot.triggerRedrawOverlay();
219 | if (!preventEvent)
220 | plot.getPlaceholder().trigger("plotunselected", [ ]);
221 | }
222 | }
223 |
224 | // function taken from markings support in Flot
225 | function extractRange(ranges, coord) {
226 | var axis, from, to, key, axes = plot.getAxes();
227 |
228 | for (var k in axes) {
229 | axis = axes[k];
230 | if (axis.direction == coord) {
231 | key = coord + axis.n + "axis";
232 | if (!ranges[key] && axis.n == 1)
233 | key = coord + "axis"; // support x1axis as xaxis
234 | if (ranges[key]) {
235 | from = ranges[key].from;
236 | to = ranges[key].to;
237 | break;
238 | }
239 | }
240 | }
241 |
242 | // backwards-compat stuff - to be removed in future
243 | if (!ranges[key]) {
244 | axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0];
245 | from = ranges[coord + "1"];
246 | to = ranges[coord + "2"];
247 | }
248 |
249 | // auto-reverse as an added bonus
250 | if (from != null && to != null && from > to) {
251 | var tmp = from;
252 | from = to;
253 | to = tmp;
254 | }
255 |
256 | return { from: from, to: to, axis: axis };
257 | }
258 |
259 | function setSelection(ranges, preventEvent) {
260 | var axis, range, o = plot.getOptions();
261 |
262 | if (o.selection.mode == "y") {
263 | selection.first.x = 0;
264 | selection.second.x = plot.width();
265 | }
266 | else {
267 | range = extractRange(ranges, "x");
268 |
269 | selection.first.x = range.axis.p2c(range.from);
270 | selection.second.x = range.axis.p2c(range.to);
271 | }
272 |
273 | if (o.selection.mode == "x") {
274 | selection.first.y = 0;
275 | selection.second.y = plot.height();
276 | }
277 | else {
278 | range = extractRange(ranges, "y");
279 |
280 | selection.first.y = range.axis.p2c(range.from);
281 | selection.second.y = range.axis.p2c(range.to);
282 | }
283 |
284 | selection.show = true;
285 | plot.triggerRedrawOverlay();
286 | if (!preventEvent && selectionIsSane())
287 | triggerSelectedEvent();
288 | }
289 |
290 | function selectionIsSane() {
291 | var minSize = plot.getOptions().selection.minSize;
292 | return Math.abs(selection.second.x - selection.first.x) >= minSize &&
293 | Math.abs(selection.second.y - selection.first.y) >= minSize;
294 | }
295 |
296 | plot.clearSelection = clearSelection;
297 | plot.setSelection = setSelection;
298 | plot.getSelection = getSelection;
299 |
300 | plot.hooks.bindEvents.push(function(plot, eventHolder) {
301 | var o = plot.getOptions();
302 | if (o.selection.mode != null) {
303 | eventHolder.mousemove(onMouseMove);
304 | eventHolder.mousedown(onMouseDown);
305 | }
306 | });
307 |
308 |
309 | plot.hooks.drawOverlay.push(function (plot, ctx) {
310 | // draw selection
311 | if (selection.show && selectionIsSane()) {
312 | var plotOffset = plot.getPlotOffset();
313 | var o = plot.getOptions();
314 |
315 | ctx.save();
316 | ctx.translate(plotOffset.left, plotOffset.top);
317 |
318 | var c = $.color.parse(o.selection.color);
319 |
320 | ctx.strokeStyle = c.scale('a', 0.8).toString();
321 | ctx.lineWidth = 1;
322 | ctx.lineJoin = o.selection.shape;
323 | ctx.fillStyle = c.scale('a', 0.4).toString();
324 |
325 | var x = Math.min(selection.first.x, selection.second.x) + 0.5,
326 | y = Math.min(selection.first.y, selection.second.y) + 0.5,
327 | w = Math.abs(selection.second.x - selection.first.x) - 1,
328 | h = Math.abs(selection.second.y - selection.first.y) - 1;
329 |
330 | ctx.fillRect(x, y, w, h);
331 | ctx.strokeRect(x, y, w, h);
332 |
333 | ctx.restore();
334 | }
335 | });
336 |
337 | plot.hooks.shutdown.push(function (plot, eventHolder) {
338 | eventHolder.unbind("mousemove", onMouseMove);
339 | eventHolder.unbind("mousedown", onMouseDown);
340 |
341 | if (mouseUpHandler)
342 | $(document).unbind("mouseup", mouseUpHandler);
343 | });
344 |
345 | }
346 |
347 | $.plot.plugins.push({
348 | init: init,
349 | options: {
350 | selection: {
351 | mode: null, // one of null, "x", "y" or "xy"
352 | color: "#e8cfac",
353 | shape: "round", // one of "round", "miter", or "bevel"
354 | minSize: 5 // minimum number of pixels
355 | }
356 | },
357 | name: 'selection',
358 | version: '1.1'
359 | });
360 | })(jQuery);
361 |
--------------------------------------------------------------------------------
/js/jquery.flot.time.js:
--------------------------------------------------------------------------------
1 | /* Pretty handling of time axes.
2 |
3 | Copyright (c) 2007-2014 IOLA and Ole Laursen.
4 | Licensed under the MIT license.
5 |
6 | Set axis.mode to "time" to enable. See the section "Time series data" in
7 | API.txt for details.
8 |
9 | */
10 |
11 | (function($) {
12 |
13 | var options = {
14 | xaxis: {
15 | timezone: null, // "browser" for local to the client or timezone for timezone-js
16 | timeformat: null, // format string to use
17 | twelveHourClock: false, // 12 or 24 time in time mode
18 | monthNames: null // list of names of months
19 | }
20 | };
21 |
22 | // round to nearby lower multiple of base
23 |
24 | function floorInBase(n, base) {
25 | return base * Math.floor(n / base);
26 | }
27 |
28 | // Returns a string with the date d formatted according to fmt.
29 | // A subset of the Open Group's strftime format is supported.
30 |
31 | function formatDate(d, fmt, monthNames, dayNames) {
32 |
33 | if (typeof d.strftime == "function") {
34 | return d.strftime(fmt);
35 | }
36 |
37 | var leftPad = function(n, pad) {
38 | n = "" + n;
39 | pad = "" + (pad == null ? "0" : pad);
40 | return n.length == 1 ? pad + n : n;
41 | };
42 |
43 | var r = [];
44 | var escape = false;
45 | var hours = d.getHours();
46 | var isAM = hours < 12;
47 |
48 | if (monthNames == null) {
49 | monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
50 | }
51 |
52 | if (dayNames == null) {
53 | dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
54 | }
55 |
56 | var hours12;
57 |
58 | if (hours > 12) {
59 | hours12 = hours - 12;
60 | } else if (hours == 0) {
61 | hours12 = 12;
62 | } else {
63 | hours12 = hours;
64 | }
65 |
66 | for (var i = 0; i < fmt.length; ++i) {
67 |
68 | var c = fmt.charAt(i);
69 |
70 | if (escape) {
71 | switch (c) {
72 | case 'a': c = "" + dayNames[d.getDay()]; break;
73 | case 'b': c = "" + monthNames[d.getMonth()]; break;
74 | case 'd': c = leftPad(d.getDate()); break;
75 | case 'e': c = leftPad(d.getDate(), " "); break;
76 | case 'h': // For back-compat with 0.7; remove in 1.0
77 | case 'H': c = leftPad(hours); break;
78 | case 'I': c = leftPad(hours12); break;
79 | case 'l': c = leftPad(hours12, " "); break;
80 | case 'm': c = leftPad(d.getMonth() + 1); break;
81 | case 'M': c = leftPad(d.getMinutes()); break;
82 | // quarters not in Open Group's strftime specification
83 | case 'q':
84 | c = "" + (Math.floor(d.getMonth() / 3) + 1); break;
85 | case 'S': c = leftPad(d.getSeconds()); break;
86 | case 'y': c = leftPad(d.getFullYear() % 100); break;
87 | case 'Y': c = "" + d.getFullYear(); break;
88 | case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break;
89 | case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break;
90 | case 'w': c = "" + d.getDay(); break;
91 | }
92 | r.push(c);
93 | escape = false;
94 | } else {
95 | if (c == "%") {
96 | escape = true;
97 | } else {
98 | r.push(c);
99 | }
100 | }
101 | }
102 |
103 | return r.join("");
104 | }
105 |
106 | // To have a consistent view of time-based data independent of which time
107 | // zone the client happens to be in we need a date-like object independent
108 | // of time zones. This is done through a wrapper that only calls the UTC
109 | // versions of the accessor methods.
110 |
111 | function makeUtcWrapper(d) {
112 |
113 | function addProxyMethod(sourceObj, sourceMethod, targetObj, targetMethod) {
114 | sourceObj[sourceMethod] = function() {
115 | return targetObj[targetMethod].apply(targetObj, arguments);
116 | };
117 | };
118 |
119 | var utc = {
120 | date: d
121 | };
122 |
123 | // support strftime, if found
124 |
125 | if (d.strftime != undefined) {
126 | addProxyMethod(utc, "strftime", d, "strftime");
127 | }
128 |
129 | addProxyMethod(utc, "getTime", d, "getTime");
130 | addProxyMethod(utc, "setTime", d, "setTime");
131 |
132 | var props = ["Date", "Day", "FullYear", "Hours", "Milliseconds", "Minutes", "Month", "Seconds"];
133 |
134 | for (var p = 0; p < props.length; p++) {
135 | addProxyMethod(utc, "get" + props[p], d, "getUTC" + props[p]);
136 | addProxyMethod(utc, "set" + props[p], d, "setUTC" + props[p]);
137 | }
138 |
139 | return utc;
140 | };
141 |
142 | // select time zone strategy. This returns a date-like object tied to the
143 | // desired timezone
144 |
145 | function dateGenerator(ts, opts) {
146 | if (opts.timezone == "browser") {
147 | return new Date(ts);
148 | } else if (!opts.timezone || opts.timezone == "utc") {
149 | return makeUtcWrapper(new Date(ts));
150 | } else if (typeof timezoneJS != "undefined" && typeof timezoneJS.Date != "undefined") {
151 | var d = new timezoneJS.Date();
152 | // timezone-js is fickle, so be sure to set the time zone before
153 | // setting the time.
154 | d.setTimezone(opts.timezone);
155 | d.setTime(ts);
156 | return d;
157 | } else {
158 | return makeUtcWrapper(new Date(ts));
159 | }
160 | }
161 |
162 | // map of app. size of time units in milliseconds
163 |
164 | var timeUnitSize = {
165 | "second": 1000,
166 | "minute": 60 * 1000,
167 | "hour": 60 * 60 * 1000,
168 | "day": 24 * 60 * 60 * 1000,
169 | "month": 30 * 24 * 60 * 60 * 1000,
170 | "quarter": 3 * 30 * 24 * 60 * 60 * 1000,
171 | "year": 365.2425 * 24 * 60 * 60 * 1000
172 | };
173 |
174 | // the allowed tick sizes, after 1 year we use
175 | // an integer algorithm
176 |
177 | var baseSpec = [
178 | [1, "second"], [2, "second"], [5, "second"], [10, "second"],
179 | [30, "second"],
180 | [1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"],
181 | [30, "minute"],
182 | [1, "hour"], [2, "hour"], [4, "hour"],
183 | [8, "hour"], [12, "hour"],
184 | [1, "day"], [2, "day"], [3, "day"],
185 | [0.25, "month"], [0.5, "month"], [1, "month"],
186 | [2, "month"]
187 | ];
188 |
189 | // we don't know which variant(s) we'll need yet, but generating both is
190 | // cheap
191 |
192 | var specMonths = baseSpec.concat([[3, "month"], [6, "month"],
193 | [1, "year"]]);
194 | var specQuarters = baseSpec.concat([[1, "quarter"], [2, "quarter"],
195 | [1, "year"]]);
196 |
197 | function init(plot) {
198 | plot.hooks.processOptions.push(function (plot, options) {
199 | $.each(plot.getAxes(), function(axisName, axis) {
200 |
201 | var opts = axis.options;
202 |
203 | if (opts.mode == "time") {
204 | axis.tickGenerator = function(axis) {
205 |
206 | var ticks = [];
207 | var d = dateGenerator(axis.min, opts);
208 | var minSize = 0;
209 |
210 | // make quarter use a possibility if quarters are
211 | // mentioned in either of these options
212 |
213 | var spec = (opts.tickSize && opts.tickSize[1] ===
214 | "quarter") ||
215 | (opts.minTickSize && opts.minTickSize[1] ===
216 | "quarter") ? specQuarters : specMonths;
217 |
218 | if (opts.minTickSize != null) {
219 | if (typeof opts.tickSize == "number") {
220 | minSize = opts.tickSize;
221 | } else {
222 | minSize = opts.minTickSize[0] * timeUnitSize[opts.minTickSize[1]];
223 | }
224 | }
225 |
226 | for (var i = 0; i < spec.length - 1; ++i) {
227 | if (axis.delta < (spec[i][0] * timeUnitSize[spec[i][1]]
228 | + spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2
229 | && spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) {
230 | break;
231 | }
232 | }
233 |
234 | var size = spec[i][0];
235 | var unit = spec[i][1];
236 |
237 | // special-case the possibility of several years
238 |
239 | if (unit == "year") {
240 |
241 | // if given a minTickSize in years, just use it,
242 | // ensuring that it's an integer
243 |
244 | if (opts.minTickSize != null && opts.minTickSize[1] == "year") {
245 | size = Math.floor(opts.minTickSize[0]);
246 | } else {
247 |
248 | var magn = Math.pow(10, Math.floor(Math.log(axis.delta / timeUnitSize.year) / Math.LN10));
249 | var norm = (axis.delta / timeUnitSize.year) / magn;
250 |
251 | if (norm < 1.5) {
252 | size = 1;
253 | } else if (norm < 3) {
254 | size = 2;
255 | } else if (norm < 7.5) {
256 | size = 5;
257 | } else {
258 | size = 10;
259 | }
260 |
261 | size *= magn;
262 | }
263 |
264 | // minimum size for years is 1
265 |
266 | if (size < 1) {
267 | size = 1;
268 | }
269 | }
270 |
271 | axis.tickSize = opts.tickSize || [size, unit];
272 | var tickSize = axis.tickSize[0];
273 | unit = axis.tickSize[1];
274 |
275 | var step = tickSize * timeUnitSize[unit];
276 |
277 | if (unit == "second") {
278 | d.setSeconds(floorInBase(d.getSeconds(), tickSize));
279 | } else if (unit == "minute") {
280 | d.setMinutes(floorInBase(d.getMinutes(), tickSize));
281 | } else if (unit == "hour") {
282 | d.setHours(floorInBase(d.getHours(), tickSize));
283 | } else if (unit == "month") {
284 | d.setMonth(floorInBase(d.getMonth(), tickSize));
285 | } else if (unit == "quarter") {
286 | d.setMonth(3 * floorInBase(d.getMonth() / 3,
287 | tickSize));
288 | } else if (unit == "year") {
289 | d.setFullYear(floorInBase(d.getFullYear(), tickSize));
290 | }
291 |
292 | // reset smaller components
293 |
294 | d.setMilliseconds(0);
295 |
296 | if (step >= timeUnitSize.minute) {
297 | d.setSeconds(0);
298 | }
299 | if (step >= timeUnitSize.hour) {
300 | d.setMinutes(0);
301 | }
302 | if (step >= timeUnitSize.day) {
303 | d.setHours(0);
304 | }
305 | if (step >= timeUnitSize.day * 4) {
306 | d.setDate(1);
307 | }
308 | if (step >= timeUnitSize.month * 2) {
309 | d.setMonth(floorInBase(d.getMonth(), 3));
310 | }
311 | if (step >= timeUnitSize.quarter * 2) {
312 | d.setMonth(floorInBase(d.getMonth(), 6));
313 | }
314 | if (step >= timeUnitSize.year) {
315 | d.setMonth(0);
316 | }
317 |
318 | var carry = 0;
319 | var v = Number.NaN;
320 | var prev;
321 |
322 | do {
323 |
324 | prev = v;
325 | v = d.getTime();
326 | ticks.push(v);
327 |
328 | if (unit == "month" || unit == "quarter") {
329 | if (tickSize < 1) {
330 |
331 | // a bit complicated - we'll divide the
332 | // month/quarter up but we need to take
333 | // care of fractions so we don't end up in
334 | // the middle of a day
335 |
336 | d.setDate(1);
337 | var start = d.getTime();
338 | d.setMonth(d.getMonth() +
339 | (unit == "quarter" ? 3 : 1));
340 | var end = d.getTime();
341 | d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize);
342 | carry = d.getHours();
343 | d.setHours(0);
344 | } else {
345 | d.setMonth(d.getMonth() +
346 | tickSize * (unit == "quarter" ? 3 : 1));
347 | }
348 | } else if (unit == "year") {
349 | d.setFullYear(d.getFullYear() + tickSize);
350 | } else {
351 | d.setTime(v + step);
352 | }
353 | } while (v < axis.max && v != prev);
354 |
355 | return ticks;
356 | };
357 |
358 | axis.tickFormatter = function (v, axis) {
359 |
360 | var d = dateGenerator(v, axis.options);
361 |
362 | // first check global format
363 |
364 | if (opts.timeformat != null) {
365 | return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames);
366 | }
367 |
368 | // possibly use quarters if quarters are mentioned in
369 | // any of these places
370 |
371 | var useQuarters = (axis.options.tickSize &&
372 | axis.options.tickSize[1] == "quarter") ||
373 | (axis.options.minTickSize &&
374 | axis.options.minTickSize[1] == "quarter");
375 |
376 | var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]];
377 | var span = axis.max - axis.min;
378 | var suffix = (opts.twelveHourClock) ? " %p" : "";
379 | var hourCode = (opts.twelveHourClock) ? "%I" : "%H";
380 | var fmt;
381 |
382 | if (t < timeUnitSize.minute) {
383 | fmt = hourCode + ":%M:%S" + suffix;
384 | } else if (t < timeUnitSize.day) {
385 | if (span < 2 * timeUnitSize.day) {
386 | fmt = hourCode + ":%M" + suffix;
387 | } else {
388 | fmt = "%b %d " + hourCode + ":%M" + suffix;
389 | }
390 | } else if (t < timeUnitSize.month) {
391 | fmt = "%b %d";
392 | } else if ((useQuarters && t < timeUnitSize.quarter) ||
393 | (!useQuarters && t < timeUnitSize.year)) {
394 | if (span < timeUnitSize.year) {
395 | fmt = "%b";
396 | } else {
397 | fmt = "%b %Y";
398 | }
399 | } else if (useQuarters && t < timeUnitSize.year) {
400 | if (span < timeUnitSize.year) {
401 | fmt = "Q%q";
402 | } else {
403 | fmt = "Q%q %Y";
404 | }
405 | } else {
406 | fmt = "%Y";
407 | }
408 |
409 | var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames);
410 |
411 | return rt;
412 | };
413 | }
414 | });
415 | });
416 | }
417 |
418 | $.plot.plugins.push({
419 | init: init,
420 | options: options,
421 | name: 'time',
422 | version: '1.0'
423 | });
424 |
425 | // Time-axis support used to be in Flot core, which exposed the
426 | // formatDate function on the plot object. Various plugins depend
427 | // on the function, so we need to re-expose it here.
428 |
429 | $.plot.formatDate = formatDate;
430 | $.plot.dateGenerator = dateGenerator;
431 |
432 | })(jQuery);
433 |
--------------------------------------------------------------------------------
/js/own.punchcard.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | var margin = {top: 10, right: 10, bottom: 10, left: 15};
3 | var width = 1000 - margin.left - margin.right;
4 | var height = 340 - margin.top - margin.bottom;
5 | var padding = 3;
6 | var xLabelHeight = 30;
7 | var yLabelWidth = 80;
8 | var borderWidth = 3;
9 | var duration = 500;
10 |
11 | var chart = d3.select('#chart').append('svg')
12 | .attr('width', width + margin.left + margin.right)
13 | .attr('height', height + margin.top + margin.bottom)
14 | .append('g')
15 | .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
16 |
17 | var border = chart.append('rect')
18 | .attr('x', yLabelWidth)
19 | .attr('y', xLabelHeight)
20 | .style('fill-opacity', 0)
21 | .style('stroke', '#000')
22 | .style('stroke-width', borderWidth)
23 | .style('shape-rendering', 'crispEdges');
24 |
25 | function load(name) {
26 | d3.text(name, function(dataCSV) {
27 |
28 | var labelsX = null
29 | var data = []
30 |
31 | d3.csv.parseRows(dataCSV, function(d) {
32 |
33 | if (labelsX === null) return labelsX = d.slice(1)
34 |
35 | var values = d.slice(1)
36 | var i = 0
37 |
38 | for (; i < values.length; i++) {
39 | values[i] = parseInt(values[i], 10)
40 | }
41 |
42 | data.push({
43 | label: d[0],
44 | values: values
45 | })
46 |
47 | })
48 |
49 | update(data, labelsX)
50 | })
51 | }
52 |
53 | function update(data, labelsX) {
54 |
55 | var allValues = Array.prototype.concat.apply([], data.map(function(d) { return d.values }))
56 | var maxWidth = d3.max(data.map(function(d) { return d.values.length }))
57 | var maxR = d3.min([(width - yLabelWidth) / maxWidth, (height - xLabelHeight) / data.length]) / 2
58 |
59 | var r = function(d) {
60 | if (d === 0) return 0
61 |
62 | f = d3.scale.sqrt()
63 | .domain([d3.min(allValues), d3.max(allValues)])
64 | .rangeRound([2, maxR - padding])
65 |
66 | return f(d)
67 | }
68 |
69 | var c = d3.scale.linear()
70 | .domain([d3.min(allValues), d3.max(allValues)])
71 | .rangeRound([255 * 0.8, 0])
72 |
73 | var rows = chart.selectAll('.row')
74 | .data(data, function(d){ return d.label })
75 |
76 | rows.enter().append('g')
77 | .attr('class', 'row')
78 |
79 | rows.exit()
80 | .transition()
81 | .duration(duration)
82 | .style('fill-opacity', 0)
83 | .remove()
84 |
85 | rows.transition()
86 | .duration(duration)
87 | .attr('transform', function(d, i){ return 'translate(' + yLabelWidth + ',' + (maxR * i * 2 + maxR + xLabelHeight) + ')' })
88 |
89 | var dots = rows.selectAll('circle')
90 | .data(function(d){ return d.values })
91 |
92 | dots.enter().append('circle')
93 | .attr('cy', 0)
94 | .attr('r', 0)
95 | .style('fill', '#ffffff')
96 | .text(function(d){ return d })
97 |
98 | dots.exit()
99 | .transition()
100 | .duration(duration)
101 | .attr('r', 0)
102 | .remove()
103 |
104 | dots.transition()
105 | .duration(duration)
106 | .attr('r', function(d){ return r(d) })
107 | .attr('cx', function(d, i){ return i * maxR * 2 + maxR })
108 | .style('fill', function(d){ return 'rgb(' + c(d) + ',' + c(d) + ',' + c(d) + ')' })
109 |
110 | var dotLabels = rows.selectAll('.dot-label')
111 | .data(function(d){
112 | return d.values.map(function (v) { return v + ' %'; });
113 | });
114 |
115 | var dotLabelEnter = dotLabels.enter().append('g')
116 | .attr('class', 'dot-label')
117 | .on('mouseover', function(d){
118 | var selection = d3.select(this)
119 | selection.select('rect').transition().duration(100).style('opacity', 1)
120 | selection.select("text").transition().duration(100).style('opacity', 1)
121 | })
122 | .on('mouseout', function(d){
123 | var selection = d3.select(this)
124 | selection.select('rect').transition().style('opacity', 0)
125 | selection.select("text").transition().style('opacity', 0)
126 | });
127 |
128 | dotLabelEnter.append('rect')
129 | .style('fill', '#000000')
130 | .style('opacity', 0);
131 |
132 | dotLabelEnter.append('text')
133 | .style('text-anchor', 'middle')
134 | .style('fill', '#ffffff')
135 | .style('opacity', 0);
136 |
137 | dotLabels.exit().remove();
138 |
139 | dotLabels
140 | .attr('transform', function(d, i){ return 'translate(' + (i * maxR * 2) + ',' + (-maxR) + ')' })
141 | .select('text')
142 | .text(function(d){ return d })
143 | .attr('y', maxR + 4)
144 | .attr('x', maxR);
145 |
146 | dotLabels
147 | .select('rect')
148 | .attr('width', maxR * 2)
149 | .attr('height', maxR * 2);
150 |
151 | var xLabels = chart.selectAll('.xLabel')
152 | .data(labelsX);
153 |
154 | xLabels.enter().append('text')
155 | .attr('y', xLabelHeight)
156 | .attr('transform', 'translate(0,-6)')
157 | .attr('class', 'xLabel')
158 | .style('text-anchor', 'middle')
159 | .style('fill-opacity', 0);
160 |
161 | xLabels.exit()
162 | .transition()
163 | .duration(duration)
164 | .style('fill-opacity', 0)
165 | .remove();
166 |
167 | xLabels.transition()
168 | .text(function (d) { return d })
169 | .duration(duration)
170 | .attr('x', function(d, i){ return maxR * i * 2 + maxR + yLabelWidth })
171 | .style('fill-opacity', 1);
172 |
173 | var yLabels = chart.selectAll('.yLabel')
174 | .data(data, function(d){ return d.label });
175 |
176 | yLabels.enter().append('text')
177 | .text(function (d) { return d.label })
178 | .attr('x', yLabelWidth)
179 | .attr('class', 'yLabel')
180 | .style('text-anchor', 'end')
181 | .style('fill-opacity', 0);
182 |
183 | yLabels.exit()
184 | .transition()
185 | .duration(duration)
186 | .style('fill-opacity', 0)
187 | .remove();
188 |
189 | yLabels.transition()
190 | .duration(duration)
191 | .attr('y', function(d, i){ return maxR * i * 2 + maxR + xLabelHeight })
192 | .attr('transform', 'translate(-6,' + maxR / 2.5 + ')')
193 | .style('fill-opacity', 1);
194 |
195 | var vert = chart.selectAll('.vert')
196 | .data(labelsX);
197 |
198 | vert.enter().append('line')
199 | .attr('class', 'vert')
200 | .attr('y1', xLabelHeight + borderWidth / 2)
201 | .attr('stroke', '#888')
202 | .attr('stroke-width', 1)
203 | .style('shape-rendering', 'crispEdges')
204 | .style('stroke-opacity', 0);
205 |
206 | vert.exit()
207 | .transition()
208 | .duration(duration)
209 | .style('stroke-opacity', 0)
210 | .remove();
211 |
212 | vert.transition()
213 | .duration(duration)
214 | .attr('x1', function(d, i){ return maxR * i * 2 + yLabelWidth })
215 | .attr('x2', function(d, i){ return maxR * i * 2 + yLabelWidth })
216 | .attr('y2', maxR * 2 * data.length + xLabelHeight - borderWidth / 2)
217 | .style('stroke-opacity', function(d, i){ return i ? 1 : 0 });
218 |
219 | var horiz = chart.selectAll('.horiz').
220 | data(data, function(d){ return d.label });
221 |
222 | horiz.enter().append('line')
223 | .attr('class', 'horiz')
224 | .attr('x1', yLabelWidth + borderWidth / 2)
225 | .attr('stroke', '#888')
226 | .attr('stroke-width', 1)
227 | .style('shape-rendering', 'crispEdges')
228 | .style('stroke-opacity', 0);
229 |
230 | horiz.exit()
231 | .transition()
232 | .duration(duration)
233 | .style('stroke-opacity', 0)
234 | .remove();
235 |
236 | horiz.transition()
237 | .duration(duration)
238 | .attr('x2', maxR * 2 * labelsX.length + yLabelWidth - borderWidth / 2)
239 | .attr('y1', function(d, i){ return i * maxR * 2 + xLabelHeight })
240 | .attr('y2', function(d, i){ return i * maxR * 2 + xLabelHeight })
241 | .style('stroke-opacity', function(d, i){ return i ? 1 : 0 });
242 |
243 | border.transition()
244 | .duration(duration)
245 | .attr('width', maxR * 2 * labelsX.length)
246 | .attr('height', maxR * 2 * data.length);
247 |
248 | }
249 | load('sample1.csv');
250 | });
251 |
--------------------------------------------------------------------------------
/js/own.stats.js:
--------------------------------------------------------------------------------
1 | /* Helpers {{{ */
2 | // https://stackoverflow.com/a/1418059
3 | if(typeof(String.prototype.trim) === "undefined") {
4 | String.prototype.trim = function() {
5 | return String(this).replace(/^\s+|\s+$/g, '');
6 | };
7 | }
8 | // https://stackoverflow.com/a/2901298
9 | function numberWithSpace(x) {
10 | return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
11 | }
12 | /* }}} */
13 |
14 | $(function() {
15 | var stats_csv_source = 'https://openingh.openstreetmap.de/stats_data/';
16 | // stats_csv_source = '../oh-stats/'; // FIXME dev
17 |
18 | function isCanvasSupported(){
19 | var elem = document.createElement('canvas');
20 | return !!(elem.getContext && elem.getContext('2d'));
21 | }
22 |
23 | if (!isCanvasSupported()) {
24 | $.simplyToast( "Your browser has Canvas support disabled or does not support it yet."
25 | + " That is a good thing to protect your privacy but the \"What is in the database?\" part of the site depends on Canvas."
26 | + " \"What is in the database?\" is folded away for you. Enable Canvas if you want to use it.",
27 | 'warning', { align: "left", delay: 30000, } );
28 | $("#osm_db_over_time").slideToggle(2000);
29 | $("#tooltip").hide();
30 | }
31 |
32 | var plot;
33 |
34 | var plot_options = { /* {{{ */
35 | series: {
36 | lines: {
37 | show: true,
38 | },
39 | points: {
40 | show: true
41 | },
42 | shadowSize: 0,
43 | },
44 | xaxis: {
45 | mode: "time",
46 | tickLength: 5,
47 | timezone: "browser",
48 | },
49 | yaxis: [
50 | { position: "left" },
51 | { position: "left" }
52 | ],
53 | selection: {
54 | mode: "x"
55 | },
56 | grid: {
57 | markings: weekendAreas,
58 | hoverable: true,
59 | // clickable: true
60 | },
61 | legend: {
62 | // position: "se",
63 | container: "#legend",
64 | backgroundOpacity: 0.4,
65 | },
66 | }; /* }}} */
67 |
68 | var tag_keys = [ /* {{{ */
69 | 'opening_hours', 'opening_hours:kitchen', 'opening_hours:warm_kitchen', 'opening_hours:covid19',
70 | 'service_times',
71 | 'collection_times', 'fee', 'lit',
72 | 'happy_hours',
73 | 'smoking_hours',
74 | ]; /* }}} */
75 |
76 | /* Helper for returning the weekends in a period {{{ */
77 | function weekendAreas(axes) {
78 |
79 | var markings = [],
80 | d = new Date(axes.xaxis.min);
81 |
82 | // go to the first Saturday
83 |
84 | d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
85 | d.setUTCSeconds(0);
86 | d.setUTCMinutes(0);
87 | d.setUTCHours(0);
88 |
89 | var i = d.getTime();
90 |
91 | // when we don't set yaxis, the rectangle automatically
92 | // extends to infinity upwards and downwards
93 |
94 | do {
95 | markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
96 | i += 7 * 24 * 60 * 60 * 1000;
97 | } while (i < axes.xaxis.max);
98 |
99 | return markings;
100 | }
101 | /* }}} */
102 |
103 | function showStatsForKey(type) { /* {{{ */
104 | var db_stats_file, punchcard_data_file;
105 | var key = $('#tag_selector').val();
106 | var boundary = $('#boundary_selector').val();
107 | if (boundary === 'planet=earth') {
108 | db_stats_file = 'real_test.' + key + '.stats.csv';
109 | punchcard_data_file = 'punchcard.csv';
110 | } else {
111 | db_stats_file = 'export♡' + key + '♡' + boundary.replace(/=/g, '♡') + '♡stats.csv';
112 | punchcard_data_file = 'punchcard♡' + boundary.replace(/=/g, '♡') + '♡csv';
113 | }
114 | $.ajax({
115 | type: "GET",
116 | url: stats_csv_source + db_stats_file,
117 | dataType: "text",
118 | })
119 | .done(function(data) {
120 | processData(data);
121 | })
122 | .fail(function( jqXHR, textStatus ) {
123 | $.simplyToast( "The tag " + $('#tag_selector').val() + " has not been used in the selected location yet."
124 | + " You can be the first to add one ☺"
125 | + " It might also be the case that there is a problem with getting the data.",
126 | 'warning', { align: "left", delay: 10000, } );
127 | });
128 | if (type === '#boundary_selector' || typeof(type) === 'undefined') {
129 | load_punchcard(stats_csv_source + punchcard_data_file);
130 | }
131 | } /* }}} */
132 |
133 | function timePointer(plot, currentTime, id, content, func_add) { /* {{{ */
134 | if (typeof(func_add) !== 'function') {
135 | var func_add = function() { return true; };
136 | }
137 |
138 | /* https://stackoverflow.com/a/17533126/2239985 */
139 | var id = 'time-pointer-' + id;
140 |
141 | // Get the currente axes
142 | var axes = plot.getAxes();
143 | var xaxis = axes.xaxis;
144 | var yaxis = axes.yaxis;
145 |
146 | var element = plot.getPlaceholder();
147 |
148 | // Find the chart icon element
149 | var pointer = element.find('#' + id);
150 |
151 | // Check that the intended point is inside the visible area
152 | if(func_add(currentTime, id, content) && (currentTime < xaxis.max) && (currentTime > xaxis.min)) {
153 |
154 | if(pointer.length === 0) {
155 | // If it doesn't exist already, create it
156 | element.append('' + content + '');
157 | pointer = element.find('#' + id);
158 | }
159 |
160 | var plotOffset = plot.offset();
161 | var offset = {
162 | top: plotOffset.top - pointer.height() - 5,
163 | left: xaxis.p2c(currentTime) + plotOffset.left // + pointer.outerWidth(false)
164 | };
165 | pointer.offset(offset);
166 | } else {
167 | // If the currently selected area doesn't contain the point, erase the pointer
168 | pointer.remove();
169 | }
170 | } /* }}} */
171 |
172 | function placeTimePointers(plot) { /* {{{ */
173 | timePointer(plot, new Date(2014, 9, 11).getTime(), "issue-28",
174 | 'Server offline',
175 | function(currentTime, id, content){
176 | var boundary = $('#boundary_selector').val();
177 | return boundary === 'planet=earth';
178 | });
179 | timePointer(plot, new Date(2015, 3, 12).getTime(), "issue-2",
180 | 'Fixed issue 2',
181 | function(currentTime, id, content){
182 | var boundary = $('#boundary_selector').val();
183 | var key = $('#tag_selector').val();
184 | return boundary === 'planet=earth' && (key === 'fee' || key === 'lit');
185 | });
186 | timePointer(plot, new Date(2015, 3, 19).getTime(), "OSMWA1517",
187 | 'Wochenaufgabe');
188 | timePointer(plot, new Date(2017, 1, 12).getTime(), "issue-13",
189 | 'Missing data');
190 | timePointer(plot, new Date(2018, 11, 12).getTime(), "issue-16",
191 | 'Missing data');
192 | } /* }}} */
193 |
194 | /* Create and connect drop down menu to change data source boundary {{{ */
195 | $('#boundary_selector').append(new Option('planet=earth (not an official tag)', 'planet=earth'));
196 | $('#boundary_selector').append(new Option("int_name=Deutschland", "int_name♡Deutschland"));
197 | var boundary_to_name_mapping = {
198 | /* https://de.wikipedia.org/wiki/ISO_3166-2:DE */
199 | 'ISO3166-2=DE-BW': 'DE: Baden-Württemberg',
200 | 'ISO3166-2=DE-BY': 'DE: Bayern',
201 | 'ISO3166-2=DE-BE': 'DE: Berlin',
202 | 'ISO3166-2=DE-BB': 'DE: Brandenburg',
203 | 'ISO3166-2=DE-HB': 'DE: Bremen',
204 | 'ISO3166-2=DE-HH': 'DE: Hamburg',
205 | 'ISO3166-2=DE-HE': 'DE: Hessen',
206 | 'ISO3166-2=DE-MV': 'DE: Mecklenburg-Vorpommern',
207 | 'ISO3166-2=DE-NI': 'DE: Niedersachsen',
208 | 'ISO3166-2=DE-NW': 'DE: Nordrhein-Westfalen',
209 | 'ISO3166-2=DE-RP': 'DE: Rheinland-Pfalz',
210 | 'ISO3166-2=DE-SL': 'DE: Saarland',
211 | 'ISO3166-2=DE-SN': 'DE: Sachsen',
212 | 'ISO3166-2=DE-ST': 'DE: Sachsen-Anhalt',
213 | 'ISO3166-2=DE-SH': 'DE: Schleswig-Holstein',
214 | 'ISO3166-2=DE-TH': 'DE: Thüringen',
215 | };
216 | $.ajax({
217 | type: "GET",
218 | url: stats_csv_source + 'stats_for_boundaries.txt',
219 | dataType: "text",
220 | // contentType: "text/plain; charset=UTF-8",
221 | success: function(data) {
222 | data.split('\n').forEach(function (boundary_selector) {
223 | if (boundary_selector.match(/^[^#]/)) {
224 | boundary_selector = boundary_selector.replace(/♡/g, '=');
225 | var name = boundary_selector;
226 | if (boundary_selector in boundary_to_name_mapping) {
227 | var name = boundary_to_name_mapping[boundary_selector];
228 | }
229 | // if (boundary_selector === 'int_name♡Österreich') {
230 | // console.log(boundary_selector);
231 | // }
232 | $('#boundary_selector').append(new Option(name, boundary_selector));
233 | }
234 | });
235 | },
236 | });
237 | $('#boundary_selector').on('change', function() {
238 | showStatsForKey('#boundary_selector');
239 | });
240 | /* }}} */
241 |
242 | /* Create and connect drop down menu to change data source {{{ */
243 | $.each(tag_keys, function(ind, text) {
244 | $('#tag_selector').append(new Option(text, text));
245 | });
246 | $('#tag_selector').on('change', function() {
247 | showStatsForKey('#tag_selector');
248 | })
249 | /* }}} */
250 |
251 | function processData(allText) {
252 | $('#detailed_view').empty();
253 | $('#overview').empty();
254 |
255 | /* Parse the CSV file {{{ */
256 | // https://stackoverflow.com/a/7431565
257 | var allTextLines = allText.split(/\r\n|\n/);
258 | headers = allTextLines[0].split(',');
259 |
260 | var data_total_values = [];
261 | var data_could_be_parsed = [];
262 | var data_could_be_parsed_percent = [];
263 | var data_with_warning = [];
264 | var data_with_warning_percent = [];
265 | var data_with_unpretty = [];
266 | var data_with_unpretty_percent = [];
267 | var last_data = allTextLines[allTextLines.length - 2].split(','); // Empty line
268 | for (var i = 1; i < allTextLines.length; i++) {
269 | var data = allTextLines[i].split(',');
270 | if (data.length === headers.length) {
271 | var time = new Date(data[0]).getTime();
272 | data_total_values.push([ time, data[1]]);
273 | data_could_be_parsed.push([ time, data[3]]);
274 | data_could_be_parsed_percent.push([ time, data[3] / data[1] * 100]);
275 | data_with_warning.push([ time, data[5]]);
276 | data_with_warning_percent.push([ time, data[5] / data[1] * 100]);
277 | data_with_unpretty.push([ time, data[7]]);
278 | data_with_unpretty_percent.push([ time, data[7] / data[1] * 100]);
279 |
280 | var tarr = [];
281 | for (var j = 0; j < headers.length; j++) {
282 | tarr.push(data[j].trim());
283 | }
284 | }
285 | // console.log(JSON.stringify(data_could_be_parsed_percent, null, ' '));
286 | }
287 | /* }}} */
288 |
289 | var datasets = [ /* {{{ */
290 | {
291 | data: data_total_values,
292 | label_short: 'Total number',
293 | label: 'Total number of values',
294 | checked: true, }, {
295 | data: data_could_be_parsed,
296 | label_short: 'Parsed values',
297 | label: 'Number of values which could be parsed',
298 | }, {
299 | data: data_could_be_parsed_percent,
300 | yaxis: 2,
301 | label_short: 'Parsed values in %',
302 | label: 'Number of values which could be parsed in percent',
303 | checked: true,
304 | percent_number: true,
305 | }, {
306 | data: data_with_warning,
307 | label_short: 'Warning values',
308 | label: 'Number of values which returned a warning',
309 | }, {
310 | data: data_with_warning_percent,
311 | yaxis: 2,
312 | label_short: 'Warning values in %',
313 | label: 'Number of values which returned a warning in percent',
314 | percent_number: true,
315 | }, {
316 | data: data_with_unpretty,
317 | label_short: 'Unpretty values',
318 | label: 'Number of values which are not prettified',
319 | }, {
320 | data: data_with_unpretty_percent,
321 | yaxis: 2,
322 | label_short: 'Unpretty values in %',
323 | label: 'Number of values which are not prettified in percent',
324 | percent_number: true,
325 | },
326 | ]; /* }}} */
327 |
328 | /* Set individual color for each column {{{ */
329 | var i = 0;
330 | $.each(datasets, function(key, val) {
331 | val.color = i;
332 | ++i;
333 | });
334 | /* }}} */
335 |
336 | /* Insert check boxes to select data source columns to plot {{{ */
337 | if ($('#choices').text().length === 0) {
338 | $.each(datasets, function(key, val) {
339 | // val.checked = true;
340 | $("#choices").append("" + 342 | ""); 344 | }); 345 | $("#choices").find("input").click(plotAccordingToChoices); 346 | } 347 | /* }}} */ 348 | 349 | function plotAccordingToChoices() { /* {{{ */ 350 | var data = []; 351 | 352 | $("#choices").find("input:checked").each(function () { 353 | var key = $(this).attr("name"); 354 | if (key && datasets[key]) { 355 | data.push(datasets[key]); 356 | } 357 | }); 358 | 359 | if (data.length > 0) { 360 | var opts; 361 | var this_plot_options = plot_options; 362 | if (typeof(plot) !== 'undefined'){ 363 | var xaxes = plot.getOptions().xaxes[0]; 364 | this_plot_options.xaxis.min = xaxes.min; 365 | this_plot_options.xaxis.max = xaxes.max; 366 | } 367 | plot = $.plot("#detailed_view", data, this_plot_options); 368 | placeTimePointers(plot); 369 | } 370 | } /* }}} */ 371 | 372 | /* Define overview section {{{ */ 373 | var overview = $.plot("#overview", [data_total_values], { 374 | series: { 375 | lines: { 376 | show: true, 377 | lineWidth: 1 378 | }, 379 | shadowSize: 0, 380 | }, 381 | xaxis: { 382 | mode: "time", 383 | tickLength: 5, 384 | timezone: "browser", 385 | }, 386 | yaxis: { 387 | ticks: [], 388 | // min: 0, 389 | autoscaleMargin: 0.1 390 | }, 391 | selection: { 392 | mode: "x" 393 | } 394 | }); 395 | /* }}} */ 396 | 397 | /* connect the detailed_view and the overview {{{ */ 398 | $("#detailed_view").bind("plotselected", function (event, ranges) { 399 | 400 | // do the zooming 401 | $.each(plot.getXAxes(), function(_, axis) { 402 | var opts = axis.options; 403 | opts.min = ranges.xaxis.from; 404 | opts.max = ranges.xaxis.to; 405 | }); 406 | plot.setupGrid(); 407 | plot.draw(); 408 | plot.clearSelection(); 409 | placeTimePointers(plot); 410 | 411 | // don't fire event on the overview to prevent eternal loop 412 | 413 | overview.setSelection(ranges, true); 414 | }); 415 | 416 | $("#overview").bind("plotselected", function (event, ranges) { 417 | plot.setSelection(ranges); 418 | }); 419 | 420 | $("").css({ 421 | position: "absolute", 422 | display: "none", 423 | border: "1px solid #fdd", 424 | padding: "2px", 425 | "background-color": "#fee", 426 | opacity: 0.80 427 | }).appendTo("body"); 428 | 429 | $("#detailed_view").bind("plothover", function (event, pos, item) { 430 | if (item) { 431 | // console.log(JSON.stringify(item, null, ' ')); 432 | // console.log(); 433 | var date = new Date(item.datapoint[0]), 434 | y = item.datapoint[1]; 435 | 436 | var additional_node = ''; 437 | if (item.dataIndex > 0) { 438 | var diff_to_last_time = y - item.series.data[item.dataIndex - 1][1]; 439 | additional_node += '
Difference to previous value: ' 440 | + (diff_to_last_time > 0 ? '+' : '') 441 | + (item.series.percent_number ? diff_to_last_time.toFixed(4) + ' %' : diff_to_last_time).toString(); 442 | } 443 | 444 | $("#tooltip").html( 445 | (item.series.percent_number ? y.toFixed(3).toString() + ' %' : numberWithSpace(y)) 446 | + " as of " 447 | + date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1) + '-' + (date.getDate() < 10 ? '0' : '' ) + date.getDate() 448 | + ' ' + (date.getHours() < 10 ? '0' : '') + date.getHours() 449 | + ':' + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes() 450 | + ' (' + item.series.label + ')' 451 | + additional_node) 452 | .css({top: item.pageY+5, left: item.pageX+5}) 453 | .fadeIn(200); 454 | } else { 455 | $("#tooltip").hide(); 456 | } 457 | }); 458 | /* }}} */ 459 | 460 | /* Highlight data point when clicked {{{ */ 461 | $("#detailed_view").bind("plotclick", function (event, pos, item) { 462 | if (item) { 463 | plot.highlight(item.series, item.datapoint); 464 | } 465 | }); 466 | /* }}} */ 467 | 468 | plotAccordingToChoices(); 469 | } 470 | 471 | showStatsForKey(); 472 | // load_punchcard(stats_csv_source + 'punchcard.csv'); 473 | /* Plot the default data source */ 474 | 475 | /* Punchcard {{{ */ 476 | var punchcard_margin = {top: 10, right: 10, bottom: 10, left: 15}; 477 | var punchcard_width = 1000 - punchcard_margin.left - punchcard_margin.right; 478 | var punchcard_height = 340 - punchcard_margin.top - punchcard_margin.bottom; 479 | var punchcard_padding = 3; 480 | var xLabelHeight = 30; 481 | var yLabelWidth = 90; 482 | var borderWidth = 3; 483 | var punchcard_duration = 500; 484 | 485 | var chart = d3.select('#chart').append('svg') 486 | .attr('width', punchcard_width + punchcard_margin.left + punchcard_margin.right) 487 | .attr('height', punchcard_height + punchcard_margin.top + punchcard_margin.bottom) 488 | .append('g') 489 | .attr('transform', 'translate(' + punchcard_margin.left + ',' + punchcard_margin.top + ')'); 490 | 491 | var border = chart.append('rect') 492 | .attr('x', yLabelWidth) 493 | .attr('y', xLabelHeight) 494 | .style('fill-opacity', 0) 495 | .style('stroke', '#000') 496 | .style('stroke-width', borderWidth) 497 | .style('shape-rendering', 'crispEdges'); 498 | 499 | function load_punchcard(name) { 500 | return d3.text(name, function(dataCSV) { 501 | 502 | var labelsX = null 503 | var data = [] 504 | 505 | d3.csv.parseRows(dataCSV, function(d) { 506 | 507 | if (labelsX === null) return labelsX = d.slice(1) 508 | 509 | var values = d.slice(1) 510 | var i = 0 511 | 512 | for (; i < values.length; i++) { 513 | values[i] = parseInt(values[i], 10) 514 | } 515 | 516 | data.push({ 517 | label: d[0], 518 | values: values 519 | }) 520 | 521 | }) 522 | 523 | update(data, labelsX) 524 | }); 525 | } 526 | 527 | function update(data, labelsX) { 528 | 529 | var allValues = Array.prototype.concat.apply([], data.map(function(d) { return d.values })) 530 | var maxWidth = d3.max(data.map(function(d) { return d.values.length })) 531 | var maxR = d3.min([(punchcard_width - yLabelWidth) / maxWidth, (punchcard_height - xLabelHeight) / data.length]) / 2 532 | 533 | var r = function(d) { 534 | if (d === 0) return 0 535 | 536 | f = d3.scale.sqrt() 537 | .domain([d3.min(allValues), d3.max(allValues)]) 538 | .rangeRound([2, maxR - punchcard_padding]) 539 | 540 | return f(d) 541 | } 542 | 543 | var c = d3.scale.linear() 544 | .domain([d3.min(allValues), d3.max(allValues)]) 545 | .rangeRound([255 * 0.8, 0]) 546 | 547 | var rows = chart.selectAll('.row') 548 | .data(data, function(d){ return d.label }) 549 | 550 | rows.enter().append('g') 551 | .attr('class', 'row') 552 | 553 | rows.exit() 554 | .transition() 555 | .duration(punchcard_duration) 556 | .style('fill-opacity', 0) 557 | .remove() 558 | 559 | rows.transition() 560 | .duration(punchcard_duration) 561 | .attr('transform', function(d, i){ return 'translate(' + yLabelWidth + ',' + (maxR * i * 2 + maxR + xLabelHeight) + ')' }) 562 | 563 | var dots = rows.selectAll('circle') 564 | .data(function(d){ return d.values }) 565 | 566 | dots.enter().append('circle') 567 | .attr('cy', 0) 568 | .attr('r', 0) 569 | .style('fill', '#ffffff') 570 | .text(function(d){ return d }) 571 | 572 | dots.exit() 573 | .transition() 574 | .duration(punchcard_duration) 575 | .attr('r', 0) 576 | .remove() 577 | 578 | dots.transition() 579 | .duration(punchcard_duration) 580 | .attr('r', function(d){ return r(d) }) 581 | .attr('cx', function(d, i){ return i * maxR * 2 + maxR }) 582 | .style('fill', function(d){ return 'rgb(' + c(d) + ',' + c(d) + ',' + c(d) + ')' }) 583 | 584 | var dotLabels = rows.selectAll('.dot-label') 585 | .data(function(d){ 586 | return d.values.map(function (v) { return v + ' %'; }); 587 | }); 588 | 589 | var dotLabelEnter = dotLabels.enter().append('g') 590 | .attr('class', 'dot-label') 591 | .on('mouseover', function(d){ 592 | var selection = d3.select(this) 593 | selection.select('rect').transition().duration(100).style('opacity', 1) 594 | selection.select("text").transition().duration(100).style('opacity', 1) 595 | }) 596 | .on('mouseout', function(d){ 597 | var selection = d3.select(this) 598 | selection.select('rect').transition().style('opacity', 0) 599 | selection.select("text").transition().style('opacity', 0) 600 | }); 601 | 602 | dotLabelEnter.append('rect') 603 | .style('fill', '#005000') 604 | .style('opacity', 0); 605 | 606 | dotLabelEnter.append('text') 607 | .style('text-anchor', 'middle') 608 | .style('fill', '#ffffff') 609 | .style('opacity', 0); 610 | 611 | dotLabels.exit().remove(); 612 | 613 | dotLabels 614 | .attr('transform', function(d, i){ return 'translate(' + (i * maxR * 2) + ',' + (-maxR) + ')' }) 615 | .select('text') 616 | .text(function(d){ return d }) 617 | .attr('y', maxR + 4) 618 | .attr('x', maxR); 619 | 620 | dotLabels 621 | .select('rect') 622 | .attr('width', maxR * 2) 623 | .attr('height', maxR * 2); 624 | 625 | var xLabels = chart.selectAll('.xLabel') 626 | .data(labelsX); 627 | 628 | xLabels.enter().append('text') 629 | .attr('y', xLabelHeight) 630 | .attr('transform', 'translate(0,-6)') 631 | .attr('class', 'xLabel') 632 | .style('text-anchor', 'middle') 633 | .style('fill-opacity', 0); 634 | 635 | xLabels.exit() 636 | .transition() 637 | .duration(punchcard_duration) 638 | .style('fill-opacity', 0) 639 | .remove(); 640 | 641 | xLabels.transition() 642 | .text(function (d) { return d }) 643 | .duration(punchcard_duration) 644 | .attr('x', function(d, i){ return maxR * i * 2 + maxR + yLabelWidth }) 645 | .style('fill-opacity', 1); 646 | 647 | var yLabels = chart.selectAll('.yLabel') 648 | .data(data, function(d){ return d.label }); 649 | 650 | yLabels.enter().append('text') 651 | .text(function (d) { return d.label }) 652 | .attr('x', yLabelWidth) 653 | .attr('class', 'yLabel') 654 | .style('text-anchor', 'end') 655 | .style('fill-opacity', 0); 656 | 657 | yLabels.exit() 658 | .transition() 659 | .duration(punchcard_duration) 660 | .style('fill-opacity', 0) 661 | .remove(); 662 | 663 | yLabels.transition() 664 | .duration(punchcard_duration) 665 | .attr('y', function(d, i){ return maxR * i * 2 + maxR + xLabelHeight }) 666 | .attr('transform', 'translate(-6,' + maxR / 2.5 + ')') 667 | .style('fill-opacity', 1); 668 | 669 | var vert = chart.selectAll('.vert') 670 | .data(labelsX); 671 | 672 | vert.enter().append('line') 673 | .attr('class', 'vert') 674 | .attr('y1', xLabelHeight + borderWidth / 2) 675 | .attr('stroke', '#888') 676 | .attr('stroke-width', 1) 677 | .style('shape-rendering', 'crispEdges') 678 | .style('stroke-opacity', 0); 679 | 680 | vert.exit() 681 | .transition() 682 | .duration(punchcard_duration) 683 | .style('stroke-opacity', 0) 684 | .remove(); 685 | 686 | vert.transition() 687 | .duration(punchcard_duration) 688 | .attr('x1', function(d, i){ return maxR * i * 2 + yLabelWidth }) 689 | .attr('x2', function(d, i){ return maxR * i * 2 + yLabelWidth }) 690 | .attr('y2', maxR * 2 * data.length + xLabelHeight - borderWidth / 2) 691 | .style('stroke-opacity', function(d, i){ return i ? 1 : 0 }); 692 | 693 | var horiz = chart.selectAll('.horiz'). 694 | data(data, function(d){ return d.label }); 695 | 696 | horiz.enter().append('line') 697 | .attr('class', 'horiz') 698 | .attr('x1', yLabelWidth + borderWidth / 2) 699 | .attr('stroke', '#888') 700 | .attr('stroke-width', 1) 701 | .style('shape-rendering', 'crispEdges') 702 | .style('stroke-opacity', 0); 703 | 704 | horiz.exit() 705 | .transition() 706 | .duration(punchcard_duration) 707 | .style('stroke-opacity', 0) 708 | .remove(); 709 | 710 | horiz.transition() 711 | .duration(punchcard_duration) 712 | .attr('x2', maxR * 2 * labelsX.length + yLabelWidth - borderWidth / 2) 713 | .attr('y1', function(d, i){ return i * maxR * 2 + xLabelHeight }) 714 | .attr('y2', function(d, i){ return i * maxR * 2 + xLabelHeight }) 715 | .style('stroke-opacity', function(d, i){ return i ? 1 : 0 }); 716 | 717 | border.transition() 718 | .duration(punchcard_duration) 719 | .attr('width', maxR * 2 * labelsX.length) 720 | .attr('height', maxR * 2 * data.length); 721 | 722 | } 723 | /* }}} */ 724 | 725 | /* Add the version string to the footer {{{ */ 726 | $(".footer").prepend("D3 " + d3.version + " – Flot " + $.plot.version + " – "); 727 | /* }}} */ 728 | 729 | jQuery("h2").click(function() { 730 | jQuery(this).next(".content").slideToggle(500); 731 | $("#tooltip").hide(); 732 | }); 733 | // jQuery(".heading").click(function() { 734 | // jQuery(this) 735 | // .next(".content").slideToggle(500) 736 | // .siblings(".content").slideUp(500); 737 | // $("#tooltip").hide(); 738 | // }); 739 | }); 740 | -------------------------------------------------------------------------------- /js/simply-toast.min.js: -------------------------------------------------------------------------------- 1 | (function(){$.simplyToast=function(e,t,n){function u(){$.simplyToast.remove(o)}n=$.extend(true,{},$.simplyToast.defaultOptions,n);var r='
';if(n.allowDismiss)r+='×';r+=e;r+="
";var i=n.offset.amount;$(".simply-toast").each(function(){return i=Math.max(i,parseInt($(this).css(n.offset.from))+this.offsetHeight+n.spacing)});var s={position:n.appendTo==="body"?"fixed":"absolute",margin:0,"z-index":"9999",display:"none","min-width":n.minWidth,"max-width":n.maxWidth};s[n.offset.from]=i+"px";var o=$(r).css(s).appendTo(n.appendTo);switch(n.align){case"center":o.css({left:"50%","margin-left":"-"+o.outerWidth()/2+"px"});break;case"left":o.css("left","20px");break;default:o.css("right","20px")}if(o.fadeIn)o.fadeIn();else o.css({display:"block",opacity:1});if(n.delay>0){setTimeout(u,n.delay)}o.find('[data-dismiss="alert"]').removeAttr("data-dismiss").click(u);return o};$.simplyToast.remove=function(e){if(e.fadeOut){return e.fadeOut(function(){return e.remove()})}else{return e.remove()}};$.simplyToast.defaultOptions={appendTo:"body",customClass:false,type:"info",offset:{from:"top",amount:20},align:"right",minWidth:250,maxWidth:450,delay:4e3,allowDismiss:true,spacing:10}})()
2 |
--------------------------------------------------------------------------------