/* Flot plugin for plotting error bars.

Copyright (c) 2007-2014 IOLA and Ole Laursen.
Licensed under the MIT license.

Error bars are used to show standard deviation and other statistical
properties in a plot.

* Created by Rui Pereira  -  rui (dot) pereira (at) gmail (dot) com

This plugin allows you to plot error-bars over points. Set "errorbars" inside
the points series to the axis name over which there will be error values in
your data array (*even* if you do not intend to plot them later, by setting
"show: null" on xerr/yerr).

The plugin supports these options:

	series: {
		points: {
			errorbars: "x" or "y" or "xy",
			xerr: {
				show: null/false or true,
				asymmetric: null/false or true,
				upperCap: null or "-" or function,
				lowerCap: null or "-" or function,
				color: null or color,
				radius: null or number
			},
			yerr: { same options as xerr }
		}
	}

Each data point array is expected to be of the type:

	"x"  [ x, y, xerr ]
	"y"  [ x, y, yerr ]
	"xy" [ x, y, xerr, yerr ]

Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
error-bars on X and asymmetric on Y would be:

	[ x, y, xerr, yerr_lower, yerr_upper ]

By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will
draw a small cap perpendicular to the error bar. They can also be set to a
user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg.

	function drawSemiCircle( ctx, x, y, radius ) {
		ctx.beginPath();
		ctx.arc( x, y, radius, 0, Math.PI, false );
		ctx.moveTo( x - radius, y );
		ctx.lineTo( x + radius, y );
		ctx.stroke();
	}

Color and radius both default to the same ones of the points series if not
set. The independent radius parameter on xerr/yerr is useful for the case when
we may want to add error-bars to a line, without showing the interconnecting
points (with radius: 0), and still showing end caps on the error-bars.
shadowSize and lineWidth are derived as well from the points series.

*/

