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();
}
});