cartodb/lib/assets/javascripts/deep-insights/widgets/histogram/chart.js

var $ = require('jquery');
var _ = require('underscore');
var d3 = require('d3');
var d3Interpolate = require('d3-interpolate');
var CoreModel = require('backbone/core-model');
var CoreView = require('backbone/core-view');
var formatter = require('../../formatter');
var timestampHelper = require('../../util/timestamp-helper');
var viewportUtils = require('../../viewport-utils');

var FILTERED_COLOR = '#2E3C43';
var UNFILTERED_COLOR = 'rgba(0, 0, 0, 0.06)';
var TIP_RECT_HEIGHT = 17;
var TIP_H_PADDING = 6;
var TRIANGLE_SIDE = 14;
var TRIANGLE_HEIGHT = 7;
// How much lower (based on height) will the triangle be on the right side
var TRIANGLE_RIGHT_FACTOR = 1.3;
var TOOLTIP_MARGIN = 2;
var DASH_WIDTH = 2;
var MOBILE_BAR_HEIGHT = 3;

var BEZIER_MARGIN_X = 0.1;
var BEZIER_MARGIN_Y = 1;

var trianglePath = function (x1, y1, x2, y2, x3, y3, yFactor) {
  // Bezier Control point y
  var cy = y3 + (yFactor * BEZIER_MARGIN_Y);
  // Bezier Control point x 1
  var cx1 = x3 + BEZIER_MARGIN_X;
  var cx2 = x3 - BEZIER_MARGIN_X;
  return 'M ' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2 + ' C ' + cx1 + ' ' + cy + ' ' + cx2 + ' ' + cy + ' ' + x1 + ' ' + y1 + ' z';
};

