react-flot/lib/add-labels.js

ReactFlot - A react component for using Flot

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = addLabels;
function buildFont(_ref) {
  var family = _ref.family,
      size = _ref.size,
      style = _ref.style,
      variant = _ref.variant,
      weight = _ref.weight;

  return style + ' ' + variant + ' ' + weight + ' ' + size + ' \'' + family + '\'';
}

function addLabels(chart, options) {
  if (!options.yaxis || !options.yaxis.toRight) {
    return;
  }

  var chartCanvas = chart.getCanvas();
  var chartWidth = chartCanvas.width;
  var ctx = chartCanvas.getContext('2d'); // get the context
  var allSeries = chart.getData(); // get your series data
  var xaxis = chart.getXAxes()[0]; // xAxis
  var yaxis = chart.getYAxes()[0]; // yAxis
  var offset = chart.getPlotOffset(); // plots offset
  ctx.font = buildFont(options.yaxis.font);
  ctx.fillStyle = options.yaxis.font.color;

  allSeries.forEach(function (series, index) {
    var dataPoint = series.datapoints.points; // one point per series
    var x = dataPoint[0];
    var y = dataPoint[1];
    var text = series.yaxis.options.ticks[index][1];
    var metrics = ctx.measureText(text);

    var overlap = chartWidth < xaxis.p2c(x) + metrics.width;
    var xPos = overlap ? xaxis.p2c(x) + offset.left - metrics.width - 10 : // place at end of bar
    xaxis.p2c(x) + offset.left + 10; // place after the bar
    var yPos = yaxis.p2c(y) + offset.top + options.yaxis.labelPadding;
    ctx.fillText(text, xPos, yPos);
  });
}