1) {
+ options.series.pie.tilt = 1;
+ } else if (options.series.pie.tilt < 0) {
+ options.series.pie.tilt = 0;
+ }
+ }
+ });
+
+ plot.hooks.bindEvents.push(function(plot, eventHolder) {
+ var options = plot.getOptions();
+ if (options.series.pie.show) {
+ if (options.grid.hoverable) {
+ eventHolder.unbind("mousemove").mousemove(onMouseMove);
+ }
+ if (options.grid.clickable) {
+ eventHolder.unbind("click").click(onClick);
+ }
+ }
+ });
+
+ plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) {
+ var options = plot.getOptions();
+ if (options.series.pie.show) {
+ processDatapoints(plot, series, data, datapoints);
+ }
+ });
+
+ plot.hooks.drawOverlay.push(function(plot, octx) {
+ var options = plot.getOptions();
+ if (options.series.pie.show) {
+ drawOverlay(plot, octx);
+ }
+ });
+
+ plot.hooks.draw.push(function(plot, newCtx) {
+ var options = plot.getOptions();
+ if (options.series.pie.show) {
+ draw(plot, newCtx);
+ }
+ });
+
+ function processDatapoints(plot, series, datapoints) {
+ if (!processed) {
+ processed = true;
+ canvas = plot.getCanvas();
+ target = $(canvas).parent();
+ options = plot.getOptions();
+ plot.setData(combine(plot.getData()));
+ }
+ }
+
+ function combine(data) {
+
+ var total = 0,
+ combined = 0,
+ numCombined = 0,
+ color = options.series.pie.combine.color,
+ newdata = [];
+
+ // Fix up the raw data from Flot, ensuring the data is numeric
+
+ for (var i = 0; i < data.length; ++i) {
+
+ var value = data[i].data;
+
+ // If the data is an array, we'll assume that it's a standard
+ // Flot x-y pair, and are concerned only with the second value.
+
+ // Note how we use the original array, rather than creating a
+ // new one; this is more efficient and preserves any extra data
+ // that the user may have stored in higher indexes.
+
+ if ($.isArray(value) && value.length == 1) {
+ value = value[0];
+ }
+
+ if ($.isArray(value)) {
+ // Equivalent to $.isNumeric() but compatible with jQuery < 1.7
+ if (!isNaN(parseFloat(value[1])) && isFinite(value[1])) {
+ value[1] = +value[1];
+ } else {
+ value[1] = 0;
+ }
+ } else if (!isNaN(parseFloat(value)) && isFinite(value)) {
+ value = [1, +value];
+ } else {
+ value = [1, 0];
+ }
+
+ data[i].data = [value];
+ }
+
+ // Sum up all the slices, so we can calculate percentages for each
+
+ for (var i = 0; i < data.length; ++i) {
+ total += data[i].data[0][1];
+ }
+
+ // Count the number of slices with percentages below the combine
+ // threshold; if it turns out to be just one, we won't combine.
+
+ for (var i = 0; i < data.length; ++i) {
+ var value = data[i].data[0][1];
+ if (value / total <= options.series.pie.combine.threshold) {
+ combined += value;
+ numCombined++;
+ if (!color) {
+ color = data[i].color;
+ }
+ }
+ }
+
+ for (var i = 0; i < data.length; ++i) {
+ var value = data[i].data[0][1];
+ if (numCombined < 2 || value / total > options.series.pie.combine.threshold) {
+ newdata.push(
+ $.extend(data[i], { /* extend to allow keeping all other original data values
+ and using them e.g. in labelFormatter. */
+ data: [[1, value]],
+ color: data[i].color,
+ label: data[i].label,
+ angle: value * Math.PI * 2 / total,
+ percent: value / (total / 100)
+ })
+ );
+ }
+ }
+
+ if (numCombined > 1) {
+ newdata.push({
+ data: [[1, combined]],
+ color: color,
+ label: options.series.pie.combine.label,
+ angle: combined * Math.PI * 2 / total,
+ percent: combined / (total / 100)
+ });
+ }
+
+ return newdata;
+ }
+
+ function draw(plot, newCtx) {
+
+ if (!target) {
+ return; // if no series were passed
+ }
+
+ var canvasWidth = plot.getPlaceholder().width(),
+ canvasHeight = plot.getPlaceholder().height(),
+ legendWidth = target.children().filter(".legend").children().width() || 0;
+
+ ctx = newCtx;
+
+ // WARNING: HACK! REWRITE THIS CODE AS SOON AS POSSIBLE!
+
+ // When combining smaller slices into an 'other' slice, we need to
+ // add a new series. Since Flot gives plugins no way to modify the
+ // list of series, the pie plugin uses a hack where the first call
+ // to processDatapoints results in a call to setData with the new
+ // list of series, then subsequent processDatapoints do nothing.
+
+ // The plugin-global 'processed' flag is used to control this hack;
+ // it starts out false, and is set to true after the first call to
+ // processDatapoints.
+
+ // Unfortunately this turns future setData calls into no-ops; they
+ // call processDatapoints, the flag is true, and nothing happens.
+
+ // To fix this we'll set the flag back to false here in draw, when
+ // all series have been processed, so the next sequence of calls to
+ // processDatapoints once again starts out with a slice-combine.
+ // This is really a hack; in 0.9 we need to give plugins a proper
+ // way to modify series before any processing begins.
+
+ processed = false;
+
+ // calculate maximum radius and center point
+
+ maxRadius = Math.min(canvasWidth, canvasHeight / options.series.pie.tilt) / 2;
+ centerTop = canvasHeight / 2 + options.series.pie.offset.top;
+ centerLeft = canvasWidth / 2;
+
+ if (options.series.pie.offset.left == "auto") {
+ if (options.legend.position.match("w")) {
+ centerLeft += legendWidth / 2;
+ } else {
+ centerLeft -= legendWidth / 2;
+ }
+ if (centerLeft < maxRadius) {
+ centerLeft = maxRadius;
+ } else if (centerLeft > canvasWidth - maxRadius) {
+ centerLeft = canvasWidth - maxRadius;
+ }
+ } else {
+ centerLeft += options.series.pie.offset.left;
+ }
+
+ var slices = plot.getData(),
+ attempts = 0;
+
+ // Keep shrinking the pie's radius until drawPie returns true,
+ // indicating that all the labels fit, or we try too many times.
+
+ do {
+ if (attempts > 0) {
+ maxRadius *= REDRAW_SHRINK;
+ }
+ attempts += 1;
+ clear();
+ if (options.series.pie.tilt <= 0.8) {
+ drawShadow();
+ }
+ } while (!drawPie() && attempts < REDRAW_ATTEMPTS)
+
+ if (attempts >= REDRAW_ATTEMPTS) {
+ clear();
+ target.prepend("Could not draw pie with labels contained inside canvas
");
+ }
+
+ if (plot.setSeries && plot.insertLegend) {
+ plot.setSeries(slices);
+ plot.insertLegend();
+ }
+
+ // we're actually done at this point, just defining internal functions at this point
+
+ function clear() {
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+ target.children().filter(".pieLabel, .pieLabelBackground").remove();
+ }
+
+ function drawShadow() {
+
+ var shadowLeft = options.series.pie.shadow.left;
+ var shadowTop = options.series.pie.shadow.top;
+ var edge = 10;
+ var alpha = options.series.pie.shadow.alpha;
+ var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
+
+ if (radius >= canvasWidth / 2 - shadowLeft || radius * options.series.pie.tilt >= canvasHeight / 2 - shadowTop || radius <= edge) {
+ return; // shadow would be outside canvas, so don't draw it
+ }
+
+ ctx.save();
+ ctx.translate(shadowLeft,shadowTop);
+ ctx.globalAlpha = alpha;
+ ctx.fillStyle = "#000";
+
+ // center and rotate to starting position
+
+ ctx.translate(centerLeft,centerTop);
+ ctx.scale(1, options.series.pie.tilt);
+
+ //radius -= edge;
+
+ for (var i = 1; i <= edge; i++) {
+ ctx.beginPath();
+ ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
+ ctx.fill();
+ radius -= i;
+ }
+
+ ctx.restore();
+ }
+
+ function drawPie() {
+
+ var startAngle = Math.PI * options.series.pie.startAngle;
+ var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
+
+ // center and rotate to starting position
+
+ ctx.save();
+ ctx.translate(centerLeft,centerTop);
+ ctx.scale(1, options.series.pie.tilt);
+ //ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
+
+ // draw slices
+
+ ctx.save();
+ var currentAngle = startAngle;
+ for (var i = 0; i < slices.length; ++i) {
+ slices[i].startAngle = currentAngle;
+ drawSlice(slices[i].angle, slices[i].color, true);
+ }
+ ctx.restore();
+
+ // draw slice outlines
+
+ if (options.series.pie.stroke.width > 0) {
+ ctx.save();
+ ctx.lineWidth = options.series.pie.stroke.width;
+ currentAngle = startAngle;
+ for (var i = 0; i < slices.length; ++i) {
+ drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
+ }
+ ctx.restore();
+ }
+
+ // draw donut hole
+
+ drawDonutHole(ctx);
+
+ ctx.restore();
+
+ // Draw the labels, returning true if they fit within the plot
+
+ if (options.series.pie.label.show) {
+ return drawLabels();
+ } else return true;
+
+ function drawSlice(angle, color, fill) {
+
+ if (angle <= 0 || isNaN(angle)) {
+ return;
+ }
+
+ if (fill) {
+ ctx.fillStyle = color;
+ } else {
+ ctx.strokeStyle = color;
+ ctx.lineJoin = "round";
+ }
+
+ ctx.beginPath();
+ if (Math.abs(angle - Math.PI * 2) > 0.000000001) {
+ ctx.moveTo(0, 0); // Center of the pie
+ }
+
+ //ctx.arc(0, 0, radius, 0, angle, false); // This doesn't work properly in Opera
+ ctx.arc(0, 0, radius,currentAngle, currentAngle + angle / 2, false);
+ ctx.arc(0, 0, radius,currentAngle + angle / 2, currentAngle + angle, false);
+ ctx.closePath();
+ //ctx.rotate(angle); // This doesn't work properly in Opera
+ currentAngle += angle;
+
+ if (fill) {
+ ctx.fill();
+ } else {
+ ctx.stroke();
+ }
+ }
+
+ function drawLabels() {
+
+ var currentAngle = startAngle;
+ var radius = options.series.pie.label.radius > 1 ? options.series.pie.label.radius : maxRadius * options.series.pie.label.radius;
+
+ for (var i = 0; i < slices.length; ++i) {
+ if (slices[i].percent >= options.series.pie.label.threshold * 100) {
+ if (!drawLabel(slices[i], currentAngle, i)) {
+ return false;
+ }
+ }
+ currentAngle += slices[i].angle;
+ }
+
+ return true;
+
+ function drawLabel(slice, startAngle, index) {
+
+ if (slice.data[0][1] == 0) {
+ return true;
+ }
+
+ // format label text
+
+ var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
+
+ if (lf) {
+ text = lf(slice.label, slice);
+ } else {
+ text = slice.label;
+ }
+
+ if (plf) {
+ text = plf(text, slice);
+ }
+
+ var halfAngle = ((startAngle + slice.angle) + startAngle) / 2;
+ var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
+ var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
+
+ var html = "" + text + "";
+ target.append(html);
+
+ var label = target.children("#pieLabel" + index);
+ var labelTop = (y - label.height() / 2);
+ var labelLeft = (x - label.width() / 2);
+
+ label.css("top", labelTop);
+ label.css("left", labelLeft);
+
+ // check to make sure that the label is not outside the canvas
+
+ if (0 - labelTop > 0 || 0 - labelLeft > 0 || canvasHeight - (labelTop + label.height()) < 0 || canvasWidth - (labelLeft + label.width()) < 0) {
+ return false;
+ }
+
+ if (options.series.pie.label.background.opacity != 0) {
+
+ // put in the transparent background separately to avoid blended labels and label boxes
+
+ var c = options.series.pie.label.background.color;
+
+ if (c == null) {
+ c = slice.color;
+ }
+
+ var pos = "top:" + labelTop + "px;left:" + labelLeft + "px;";
+ $("")
+ .css("opacity", options.series.pie.label.background.opacity)
+ .insertBefore(label);
+ }
+
+ return true;
+ } // end individual label function
+ } // end drawLabels function
+ } // end drawPie function
+ } // end draw function
+
+ // Placed here because it needs to be accessed from multiple locations
+
+ function drawDonutHole(layer) {
+ if (options.series.pie.innerRadius > 0) {
+
+ // subtract the center
+
+ layer.save();
+ var innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
+ layer.globalCompositeOperation = "destination-out"; // this does not work with excanvas, but it will fall back to using the stroke color
+ layer.beginPath();
+ layer.fillStyle = options.series.pie.stroke.color;
+ layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
+ layer.fill();
+ layer.closePath();
+ layer.restore();
+
+ // add inner stroke
+
+ layer.save();
+ layer.beginPath();
+ layer.strokeStyle = options.series.pie.stroke.color;
+ layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
+ layer.stroke();
+ layer.closePath();
+ layer.restore();
+
+ // TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
+ }
+ }
+
+ //-- Additional Interactive related functions --
+
+ function isPointInPoly(poly, pt) {
+ for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
+ ((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1]))
+ && (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0])
+ && (c = !c);
+ return c;
+ }
+
+ function findNearbySlice(mouseX, mouseY) {
+
+ var slices = plot.getData(),
+ options = plot.getOptions(),
+ radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius,
+ x, y;
+
+ for (var i = 0; i < slices.length; ++i) {
+
+ var s = slices[i];
+
+ if (s.pie.show) {
+
+ ctx.save();
+ ctx.beginPath();
+ ctx.moveTo(0, 0); // Center of the pie
+ //ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
+ ctx.arc(0, 0, radius, s.startAngle, s.startAngle + s.angle / 2, false);
+ ctx.arc(0, 0, radius, s.startAngle + s.angle / 2, s.startAngle + s.angle, false);
+ ctx.closePath();
+ x = mouseX - centerLeft;
+ y = mouseY - centerTop;
+
+ if (ctx.isPointInPath) {
+ if (ctx.isPointInPath(mouseX - centerLeft, mouseY - centerTop)) {
+ ctx.restore();
+ return {
+ datapoint: [s.percent, s.data],
+ dataIndex: 0,
+ series: s,
+ seriesIndex: i
+ };
+ }
+ } else {
+
+ // excanvas for IE doesn;t support isPointInPath, this is a workaround.
+
+ var p1X = radius * Math.cos(s.startAngle),
+ p1Y = radius * Math.sin(s.startAngle),
+ p2X = radius * Math.cos(s.startAngle + s.angle / 4),
+ p2Y = radius * Math.sin(s.startAngle + s.angle / 4),
+ p3X = radius * Math.cos(s.startAngle + s.angle / 2),
+ p3Y = radius * Math.sin(s.startAngle + s.angle / 2),
+ p4X = radius * Math.cos(s.startAngle + s.angle / 1.5),
+ p4Y = radius * Math.sin(s.startAngle + s.angle / 1.5),
+ p5X = radius * Math.cos(s.startAngle + s.angle),
+ p5Y = radius * Math.sin(s.startAngle + s.angle),
+ arrPoly = [[0, 0], [p1X, p1Y], [p2X, p2Y], [p3X, p3Y], [p4X, p4Y], [p5X, p5Y]],
+ arrPoint = [x, y];
+
+ // TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
+
+ if (isPointInPoly(arrPoly, arrPoint)) {
+ ctx.restore();
+ return {
+ datapoint: [s.percent, s.data],
+ dataIndex: 0,
+ series: s,
+ seriesIndex: i
+ };
+ }
+ }
+
+ ctx.restore();
+ }
+ }
+
+ return null;
+ }
+
+ function onMouseMove(e) {
+ triggerClickHoverEvent("plothover", e);
+ }
+
+ function onClick(e) {
+ triggerClickHoverEvent("plotclick", e);
+ }
+
+ // trigger click or hover event (they send the same parameters so we share their code)
+
+ function triggerClickHoverEvent(eventname, e) {
+
+ var offset = plot.offset();
+ var canvasX = parseInt(e.pageX - offset.left);
+ var canvasY = parseInt(e.pageY - offset.top);
+ var item = findNearbySlice(canvasX, canvasY);
+
+ if (options.grid.autoHighlight) {
+
+ // clear auto-highlights
+
+ for (var i = 0; i < highlights.length; ++i) {
+ var h = highlights[i];
+ if (h.auto == eventname && !(item && h.series == item.series)) {
+ unhighlight(h.series);
+ }
+ }
+ }
+
+ // highlight the slice
+
+ if (item) {
+ highlight(item.series, eventname);
+ }
+
+ // trigger any hover bind events
+
+ var pos = { pageX: e.pageX, pageY: e.pageY };
+ target.trigger(eventname, [pos, item]);
+ }
+
+ function highlight(s, auto) {
+ //if (typeof s == "number") {
+ // s = series[s];
+ //}
+
+ var i = indexOfHighlight(s);
+
+ if (i == -1) {
+ highlights.push({ series: s, auto: auto });
+ plot.triggerRedrawOverlay();
+ } else if (!auto) {
+ highlights[i].auto = false;
+ }
+ }
+
+ function unhighlight(s) {
+ if (s == null) {
+ highlights = [];
+ plot.triggerRedrawOverlay();
+ }
+
+ //if (typeof s == "number") {
+ // s = series[s];
+ //}
+
+ var i = indexOfHighlight(s);
+
+ if (i != -1) {
+ highlights.splice(i, 1);
+ plot.triggerRedrawOverlay();
+ }
+ }
+
+ function indexOfHighlight(s) {
+ for (var i = 0; i < highlights.length; ++i) {
+ var h = highlights[i];
+ if (h.series == s)
+ return i;
+ }
+ return -1;
+ }
+
+ function drawOverlay(plot, octx) {
+
+ var options = plot.getOptions();
+
+ var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
+
+ octx.save();
+ octx.translate(centerLeft, centerTop);
+ octx.scale(1, options.series.pie.tilt);
+
+ for (var i = 0; i < highlights.length; ++i) {
+ drawHighlight(highlights[i].series);
+ }
+
+ drawDonutHole(octx);
+
+ octx.restore();
+
+ function drawHighlight(series) {
+
+ if (series.angle <= 0 || isNaN(series.angle)) {
+ return;
+ }
+
+ //octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
+ octx.fillStyle = "rgba(255, 255, 255, " + options.series.pie.highlight.opacity + ")"; // this is temporary until we have access to parseColor
+ octx.beginPath();
+ if (Math.abs(series.angle - Math.PI * 2) > 0.000000001) {
+ octx.moveTo(0, 0); // Center of the pie
+ }
+ octx.arc(0, 0, radius, series.startAngle, series.startAngle + series.angle / 2, false);
+ octx.arc(0, 0, radius, series.startAngle + series.angle / 2, series.startAngle + series.angle, false);
+ octx.closePath();
+ octx.fill();
+ }
+ }
+ } // end init (plugin body)
+
+ // define pie specific options and their default values
+
+ var options = {
+ series: {
+ pie: {
+ show: false,
+ radius: "auto", // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
+ innerRadius: 0, /* for donut */
+ startAngle: 3/2,
+ tilt: 1,
+ shadow: {
+ left: 5, // shadow left offset
+ top: 15, // shadow top offset
+ alpha: 0.02 // shadow alpha
+ },
+ offset: {
+ top: 0,
+ left: "auto"
+ },
+ stroke: {
+ color: "#fff",
+ width: 1
+ },
+ label: {
+ show: "auto",
+ formatter: function(label, slice) {
+ return "" + label + "
" + Math.round(slice.percent) + "%
";
+ }, // formatter function
+ radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
+ background: {
+ color: null,
+ opacity: 0
+ },
+ threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
+ },
+ combine: {
+ threshold: -1, // percentage at which to combine little slices into one larger slice
+ color: null, // color to give the new slice (auto-generated if null)
+ label: "Other" // label to give the new slice
+ },
+ highlight: {
+ //color: "#fff", // will add this functionality once parseColor is available
+ opacity: 0.5
+ }
+ }
+ }
+ };
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: "pie",
+ version: "1.1"
+ });
+
+})(jQuery);
diff --git a/hledger-web/static/js/jquery.flot.pie.min.js b/hledger-web/static/js/jquery.flot.pie.min.js
new file mode 100644
index 000000000..9bc488b15
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.pie.min.js
@@ -0,0 +1,7 @@
+/* Javascript plotting library for jQuery, version 0.8.3.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+*/
+(function($){var REDRAW_ATTEMPTS=10;var REDRAW_SHRINK=.95;function init(plot){var canvas=null,target=null,options=null,maxRadius=null,centerLeft=null,centerTop=null,processed=false,ctx=null;var highlights=[];plot.hooks.processOptions.push(function(plot,options){if(options.series.pie.show){options.grid.show=false;if(options.series.pie.label.show=="auto"){if(options.legend.show){options.series.pie.label.show=false}else{options.series.pie.label.show=true}}if(options.series.pie.radius=="auto"){if(options.series.pie.label.show){options.series.pie.radius=3/4}else{options.series.pie.radius=1}}if(options.series.pie.tilt>1){options.series.pie.tilt=1}else if(options.series.pie.tilt<0){options.series.pie.tilt=0}}});plot.hooks.bindEvents.push(function(plot,eventHolder){var options=plot.getOptions();if(options.series.pie.show){if(options.grid.hoverable){eventHolder.unbind("mousemove").mousemove(onMouseMove)}if(options.grid.clickable){eventHolder.unbind("click").click(onClick)}}});plot.hooks.processDatapoints.push(function(plot,series,data,datapoints){var options=plot.getOptions();if(options.series.pie.show){processDatapoints(plot,series,data,datapoints)}});plot.hooks.drawOverlay.push(function(plot,octx){var options=plot.getOptions();if(options.series.pie.show){drawOverlay(plot,octx)}});plot.hooks.draw.push(function(plot,newCtx){var options=plot.getOptions();if(options.series.pie.show){draw(plot,newCtx)}});function processDatapoints(plot,series,datapoints){if(!processed){processed=true;canvas=plot.getCanvas();target=$(canvas).parent();options=plot.getOptions();plot.setData(combine(plot.getData()))}}function combine(data){var total=0,combined=0,numCombined=0,color=options.series.pie.combine.color,newdata=[];for(var i=0;ioptions.series.pie.combine.threshold){newdata.push($.extend(data[i],{data:[[1,value]],color:data[i].color,label:data[i].label,angle:value*Math.PI*2/total,percent:value/(total/100)}))}}if(numCombined>1){newdata.push({data:[[1,combined]],color:color,label:options.series.pie.combine.label,angle:combined*Math.PI*2/total,percent:combined/(total/100)})}return newdata}function draw(plot,newCtx){if(!target){return}var canvasWidth=plot.getPlaceholder().width(),canvasHeight=plot.getPlaceholder().height(),legendWidth=target.children().filter(".legend").children().width()||0;ctx=newCtx;processed=false;maxRadius=Math.min(canvasWidth,canvasHeight/options.series.pie.tilt)/2;centerTop=canvasHeight/2+options.series.pie.offset.top;centerLeft=canvasWidth/2;if(options.series.pie.offset.left=="auto"){if(options.legend.position.match("w")){centerLeft+=legendWidth/2}else{centerLeft-=legendWidth/2}if(centerLeftcanvasWidth-maxRadius){centerLeft=canvasWidth-maxRadius}}else{centerLeft+=options.series.pie.offset.left}var slices=plot.getData(),attempts=0;do{if(attempts>0){maxRadius*=REDRAW_SHRINK}attempts+=1;clear();if(options.series.pie.tilt<=.8){drawShadow()}}while(!drawPie()&&attempts=REDRAW_ATTEMPTS){clear();target.prepend("Could not draw pie with labels contained inside canvas
")}if(plot.setSeries&&plot.insertLegend){plot.setSeries(slices);plot.insertLegend()}function clear(){ctx.clearRect(0,0,canvasWidth,canvasHeight);target.children().filter(".pieLabel, .pieLabelBackground").remove()}function drawShadow(){var shadowLeft=options.series.pie.shadow.left;var shadowTop=options.series.pie.shadow.top;var edge=10;var alpha=options.series.pie.shadow.alpha;var radius=options.series.pie.radius>1?options.series.pie.radius:maxRadius*options.series.pie.radius;if(radius>=canvasWidth/2-shadowLeft||radius*options.series.pie.tilt>=canvasHeight/2-shadowTop||radius<=edge){return}ctx.save();ctx.translate(shadowLeft,shadowTop);ctx.globalAlpha=alpha;ctx.fillStyle="#000";ctx.translate(centerLeft,centerTop);ctx.scale(1,options.series.pie.tilt);for(var i=1;i<=edge;i++){ctx.beginPath();ctx.arc(0,0,radius,0,Math.PI*2,false);ctx.fill();radius-=i}ctx.restore()}function drawPie(){var startAngle=Math.PI*options.series.pie.startAngle;var radius=options.series.pie.radius>1?options.series.pie.radius:maxRadius*options.series.pie.radius;ctx.save();ctx.translate(centerLeft,centerTop);ctx.scale(1,options.series.pie.tilt);ctx.save();var currentAngle=startAngle;for(var i=0;i0){ctx.save();ctx.lineWidth=options.series.pie.stroke.width;currentAngle=startAngle;for(var i=0;i1e-9){ctx.moveTo(0,0)}ctx.arc(0,0,radius,currentAngle,currentAngle+angle/2,false);ctx.arc(0,0,radius,currentAngle+angle/2,currentAngle+angle,false);ctx.closePath();currentAngle+=angle;if(fill){ctx.fill()}else{ctx.stroke()}}function drawLabels(){var currentAngle=startAngle;var radius=options.series.pie.label.radius>1?options.series.pie.label.radius:maxRadius*options.series.pie.label.radius;for(var i=0;i=options.series.pie.label.threshold*100){if(!drawLabel(slices[i],currentAngle,i)){return false}}currentAngle+=slices[i].angle}return true;function drawLabel(slice,startAngle,index){if(slice.data[0][1]==0){return true}var lf=options.legend.labelFormatter,text,plf=options.series.pie.label.formatter;if(lf){text=lf(slice.label,slice)}else{text=slice.label}if(plf){text=plf(text,slice)}var halfAngle=(startAngle+slice.angle+startAngle)/2;var x=centerLeft+Math.round(Math.cos(halfAngle)*radius);var y=centerTop+Math.round(Math.sin(halfAngle)*radius)*options.series.pie.tilt;var html=""+text+"";target.append(html);var label=target.children("#pieLabel"+index);var labelTop=y-label.height()/2;var labelLeft=x-label.width()/2;label.css("top",labelTop);label.css("left",labelLeft);if(0-labelTop>0||0-labelLeft>0||canvasHeight-(labelTop+label.height())<0||canvasWidth-(labelLeft+label.width())<0){return false}if(options.series.pie.label.background.opacity!=0){var c=options.series.pie.label.background.color;if(c==null){c=slice.color}var pos="top:"+labelTop+"px;left:"+labelLeft+"px;";$("").css("opacity",options.series.pie.label.background.opacity).insertBefore(label)}return true}}}}function drawDonutHole(layer){if(options.series.pie.innerRadius>0){layer.save();var innerRadius=options.series.pie.innerRadius>1?options.series.pie.innerRadius:maxRadius*options.series.pie.innerRadius;layer.globalCompositeOperation="destination-out";layer.beginPath();layer.fillStyle=options.series.pie.stroke.color;layer.arc(0,0,innerRadius,0,Math.PI*2,false);layer.fill();layer.closePath();layer.restore();layer.save();layer.beginPath();layer.strokeStyle=options.series.pie.stroke.color;layer.arc(0,0,innerRadius,0,Math.PI*2,false);layer.stroke();layer.closePath();layer.restore()}}function isPointInPoly(poly,pt){for(var c=false,i=-1,l=poly.length,j=l-1;++i1?options.series.pie.radius:maxRadius*options.series.pie.radius,x,y;for(var i=0;i1?options.series.pie.radius:maxRadius*options.series.pie.radius;octx.save();octx.translate(centerLeft,centerTop);octx.scale(1,options.series.pie.tilt);for(var i=0;i1e-9){octx.moveTo(0,0)}octx.arc(0,0,radius,series.startAngle,series.startAngle+series.angle/2,false);octx.arc(0,0,radius,series.startAngle+series.angle/2,series.startAngle+series.angle,false);octx.closePath();octx.fill()}}}var options={series:{pie:{show:false,radius:"auto",innerRadius:0,startAngle:3/2,tilt:1,shadow:{left:5,top:15,alpha:.02},offset:{top:0,left:"auto"},stroke:{color:"#fff",width:1},label:{show:"auto",formatter:function(label,slice){return""+label+"
"+Math.round(slice.percent)+"%
"},radius:1,background:{color:null,opacity:0},threshold:0},combine:{threshold:-1,color:null,label:"Other"},highlight:{opacity:.5}}}};$.plot.plugins.push({init:init,options:options,name:"pie",version:"1.1"})})(jQuery);
\ No newline at end of file
diff --git a/hledger-web/static/js/jquery.flot.resize.js b/hledger-web/static/js/jquery.flot.resize.js
new file mode 100644
index 000000000..8a626dda0
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.resize.js
@@ -0,0 +1,59 @@
+/* Flot plugin for automatically redrawing plots as the placeholder resizes.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+It works by listening for changes on the placeholder div (through the jQuery
+resize event plugin) - if the size changes, it will redraw the plot.
+
+There are no options. If you need to disable the plugin for some plots, you
+can just fix the size of their placeholders.
+
+*/
+
+/* Inline dependency:
+ * jQuery resize event - v1.1 - 3/14/2010
+ * http://benalman.com/projects/jquery-resize-plugin/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($,e,t){"$:nomunge";var i=[],n=$.resize=$.extend($.resize,{}),a,r=false,s="setTimeout",u="resize",m=u+"-special-event",o="pendingDelay",l="activeDelay",f="throttleWindow";n[o]=200;n[l]=20;n[f]=true;$.event.special[u]={setup:function(){if(!n[f]&&this[s]){return false}var e=$(this);i.push(this);e.data(m,{w:e.width(),h:e.height()});if(i.length===1){a=t;h()}},teardown:function(){if(!n[f]&&this[s]){return false}var e=$(this);for(var t=i.length-1;t>=0;t--){if(i[t]==this){i.splice(t,1);break}}e.removeData(m);if(!i.length){if(r){cancelAnimationFrame(a)}else{clearTimeout(a)}a=null}},add:function(e){if(!n[f]&&this[s]){return false}var i;function a(e,n,a){var r=$(this),s=r.data(m)||{};s.w=n!==t?n:r.width();s.h=a!==t?a:r.height();i.apply(this,arguments)}if($.isFunction(e)){i=e;return a}else{i=e.handler;e.handler=a}}};function h(t){if(r===true){r=t||1}for(var s=i.length-1;s>=0;s--){var l=$(i[s]);if(l[0]==e||l.is(":visible")){var f=l.width(),c=l.height(),d=l.data(m);if(d&&(f!==d.w||c!==d.h)){l.trigger(u,[d.w=f,d.h=c]);r=t||true}}else{d=l.data(m);d.w=0;d.h=0}}if(a!==null){if(r&&(t==null||t-r<1e3)){a=e.requestAnimationFrame(h)}else{a=setTimeout(h,n[o]);r=false}}}if(!e.requestAnimationFrame){e.requestAnimationFrame=function(){return e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t,i){return e.setTimeout(function(){t((new Date).getTime())},n[l])}}()}if(!e.cancelAnimationFrame){e.cancelAnimationFrame=function(){return e.webkitCancelRequestAnimationFrame||e.mozCancelRequestAnimationFrame||e.oCancelRequestAnimationFrame||e.msCancelRequestAnimationFrame||clearTimeout}()}})(jQuery,this);
+
+(function ($) {
+ var options = { }; // no options
+
+ function init(plot) {
+ function onResize() {
+ var placeholder = plot.getPlaceholder();
+
+ // somebody might have hidden us and we can't plot
+ // when we don't have the dimensions
+ if (placeholder.width() == 0 || placeholder.height() == 0)
+ return;
+
+ plot.resize();
+ plot.setupGrid();
+ plot.draw();
+ }
+
+ function bindEvents(plot, eventHolder) {
+ plot.getPlaceholder().resize(onResize);
+ }
+
+ function shutdown(plot, eventHolder) {
+ plot.getPlaceholder().unbind("resize", onResize);
+ }
+
+ plot.hooks.bindEvents.push(bindEvents);
+ plot.hooks.shutdown.push(shutdown);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'resize',
+ version: '1.0'
+ });
+})(jQuery);
diff --git a/hledger-web/static/js/jquery.flot.resize.min.js b/hledger-web/static/js/jquery.flot.resize.min.js
new file mode 100644
index 000000000..7e92aa681
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.resize.min.js
@@ -0,0 +1,7 @@
+/* Javascript plotting library for jQuery, version 0.8.3.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+*/
+(function($,e,t){"$:nomunge";var i=[],n=$.resize=$.extend($.resize,{}),a,r=false,s="setTimeout",u="resize",m=u+"-special-event",o="pendingDelay",l="activeDelay",f="throttleWindow";n[o]=200;n[l]=20;n[f]=true;$.event.special[u]={setup:function(){if(!n[f]&&this[s]){return false}var e=$(this);i.push(this);e.data(m,{w:e.width(),h:e.height()});if(i.length===1){a=t;h()}},teardown:function(){if(!n[f]&&this[s]){return false}var e=$(this);for(var t=i.length-1;t>=0;t--){if(i[t]==this){i.splice(t,1);break}}e.removeData(m);if(!i.length){if(r){cancelAnimationFrame(a)}else{clearTimeout(a)}a=null}},add:function(e){if(!n[f]&&this[s]){return false}var i;function a(e,n,a){var r=$(this),s=r.data(m)||{};s.w=n!==t?n:r.width();s.h=a!==t?a:r.height();i.apply(this,arguments)}if($.isFunction(e)){i=e;return a}else{i=e.handler;e.handler=a}}};function h(t){if(r===true){r=t||1}for(var s=i.length-1;s>=0;s--){var l=$(i[s]);if(l[0]==e||l.is(":visible")){var f=l.width(),c=l.height(),d=l.data(m);if(d&&(f!==d.w||c!==d.h)){l.trigger(u,[d.w=f,d.h=c]);r=t||true}}else{d=l.data(m);d.w=0;d.h=0}}if(a!==null){if(r&&(t==null||t-r<1e3)){a=e.requestAnimationFrame(h)}else{a=setTimeout(h,n[o]);r=false}}}if(!e.requestAnimationFrame){e.requestAnimationFrame=function(){return e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t,i){return e.setTimeout(function(){t((new Date).getTime())},n[l])}}()}if(!e.cancelAnimationFrame){e.cancelAnimationFrame=function(){return e.webkitCancelRequestAnimationFrame||e.mozCancelRequestAnimationFrame||e.oCancelRequestAnimationFrame||e.msCancelRequestAnimationFrame||clearTimeout}()}})(jQuery,this);(function($){var options={};function init(plot){function onResize(){var placeholder=plot.getPlaceholder();if(placeholder.width()==0||placeholder.height()==0)return;plot.resize();plot.setupGrid();plot.draw()}function bindEvents(plot,eventHolder){plot.getPlaceholder().resize(onResize)}function shutdown(plot,eventHolder){plot.getPlaceholder().unbind("resize",onResize)}plot.hooks.bindEvents.push(bindEvents);plot.hooks.shutdown.push(shutdown)}$.plot.plugins.push({init:init,options:options,name:"resize",version:"1.0"})})(jQuery);
\ No newline at end of file
diff --git a/hledger-web/static/js/jquery.flot.selection.js b/hledger-web/static/js/jquery.flot.selection.js
new file mode 100644
index 000000000..d3c20fa4e
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.selection.js
@@ -0,0 +1,360 @@
+/* Flot plugin for selecting regions of a plot.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin supports these options:
+
+selection: {
+ mode: null or "x" or "y" or "xy",
+ color: color,
+ shape: "round" or "miter" or "bevel",
+ minSize: number of pixels
+}
+
+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). "shape"
+is the shape of the corners of the selection.
+
+"minSize" is the minimum size a selection can be in pixels. This value can
+be customized to determine the smallest size a selection can be and still
+have the selection rectangle be displayed. When customizing this value, the
+fact that it refers to pixels, not axis units must be taken into account.
+Thus, for example, if there is a bar graph in time mode with BarWidth set to 1
+minute, setting "minSize" to 1 will not make the minimum selection size 1
+minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent
+"plotunselected" events from being fired when the user clicks the mouse without
+dragging.
+
+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. As stated above, setting "minSize" to 0 will
+destroy this behavior.
+
+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;
+
+ if (!selection.show) 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 = plot.getOptions().selection.minSize;
+ 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 = o.selection.shape;
+ ctx.fillStyle = c.scale('a', 0.4).toString();
+
+ var x = Math.min(selection.first.x, selection.second.x) + 0.5,
+ y = Math.min(selection.first.y, selection.second.y) + 0.5,
+ w = Math.abs(selection.second.x - selection.first.x) - 1,
+ h = Math.abs(selection.second.y - selection.first.y) - 1;
+
+ 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",
+ shape: "round", // one of "round", "miter", or "bevel"
+ minSize: 5 // minimum number of pixels
+ }
+ },
+ name: 'selection',
+ version: '1.1'
+ });
+})(jQuery);
diff --git a/hledger-web/static/js/jquery.flot.selection.min.js b/hledger-web/static/js/jquery.flot.selection.min.js
new file mode 100644
index 000000000..a0154fbc5
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.selection.min.js
@@ -0,0 +1,7 @@
+/* Javascript plotting library for jQuery, version 0.8.3.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+*/
+(function($){function init(plot){var selection={first:{x:-1,y:-1},second:{x:-1,y:-1},show:false,active:false};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)return;document.body.focus();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;mouseUpHandler=function(e){onMouseUp(e)};$(document).one("mouseup",mouseUpHandler)}function onMouseUp(e){mouseUpHandler=null;if(document.onselectstart!==undefined)document.onselectstart=savedhandlers.onselectstart;if(document.ondrag!==undefined)document.ondrag=savedhandlers.ondrag;selection.active=false;updateSelection(e);if(selectionIsSane())triggerSelectedEvent();else{plot.getPlaceholder().trigger("plotunselected",[]);plot.getPlaceholder().trigger("plotselecting",[null])}return false}function getSelection(){if(!selectionIsSane())return null;if(!selection.show)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]);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 valuemax?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 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";if(ranges[key]){from=ranges[key].from;to=ranges[key].to;break}}}if(!ranges[key]){axis=coord=="x"?plot.getXAxes()[0]:plot.getYAxes()[0];from=ranges[coord+"1"];to=ranges[coord+"2"]}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=plot.getOptions().selection.minSize;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){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",.8).toString();ctx.lineWidth=1;ctx.lineJoin=o.selection.shape;ctx.fillStyle=c.scale("a",.4).toString();var x=Math.min(selection.first.x,selection.second.x)+.5,y=Math.min(selection.first.y,selection.second.y)+.5,w=Math.abs(selection.second.x-selection.first.x)-1,h=Math.abs(selection.second.y-selection.first.y)-1;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,color:"#e8cfac",shape:"round",minSize:5}},name:"selection",version:"1.1"})})(jQuery);
\ No newline at end of file
diff --git a/hledger-web/static/js/jquery.flot.stack.js b/hledger-web/static/js/jquery.flot.stack.js
new file mode 100644
index 000000000..e75a7dfc0
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.stack.js
@@ -0,0 +1,188 @@
+/* Flot plugin for stacking data sets rather than overlyaing them.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin assumes the data is sorted on x (or y if stacking horizontally).
+For line charts, it is assumed that if a line has an undefined gap (from a
+null point), then the line above it should have the same gap - insert zeros
+instead of "null" if you want another behaviour. This also holds for the start
+and end of the chart. Note that stacking a mix of positive and negative values
+in most instances doesn't make sense (so it looks weird).
+
+Two or more series are stacked when their "stack" attribute is set to the same
+key (which can be any number or string or just "true"). To specify the default
+stack, you can set the stack option like this:
+
+ series: {
+ stack: null/false, true, or a key (number/string)
+ }
+
+You can also specify it for a single series, like this:
+
+ $.plot( $("#placeholder"), [{
+ data: [ ... ],
+ stack: true
+ }])
+
+The stacking order is determined by the order of the data series in the array
+(later series end up on top of the previous).
+
+Internally, the plugin modifies the datapoints in each series, adding an
+offset to the y value. For line series, extra data points are inserted through
+interpolation. If there's a second y value, it's also adjusted (e.g for bar
+charts or filled areas).
+
+*/
+
+(function ($) {
+ var options = {
+ series: { stack: null } // or number/string
+ };
+
+ function init(plot) {
+ function findMatchingSeries(s, allseries) {
+ var res = null;
+ for (var i = 0; i < allseries.length; ++i) {
+ if (s == allseries[i])
+ break;
+
+ if (allseries[i].stack == s.stack)
+ res = allseries[i];
+ }
+
+ return res;
+ }
+
+ function stackData(plot, s, datapoints) {
+ if (s.stack == null || s.stack === false)
+ return;
+
+ var other = findMatchingSeries(s, plot.getData());
+ if (!other)
+ return;
+
+ var ps = datapoints.pointsize,
+ points = datapoints.points,
+ otherps = other.datapoints.pointsize,
+ otherpoints = other.datapoints.points,
+ newpoints = [],
+ px, py, intery, qx, qy, bottom,
+ withlines = s.lines.show,
+ horizontal = s.bars.horizontal,
+ withbottom = ps > 2 && (horizontal ? datapoints.format[2].x : datapoints.format[2].y),
+ withsteps = withlines && s.lines.steps,
+ fromgap = true,
+ keyOffset = horizontal ? 1 : 0,
+ accumulateOffset = horizontal ? 0 : 1,
+ i = 0, j = 0, l, m;
+
+ while (true) {
+ if (i >= points.length)
+ break;
+
+ l = newpoints.length;
+
+ if (points[i] == null) {
+ // copy gaps
+ for (m = 0; m < ps; ++m)
+ newpoints.push(points[i + m]);
+ i += ps;
+ }
+ else if (j >= otherpoints.length) {
+ // for lines, we can't use the rest of the points
+ if (!withlines) {
+ for (m = 0; m < ps; ++m)
+ newpoints.push(points[i + m]);
+ }
+ i += ps;
+ }
+ else if (otherpoints[j] == null) {
+ // oops, got a gap
+ for (m = 0; m < ps; ++m)
+ newpoints.push(null);
+ fromgap = true;
+ j += otherps;
+ }
+ else {
+ // cases where we actually got two points
+ px = points[i + keyOffset];
+ py = points[i + accumulateOffset];
+ qx = otherpoints[j + keyOffset];
+ qy = otherpoints[j + accumulateOffset];
+ bottom = 0;
+
+ if (px == qx) {
+ for (m = 0; m < ps; ++m)
+ newpoints.push(points[i + m]);
+
+ newpoints[l + accumulateOffset] += qy;
+ bottom = qy;
+
+ i += ps;
+ j += otherps;
+ }
+ else if (px > qx) {
+ // we got past point below, might need to
+ // insert interpolated extra point
+ if (withlines && i > 0 && points[i - ps] != null) {
+ intery = py + (points[i - ps + accumulateOffset] - py) * (qx - px) / (points[i - ps + keyOffset] - px);
+ newpoints.push(qx);
+ newpoints.push(intery + qy);
+ for (m = 2; m < ps; ++m)
+ newpoints.push(points[i + m]);
+ bottom = qy;
+ }
+
+ j += otherps;
+ }
+ else { // px < qx
+ if (fromgap && withlines) {
+ // if we come from a gap, we just skip this point
+ i += ps;
+ continue;
+ }
+
+ for (m = 0; m < ps; ++m)
+ newpoints.push(points[i + m]);
+
+ // we might be able to interpolate a point below,
+ // this can give us a better y
+ if (withlines && j > 0 && otherpoints[j - otherps] != null)
+ bottom = qy + (otherpoints[j - otherps + accumulateOffset] - qy) * (px - qx) / (otherpoints[j - otherps + keyOffset] - qx);
+
+ newpoints[l + accumulateOffset] += bottom;
+
+ i += ps;
+ }
+
+ fromgap = false;
+
+ if (l != newpoints.length && withbottom)
+ newpoints[l + 2] += bottom;
+ }
+
+ // maintain the line steps invariant
+ if (withsteps && l != newpoints.length && l > 0
+ && newpoints[l] != null
+ && newpoints[l] != newpoints[l - ps]
+ && newpoints[l + 1] != newpoints[l - ps + 1]) {
+ for (m = 0; m < ps; ++m)
+ newpoints[l + ps + m] = newpoints[l + m];
+ newpoints[l + 1] = newpoints[l - ps + 1];
+ }
+ }
+
+ datapoints.points = newpoints;
+ }
+
+ plot.hooks.processDatapoints.push(stackData);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'stack',
+ version: '1.2'
+ });
+})(jQuery);
diff --git a/hledger-web/static/js/jquery.flot.stack.min.js b/hledger-web/static/js/jquery.flot.stack.min.js
new file mode 100644
index 000000000..920764f5e
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.stack.min.js
@@ -0,0 +1,7 @@
+/* Javascript plotting library for jQuery, version 0.8.3.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+*/
+(function($){var options={series:{stack:null}};function init(plot){function findMatchingSeries(s,allseries){var res=null;for(var i=0;i2&&(horizontal?datapoints.format[2].x:datapoints.format[2].y),withsteps=withlines&&s.lines.steps,fromgap=true,keyOffset=horizontal?1:0,accumulateOffset=horizontal?0:1,i=0,j=0,l,m;while(true){if(i>=points.length)break;l=newpoints.length;if(points[i]==null){for(m=0;m=otherpoints.length){if(!withlines){for(m=0;mqx){if(withlines&&i>0&&points[i-ps]!=null){intery=py+(points[i-ps+accumulateOffset]-py)*(qx-px)/(points[i-ps+keyOffset]-px);newpoints.push(qx);newpoints.push(intery+qy);for(m=2;m0&&otherpoints[j-otherps]!=null)bottom=qy+(otherpoints[j-otherps+accumulateOffset]-qy)*(px-qx)/(otherpoints[j-otherps+keyOffset]-qx);newpoints[l+accumulateOffset]+=bottom;i+=ps}fromgap=false;if(l!=newpoints.length&&withbottom)newpoints[l+2]+=bottom}if(withsteps&&l!=newpoints.length&&l>0&&newpoints[l]!=null&&newpoints[l]!=newpoints[l-ps]&&newpoints[l+1]!=newpoints[l-ps+1]){for(m=0;m s = r * sqrt(pi)/2
+ var size = radius * Math.sqrt(Math.PI) / 2;
+ ctx.rect(x - size, y - size, size + size, size + size);
+ },
+ diamond: function (ctx, x, y, radius, shadow) {
+ // pi * r^2 = 2s^2 => s = r * sqrt(pi/2)
+ var size = radius * Math.sqrt(Math.PI / 2);
+ ctx.moveTo(x - size, y);
+ ctx.lineTo(x, y - size);
+ ctx.lineTo(x + size, y);
+ ctx.lineTo(x, y + size);
+ ctx.lineTo(x - size, y);
+ },
+ triangle: function (ctx, x, y, radius, shadow) {
+ // pi * r^2 = 1/2 * s^2 * sin (pi / 3) => s = r * sqrt(2 * pi / sin(pi / 3))
+ var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
+ var height = size * Math.sin(Math.PI / 3);
+ ctx.moveTo(x - size/2, y + height/2);
+ ctx.lineTo(x + size/2, y + height/2);
+ if (!shadow) {
+ ctx.lineTo(x, y - height/2);
+ ctx.lineTo(x - size/2, y + height/2);
+ }
+ },
+ cross: function (ctx, x, y, radius, shadow) {
+ // pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
+ var size = radius * Math.sqrt(Math.PI) / 2;
+ ctx.moveTo(x - size, y - size);
+ ctx.lineTo(x + size, y + size);
+ ctx.moveTo(x - size, y + size);
+ ctx.lineTo(x + size, y - size);
+ }
+ };
+
+ var s = series.points.symbol;
+ if (handlers[s])
+ series.points.symbol = handlers[s];
+ }
+
+ function init(plot) {
+ plot.hooks.processDatapoints.push(processRawData);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ name: 'symbols',
+ version: '1.0'
+ });
+})(jQuery);
diff --git a/hledger-web/static/js/jquery.flot.symbol.min.js b/hledger-web/static/js/jquery.flot.symbol.min.js
new file mode 100644
index 000000000..f4a343013
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.symbol.min.js
@@ -0,0 +1,7 @@
+/* Javascript plotting library for jQuery, version 0.8.3.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+*/
+(function($){function processRawData(plot,series,datapoints){var handlers={square:function(ctx,x,y,radius,shadow){var size=radius*Math.sqrt(Math.PI)/2;ctx.rect(x-size,y-size,size+size,size+size)},diamond:function(ctx,x,y,radius,shadow){var size=radius*Math.sqrt(Math.PI/2);ctx.moveTo(x-size,y);ctx.lineTo(x,y-size);ctx.lineTo(x+size,y);ctx.lineTo(x,y+size);ctx.lineTo(x-size,y)},triangle:function(ctx,x,y,radius,shadow){var size=radius*Math.sqrt(2*Math.PI/Math.sin(Math.PI/3));var height=size*Math.sin(Math.PI/3);ctx.moveTo(x-size/2,y+height/2);ctx.lineTo(x+size/2,y+height/2);if(!shadow){ctx.lineTo(x,y-height/2);ctx.lineTo(x-size/2,y+height/2)}},cross:function(ctx,x,y,radius,shadow){var size=radius*Math.sqrt(Math.PI)/2;ctx.moveTo(x-size,y-size);ctx.lineTo(x+size,y+size);ctx.moveTo(x-size,y+size);ctx.lineTo(x+size,y-size)}};var s=series.points.symbol;if(handlers[s])series.points.symbol=handlers[s]}function init(plot){plot.hooks.processDatapoints.push(processRawData)}$.plot.plugins.push({init:init,name:"symbols",version:"1.0"})})(jQuery);
\ No newline at end of file
diff --git a/hledger-web/static/js/jquery.flot.threshold.js b/hledger-web/static/js/jquery.flot.threshold.js
new file mode 100644
index 000000000..8c99c401d
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.threshold.js
@@ -0,0 +1,142 @@
+/* Flot plugin for thresholding data.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin supports these options:
+
+ series: {
+ threshold: {
+ below: number
+ color: colorspec
+ }
+ }
+
+It can also be applied to a single series, like this:
+
+ $.plot( $("#placeholder"), [{
+ data: [ ... ],
+ threshold: { ... }
+ }])
+
+An array can be passed for multiple thresholding, like this:
+
+ threshold: [{
+ below: number1
+ color: color1
+ },{
+ below: number2
+ color: color2
+ }]
+
+These multiple threshold objects can be passed in any order since they are
+sorted by the processing function.
+
+The data points below "below" are drawn with the specified color. This makes
+it easy to mark points below 0, e.g. for budget data.
+
+Internally, the plugin works by splitting the data into two series, above and
+below the threshold. The extra series below the threshold will have its label
+cleared and the special "originSeries" attribute set to the original series.
+You may need to check for this in hover events.
+
+*/
+
+(function ($) {
+ var options = {
+ series: { threshold: null } // or { below: number, color: color spec}
+ };
+
+ function init(plot) {
+ function thresholdData(plot, s, datapoints, below, color) {
+ var ps = datapoints.pointsize, i, x, y, p, prevp,
+ thresholded = $.extend({}, s); // note: shallow copy
+
+ thresholded.datapoints = { points: [], pointsize: ps, format: datapoints.format };
+ thresholded.label = null;
+ thresholded.color = color;
+ thresholded.threshold = null;
+ thresholded.originSeries = s;
+ thresholded.data = [];
+
+ var origpoints = datapoints.points,
+ addCrossingPoints = s.lines.show;
+
+ var threspoints = [];
+ var newpoints = [];
+ var m;
+
+ for (i = 0; i < origpoints.length; i += ps) {
+ x = origpoints[i];
+ y = origpoints[i + 1];
+
+ prevp = p;
+ if (y < below)
+ p = threspoints;
+ else
+ p = newpoints;
+
+ if (addCrossingPoints && prevp != p && x != null
+ && i > 0 && origpoints[i - ps] != null) {
+ var interx = x + (below - y) * (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]);
+ prevp.push(interx);
+ prevp.push(below);
+ for (m = 2; m < ps; ++m)
+ prevp.push(origpoints[i + m]);
+
+ p.push(null); // start new segment
+ p.push(null);
+ for (m = 2; m < ps; ++m)
+ p.push(origpoints[i + m]);
+ p.push(interx);
+ p.push(below);
+ for (m = 2; m < ps; ++m)
+ p.push(origpoints[i + m]);
+ }
+
+ p.push(x);
+ p.push(y);
+ for (m = 2; m < ps; ++m)
+ p.push(origpoints[i + m]);
+ }
+
+ datapoints.points = newpoints;
+ thresholded.datapoints.points = threspoints;
+
+ if (thresholded.datapoints.points.length > 0) {
+ var origIndex = $.inArray(s, plot.getData());
+ // Insert newly-generated series right after original one (to prevent it from becoming top-most)
+ plot.getData().splice(origIndex + 1, 0, thresholded);
+ }
+
+ // FIXME: there are probably some edge cases left in bars
+ }
+
+ function processThresholds(plot, s, datapoints) {
+ if (!s.threshold)
+ return;
+
+ if (s.threshold instanceof Array) {
+ s.threshold.sort(function(a, b) {
+ return a.below - b.below;
+ });
+
+ $(s.threshold).each(function(i, th) {
+ thresholdData(plot, s, datapoints, th.below, th.color);
+ });
+ }
+ else {
+ thresholdData(plot, s, datapoints, s.threshold.below, s.threshold.color);
+ }
+ }
+
+ plot.hooks.processDatapoints.push(processThresholds);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'threshold',
+ version: '1.2'
+ });
+})(jQuery);
diff --git a/hledger-web/static/js/jquery.flot.threshold.min.js b/hledger-web/static/js/jquery.flot.threshold.min.js
new file mode 100644
index 000000000..ce93e0f48
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.threshold.min.js
@@ -0,0 +1,7 @@
+/* Javascript plotting library for jQuery, version 0.8.3.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+*/
+(function($){var options={series:{threshold:null}};function init(plot){function thresholdData(plot,s,datapoints,below,color){var ps=datapoints.pointsize,i,x,y,p,prevp,thresholded=$.extend({},s);thresholded.datapoints={points:[],pointsize:ps,format:datapoints.format};thresholded.label=null;thresholded.color=color;thresholded.threshold=null;thresholded.originSeries=s;thresholded.data=[];var origpoints=datapoints.points,addCrossingPoints=s.lines.show;var threspoints=[];var newpoints=[];var m;for(i=0;i0&&origpoints[i-ps]!=null){var interx=x+(below-y)*(x-origpoints[i-ps])/(y-origpoints[i-ps+1]);prevp.push(interx);prevp.push(below);for(m=2;m0){var origIndex=$.inArray(s,plot.getData());plot.getData().splice(origIndex+1,0,thresholded)}}function processThresholds(plot,s,datapoints){if(!s.threshold)return;if(s.threshold instanceof Array){s.threshold.sort(function(a,b){return a.below-b.below});$(s.threshold).each(function(i,th){thresholdData(plot,s,datapoints,th.below,th.color)})}else{thresholdData(plot,s,datapoints,s.threshold.below,s.threshold.color)}}plot.hooks.processDatapoints.push(processThresholds)}$.plot.plugins.push({init:init,options:options,name:"threshold",version:"1.2"})})(jQuery);
\ No newline at end of file
diff --git a/hledger-web/static/js/jquery.flot.tooltip.js b/hledger-web/static/js/jquery.flot.tooltip.js
new file mode 100644
index 000000000..c71274268
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.tooltip.js
@@ -0,0 +1,409 @@
+/*
+ * jquery.flot.tooltip
+ *
+ * description: easy-to-use tooltips for Flot charts
+ * version: 0.7.1
+ * author: Krzysztof Urbas @krzysu [myviews.pl]
+ * website: https://github.com/krzysu/flot.tooltip
+ *
+ * build on 2014-06-22
+ * released under MIT License, 2012
+*/
+// IE8 polyfill for Array.indexOf
+if (!Array.prototype.indexOf) {
+ Array.prototype.indexOf = function (searchElement, fromIndex) {
+ if ( this === undefined || this === null ) {
+ throw new TypeError( '"this" is null or not defined' );
+ }
+ var length = this.length >>> 0; // Hack to convert object.length to a UInt32
+ fromIndex = +fromIndex || 0;
+ if (Math.abs(fromIndex) === Infinity) {
+ fromIndex = 0;
+ }
+ if (fromIndex < 0) {
+ fromIndex += length;
+ if (fromIndex < 0) {
+ fromIndex = 0;
+ }
+ }
+
+ for (;fromIndex < length; fromIndex++) {
+ if (this[fromIndex] === searchElement) {
+ return fromIndex;
+ }
+ }
+
+ return -1;
+ };
+}
+
+(function ($) {
+
+ // plugin options, default values
+ var defaultOptions = {
+ tooltip: false,
+ tooltipOpts: {
+ content: "%s | X: %x | Y: %y",
+ // allowed templates are:
+ // %s -> series label,
+ // %lx -> x axis label (requires flot-axislabels plugin https://github.com/markrcote/flot-axislabels),
+ // %ly -> y axis label (requires flot-axislabels plugin https://github.com/markrcote/flot-axislabels),
+ // %x -> X value,
+ // %y -> Y value,
+ // %x.2 -> precision of X value,
+ // %p -> percent
+ xDateFormat: null,
+ yDateFormat: null,
+ monthNames: null,
+ dayNames: null,
+ shifts: {
+ x: 10,
+ y: 20
+ },
+ defaultTheme: true,
+
+ // callbacks
+ onHover: function(flotItem, $tooltipEl) {}
+ }
+ };
+
+ // object
+ var FlotTooltip = function(plot) {
+
+ // variables
+ this.tipPosition = {x: 0, y: 0};
+
+ this.init(plot);
+ };
+
+ // main plugin function
+ FlotTooltip.prototype.init = function(plot) {
+
+ var that = this;
+
+ // detect other flot plugins
+ var plotPluginsLength = $.plot.plugins.length;
+ this.plotPlugins = [];
+
+ if (plotPluginsLength) {
+ for (var p = 0; p < plotPluginsLength; p++) {
+ this.plotPlugins.push($.plot.plugins[p].name);
+ }
+ }
+
+ plot.hooks.bindEvents.push(function (plot, eventHolder) {
+
+ // get plot options
+ that.plotOptions = plot.getOptions();
+
+ // if not enabled return
+ if (that.plotOptions.tooltip === false || typeof that.plotOptions.tooltip === 'undefined') return;
+
+ // shortcut to access tooltip options
+ that.tooltipOptions = that.plotOptions.tooltipOpts;
+
+ // create tooltip DOM element
+ var $tip = that.getDomElement();
+
+ // bind event
+ $( plot.getPlaceholder() ).bind("plothover", plothover);
+
+ $(eventHolder).bind('mousemove', mouseMove);
+ });
+
+ plot.hooks.shutdown.push(function (plot, eventHolder){
+ $(plot.getPlaceholder()).unbind("plothover", plothover);
+ $(eventHolder).unbind("mousemove", mouseMove);
+ });
+
+ function mouseMove(e){
+ var pos = {};
+ pos.x = e.pageX;
+ pos.y = e.pageY;
+ that.updateTooltipPosition(pos);
+ }
+
+ function plothover(event, pos, item) {
+ var $tip = that.getDomElement();
+ if (item) {
+ var tipText;
+
+ // convert tooltip content template to real tipText
+ tipText = that.stringFormat(that.tooltipOptions.content, item);
+
+ $tip.html( tipText );
+ that.updateTooltipPosition({ x: pos.pageX, y: pos.pageY });
+ $tip.css({
+ left: that.tipPosition.x + that.tooltipOptions.shifts.x,
+ top: that.tipPosition.y + that.tooltipOptions.shifts.y
+ })
+ .show();
+
+ // run callback
+ if(typeof that.tooltipOptions.onHover === 'function') {
+ that.tooltipOptions.onHover(item, $tip);
+ }
+ }
+ else {
+ $tip.hide().html('');
+ }
+ }
+ };
+
+ /**
+ * get or create tooltip DOM element
+ * @return jQuery object
+ */
+ FlotTooltip.prototype.getDomElement = function() {
+ var $tip = $('#flotTip');
+
+ if( $tip.length === 0 ){
+ $tip = $('').attr('id', 'flotTip');
+ $tip.appendTo('body').hide().css({position: 'absolute'});
+
+ if(this.tooltipOptions.defaultTheme) {
+ $tip.css({
+ 'background': '#fff',
+ 'z-index': '1040',
+ 'padding': '0.4em 0.6em',
+ 'border-radius': '0.5em',
+ 'font-size': '0.8em',
+ 'border': '1px solid #111',
+ 'display': 'none',
+ 'white-space': 'nowrap'
+ });
+ }
+ }
+
+ return $tip;
+ };
+
+ // as the name says
+ FlotTooltip.prototype.updateTooltipPosition = function(pos) {
+ var $tip = $('#flotTip');
+
+ var totalTipWidth = $tip.outerWidth() + this.tooltipOptions.shifts.x;
+ var totalTipHeight = $tip.outerHeight() + this.tooltipOptions.shifts.y;
+ if ((pos.x - $(window).scrollLeft()) > ($(window).innerWidth() - totalTipWidth)) {
+ pos.x -= totalTipWidth;
+ }
+ if ((pos.y - $(window).scrollTop()) > ($(window).innerHeight() - totalTipHeight)) {
+ pos.y -= totalTipHeight;
+ }
+ this.tipPosition.x = pos.x;
+ this.tipPosition.y = pos.y;
+ };
+
+ /**
+ * core function, create tooltip content
+ * @param {string} content - template with tooltip content
+ * @param {object} item - Flot item
+ * @return {string} real tooltip content for current item
+ */
+ FlotTooltip.prototype.stringFormat = function(content, item) {
+
+ var percentPattern = /%p\.{0,1}(\d{0,})/;
+ var seriesPattern = /%s/;
+ var xLabelPattern = /%lx/; // requires flot-axislabels plugin https://github.com/markrcote/flot-axislabels, will be ignored if plugin isn't loaded
+ var yLabelPattern = /%ly/; // requires flot-axislabels plugin https://github.com/markrcote/flot-axislabels, will be ignored if plugin isn't loaded
+ var xPattern = /%x\.{0,1}(\d{0,})/;
+ var yPattern = /%y\.{0,1}(\d{0,})/;
+ var xPatternWithoutPrecision = "%x";
+ var yPatternWithoutPrecision = "%y";
+ var customTextPattern = "%ct";
+
+ var x, y, customText;
+
+ // for threshold plugin we need to read data from different place
+ if (typeof item.series.threshold !== "undefined") {
+ x = item.datapoint[0];
+ y = item.datapoint[1];
+ customText = item.datapoint[2];
+ } else if (typeof item.series.lines !== "undefined" && item.series.lines.steps) {
+ x = item.series.datapoints.points[item.dataIndex * 2];
+ y = item.series.datapoints.points[item.dataIndex * 2 + 1];
+ // TODO: where to find custom text in this variant?
+ customText = "";
+ } else {
+ x = item.series.data[item.dataIndex][0];
+ y = item.series.data[item.dataIndex][1];
+ customText = item.series.data[item.dataIndex][2];
+ }
+
+ // I think this is only in case of threshold plugin
+ if (item.series.label === null && item.series.originSeries) {
+ item.series.label = item.series.originSeries.label;
+ }
+
+ // if it is a function callback get the content string
+ if( typeof(content) === 'function' ) {
+ content = content(item.series.label, x, y, item);
+ }
+
+ // percent match for pie charts
+ if( typeof (item.series.percent) !== 'undefined' ) {
+ content = this.adjustValPrecision(percentPattern, content, item.series.percent);
+ }
+
+ // series match
+ if( typeof(item.series.label) !== 'undefined' ) {
+ content = content.replace(seriesPattern, item.series.label);
+ }
+ else {
+ //remove %s if label is undefined
+ content = content.replace(seriesPattern, "");
+ }
+
+ // x axis label match
+ if( this.hasAxisLabel('xaxis', item) ) {
+ content = content.replace(xLabelPattern, item.series.xaxis.options.axisLabel);
+ }
+ else {
+ //remove %lx if axis label is undefined or axislabels plugin not present
+ content = content.replace(xLabelPattern, "");
+ }
+
+ // y axis label match
+ if( this.hasAxisLabel('yaxis', item) ) {
+ content = content.replace(yLabelPattern, item.series.yaxis.options.axisLabel);
+ }
+ else {
+ //remove %ly if axis label is undefined or axislabels plugin not present
+ content = content.replace(yLabelPattern, "");
+ }
+
+ // time mode axes with custom dateFormat
+ if(this.isTimeMode('xaxis', item) && this.isXDateFormat(item)) {
+ content = content.replace(xPattern, this.timestampToDate(x, this.tooltipOptions.xDateFormat, item.series.xaxis.options));
+ }
+
+ if(this.isTimeMode('yaxis', item) && this.isYDateFormat(item)) {
+ content = content.replace(yPattern, this.timestampToDate(y, this.tooltipOptions.yDateFormat, item.series.yaxis.options));
+ }
+
+ // set precision if defined
+ if(typeof x === 'number') {
+ content = this.adjustValPrecision(xPattern, content, x);
+ }
+ if(typeof y === 'number') {
+ content = this.adjustValPrecision(yPattern, content, y);
+ }
+
+ // change x from number to given label, if given
+ if(typeof item.series.xaxis.ticks !== 'undefined') {
+
+ var ticks;
+ if(this.hasRotatedXAxisTicks(item)) {
+ // xaxis.ticks will be an empty array if tickRotor is being used, but the values are available in rotatedTicks
+ ticks = 'rotatedTicks';
+ }
+ else {
+ ticks = 'ticks';
+ }
+
+ // see https://github.com/krzysu/flot.tooltip/issues/65
+ var tickIndex = item.dataIndex + item.seriesIndex;
+
+ if(item.series.xaxis[ticks].length > tickIndex && !this.isTimeMode('xaxis', item)) {
+ var valueX = (this.isCategoriesMode('xaxis', item)) ? item.series.xaxis[ticks][tickIndex].label : item.series.xaxis[ticks][tickIndex].v;
+ if (valueX === x) {
+ content = content.replace(xPattern, item.series.xaxis[ticks][tickIndex].label);
+ }
+ }
+ }
+
+ // change y from number to given label, if given
+ if(typeof item.series.yaxis.ticks !== 'undefined') {
+ for (var index in item.series.yaxis.ticks) {
+ if (item.series.yaxis.ticks.hasOwnProperty(index)) {
+ var valueY = (this.isCategoriesMode('yaxis', item)) ? item.series.yaxis.ticks[index].label : item.series.yaxis.ticks[index].v;
+ if (valueY === y) {
+ content = content.replace(yPattern, item.series.yaxis.ticks[index].label);
+ }
+ }
+ }
+ }
+
+ // if no value customization, use tickFormatter by default
+ if(typeof item.series.xaxis.tickFormatter !== 'undefined') {
+ //escape dollar
+ content = content.replace(xPatternWithoutPrecision, item.series.xaxis.tickFormatter(x, item.series.xaxis).replace(/\$/g, '$$'));
+ }
+ if(typeof item.series.yaxis.tickFormatter !== 'undefined') {
+ //escape dollar
+ content = content.replace(yPatternWithoutPrecision, item.series.yaxis.tickFormatter(y, item.series.yaxis).replace(/\$/g, '$$'));
+ }
+
+ if(customText) {
+ content = content.replace(customTextPattern, customText);
+ }
+
+ return content;
+ };
+
+ // helpers just for readability
+ FlotTooltip.prototype.isTimeMode = function(axisName, item) {
+ return (typeof item.series[axisName].options.mode !== 'undefined' && item.series[axisName].options.mode === 'time');
+ };
+
+ FlotTooltip.prototype.isXDateFormat = function(item) {
+ return (typeof this.tooltipOptions.xDateFormat !== 'undefined' && this.tooltipOptions.xDateFormat !== null);
+ };
+
+ FlotTooltip.prototype.isYDateFormat = function(item) {
+ return (typeof this.tooltipOptions.yDateFormat !== 'undefined' && this.tooltipOptions.yDateFormat !== null);
+ };
+
+ FlotTooltip.prototype.isCategoriesMode = function(axisName, item) {
+ return (typeof item.series[axisName].options.mode !== 'undefined' && item.series[axisName].options.mode === 'categories');
+ };
+
+ //
+ FlotTooltip.prototype.timestampToDate = function(tmst, dateFormat, options) {
+ var theDate = $.plot.dateGenerator(tmst, options);
+ return $.plot.formatDate(theDate, dateFormat, this.tooltipOptions.monthNames, this.tooltipOptions.dayNames);
+ };
+
+ //
+ FlotTooltip.prototype.adjustValPrecision = function(pattern, content, value) {
+
+ var precision;
+ var matchResult = content.match(pattern);
+ if( matchResult !== null ) {
+ if(RegExp.$1 !== '') {
+ precision = RegExp.$1;
+ value = value.toFixed(precision);
+
+ // only replace content if precision exists, in other case use thickformater
+ content = content.replace(pattern, value);
+ }
+ }
+ return content;
+ };
+
+ // other plugins detection below
+
+ // check if flot-axislabels plugin (https://github.com/markrcote/flot-axislabels) is used and that an axis label is given
+ FlotTooltip.prototype.hasAxisLabel = function(axisName, item) {
+ return (this.plotPlugins.indexOf('axisLabels') !== -1 && typeof item.series[axisName].options.axisLabel !== 'undefined' && item.series[axisName].options.axisLabel.length > 0);
+ };
+
+ // check whether flot-tickRotor, a plugin which allows rotation of X-axis ticks, is being used
+ FlotTooltip.prototype.hasRotatedXAxisTicks = function(item) {
+ return ($.grep($.plot.plugins, function(p){ return p.name === "tickRotor"; }).length === 1 && typeof item.series.xaxis.rotatedTicks !== 'undefined');
+ };
+
+ //
+ var init = function(plot) {
+ new FlotTooltip(plot);
+ };
+
+ // define Flot plugin
+ $.plot.plugins.push({
+ init: init,
+ options: defaultOptions,
+ name: 'tooltip',
+ version: '0.6.7'
+ });
+
+})(jQuery);
diff --git a/hledger-web/static/js/jquery.flot.tooltip.min.js b/hledger-web/static/js/jquery.flot.tooltip.min.js
new file mode 100644
index 000000000..0626fbfbd
--- /dev/null
+++ b/hledger-web/static/js/jquery.flot.tooltip.min.js
@@ -0,0 +1,12 @@
+/*
+ * jquery.flot.tooltip
+ *
+ * description: easy-to-use tooltips for Flot charts
+ * version: 0.7.1
+ * author: Krzysztof Urbas @krzysu [myviews.pl]
+ * website: https://github.com/krzysu/flot.tooltip
+ *
+ * build on 2014-06-22
+ * released under MIT License, 2012
+*/
+Array.prototype.indexOf||(Array.prototype.indexOf=function(t,i){if(void 0===this||null===this)throw new TypeError('"this" is null or not defined');var e=this.length>>>0;for(i=+i||0,1/0===Math.abs(i)&&(i=0),0>i&&(i+=e,0>i&&(i=0));e>i;i++)if(this[i]===t)return i;return-1}),function(t){var i={tooltip:!1,tooltipOpts:{content:"%s | X: %x | Y: %y",xDateFormat:null,yDateFormat:null,monthNames:null,dayNames:null,shifts:{x:10,y:20},defaultTheme:!0,onHover:function(){}}},e=function(t){this.tipPosition={x:0,y:0},this.init(t)};e.prototype.init=function(i){function e(t){var i={};i.x=t.pageX,i.y=t.pageY,o.updateTooltipPosition(i)}function s(t,i,e){var s=o.getDomElement();if(e){var a;a=o.stringFormat(o.tooltipOptions.content,e),s.html(a),o.updateTooltipPosition({x:i.pageX,y:i.pageY}),s.css({left:o.tipPosition.x+o.tooltipOptions.shifts.x,top:o.tipPosition.y+o.tooltipOptions.shifts.y}).show(),"function"==typeof o.tooltipOptions.onHover&&o.tooltipOptions.onHover(e,s)}else s.hide().html("")}var o=this,a=t.plot.plugins.length;if(this.plotPlugins=[],a)for(var n=0;a>n;n++)this.plotPlugins.push(t.plot.plugins[n].name);i.hooks.bindEvents.push(function(i,a){o.plotOptions=i.getOptions(),o.plotOptions.tooltip!==!1&&void 0!==o.plotOptions.tooltip&&(o.tooltipOptions=o.plotOptions.tooltipOpts,o.getDomElement(),t(i.getPlaceholder()).bind("plothover",s),t(a).bind("mousemove",e))}),i.hooks.shutdown.push(function(i,o){t(i.getPlaceholder()).unbind("plothover",s),t(o).unbind("mousemove",e)})},e.prototype.getDomElement=function(){var i=t("#flotTip");return 0===i.length&&(i=t("").attr("id","flotTip"),i.appendTo("body").hide().css({position:"absolute"}),this.tooltipOptions.defaultTheme&&i.css({background:"#fff","z-index":"1040",padding:"0.4em 0.6em","border-radius":"0.5em","font-size":"0.8em",border:"1px solid #111",display:"none","white-space":"nowrap"})),i},e.prototype.updateTooltipPosition=function(i){var e=t("#flotTip"),s=e.outerWidth()+this.tooltipOptions.shifts.x,o=e.outerHeight()+this.tooltipOptions.shifts.y;i.x-t(window).scrollLeft()>t(window).innerWidth()-s&&(i.x-=s),i.y-t(window).scrollTop()>t(window).innerHeight()-o&&(i.y-=o),this.tipPosition.x=i.x,this.tipPosition.y=i.y},e.prototype.stringFormat=function(t,i){var e,s,o,a=/%p\.{0,1}(\d{0,})/,n=/%s/,r=/%lx/,p=/%ly/,l=/%x\.{0,1}(\d{0,})/,d=/%y\.{0,1}(\d{0,})/,x="%x",h="%y",u="%ct";if(i.series.threshold!==void 0?(e=i.datapoint[0],s=i.datapoint[1],o=i.datapoint[2]):i.series.lines!==void 0&&i.series.lines.steps?(e=i.series.datapoints.points[2*i.dataIndex],s=i.series.datapoints.points[2*i.dataIndex+1],o=""):(e=i.series.data[i.dataIndex][0],s=i.series.data[i.dataIndex][1],o=i.series.data[i.dataIndex][2]),null===i.series.label&&i.series.originSeries&&(i.series.label=i.series.originSeries.label),"function"==typeof t&&(t=t(i.series.label,e,s,i)),i.series.percent!==void 0&&(t=this.adjustValPrecision(a,t,i.series.percent)),t=i.series.label!==void 0?t.replace(n,i.series.label):t.replace(n,""),t=this.hasAxisLabel("xaxis",i)?t.replace(r,i.series.xaxis.options.axisLabel):t.replace(r,""),t=this.hasAxisLabel("yaxis",i)?t.replace(p,i.series.yaxis.options.axisLabel):t.replace(p,""),this.isTimeMode("xaxis",i)&&this.isXDateFormat(i)&&(t=t.replace(l,this.timestampToDate(e,this.tooltipOptions.xDateFormat,i.series.xaxis.options))),this.isTimeMode("yaxis",i)&&this.isYDateFormat(i)&&(t=t.replace(d,this.timestampToDate(s,this.tooltipOptions.yDateFormat,i.series.yaxis.options))),"number"==typeof e&&(t=this.adjustValPrecision(l,t,e)),"number"==typeof s&&(t=this.adjustValPrecision(d,t,s)),i.series.xaxis.ticks!==void 0){var c;c=this.hasRotatedXAxisTicks(i)?"rotatedTicks":"ticks";var m=i.dataIndex+i.seriesIndex;if(i.series.xaxis[c].length>m&&!this.isTimeMode("xaxis",i)){var f=this.isCategoriesMode("xaxis",i)?i.series.xaxis[c][m].label:i.series.xaxis[c][m].v;f===e&&(t=t.replace(l,i.series.xaxis[c][m].label))}}if(i.series.yaxis.ticks!==void 0)for(var y in i.series.yaxis.ticks)if(i.series.yaxis.ticks.hasOwnProperty(y)){var v=this.isCategoriesMode("yaxis",i)?i.series.yaxis.ticks[y].label:i.series.yaxis.ticks[y].v;v===s&&(t=t.replace(d,i.series.yaxis.ticks[y].label))}return i.series.xaxis.tickFormatter!==void 0&&(t=t.replace(x,i.series.xaxis.tickFormatter(e,i.series.xaxis).replace(/\$/g,"$$"))),i.series.yaxis.tickFormatter!==void 0&&(t=t.replace(h,i.series.yaxis.tickFormatter(s,i.series.yaxis).replace(/\$/g,"$$"))),o&&(t=t.replace(u,o)),t},e.prototype.isTimeMode=function(t,i){return i.series[t].options.mode!==void 0&&"time"===i.series[t].options.mode},e.prototype.isXDateFormat=function(){return this.tooltipOptions.xDateFormat!==void 0&&null!==this.tooltipOptions.xDateFormat},e.prototype.isYDateFormat=function(){return this.tooltipOptions.yDateFormat!==void 0&&null!==this.tooltipOptions.yDateFormat},e.prototype.isCategoriesMode=function(t,i){return i.series[t].options.mode!==void 0&&"categories"===i.series[t].options.mode},e.prototype.timestampToDate=function(i,e,s){var o=t.plot.dateGenerator(i,s);return t.plot.formatDate(o,e,this.tooltipOptions.monthNames,this.tooltipOptions.dayNames)},e.prototype.adjustValPrecision=function(t,i,e){var s,o=i.match(t);return null!==o&&""!==RegExp.$1&&(s=RegExp.$1,e=e.toFixed(s),i=i.replace(t,e)),i},e.prototype.hasAxisLabel=function(t,i){return-1!==this.plotPlugins.indexOf("axisLabels")&&i.series[t].options.axisLabel!==void 0&&i.series[t].options.axisLabel.length>0},e.prototype.hasRotatedXAxisTicks=function(i){return 1===t.grep(t.plot.plugins,function(t){return"tickRotor"===t.name}).length&&i.series.xaxis.rotatedTicks!==void 0};var s=function(t){new e(t)};t.plot.plugins.push({init:s,options:i,name:"tooltip",version:"0.6.7"})}(jQuery);
\ No newline at end of file