module.exports = CoreView.extend({
  options: {
    // render the chart once the width is set as default, provide false value for this prop to disable this behavior
    // e.g. for "mini" histogram behavior
    showOnWidthChange: true,
    chartBarColor: '#F2CC8F',
    labelsMargin: 16, // px
    hasAxisTip: false,
    minimumBarHeight: 2,
    animationSpeed: 750,
    handleWidth: 8,
    handleRadius: 3,
    divisionWidth: 80,
    animationBarDelay: function (d, i) {
      return Math.random() * (100 + (i * 10));
    },
    transitionType: 'elastic'
  },

  initialize: function () {
    this._originalData = this.options.originalData;

    if (!_.isNumber(this.options.height)) throw new Error('height is required');
    if (!this.options.dataviewModel) throw new Error('dataviewModel is required');
    if (!this.options.layerModel) throw new Error('layerModel is required');
    if (!this.options.type) throw new Error('type is required');

    _.bindAll(this, '_selectBars', '_adjustBrushHandles', '_onBrushMove', '_onBrushEnd', '_onMouseMove', '_onMouseOut');

    // Use this special setup for each view instance ot have its own debounced listener
    // TODO in theory there's the possiblity that the callback is called before the view is rendered in the DOM,
    //  which would lead to the view not being visible until an explicit window resize.
    //  a wasAddedToDOM event would've been nice to have
    this.forceResize = _.debounce(this._resizeToParentElement.bind(this), 50);

    // using tagName: 'svg' doesn't work,
    // and w/o class="" d3 won't instantiate properly
    this.setElement($('<svg class=""></svg>')[0]);

    this._widgetModel = this.options.widgetModel;
    this._dataviewModel = this.options.dataviewModel;
    this._layerModel = this.options.layerModel;

    this.canvas = d3.select(this.el)
      .style('overflow', 'visible')
      .attr('width', 0)
      .attr('height', this.options.height);

    this.canvas
      .append('g')
      .attr('class', 'CDB-WidgetCanvas');

    this._setupModel();
    this._setupBindings();
    this._setupDimensions();
    this._setupD3Bindings();
    this._setupFillColor();

    this.hide(); // will be toggled on width change

    this._tooltipFormatter = formatter.formatNumber; // Tooltips are always numbers
    this._createFormatter();
  },

  render: function () {
    this._generateChart();
    this._generateChartContent();
    return this;
  },

  replaceData: function (data) {
    this.model.set({ data: data });
  },

  toggleLabels: function (show) {
    this.model.set('showLabels', show);
  },

  chartWidth: function () {
    var margin = this.model.get('margin');

    // Get max because width might be negative initially
    return Math.max(0, this.model.get('width') - margin.left - margin.right);
  },

  chartHeight: function () {
    var m = this.model.get('margin');
    var labelsMargin = this.model.get('showLabels')
      ? this.options.labelsMargin
      : 0;

    return this.model.get('height') - m.top - m.bottom - labelsMargin;
  },

  getSelectionExtent: function () {
    if (this.brush && this.brush.extent()) {
      var extent = this.brush.extent();

      return extent[1] - extent[0];
    }

    return 0;
  },

  _resizeToParentElement: function () {
    if (this.$el.parent()) {
      // Hide this view temporarily to get actual size of the parent container
      var wasHidden = this.isHidden();

      this.hide();

      var parent = this.$el.parent();
      var grandParent = parent.parent && parent.parent() && parent.parent().length > 0
        ? parent.parent()
        : null;
      var width = parent.width() || 0;

      if (this.model.get('animated')) {
        // We could just substract 24, width of play/pause but imho this is more future proof
        this.$el.siblings().each(function () {
          width -= $(this).width();
        });
      }

      if (grandParent && grandParent.outerWidth && this._isTabletViewport()) {
        width -= grandParent.outerWidth(true) - grandParent.width();
      }

      if (wasHidden) {
        this.hide();
      } else {
        this.show();
      }

      this.model.set('width', width);
    }
  },

  _onChangeLeftAxisTip: function () {
    this._updateAxisTip('left');
  },

  _onChangeRightAxisTip: function () {
    this._updateAxisTip('right');
  },

  _overlap: function (first, second) {
    var bFirst = first.node().getBoundingClientRect();
    var bSecond = second.node().getBoundingClientRect();

    return !(bFirst.right < bSecond.left ||
    bFirst.left > bSecond.right ||
    bFirst.bottom < bSecond.top ||
    bFirst.top > bSecond.bottom);
  },

  _updateTriangle: function (isRight, triangle, start, center, rectWidth) {
    var ySign = isRight && !(this._isTabletViewport() && this._isTimeSeries()) ? -1 : 1;

    var transform = d3.transform(triangle.attr('transform'));
    var side = Math.min(TRIANGLE_SIDE, rectWidth);
    var translate = center - (side / 2);

    var offset = isRight
      ? Math.min((start + rectWidth) - (translate + side), 0)
      : Math.abs(Math.min(translate - start, 0));

    var p0 = [0, 0];
    var p1 = [side, 0];
    var p2 = [side / 2 - offset, TRIANGLE_HEIGHT * ySign];

    triangle.attr('d', trianglePath(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1], ySign));
    transform.translate[0] = center - (side / 2) + offset;

    triangle.attr('transform', transform.toString());
  },

  _updateAxisTip: function (className) {
    var leftTip = 'left_axis_tip';
    var rightTip = 'right_axis_tip';
    var attr = className + '_axis_tip';
    var isRight = className === 'right';
    var isLeft = !isRight;
    var isWeek = this._dataviewModel.get('aggregation') === 'week';
    var model = this.model.get(attr);
    if (model === undefined) { return; }

    var leftValue = this.model.get(leftTip);
    var rightValue = this.model.get(rightTip);

    var textLabel = this.chart.select('.CDB-Chart-axisTipText.CDB-Chart-axisTip-' + className);
    var axisTip = this.chart.select('.CDB-Chart-axisTip.CDB-Chart-axisTip-' + className);
    var rectLabel = this.chart.select('.CDB-Chart-axisTipRect.CDB-Chart-axisTip-' + className);
    var handle = this.chart.select('.CDB-Chart-handle.CDB-Chart-handle-' + className);
    var triangle = handle.select('.CDB-Chart-axisTipTriangle');

    textLabel.data([model]).text(function (d) {
      var text = this.formatter(d);

      this._dataviewModel.trigger('on_update_axis_tip', {
        attr: attr,
        text: text
      });

      return text;
    }.bind(this));

    if (!textLabel.node()) {
      return;
    }

    var textBBox = textLabel.node().getBBox();
    var width = textBBox.width;
    var rectWidth = width + TIP_H_PADDING;
    var handleWidth = this.options.handleWidth;
    var barWidth = this.barWidth;
    var chartWidth = this.chartWidth();

    rectLabel.attr('width', rectWidth);
    textLabel.attr('dx', TIP_H_PADDING / 2);
    textLabel.attr('dy', textBBox.height - Math.abs((textBBox.height - TIP_RECT_HEIGHT) / 2));

    var parts = d3.transform(handle.attr('transform')).translate;
    var xPos = +parts[0] + (this.options.handleWidth / 2);

    var yPos = isRight && !(this._isMobileViewport() && this._isTimeSeries())
      ? this.chartHeight() + (TRIANGLE_HEIGHT * TRIANGLE_RIGHT_FACTOR) - 1
      : -(TRIANGLE_HEIGHT + TIP_RECT_HEIGHT + TOOLTIP_MARGIN);
    yPos = Math.floor(yPos);

    // Align rect and bar centers
    var rectCenter = rectWidth / 2;
    var barCenter = (handleWidth + barWidth) / 2;
    barCenter -= (isRight ? barWidth : 0); // right tip should center to the previous bin
    if (!this._isDateTimeSeries() || isWeek) { // In numeric and week histograms, axis should point to the handler
      barCenter = handleWidth / 2;
    }
    var translate = barCenter - rectCenter;

    // Check if rect if out of bounds and clip translate if that happens
    var leftPos = xPos + translate;
    var rightPos = leftPos + rectWidth;
    var translatedCenter = translate + rectCenter;
    var rightExceed = rightPos - (chartWidth + handleWidth);

    // Do we exceed left?
    if (leftPos < 0) {
      translate -= leftPos;
    }

    // Do we exceed right?
    if (rightExceed > 0) {
      translate -= rightExceed;
    }

    // Show / hide labels depending on their values
    var showTip = isLeft
      ? leftValue <= rightValue
      : (leftValue <= rightValue && !(leftValue === rightValue && this._isDateTimeSeries()));

    this._showAxisTip(className, showTip);

    // Translate axis tip
    axisTip.attr('transform', 'translate(' + translate + ', ' + yPos + ')');

    // Update triangle position
    this._updateTriangle(isRight, triangle, translate, translatedCenter, rectWidth);

    if (this.model.get('dragging') && this._isMobileViewport() && this._isTimeSeries()) {
      this._showAxisTip(className, true);
    }
  },

  _onChangeData: function () {
    if (this.model.previous('data').length !== this.model.get('data').length) {
      this.reset();
    } else {
      this.refresh();
    }

    this._setupFillColor();
    this._refreshBarsColor();
  },

  _onChangeRange: function () {
    var loIndex = this.model.get('lo_index');
    var hiIndex = this.model.get('hi_index');
    if ((loIndex === 0 && hiIndex === 0) || (loIndex === null && hiIndex === null)) {
      return;
    }

    this.selectRange(loIndex, hiIndex);
    this._adjustBrushHandles();
    this._setAxisTipAccordingToBins();
    this._selectBars();
    this.trigger('on_brush_end', loIndex, hiIndex);
  },

  _onChangeWidth: function () {
    var width = this.model.get('width');
    this.canvas.attr('width', width);
    this.chart.attr('width', width);
    if (this.options.showOnWidthChange && width > 0) {
      this.show();
    }
    this.reset();

    var loBarIndex = this.model.get('lo_index');
    var hiBarIndex = this.model.get('hi_index');
    this.selectRange(loBarIndex, hiBarIndex);
    this._updateAxisTip('left');
    this._updateAxisTip('right');
  },

  _onChangeNormalized: function () {
    // do not show shadow bars if they are not enabled
    this.model.set('show_shadow_bars', !this.model.get('normalized'));
    this._generateShadowBars();
    this.updateYScale();
    this.refresh();
  },

  _onChangeHeight: function () {
    var height = this.model.get('height');

    this.$el.height(height);
    this.chart.attr('height', height);
    this.leftHandle.attr('height', height);
    this.rightHandle.attr('height', height);
    this.updateYScale();

    this.reset();
  },

  _onChangeShowLabels: function () {
    this._axis.style('opacity', this.model.get('showLabels') ? 1 : 0);
  },

  _onChangePos: function () {
    var pos = this.model.get('pos');
    var margin = this.model.get('margin');

    var x = +pos.x;
    var y = +pos.y;

    this.chart
      .transition()
      .duration(150)
      .attr('transform', 'translate(' + (margin.left + x) + ', ' + (margin.top + y) + ')');
  },

  _onChangeDragging: function () {
    this.chart.classed('is-dragging', this.model.get('dragging'));

    if (!this.model.get('dragging') && this._isMobileViewport() && this._isTimeSeries()) {
      this._showAxisTip('right', false);
      this._showAxisTip('left', false);
    }
  },

  _toggleAxisTip: function (className, show) {
    var textLabel = this.chart.select('.CDB-Chart-axisTipText.CDB-Chart-axisTip-' + className);
    var rectLabel = this.chart.select('.CDB-Chart-axisTipRect.CDB-Chart-axisTip-' + className);
    var handle = this.chart.select('.CDB-Chart-handle.CDB-Chart-handle-' + className);
    var triangle = handle.select('.CDB-Chart-axisTipTriangle');
    var duration = 60;

    if (textLabel) {
      textLabel.transition().duration(duration).attr('opacity', show);
    }
    if (rectLabel) {
      rectLabel.transition().duration(duration).attr('opacity', show);
    }
    if (triangle) {
      triangle.transition().duration(duration).style('opacity', show);
    }
  },

  _showAxisTip: function (className, show) {
    this._toggleAxisTip(className, show ? 1 : 0);
  },

  _setAxisTipAccordingToBins: function () {
    var left = this._getValueFromBinIndex(this._getLoBarIndex());
    var right = this._getValueFromBinIndex(this._getHiBarIndex());
    if (this._isDateTimeSeries()) {
      right = timestampHelper.substractOneUnit(right, this._dataviewModel.get('aggregation'));
    }
    this._setAxisTip(left, right);
  },

  _setAxisTip: function (left, right) {
    if (this.options.hasAxisTip) {
      this.model.set({
        left_axis_tip: left,
        right_axis_tip: right
      });
    }
  },

  reset: function () {
    this._removeChartContent();
    this._setupDimensions();
    this._calcBarWidth();
    this._generateChartContent();
    this._generateShadowBars();
  },

  refresh: function () {
    this._createFormatter();
    this._setupDimensions();
    this._removeAxis();
    this._generateAxis();
    this._updateChart();
    this._refreshBarsColor();

    this.chart.select('.CDB-Chart-handles').moveToFront();
    this.chart.select('.Brush').moveToFront();
  },

  resetIndexes: function () {
    this.model.set({ lo_index: null, hi_index: null });
  },

  removeShadowBars: function () {
    this.model.set('show_shadow_bars', false);
  },

  _removeShadowBars: function () {
    this.chart.selectAll('.CDB-Chart-shadowBars').remove();
  },

  _removeBars: function () {
    this.chart.selectAll('.CDB-Chart-bars').remove();
  },

  _removeBrush: function () {
    this.chart.selectAll('.Brush').remove();
    this.chart.classed('is-selectable', false);
    this._axis.classed('is-disabled', false);
  },

  _removeLines: function () {
    this.chart.select('.CDB-Chart-lines').remove();
    this.chart.select('.CDB-Chart-line--bottom').remove();
  },

  _removeChartContent: function () {
    this._removeBrush();
    this._removeHandles();
    this._removeBars();
    this._removeAxis();
    this._removeLines();
  },

  _generateChartContent: function () {
    this._generateAxis();

    if (!(this._isTabletViewport() && this._isTimeSeries())) {
      this._generateLines();
    }

    this._generateBars();

    if (!(this._isMobileViewport() && this._isTimeSeries())) {
      this._generateBottomLine();
    }

    this._generateHandles();
    this._setupBrush();
  },

  _generateLines: function () {
    this._generateHorizontalLines();
    this._generateVerticalLines();
  },

  _generateVerticalLines: function () {
    var lines = this.chart.select('.CDB-Chart-lines');

    lines.append('g')
      .selectAll('.CDB-Chart-line')
      .data(this.verticalRange.slice(1, this.verticalRange.length - 1))
      .enter().append('svg:line')
      .attr('class', 'CDB-Chart-line')
      .attr('y1', 0)
      .attr('x1', function (d) { return d; })
      .attr('y2', this.chartHeight())
      .attr('x2', function (d) { return d; });
  },

  _generateHorizontalLines: function () {
    var lines = this.chart.append('g')
      .attr('class', 'CDB-Chart-lines');

    lines.append('g')
      .attr('class', 'y')
      .selectAll('.CDB-Chart-line')
      .data(this.horizontalRange.slice(0, this.horizontalRange.length - 1))
      .enter().append('svg:line')
      .attr('class', 'CDB-Chart-line')
      .attr('x1', 0)
      .attr('y1', function (d) { return d; })
      .attr('x2', this.chartWidth())
      .attr('y2', function (d) { return d; });
  },

  _generateBottomLine: function () {
    this.chart.append('line')
      .attr('class', 'CDB-Chart-line CDB-Chart-line--bottom')
      .attr('x1', 0)
      .attr('y1', this.chartHeight() - 1)
      .attr('x2', this.chartWidth() - 1)
      .attr('y2', this.chartHeight() - 1);
  },

  _setupD3Bindings: function () { // TODO: move to a helper
    d3.selection.prototype.moveToBack = function () {
      return this.each(function () {
        var firstChild = this.parentNode.firstChild;
        if (firstChild) {
          this.parentNode.insertBefore(this, firstChild);
        }
      });
    };

    d3.selection.prototype.moveToFront = function () {
      return this.each(function () {
        this.parentNode.appendChild(this);
      });
    };
  },

  _setupModel: function () {
    this.model = new CoreModel({
      bounded: false,
      showLabels: true,
      data: this.options.data,
      height: this.options.height,
      display: true,
      show_shadow_bars: this.options.displayShadowBars,
      margin: _.clone(this.options.margin),
      width: 0, // will be set on resize listener
      pos: { x: 0, y: 0 },
      normalized: this.options.normalized,
      local_timezone: this.options.local_timezone
    });
  },

  _setupBindings: function () {
    this.listenTo(this.model, 'change:data', this._onChangeData);
    this.listenTo(this.model, 'change:display', this._onChangeDisplay);
    this.listenTo(this.model, 'change:dragging', this._onChangeDragging);
    this.listenTo(this.model, 'change:height', this._onChangeHeight);
    this.listenTo(this.model, 'change:left_axis_tip', this._onChangeLeftAxisTip);
    this.listenTo(this.model, 'change:lo_index change:hi_index', this._onChangeRange);
    this.listenTo(this.model, 'change:pos', this._onChangePos);
    this.listenTo(this.model, 'change:right_axis_tip', this._onChangeRightAxisTip);
    this.listenTo(this.model, 'change:showLabels', this._onChangeShowLabels);
    this.listenTo(this.model, 'change:show_shadow_bars', this._onChangeShowShadowBars);
    this.listenTo(this.model, 'change:width', this._onChangeWidth);
    this.listenTo(this.model, 'change:normalized', this._onChangeNormalized);

    if (this._widgetModel) {
      this.listenTo(this._widgetModel, 'change:autoStyle', this._refreshBarsColor);
      this.listenTo(this._widgetModel, 'change:style', function () {
        this._setupFillColor();
        this._refreshBarsColor();
      });
    }

    if (this._dataviewModel) {
      this.listenTo(this._dataviewModel, 'change:offset change:localTimezone', function () {
        this.refresh();
      });
    }

    this.listenTo(this._layerModel, 'change:cartocss', function () {
      if (!this._areGradientsAlreadyGenerated()) {
        this._setupFillColor();
      }
    });

    if (this._originalData) {
      this.listenTo(this._originalData, 'change:data', function () {
        this.updateYScale();
        this._removeShadowBars();
        this._generateShadowBars();
      });
    }
  },

  _setupDimensions: function () {
    this._setupScales();
    this._setupRanges();
    this.forceResize();
  },

  _getData: function () {
    return (this._originalData && this._originalData.getData()) || this.model.get('data');
  },

  _getMaxData: function (data) {
    return d3.max(data, function (d) { return _.isEmpty(d) ? 0 : d.freq; });
  },

  _getXScale: function () {
    return d3.scale.linear().domain([0, 100]).range([0, this.chartWidth()]);
  },

  _getYScale: function () {
    var data = this.model.get('normalized') ? this.model.get('data') : this._getData();
    return d3.scale.linear().domain([0, this._getMaxData(data)]).range([this.chartHeight(), 0]);
  },

  updateXScale: function () {
    this.xScale = this._getXScale();
  },

  updateYScale: function () {
    this.yScale = this._getYScale();
  },

  resetYScale: function () {
    this.yScale = this._originalYScale;
  },

  _getDataForScales: function () {
    if (!this.model.get('bounded') && this._originalData) {
      return this._originalData.getData();
    } else {
      return this.model.get('data');
    }
  },

  _setupScales: function () {
    var data = this._getDataForScales();
    this.updateXScale();

    if (!this._originalYScale || this.model.get('normalized')) {
      this._originalYScale = this.yScale = this._getYScale();
    }

    if (!data || !data.length) {
      return;
    }

    var start = data[0].start;
    var end = data[data.length - 1].end;

    this.xAxisScale = d3.scale.linear().range([start, end]).domain([0, this.chartWidth()]);
  },

  _setupRanges: function () {
    this.verticalRange = this._calculateVerticalRangeDivisions();
    this.horizontalRange = d3.range(0, this.chartHeight() + this.chartHeight() / 2, this.chartHeight() / 2);
  },

  _calculateVerticalRangeDivisions: function () {
    if (this._isDateTimeSeries() && this.model.get('data').length > 0) {
      return this._calculateTimelySpacedDivisions();
    }
    return this._calculateEvenlySpacedDivisions();
  },

  _calculateTimelySpacedDivisions: function () {
    this._calcBarWidth();
    var divisions = Math.round(this.chartWidth() / this.options.divisionWidth);
    var bucketsPerDivision = Math.ceil(this.model.get('data').length / divisions);
    var range = [0];
    var index = 0;

    for (var i = 0; i < divisions; i++) {
      index = (i < (divisions - 1)) ? index + bucketsPerDivision : this.model.get('data').length;
      range.push(Math.ceil(this.xAxisScale.invert(this._getValueFromBinIndex(index))));
    }

    range = _.uniq(range);

    // Sometimes the last two ticks are too close. In those cases, we get rid of the second to last
    if (range.length >= 3) {
      var lastTwo = _.last(range, 2);
      if ((lastTwo[1] - lastTwo[0]) < this.options.divisionWidth) {
        range = _.without(range, lastTwo[0]);
      }
    }

    return range;
  },

  _calculateEvenlySpacedDivisions: function () {
    var divisions = Math.round(this.chartWidth() / this.options.divisionWidth);
    var step = this.chartWidth() / divisions;
    var stop = this.chartWidth() + step;
    var range = d3.range(0, stop, step).slice(0, divisions + 1);
    return range;
  },

  _calcBarWidth: function () {
    this.barWidth = this.chartWidth() / this.model.get('data').length;
  },

  _generateChart: function () {
    var margin = this.model.get('margin');

    this.chart = d3.select(this.el)
      .selectAll('.CDB-WidgetCanvas')
      .append('g')
      .attr('class', 'CDB-Chart')
      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

    this.chart.classed(this.options.className || '', true);
  },

  _onChangeShowShadowBars: function () {
    if (this.model.get('show_shadow_bars')) {
      this._generateShadowBars();
    } else {
      this._removeShadowBars();
    }
  },

  _onChangeDisplay: function () {
    if (this.model.get('display')) {
      this._show();
    } else {
      this._hide();
    }
  },

  hide: function () {
    this.model.set('display', false);
  },

  show: function () {
    this.model.set('display', true);
  },

  _hide: function () {
    this.$el.hide();
  },

  _show: function () {
    this.$el.show();
  },

  isHidden: function () {
    return !this.model.get('display');
  },

  _selectBars: function () {
    this.chart
      .selectAll('.CDB-Chart-bar')
      .classed({
        'is-selected': function (d, i) {
          return this._isBarChartWithinFilter(i);
        }.bind(this),
        'is-filtered': function (d, i) {
          return !this._isBarChartWithinFilter(i);
        }.bind(this)
      });
  },

  _isBarChartWithinFilter: function (i) {
    var extent = this.brush.extent();
    var lo = extent[0];
    var hi = extent[1];
    var a = Math.floor(i * this.barWidth);
    var b = Math.floor(a + this.barWidth);
    var LO = Math.floor(this.xScale(lo));
    var HI = Math.floor(this.xScale(hi));

    return (a > LO && a < HI) || (b > LO && b < HI) || (a <= LO && b >= HI);
  },

  _isDragging: function () {
    return this.model.get('dragging');
  },

  setAnimated: function () {
    return this.model.set('animated', true);
  },

  _isAnimated: function () {
    return this.model.get('animated');
  },

  _move: function (pos) {
    this.model.set({ pos: pos });
  },

  expand: function (height) {
    this.canvas.attr('height', this.model.get('height') + height);
    this._move({ x: 0, y: height });
  },

  contract: function (height) {
    this.canvas.attr('height', height);
    this._move({ x: 0, y: 0 });
  },

  resizeHeight: function (height) {
    this.model.set('height', height);
  },

  setNormalized: function (normalized) {
    this.model.set('normalized', !!normalized);
    return this;
  },

  removeSelection: function () {
    this.resetIndexes();
    this.chart.selectAll('.CDB-Chart-bar').classed({'is-selected': false, 'is-filtered': false});
    this._refreshBarsColor();
    this._removeBrush();
    this._setupBrush();
  },

  selectRange: function (loBarIndex, hiBarIndex) {
    if (!loBarIndex && !hiBarIndex) {
      return;
    }

    // -- HACK: Reset filter if any of the indexes is out of the scope
    var data = this._dataviewModel.get('data');
    if (!data[loBarIndex] || !data[hiBarIndex - 1]) {
      return this.trigger('on_reset_filter');
    }

    var loPosition = this._getBarPosition(loBarIndex);
    var hiPosition = this._getBarPosition(hiBarIndex);

    this.model.set({ lo_index: loBarIndex, hi_index: hiBarIndex });
    this._selectRange(loPosition, hiPosition);
  },

  _selectRange: function (loPosition, hiPosition) {
    this.chart.select('.Brush').transition()
      .duration(this.brush.empty() ? 0 : 150)
      .call(this.brush.extent([loPosition, hiPosition]))
      .call(this.brush.event);
  },

  _getLoBarIndex: function () {
    var extent = this.brush.extent();
    return Math.round(this.xScale(extent[0]) / this.barWidth);
  },

  _getHiBarIndex: function () {
    var extent = this.brush.extent();
    return Math.round(this.xScale(extent[1]) / this.barWidth);
  },

  _getBarIndex: function () {
    var x = d3.event.sourceEvent.layerX;
    return Math.floor(x / this.barWidth);
  },

  _getBarPosition: function (index) {
    var data = this.model.get('data');
    return index * (100 / data.length);
  },

  _setupBrush: function () {
    // define brush control element and its events
    var brush = d3.svg.brush()
      .x(this.xScale)
      .on('brush', this._onBrushMove)
      .on('brushend', this._onBrushEnd);

    // create svg group with class brush and call brush on it
    var brushg = this.chart.append('g')
      .attr('class', 'Brush')
      .call(brush);

    var height = this._isTabletViewport() && this._isTimeSeries() ? this.chartHeight() * 2 : this.chartHeight();
    // set brush extent to rect and define objects height
    brushg.selectAll('rect')
      .attr('y', 0)
      .attr('height', height);

    // Only bind on the background element
    brushg.selectAll('rect.background')
      .on('mouseout', this._onMouseOut)
      .on('mousemove', this._onMouseMove);

    // Prevent scroll while touching selections
    brushg.selectAll('rect')
      .classed('ps-prevent-touchmove', true);
    brushg.selectAll('g')
      .classed('ps-prevent-touchmove', true);

    this.brush = brush;

    // Make grabby handles as big as the display handles
    this.chart.selectAll('g.resize rect')
      .attr('width', this.options.handleWidth)
      .attr('x', -this.options.handleWidth / 2);
  },

  _onBrushMove: function () {
    if (!this.brush.empty()) {
      this.chart.classed('is-selectable', true);
      this._axis.classed('is-disabled', true);
      this.model.set({ dragging: true });
      this._selectBars();
      this._setupFillColor();
      this._refreshBarsColor();
      this._adjustBrushHandles();
      this._updateAxisTip('left');
      this._updateAxisTip('right');
    }
  },

  _onBrushEnd: function () {
    var data = this.model.get('data');
    var brush = this.brush;
    var loPosition, hiPosition;

    var loBarIndex = this._getLoBarIndex();
    var hiBarIndex = this._getHiBarIndex();

    this.model.set({ dragging: false });

    // click in animated histogram
    if (brush.empty() && this._isAnimated()) {
      // Send 0..1 factor of position of click in graph
      this.trigger('on_brush_click', brush.extent()[0] / 100);

      return;
    } else {
      loPosition = this._getBarPosition(loBarIndex);
      hiPosition = this._getBarPosition(hiBarIndex);

      // for some reason d3 launches several brushend events
      if (!d3.event.sourceEvent) {
        return;
      }

      // click in first and last indexes
      if (loBarIndex === hiBarIndex) {
        if (hiBarIndex >= data.length) {
          loBarIndex = data.length - 1;
          hiBarIndex = data.length;
        } else {
          hiBarIndex = hiBarIndex + 1;
        }
      }

      this.model.set({ lo_index: loBarIndex, hi_index: hiBarIndex }, { silent: true });
      // Maybe the indexes don't change, and the handlers end up stuck in the middle of the
      // bucket because the event doesn't trigger, so let's trigger it manually
      this.model.trigger('change:lo_index');
    }

    // click in non animated histogram
    if (d3.event.sourceEvent && loPosition === undefined && hiPosition === undefined) {
      var barIndex = this._getBarIndex();
      this.model.set({ lo_index: barIndex, hi_index: barIndex + 1 });
    }

    this._setupFillColor();
    this._refreshBarsColor();
  },

  _onMouseOut: function () {
    var bars = this.chart.selectAll('.CDB-Chart-bar');

    bars
      .classed('is-highlighted', false)
      .attr('fill', this._getFillColor.bind(this));

    this.trigger('hover', { target: null });
  },

  _onMouseMove: function () {
    var x = d3.event.offsetX - this.model.get('margin').left;

    var barIndex = Math.floor(x / this.barWidth);
    var data = this.model.get('data');

    if (data[barIndex] === undefined || data[barIndex] === null) {
      return;
    }

    var freq = data[barIndex].freq;
    var hoverProperties = {};

    var bar = this.chart.select('.CDB-Chart-bar:nth-child(' + (barIndex + 1) + ')');

    if (bar && bar.node() && !bar.classed('is-selected')) {
      var left = (barIndex * this.barWidth) + (this.barWidth / 2);
      var top = this.yScale(freq);
      var h = this.chartHeight() - this.yScale(freq);

      if (h < this.options.minimumBarHeight && h > 0) {
        top = this.chartHeight() - this.options.minimumBarHeight;
      }

      if (!this._isDragging() && freq > 0) {
        var d = this.formatter(freq);
        hoverProperties = { target: bar[0][0], top: top, left: left, data: d };
      } else {
        hoverProperties = null;
      }
    } else {
      hoverProperties = null;
    }

    this.trigger('hover', hoverProperties);

    this.chart.selectAll('.CDB-Chart-bar')
      .classed('is-highlighted', false)
      .attr('fill', this._getFillColor.bind(this));

    if (bar && bar.node()) {
      bar.attr('fill', function () {
        return this._getHoverFillColor(data[barIndex], barIndex);
      }.bind(this));
      bar.classed('is-highlighted', true);
    }
  },

  _adjustBrushHandles: function () {
    var extent = this.brush.extent();

    var loExtent = extent[0];
    var hiExtent = extent[1];

    this._moveHandle(loExtent, 'left');
    this._moveHandle(hiExtent, 'right');

    this._setAxisTipAccordingToBins();
  },

  _moveHandle: function (position, selector) {
    var handle = this.chart.select('.CDB-Chart-handle-' + selector);
    var fixedPosition = position.toFixed(5);
    var x = this.xScale(fixedPosition) - this.options.handleWidth / 2;
    var display = (fixedPosition >= 0 && fixedPosition <= 100) ? 'inline' : 'none';

    handle
      .style('display', display)
      .attr('transform', 'translate(' + x + ', 0)');
  },

  _generateAxisTip: function (className) {
    var handle = this.chart.select('.CDB-Chart-handle.CDB-Chart-handle-' + className);

    var yPos = className === 'right' && !(this._isMobileViewport() && this._isTimeSeries())
      ? this.chartHeight() + (TRIANGLE_HEIGHT * TRIANGLE_RIGHT_FACTOR) : -(TRIANGLE_HEIGHT + TIP_RECT_HEIGHT + TOOLTIP_MARGIN);
    yPos = Math.floor(yPos);

    var yTriangle = className === 'right' && !(this._isMobileViewport() && this._isTimeSeries())
      ? this.chartHeight() + (TRIANGLE_HEIGHT * TRIANGLE_RIGHT_FACTOR) + 2 : -(TRIANGLE_HEIGHT + TOOLTIP_MARGIN) - 2;
    var yFactor = className === 'right' ? -1 : 1;
    var triangleHeight = TRIANGLE_HEIGHT * yFactor;

    var axisTip = handle.selectAll('g')
      .data([''])
      .enter().append('g')
      .attr('class', 'CDB-Chart-axisTip CDB-Chart-axisTip-' + className)
      .attr('transform', 'translate(0,' + yPos + ')');

    handle.append('path')
      .attr('class', 'CDB-Chart-axisTipRect CDB-Chart-axisTipTriangle')
      .attr('transform', 'translate(' + ((this.options.handleWidth / 2) - (TRIANGLE_SIDE / 2)) + ', ' + yTriangle + ')')
      .attr('d', trianglePath(0, 0, TRIANGLE_SIDE, 0, (TRIANGLE_SIDE / 2), triangleHeight, yFactor))
      .style('opacity', '1');

    axisTip.append('rect')
      .attr('class', 'CDB-Chart-axisTipRect CDB-Chart-axisTip-' + className)
      .attr('rx', '2')
      .attr('ry', '2')
      .attr('opacity', '1')
      .attr('height', TIP_RECT_HEIGHT);

    axisTip.append('text')
      .attr('class', 'CDB-Text CDB-Size-small CDB-Chart-axisTipText CDB-Chart-axisTip-' + className)
      .attr('dy', '11')
      .attr('dx', '0')
      .attr('opacity', '1')
      .text(function (d) { return d; });
  },

  _isTabletViewport: function () {
    return viewportUtils.isTabletViewport();
  },

  _generateHandle: function (className) {
    var height = this._isTabletViewport() && this._isTimeSeries() ? this.chartHeight() * 2 : this.chartHeight();
    var opts = { width: this.options.handleWidth, height: height, radius: this.options.handleRadius };

    var handle = this.chart.select('.CDB-Chart-handles')
      .append('g')
      .attr('class', 'CDB-Chart-handle CDB-Chart-handle-' + className);

    if (this.options.hasAxisTip) {
      this._generateAxisTip(className);
    }

    if (this.options.hasHandles) {
      handle
        .append('rect')
        .attr('class', 'CDB-Chart-handleRect')
        .attr('width', opts.width)
        .attr('height', opts.height)
        .attr('rx', opts.radius)
        .attr('ry', opts.radius);

      var y = this._isTabletViewport() && this._isTimeSeries() ? this.chartHeight() : this.chartHeight() / 2;
      y -= 3;
      var x1 = (opts.width - DASH_WIDTH) / 2;

      for (var i = 0; i < 3; i++) {
        handle
          .append('line')
          .attr('class', 'CDB-Chart-handleGrip')
          .attr('x1', x1)
          .attr('y1', y + i * 3)
          .attr('x2', x1 + DASH_WIDTH)
          .attr('y2', y + i * 3);
      }
    }

    return handle;
  },

  _generateHandles: function () {
    this.chart.append('g').attr('class', 'CDB-Chart-handles');
    this.leftHandle = this._generateHandle('left');
    this.rightHandle = this._generateHandle('right');
  },

  _removeHandles: function () {
    this.chart.select('.CDB-Chart-handles').remove();
  },

  _removeAxis: function () {
    this.canvas.select('.CDB-Chart-axis').remove();
  },

  _generateAdjustAnchorMethod: function (ticks) {
    return function (d, i) {
      if (i === 0) {
        return 'start';
      } else if (i === (ticks.length - 1)) {
        return 'end';
      } else {
        return 'middle';
      }
    };
  },

  _generateAxis: function () {
    this._axis = this._generateNumericAxis();

    this._onChangeShowLabels();
  },

  _generateNumericAxis: function () {
    var self = this;
    var adjustTextAnchor = this._generateAdjustAnchorMethod(this.verticalRange);

    var axis = this.chart.append('g')
      .attr('class', 'CDB-Chart-axis CDB-Text CDB-Size-small');

    function verticalToValue (d) {
      return self.xAxisScale
        ? self.xAxisScale(d)
        : null;
    }

    axis
      .append('g')
      .selectAll('.Label')
      .data(this.verticalRange)
      .enter().append('text')
      .attr('x', function (d) {
        return d;
      })
      .attr('y', function () { return self.chartHeight() + 15; })
      .attr('text-anchor', adjustTextAnchor)
      .text(function (d) {
        var value = verticalToValue(d);
        if (_.isFinite(value)) {
          return self.formatter(value);
        }
      });

    return axis;
  },

  _getMinValueFromBinIndex: function (binIndex) {
    var data = this.model.get('data');
    var dataBin = data[binIndex];
    if (dataBin) {
      return dataBin.min != null ? dataBin.min : dataBin.start;
    } else {
      return null;
    }
  },

  _getMaxValueFromBinIndex: function (binIndex) {
    var result = null;
    var data = this.model.get('data');
    var dataBin = data[binIndex];
    if (dataBin) {
      if (this._isDateTimeSeries() && !_.isUndefined(dataBin.next)) {
        result = dataBin.next;
      } else {
        result = dataBin.min != null ? dataBin.max : dataBin.end;
      }
    }

    return result;
  },

  _getValueFromBinIndex: function (index) {
    if (!_.isNumber(index)) {
      return null;
    }
    var result = null;
    var fromStart = true;
    var data = this.model.get('data');
    if (index >= data.length) {
      index = data.length - 1;
      fromStart = false;
    }
    var dataBin = data[index];
    if (dataBin) {
      result = fromStart ? dataBin.start : _.isFinite(dataBin.next) ? dataBin.next : dataBin.end;
    }

    return result;
  },

  _getIndexFromValue: function (value) {
    var index = _.findIndex(this.model.get('data'), function (bin) {
      return bin.start <= value && value <= bin.end;
    });
    return index;
  },

  _getMaxFromData: function () {
    return this.model.get('data').length > 0
      ? _.last(this.model.get('data')).end
      : null;
  },

  // Calculates the domain ([ min, max ]) of the selected data. If there is no selection ongoing,
  // it will take the first and last buckets with frequency.
  _calculateDataDomain: function () {
    var data = _.clone(this.model.get('data'));
    var minBin;
    var maxBin;
    var minValue;
    var maxValue;

    if (!this._hasFilterApplied()) {
      minValue = this._getMinValueFromBinIndex(0);
      maxValue = this._getMaxValueFromBinIndex(data.length - 1);

      minBin = _.find(data, function (d) {
        return d.freq !== 0;
      });

      maxBin = _.find(data.reverse(), function (d) {
        return d.freq !== 0;
      });
    } else {
      var loBarIndex = this._getLoBarIndex();
      var hiBarIndex = this._getHiBarIndex() - 1;
      var filteredData = data.slice(loBarIndex, hiBarIndex);

      if (_.isNaN(loBarIndex) || _.isNaN(hiBarIndex)) {
        return [0, 0];
      }

      minValue = this._getMinValueFromBinIndex(loBarIndex);
      maxValue = this._getMaxValueFromBinIndex(hiBarIndex);

      if (data[loBarIndex] && data[loBarIndex].freq === 0) {
        minBin = _.find(filteredData, function (d) {
          return d.freq !== 0;
        }, this);
      }

      if (data[hiBarIndex] && data[hiBarIndex].freq === 0) {
        var reversedData = filteredData.reverse();
        maxBin = _.find(reversedData, function (d) {
          return d.freq !== 0;
        }, this);
      }
    }

    minValue = minBin ? (minBin.min != null ? minBin.min : minBin.start) : minValue;
    maxValue = maxBin ? (maxBin.max != null ? maxBin.max : maxBin.end) : maxValue;

    return [minValue, maxValue];
  },

  _removeFillGradients: function () {
    var defs = d3.select(this.el).select('defs');
    defs.remove();
    delete this._linearGradients;
  },

  _areGradientsAlreadyGenerated: function () {
    return !!this._linearGradients;
  },

  // Generate a linear-gradient with several stops for each bar
  // in order to generate the proper colors ramp. It will depend
  // of the domain of the selected data.
  _generateFillGradients: function () {
    if (!this._widgetModel || !this._widgetModel.isAutoStyleEnabled()) {
      return false;
    }

    var obj = this._widgetModel.getAutoStyle();

    if (_.isEmpty(obj) || _.isEmpty(obj.definition)) {
      return false;
    }

    var self = this;
    var geometryDefinition = obj.definition[Object.keys(obj.definition)[0]]; // Gets first definition by geometry
    var colorsRange = geometryDefinition && geometryDefinition.color && geometryDefinition.color.range;
    var interpolatedColors = d3Interpolate.interpolateRgbBasis(colorsRange);
    var colorsRangeHover = _.map(colorsRange, function (color) {
      return d3.rgb(color).darker(0.3).toString();
    });
    var interpolatedHoverColors = d3Interpolate.interpolateRgbBasis(colorsRangeHover);
    var data = this.model.get('data');
    var domain = this._calculateDataDomain();
    var domainScale = d3.scale.linear().domain(domain).range([0, 1]);
    var defs = d3.select(this.el).append('defs');
    var stopsNumber = 4; // It is not necessary to create as many stops as colors

    this._linearGradients = defs
      .selectAll('.gradient')
      .data(data)
      .enter()
      .append('linearGradient')
      .attr('class', 'gradient')
      .attr('id', function (d, i) {
        // This is the scale for each bin, used in each stop within this gradient
        this.__scale__ = d3.scale.linear()
          .range([ self._getMinValueFromBinIndex(i), self._getMaxValueFromBinIndex(i) ])
          .domain([0, 1]);
        return 'bar-' + self.cid + '-' + i;
      })
      .attr('x1', '0%')
      .attr('y1', '0%')
      .attr('x2', '100%')
      .attr('y2', '0%');

    this._linearGradientsHover = defs
      .selectAll('.gradient-hover')
      .data(data)
      .enter()
      .append('linearGradient')
      .attr('class', 'gradient-hover')
      .attr('id', function (d, i) {
        // This is the scale for each bin, used in each stop within this gradient
        this.__scale__ = d3.scale.linear()
          .range([self._getMinValueFromBinIndex(i), self._getMaxValueFromBinIndex(i)])
          .domain([0, 1]);
        return 'bar-' + self.cid + '-' + i + '-hover';
      })
      .attr('x1', '0%')
      .attr('y1', '0%')
      .attr('x2', '100%')
      .attr('y2', '0%');

    this._linearGradients
      .selectAll('stop')
      .data(d3.range(stopsNumber + 1))
      .enter()
      .append('stop')
      .attr('offset', function (d, i) {
        var offset = this.__offset__ = Math.floor(((i) / stopsNumber) * 100);
        return (offset + '%');
      })
      .attr('stop-color', function () {
        var localScale = this.parentNode.__scale__;
        var interpolateValue = domainScale(localScale(this.__offset__ / 100));
        return interpolatedColors(interpolateValue);
      });

    this._linearGradientsHover
      .selectAll('stop')
      .data(d3.range(stopsNumber + 1))
      .enter()
      .append('stop')
      .attr('offset', function (d, i) {
        var offset = this.__offset__ = Math.floor(((i) / stopsNumber) * 100);
        return (offset + '%');
      })
      .attr('stop-color', function () {
        var localScale = this.parentNode.__scale__;
        var interpolateValue = domainScale(localScale(this.__offset__ / 100));
        return interpolatedHoverColors(interpolateValue);
      });
  },

  _setupFillColor: function () {
    this._removeFillGradients();
    this._generateFillGradients();
  },

  _getFillColor: function (d, i) {
    if (this._widgetModel) {
      if (this._widgetModel.isAutoStyle()) {
        if (this._hasFilterApplied()) {
          if (!this._isBarChartWithinFilter(i)) {
            return UNFILTERED_COLOR;
          }
        }

        return 'url(#bar-' + this.cid + '-' + i + ')';
      } else {
        if (this._hasFilterApplied()) {
          if (this._isBarChartWithinFilter(i)) {
            return FILTERED_COLOR;
          } else {
            return UNFILTERED_COLOR;
          }
        }

        return this._widgetModel.getWidgetColor() || this.options.chartBarColor;
      }
    }

    return this.options.chartBarColor;
  },

  _getHoverFillColor: function (d, i) {
    var currentFillColor = this._getFillColor(d, i);

    if (this._widgetModel) {
      if (this._widgetModel.isAutoStyle()) {
        return 'url(#bar-' + this.cid + '-' + i + '-hover)';
      }
    }

    return d3.rgb(currentFillColor).darker(0.3).toString();
  },

  _updateChart: function () {
    var self = this;
    var data = this.model.get('data');

    var bars = this.chart.selectAll('.CDB-Chart-bar')
      .data(data);

    bars
      .enter()
      .append('rect')
      .attr('class', 'CDB-Chart-bar')
      .attr('fill', this._getFillColor.bind(this))
      .attr('x', function (d, i) {
        return i * self.barWidth;
      })
      .attr('y', self.chartHeight())
      .attr('height', 0)
      .attr('width', Math.max(0, this.barWidth - 1));

    bars
      .attr('data-tooltip', function (d) {
        return self._tooltipFormatter(d.freq);
      })
      .transition()
      .duration(200)
      .attr('height', function (d) {
        if (_.isEmpty(d)) {
          return 0;
        }

        if (self._isMobileViewport() && self._isTimeSeries()) {
          return MOBILE_BAR_HEIGHT;
        }

        var h = self.chartHeight() - self.yScale(d.freq);

        if (h < self.options.minimumBarHeight && h > 0) {
          h = self.options.minimumBarHeight;
        }
        return h;
      })
      .attr('y', function (d) {
        if (_.isEmpty(d)) {
          return self.chartHeight();
        }

        if (self._isMobileViewport() && self._isTimeSeries()) {
          return self.chartHeight() / 2 + MOBILE_BAR_HEIGHT;
        }

        var h = self.chartHeight() - self.yScale(d.freq);

        if (h < self.options.minimumBarHeight && h > 0) {
          return self.chartHeight() - self.options.minimumBarHeight;
        } else {
          return self.yScale(d.freq);
        }
      });

    bars
      .exit()
      .transition()
      .duration(200)
      .attr('height', function () {
        return 0;
      })
      .attr('y', function () {
        return self.chartHeight();
      });
  },

  _refreshBarsColor: function () {
    this.chart
      .selectAll('.CDB-Chart-bar')
      .classed('is-highlighted', false)
      .attr('fill', this._getFillColor.bind(this));
  },

  _isMobileViewport: function () {
    return viewportUtils.isMobileViewport();
  },

  _generateBars: function () {
    var self = this;
    var data = this.model.get('data');

    this._calcBarWidth();
    // Remove spacing if not enough room for the smallest case, or mobile viewport
    var spacing = ((((data.length * 2) - 1) > this.chartWidth() || this._isMobileViewport()) && this._isDateTimeSeries()) ? 0 : 1;

    var bars = this.chart.append('g')
      .attr('transform', 'translate(0, 0)')
      .attr('class', 'CDB-Chart-bars')
      .selectAll('.CDB-Chart-bar')
      .data(data);

    bars
      .enter()
      .append('rect')
      .attr('class', 'CDB-Chart-bar')
      .attr('fill', this._getFillColor.bind(self))
      .attr('x', function (d, i) {
        return i * self.barWidth;
      })
      .attr('y', self.chartHeight())
      .attr('height', 0)
      .attr('data-tooltip', function (d) {
        return self._tooltipFormatter(d.freq);
      })
      .attr('width', Math.max(1, this.barWidth - spacing));

    bars
      .attr('data-tooltip', function (d) {
        return self._tooltipFormatter(d.freq);
      })
      .transition()
      .ease(this.options.transitionType)
      .duration(this.options.animationSpeed)
      .delay(this.options.animationBarDelay)
      .transition()
      .attr('height', function (d) {
        if (_.isEmpty(d)) {
          return 0;
        }

        if (self._isMobileViewport() && self._isTimeSeries()) {
          return MOBILE_BAR_HEIGHT;
        }

        var h = self.chartHeight() - self.yScale(d.freq);
        if (h < self.options.minimumBarHeight && h > 0) {
          h = self.options.minimumBarHeight;
        }

        return h;
      })
      .attr('y', function (d) {
        if (_.isEmpty(d)) {
          return self.chartHeight();
        }

        if (self._isMobileViewport() && self._isTimeSeries()) {
          return self.chartHeight() / 2 + MOBILE_BAR_HEIGHT;
        }

        var h = self.chartHeight() - self.yScale(d.freq);

        if (h < self.options.minimumBarHeight && h > 0) {
          return self.chartHeight() - self.options.minimumBarHeight;
        } else {
          return self.yScale(d.freq);
        }
      });
  },

  showShadowBars: function () {
    if (this.options.displayShadowBars) {
      this.model.set('show_shadow_bars', true);
    }
  },

  _generateShadowBars: function () {
    var data = this._getData();

    if (!data || !data.length || !this.model.get('show_shadow_bars') || this.model.get('normalized')) {
      this._removeShadowBars();
      return;
    }

    this._removeShadowBars();

    var self = this;

    var yScale = d3.scale.linear().domain([0, this._getMaxData(data)]).range([this.chartHeight(), 0]);

    var barWidth = this.chartWidth() / data.length;

    this.chart.append('g')
      .attr('transform', 'translate(0, 0)')
      .attr('class', 'CDB-Chart-shadowBars')
      .selectAll('.CDB-Chart-shadowBar')
      .data(data)
      .enter()
      .append('rect')
      .attr('class', 'CDB-Chart-shadowBar')
      .attr('x', function (d, i) {
        return i * barWidth;
      })
      .attr('y', function (d) {
        if (_.isEmpty(d)) {
          return self.chartHeight();
        }

        var h = self.chartHeight() - yScale(d.freq);

        if (h < self.options.minimumBarHeight && h > 0) {
          return self.chartHeight() - self.options.minimumBarHeight;
        } else {
          return yScale(d.freq);
        }
      })
      .attr('width', Math.max(0.5, barWidth - 1))
      .attr('height', function (d) {
        if (_.isEmpty(d)) {
          return 0;
        }

        var h = self.chartHeight() - yScale(d.freq);

        if (h < self.options.minimumBarHeight && h > 0) {
          h = self.options.minimumBarHeight;
        }
        return h;
      });

    // We need to explicitly move the lines of the grid behind the shadow bars
    this.chart.selectAll('.CDB-Chart-shadowBars').moveToBack();
    this.chart.selectAll('.CDB-Chart-lines').moveToBack();
  },

  _hasFilterApplied: function () {
    return this.model.get('lo_index') != null && this.model.get('hi_index') != null;
  },

  _isTimeSeries: function () {
    return this.options.type.indexOf('time') === 0;
  },

  _isDateTimeSeries: function () {
    return this.options.type === 'time-date';
  },

  _calculateDivisionWithByAggregation: function (aggregation) {
    switch (aggregation) {
      case 'year':
        return 50;
      case 'quarter':
      case 'month':
        return 80;
      case 'week':
      case 'day':
        return 120;
      default:
        return 140;
    }
  },

  _createFormatter: function () {
    this.formatter = formatter.formatNumber;

    if (this._isDateTimeSeries()) {
      this.formatter = formatter.timestampFactory(this._dataviewModel.get('aggregation'), this._dataviewModel.getCurrentOffset());
      this.options.divisionWidth = this._calculateDivisionWithByAggregation(this._dataviewModel.get('aggregation'));
    }
  },

  unsetBounds: function () {
    this.model.set('bounded', false);
    this.updateYScale();
    this.contract(this.options.height);
    this.resetIndexes();
    this.removeSelection();
    this._setupFillColor();
  },

  setBounds: function () {
    this.model.set('bounded', true);
    this.updateYScale();
    this.expand(4);
    this.removeShadowBars();
  }
});