Fancy Flot-based JS charting for DrDr timing.
Signed-off-by: Jay McCarthy <jay@racket-lang.org>
This commit is contained in:
Sam Tobin-Hochstadt
Jay McCarthy
parent
7347b1b671
commit
0dde6af581
|
|
@ -340,6 +340,9 @@
|
|||
(define output (map render-event output-log))
|
||||
(response/xexpr
|
||||
`(html (head (title ,title)
|
||||
(script ([language "javascript"] [type "text/javascript"] [src "jquery-1.6.2.min.js"]))
|
||||
(script ([language "javascript"] [type "text/javascript"] [src "jquery.flot.js"]))
|
||||
(script ([language "javascript"] [type "text/javascript"] [src "jquery.flot.selection.js"]))
|
||||
(link ([rel "stylesheet"] [type "text/css"] [href "/render.css"])))
|
||||
(body
|
||||
(div ([class "log, content"])
|
||||
|
|
@ -370,6 +373,14 @@
|
|||
'()
|
||||
`((div ([class "output"]) " "
|
||||
,@output)))
|
||||
(div ([id "_chart"] [style "width:800px;height:300px;"]))
|
||||
(script ([language "javascript"] [type "text/javascript"] [src "chart.js"]))
|
||||
(script ([language "javascript"] [type "text/javascript"])
|
||||
,(format "get_data('/json/timing/~a');" the-base-path))
|
||||
(button ([onclick "reset_chart()"]) "Reset")
|
||||
(button ([id "setlegend"] [onclick "set_legend(!cur_options.legend.show)"])
|
||||
"Hide Legend")
|
||||
|
||||
,(with-handlers ([exn:fail?
|
||||
; XXX Remove this eventually
|
||||
(lambda (x)
|
||||
|
|
|
|||
135
collects/meta/drdr/static/chart.js
Normal file
135
collects/meta/drdr/static/chart.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
function moving_avg(arr, i, _acc, _m) {
|
||||
var acc = _acc || function(j) { return arr[j]; };
|
||||
var m = _m || 5;
|
||||
var top = Math.min(i + m, arr.length);
|
||||
var bot = Math.max(0, i - m);
|
||||
var n = top - bot;
|
||||
var sum = 0;
|
||||
for (var i = bot; i < top; i++)
|
||||
sum += acc(i);
|
||||
return sum/n;
|
||||
}
|
||||
|
||||
var data = null;
|
||||
var sub_times = [];
|
||||
var overall_times = [];
|
||||
var overall_avg = [];
|
||||
var chart_data = [];
|
||||
var options = { selection: { mode: "xy" },
|
||||
legend: { backgroundOpacity: 0, position: "sw", show: true },
|
||||
xaxes: [{label: 'push'}],
|
||||
yaxes: [{}, {position: "right"}],
|
||||
grid: { hoverable : true }
|
||||
};
|
||||
var placeholder = $("#_chart");
|
||||
var cur_options = options;
|
||||
var previousPoint = null;
|
||||
|
||||
function showTooltip(x, y, contents) {
|
||||
$('<div id="tooltip">' + contents + '</div>').css( {
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
top: y + 5,
|
||||
left: x + 5,
|
||||
border: '1px solid #fdd',
|
||||
padding: '2px',
|
||||
'background-color': '#fee',
|
||||
opacity: 0.80
|
||||
}).appendTo("body").fadeIn(200);
|
||||
}
|
||||
|
||||
placeholder.bind("plotselected", handle_selection);
|
||||
|
||||
placeholder.bind("plothover", function (event, pos, item) {
|
||||
if (item) {
|
||||
if (previousPoint != item.dataIndex) {
|
||||
previousPoint = item.dataIndex;
|
||||
|
||||
$("#tooltip").remove();
|
||||
var x = item.datapoint[0],
|
||||
y = item.datapoint[1].toFixed(2);
|
||||
|
||||
showTooltip(item.pageX, item.pageY,
|
||||
item.series.label + " at push " + x + ": "
|
||||
+ y + " ms");
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#tooltip").remove();
|
||||
previousPoint = null;
|
||||
}
|
||||
});
|
||||
|
||||
function load_data(d) {
|
||||
chart_data = [];
|
||||
overall_times = [];
|
||||
overall_avg = [];
|
||||
sub_times = [];
|
||||
pdata = []
|
||||
reset_chart();
|
||||
data = d;
|
||||
|
||||
pdata = data && JSON.parse(data);
|
||||
|
||||
var max_overall = 0;
|
||||
var max_sub = 0;
|
||||
|
||||
// build the timing data arrays
|
||||
for (var i = 0; i < pdata.length; i++) {
|
||||
overall_times.push([pdata[i][0], pdata[i][1]]);
|
||||
overall_avg.push([pdata[i][0],
|
||||
moving_avg(pdata, i,
|
||||
function(j) { return pdata[j][1]; })]);
|
||||
max_overall = Math.max(max_overall, pdata[i][1]);
|
||||
if (pdata[i][2].length != 0) {
|
||||
for (var j = 0; j < pdata[i][2].length; j++) {
|
||||
sub_times[j] = sub_times[j] || [];
|
||||
sub_times[j].push([pdata[i][0],pdata[i][2][j][0]]);
|
||||
max_sub = Math.max(max_sub, pdata[i][2][j][0]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// is there a significant difference between the overall times
|
||||
// and the internal timings?
|
||||
|
||||
var ya = 1;
|
||||
if (max_overall > (5 * max_sub)) { ya = 2; }
|
||||
|
||||
// put the data into the chart format
|
||||
chart_data.push({data: overall_times, label: "Overall Time"});
|
||||
chart_data.push({data: overall_avg, label: "Overall Moving Avg"});
|
||||
for(var i = 0; i < sub_times.length; i++) {
|
||||
chart_data.push({data: sub_times[i], label: "Timer "+ (i+1), points: { show: true }, yaxis: ya});
|
||||
}
|
||||
}
|
||||
|
||||
function get_data(url) {
|
||||
//console.log("URL:", url);
|
||||
$.ajax({url: url,
|
||||
beforeSend: function(xhr) {
|
||||
xhr.overrideMimeType( 'text/plain; charset=x-user-defined' );
|
||||
},
|
||||
success: function(d) { load_data(d); show(); }});
|
||||
}
|
||||
|
||||
|
||||
function show() { $.plot(placeholder, chart_data, cur_options); }
|
||||
|
||||
function handle_selection(event, ranges) {
|
||||
cur_options = $.extend(true, {}, cur_options, {
|
||||
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to },
|
||||
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }});
|
||||
show();
|
||||
}
|
||||
|
||||
function set_legend(new_val) {
|
||||
cur_options = $.extend(true,{},cur_options, {legend: {show: new_val}});
|
||||
show();
|
||||
if (new_val)
|
||||
$("#setlegend").text("Hide Legend")
|
||||
else
|
||||
$("#setlegend").text("Show Legend")
|
||||
}
|
||||
|
||||
function reset_chart() { cur_options = options; show(); }
|
||||
18
collects/meta/drdr/static/jquery-1.6.2.min.js
vendored
Normal file
18
collects/meta/drdr/static/jquery-1.6.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2599
collects/meta/drdr/static/jquery.flot.js
Normal file
2599
collects/meta/drdr/static/jquery.flot.js
Normal file
File diff suppressed because it is too large
Load Diff
344
collects/meta/drdr/static/jquery.flot.selection.js
Normal file
344
collects/meta/drdr/static/jquery.flot.selection.js
Normal file
|
|
@ -0,0 +1,344 @@
|
|||
/*
|
||||
Flot plugin for selecting regions.
|
||||
|
||||
The plugin defines the following options:
|
||||
|
||||
selection: {
|
||||
mode: null or "x" or "y" or "xy",
|
||||
color: color
|
||||
}
|
||||
|
||||
Selection support is enabled by setting the mode to one of "x", "y" or
|
||||
"xy". In "x" mode, the user will only be able to specify the x range,
|
||||
similarly for "y" mode. For "xy", the selection becomes a rectangle
|
||||
where both ranges can be specified. "color" is color of the selection
|
||||
(if you need to change the color later on, you can get to it with
|
||||
plot.getOptions().selection.color).
|
||||
|
||||
When selection support is enabled, a "plotselected" event will be
|
||||
emitted on the DOM element you passed into the plot function. The
|
||||
event handler gets a parameter with the ranges selected on the axes,
|
||||
like this:
|
||||
|
||||
placeholder.bind("plotselected", function(event, ranges) {
|
||||
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
|
||||
// similar for yaxis - with multiple axes, the extra ones are in
|
||||
// x2axis, x3axis, ...
|
||||
});
|
||||
|
||||
The "plotselected" event is only fired when the user has finished
|
||||
making the selection. A "plotselecting" event is fired during the
|
||||
process with the same parameters as the "plotselected" event, in case
|
||||
you want to know what's happening while it's happening,
|
||||
|
||||
A "plotunselected" event with no arguments is emitted when the user
|
||||
clicks the mouse to remove the selection.
|
||||
|
||||
The plugin allso adds the following methods to the plot object:
|
||||
|
||||
- setSelection(ranges, preventEvent)
|
||||
|
||||
Set the selection rectangle. The passed in ranges is on the same
|
||||
form as returned in the "plotselected" event. If the selection mode
|
||||
is "x", you should put in either an xaxis range, if the mode is "y"
|
||||
you need to put in an yaxis range and both xaxis and yaxis if the
|
||||
selection mode is "xy", like this:
|
||||
|
||||
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
|
||||
|
||||
setSelection will trigger the "plotselected" event when called. If
|
||||
you don't want that to happen, e.g. if you're inside a
|
||||
"plotselected" handler, pass true as the second parameter. If you
|
||||
are using multiple axes, you can specify the ranges on any of those,
|
||||
e.g. as x2axis/x3axis/... instead of xaxis, the plugin picks the
|
||||
first one it sees.
|
||||
|
||||
- clearSelection(preventEvent)
|
||||
|
||||
Clear the selection rectangle. Pass in true to avoid getting a
|
||||
"plotunselected" event.
|
||||
|
||||
- getSelection()
|
||||
|
||||
Returns the current selection in the same format as the
|
||||
"plotselected" event. If there's currently no selection, the
|
||||
function returns null.
|
||||
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
function init(plot) {
|
||||
var selection = {
|
||||
first: { x: -1, y: -1}, second: { x: -1, y: -1},
|
||||
show: false,
|
||||
active: false
|
||||
};
|
||||
|
||||
// FIXME: The drag handling implemented here should be
|
||||
// abstracted out, there's some similar code from a library in
|
||||
// the navigation plugin, this should be massaged a bit to fit
|
||||
// the Flot cases here better and reused. Doing this would
|
||||
// make this plugin much slimmer.
|
||||
var savedhandlers = {};
|
||||
|
||||
var mouseUpHandler = null;
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (selection.active) {
|
||||
updateSelection(e);
|
||||
|
||||
plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
if (e.which != 1) // only accept left-click
|
||||
return;
|
||||
|
||||
// cancel out any text selections
|
||||
document.body.focus();
|
||||
|
||||
// prevent text selection and drag in old-school browsers
|
||||
if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
|
||||
savedhandlers.onselectstart = document.onselectstart;
|
||||
document.onselectstart = function () { return false; };
|
||||
}
|
||||
if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
|
||||
savedhandlers.ondrag = document.ondrag;
|
||||
document.ondrag = function () { return false; };
|
||||
}
|
||||
|
||||
setSelectionPos(selection.first, e);
|
||||
|
||||
selection.active = true;
|
||||
|
||||
// this is a bit silly, but we have to use a closure to be
|
||||
// able to whack the same handler again
|
||||
mouseUpHandler = function (e) { onMouseUp(e); };
|
||||
|
||||
$(document).one("mouseup", mouseUpHandler);
|
||||
}
|
||||
|
||||
function onMouseUp(e) {
|
||||
mouseUpHandler = null;
|
||||
|
||||
// revert drag stuff for old-school browsers
|
||||
if (document.onselectstart !== undefined)
|
||||
document.onselectstart = savedhandlers.onselectstart;
|
||||
if (document.ondrag !== undefined)
|
||||
document.ondrag = savedhandlers.ondrag;
|
||||
|
||||
// no more dragging
|
||||
selection.active = false;
|
||||
updateSelection(e);
|
||||
|
||||
if (selectionIsSane())
|
||||
triggerSelectedEvent();
|
||||
else {
|
||||
// this counts as a clear
|
||||
plot.getPlaceholder().trigger("plotunselected", [ ]);
|
||||
plot.getPlaceholder().trigger("plotselecting", [ null ]);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getSelection() {
|
||||
if (!selectionIsSane())
|
||||
return null;
|
||||
|
||||
var r = {}, c1 = selection.first, c2 = selection.second;
|
||||
$.each(plot.getAxes(), function (name, axis) {
|
||||
if (axis.used) {
|
||||
var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]);
|
||||
r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
|
||||
}
|
||||
});
|
||||
return r;
|
||||
}
|
||||
|
||||
function triggerSelectedEvent() {
|
||||
var r = getSelection();
|
||||
|
||||
plot.getPlaceholder().trigger("plotselected", [ r ]);
|
||||
|
||||
// backwards-compat stuff, to be removed in future
|
||||
if (r.xaxis && r.yaxis)
|
||||
plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
|
||||
}
|
||||
|
||||
function clamp(min, value, max) {
|
||||
return value < min ? min: (value > max ? max: value);
|
||||
}
|
||||
|
||||
function setSelectionPos(pos, e) {
|
||||
var o = plot.getOptions();
|
||||
var offset = plot.getPlaceholder().offset();
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
|
||||
pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
|
||||
|
||||
if (o.selection.mode == "y")
|
||||
pos.x = pos == selection.first ? 0 : plot.width();
|
||||
|
||||
if (o.selection.mode == "x")
|
||||
pos.y = pos == selection.first ? 0 : plot.height();
|
||||
}
|
||||
|
||||
function updateSelection(pos) {
|
||||
if (pos.pageX == null)
|
||||
return;
|
||||
|
||||
setSelectionPos(selection.second, pos);
|
||||
if (selectionIsSane()) {
|
||||
selection.show = true;
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
else
|
||||
clearSelection(true);
|
||||
}
|
||||
|
||||
function clearSelection(preventEvent) {
|
||||
if (selection.show) {
|
||||
selection.show = false;
|
||||
plot.triggerRedrawOverlay();
|
||||
if (!preventEvent)
|
||||
plot.getPlaceholder().trigger("plotunselected", [ ]);
|
||||
}
|
||||
}
|
||||
|
||||
// function taken from markings support in Flot
|
||||
function extractRange(ranges, coord) {
|
||||
var axis, from, to, key, axes = plot.getAxes();
|
||||
|
||||
for (var k in axes) {
|
||||
axis = axes[k];
|
||||
if (axis.direction == coord) {
|
||||
key = coord + axis.n + "axis";
|
||||
if (!ranges[key] && axis.n == 1)
|
||||
key = coord + "axis"; // support x1axis as xaxis
|
||||
if (ranges[key]) {
|
||||
from = ranges[key].from;
|
||||
to = ranges[key].to;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// backwards-compat stuff - to be removed in future
|
||||
if (!ranges[key]) {
|
||||
axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0];
|
||||
from = ranges[coord + "1"];
|
||||
to = ranges[coord + "2"];
|
||||
}
|
||||
|
||||
// auto-reverse as an added bonus
|
||||
if (from != null && to != null && from > to) {
|
||||
var tmp = from;
|
||||
from = to;
|
||||
to = tmp;
|
||||
}
|
||||
|
||||
return { from: from, to: to, axis: axis };
|
||||
}
|
||||
|
||||
function setSelection(ranges, preventEvent) {
|
||||
var axis, range, o = plot.getOptions();
|
||||
|
||||
if (o.selection.mode == "y") {
|
||||
selection.first.x = 0;
|
||||
selection.second.x = plot.width();
|
||||
}
|
||||
else {
|
||||
range = extractRange(ranges, "x");
|
||||
|
||||
selection.first.x = range.axis.p2c(range.from);
|
||||
selection.second.x = range.axis.p2c(range.to);
|
||||
}
|
||||
|
||||
if (o.selection.mode == "x") {
|
||||
selection.first.y = 0;
|
||||
selection.second.y = plot.height();
|
||||
}
|
||||
else {
|
||||
range = extractRange(ranges, "y");
|
||||
|
||||
selection.first.y = range.axis.p2c(range.from);
|
||||
selection.second.y = range.axis.p2c(range.to);
|
||||
}
|
||||
|
||||
selection.show = true;
|
||||
plot.triggerRedrawOverlay();
|
||||
if (!preventEvent && selectionIsSane())
|
||||
triggerSelectedEvent();
|
||||
}
|
||||
|
||||
function selectionIsSane() {
|
||||
var minSize = 5;
|
||||
return Math.abs(selection.second.x - selection.first.x) >= minSize &&
|
||||
Math.abs(selection.second.y - selection.first.y) >= minSize;
|
||||
}
|
||||
|
||||
plot.clearSelection = clearSelection;
|
||||
plot.setSelection = setSelection;
|
||||
plot.getSelection = getSelection;
|
||||
|
||||
plot.hooks.bindEvents.push(function(plot, eventHolder) {
|
||||
var o = plot.getOptions();
|
||||
if (o.selection.mode != null) {
|
||||
eventHolder.mousemove(onMouseMove);
|
||||
eventHolder.mousedown(onMouseDown);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
plot.hooks.drawOverlay.push(function (plot, ctx) {
|
||||
// draw selection
|
||||
if (selection.show && selectionIsSane()) {
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
var o = plot.getOptions();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(plotOffset.left, plotOffset.top);
|
||||
|
||||
var c = $.color.parse(o.selection.color);
|
||||
|
||||
ctx.strokeStyle = c.scale('a', 0.8).toString();
|
||||
ctx.lineWidth = 1;
|
||||
ctx.lineJoin = "round";
|
||||
ctx.fillStyle = c.scale('a', 0.4).toString();
|
||||
|
||||
var x = Math.min(selection.first.x, selection.second.x),
|
||||
y = Math.min(selection.first.y, selection.second.y),
|
||||
w = Math.abs(selection.second.x - selection.first.x),
|
||||
h = Math.abs(selection.second.y - selection.first.y);
|
||||
|
||||
ctx.fillRect(x, y, w, h);
|
||||
ctx.strokeRect(x, y, w, h);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
});
|
||||
|
||||
plot.hooks.shutdown.push(function (plot, eventHolder) {
|
||||
eventHolder.unbind("mousemove", onMouseMove);
|
||||
eventHolder.unbind("mousedown", onMouseDown);
|
||||
|
||||
if (mouseUpHandler)
|
||||
$(document).unbind("mouseup", mouseUpHandler);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: {
|
||||
selection: {
|
||||
mode: null, // one of null, "x", "y" or "xy"
|
||||
color: "#e8cfac"
|
||||
}
|
||||
},
|
||||
name: 'selection',
|
||||
version: '1.1'
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user