(function ($) {
  var options = {
    series: {
      points: {
        errorbars: null, //should be 'x', 'y' or 'xy'
        xerr: {
          err: "x",
          show: null,
          asymmetric: null,
          upperCap: null,
          lowerCap: null,
          color: null,
          radius: null,
        },
        yerr: {
          err: "y",
          show: null,
          asymmetric: null,
          upperCap: null,
          lowerCap: null,
          color: null,
          radius: null,
        },
      },
    },
  };

  function processRawData(plot, series, data, datapoints) {
    if (!series.points.errorbars) return;

    // x,y values
    var format = [
      { x: true, number: true, required: true },
      { y: true, number: true, required: true },
    ];

    var errors = series.points.errorbars;
    // error bars - first X then Y
    if (errors == "x" || errors == "xy") {
      // lower / upper error
      if (series.points.xerr.asymmetric) {
        format.push({ x: true, number: true, required: true });
        format.push({ x: true, number: true, required: true });
      } else format.push({ x: true, number: true, required: true });
    }
    if (errors == "y" || errors == "xy") {
      // lower / upper error
      if (series.points.yerr.asymmetric) {
        format.push({ y: true, number: true, required: true });
        format.push({ y: true, number: true, required: true });
      } else format.push({ y: true, number: true, required: true });
    }
    datapoints.format = format;
  }

  function parseErrors(series, i) {
    var points = series.datapoints.points;

    // read errors from points array
    var exl = null,
      exu = null,
      eyl = null,
      eyu = null;
    var xerr = series.points.xerr,
      yerr = series.points.yerr;

    var eb = series.points.errorbars;
    // error bars - first X
    if (eb == "x" || eb == "xy") {
      if (xerr.asymmetric) {
        exl = points[i + 2];
        exu = points[i + 3];
        if (eb == "xy")
          if (yerr.asymmetric) {
            eyl = points[i + 4];
            eyu = points[i + 5];
          } else eyl = points[i + 4];
      } else {
        exl = points[i + 2];
        if (eb == "xy")
          if (yerr.asymmetric) {
            eyl = points[i + 3];
            eyu = points[i + 4];
          } else eyl = points[i + 3];
      }
      // only Y
    } else if (eb == "y")
      if (yerr.asymmetric) {
        eyl = points[i + 2];
        eyu = points[i + 3];
      } else eyl = points[i + 2];

    // symmetric errors?
    if (exu == null) exu = exl;
    if (eyu == null) eyu = eyl;

    var errRanges = [exl, exu, eyl, eyu];
    // nullify if not showing
    if (!xerr.show) {
      errRanges[0] = null;
      errRanges[1] = null;
    }
    if (!yerr.show) {
      errRanges[2] = null;
      errRanges[3] = null;
    }
    return errRanges;
  }

  function drawSeriesErrors(plot, ctx, s) {
    var points = s.datapoints.points,
      ps = s.datapoints.pointsize,
      ax = [s.xaxis, s.yaxis],
      radius = s.points.radius,
      err = [s.points.xerr, s.points.yerr];

    //sanity check, in case some inverted axis hack is applied to flot
    var invertX = false;
    if (ax[0].p2c(ax[0].max) < ax[0].p2c(ax[0].min)) {
      invertX = true;
      var tmp = err[0].lowerCap;
      err[0].lowerCap = err[0].upperCap;
      err[0].upperCap = tmp;
    }

    var invertY = false;
    if (ax[1].p2c(ax[1].min) < ax[1].p2c(ax[1].max)) {
      invertY = true;
      var tmp = err[1].lowerCap;
      err[1].lowerCap = err[1].upperCap;
      err[1].upperCap = tmp;
    }

    for (var i = 0; i < s.datapoints.points.length; i += ps) {
      //parse
      var errRanges = parseErrors(s, i);

      //cycle xerr & yerr
      for (var e = 0; e < err.length; e++) {
        var minmax = [ax[e].min, ax[e].max];

        //draw this error?
        if (errRanges[e * err.length]) {
          //data coordinates
          var x = points[i],
            y = points[i + 1];

          //errorbar ranges
          var upper = [x, y][e] + errRanges[e * err.length + 1],
            lower = [x, y][e] - errRanges[e * err.length];

          //points outside of the canvas
          if (err[e].err == "x")
            if (
              y > ax[1].max ||
              y < ax[1].min ||
              upper < ax[0].min ||
              lower > ax[0].max
            )
              continue;
          if (err[e].err == "y")
            if (
              x > ax[0].max ||
              x < ax[0].min ||
              upper < ax[1].min ||
              lower > ax[1].max
            )
              continue;

          // prevent errorbars getting out of the canvas
          var drawUpper = true,
            drawLower = true;

          if (upper > minmax[1]) {
            drawUpper = false;
            upper = minmax[1];
          }
          if (lower < minmax[0]) {
            drawLower = false;
            lower = minmax[0];
          }

          //sanity check, in case some inverted axis hack is applied to flot
          if (
            (err[e].err == "x" && invertX) ||
            (err[e].err == "y" && invertY)
          ) {
            //swap coordinates
            var tmp = lower;
            lower = upper;
            upper = tmp;
            tmp = drawLower;
            drawLower = drawUpper;
            drawUpper = tmp;
            tmp = minmax[0];
            minmax[0] = minmax[1];
            minmax[1] = tmp;
          }

          // convert to pixels
          (x = ax[0].p2c(x)), (y = ax[1].p2c(y)), (upper = ax[e].p2c(upper));
          lower = ax[e].p2c(lower);
          minmax[0] = ax[e].p2c(minmax[0]);
          minmax[1] = ax[e].p2c(minmax[1]);

          //same style as points by default
          var lw = err[e].lineWidth ? err[e].lineWidth : s.points.lineWidth,
            sw =
              s.points.shadowSize != null ? s.points.shadowSize : s.shadowSize;

          //shadow as for points
          if (lw > 0 && sw > 0) {
            var w = sw / 2;
            ctx.lineWidth = w;
            ctx.strokeStyle = "rgba(0,0,0,0.1)";
            drawError(
              ctx,
              err[e],
              x,
              y,
              upper,
              lower,
              drawUpper,
              drawLower,
              radius,
              w + w / 2,
              minmax
            );

            ctx.strokeStyle = "rgba(0,0,0,0.2)";
            drawError(
              ctx,
              err[e],
              x,
              y,
              upper,
              lower,
              drawUpper,
              drawLower,
              radius,
              w / 2,
              minmax
            );
          }

          ctx.strokeStyle = err[e].color ? err[e].color : s.color;
          ctx.lineWidth = lw;
          //draw it
          drawError(
            ctx,
            err[e],
            x,
            y,
            upper,
            lower,
            drawUpper,
            drawLower,
            radius,
            0,
            minmax
          );
        }
      }
    }
  }

  function drawError(
    ctx,
    err,
    x,
    y,
    upper,
    lower,
    drawUpper,
    drawLower,
    radius,
    offset,
    minmax
  ) {
    //shadow offset
    y += offset;
    upper += offset;
    lower += offset;

    // error bar - avoid plotting over circles
    if (err.err == "x") {
      if (upper > x + radius)
        drawPath(ctx, [
          [upper, y],
          [Math.max(x + radius, minmax[0]), y],
        ]);
      else drawUpper = false;
      if (lower < x - radius)
        drawPath(ctx, [
          [Math.min(x - radius, minmax[1]), y],
          [lower, y],
        ]);
      else drawLower = false;
    } else {
      if (upper < y - radius)
        drawPath(ctx, [
          [x, upper],
          [x, Math.min(y - radius, minmax[0])],
        ]);
      else drawUpper = false;
      if (lower > y + radius)
        drawPath(ctx, [
          [x, Math.max(y + radius, minmax[1])],
          [x, lower],
        ]);
      else drawLower = false;
    }

    //internal radius value in errorbar, allows to plot radius 0 points and still keep proper sized caps
    //this is a way to get errorbars on lines without visible connecting dots
    radius = err.radius != null ? err.radius : radius;

    // upper cap
    if (drawUpper) {
      if (err.upperCap == "-") {
        if (err.err == "x")
          drawPath(ctx, [
            [upper, y - radius],
            [upper, y + radius],
          ]);
        else
          drawPath(ctx, [
            [x - radius, upper],
            [x + radius, upper],
          ]);
      } else if ($.isFunction(err.upperCap)) {
        if (err.err == "x") err.upperCap(ctx, upper, y, radius);
        else err.upperCap(ctx, x, upper, radius);
      }
    }
    // lower cap
    if (drawLower) {
      if (err.lowerCap == "-") {
        if (err.err == "x")
          drawPath(ctx, [
            [lower, y - radius],
            [lower, y + radius],
          ]);
        else
          drawPath(ctx, [
            [x - radius, lower],
            [x + radius, lower],
          ]);
      } else if ($.isFunction(err.lowerCap)) {
        if (err.err == "x") err.lowerCap(ctx, lower, y, radius);
        else err.lowerCap(ctx, x, lower, radius);
      }
    }
  }

  function drawPath(ctx, pts) {
    ctx.beginPath();
    ctx.moveTo(pts[0][0], pts[0][1]);
    for (var p = 1; p < pts.length; p++) ctx.lineTo(pts[p][0], pts[p][1]);
    ctx.stroke();
  }

  function draw(plot, ctx) {
    var plotOffset = plot.getPlotOffset();

    ctx.save();
    ctx.translate(plotOffset.left, plotOffset.top);
    $.each(plot.getData(), function (i, s) {
      if (s.points.errorbars && (s.points.xerr.show || s.points.yerr.show))
        drawSeriesErrors(plot, ctx, s);
    });
    ctx.restore();
  }

  function init(plot) {
    plot.hooks.processRawData.push(processRawData);
    plot.hooks.draw.push(draw);
  }

  $.plot.plugins.push({
    init: init,
    options: options,
    name: "errorbars",
    version: "1.0",
  });
})(jQuery);