Websites/perf.webkit.org/public/v2/interactive-chart.js

   1 App.InteractiveChartComponent = Ember.Component.extend({
   2     chartData: null,
   3     showXAxis: true,
   4     showYAxis: true,
   5     interactive: false,
   6     enableSelection: true,
   7     classNames: ['chart'],
   8     init: function ()
   9     {
  10         this._super();
  11         this._needsConstruction = true;
  12         this._eventHandlers = [];
  13         $(window).resize(this._updateDimensionsIfNeeded.bind(this));
  14     },
  15     chartDataDidChange: function ()
  16     {
  17         var chartData = this.get('chartData');
  18         if (!chartData)
  19             return;
  20         this._needsConstruction = true;
  21         this._totalWidth = undefined;
  22         this._totalHeight = undefined;
  23         this._constructGraphIfPossible(chartData);
  24     }.observes('chartData').on('init'),
  25     didInsertElement: function ()
  26     {
  27         var chartData = this.get('chartData');
  28         if (chartData)
  29             this._constructGraphIfPossible(chartData);
  30
  31         if (this.get('interactive')) {
  32             var element = this.get('element');
  33             this._attachEventListener(element, "mousemove", this._mouseMoved.bind(this));
  34             this._attachEventListener(element, "mouseleave", this._mouseLeft.bind(this));
  35             this._attachEventListener(element, "mousedown", this._mouseDown.bind(this));
  36             this._attachEventListener($(element).parents("[tabindex]"), "keydown", this._keyPressed.bind(this));
  37         }
  38     },
  39     willClearRender: function ()
  40     {
  41         this._eventHandlers.forEach(function (item) {
  42             $(item[0]).off(item[1], item[2]);
  43         })
  44     },
  45     _attachEventListener: function(target, eventName, listener)
  46     {
  47         this._eventHandlers.push([target, eventName, listener]);
  48         $(target).on(eventName, listener);
  49     },
  50     _constructGraphIfPossible: function (chartData)
  51     {
  52         if (!this._needsConstruction || !this.get('element'))
  53             return;
  54
  55         var element = this.get('element');
  56
  57         this._x = d3.time.scale();
  58         this._y = d3.scale.linear();
  59
  60         if (this._svgElement)
  61             this._svgElement.remove();
  62         this._svgElement = d3.select(element).append("svg")
  63                 .attr("width", "100%")
  64                 .attr("height", "100%");
  65
  66         var svg = this._svg = this._svgElement.append("g");
  67
  68         var clipId = element.id + "-clip";
  69         this._clipPath = svg.append("defs").append("clipPath")
  70             .attr("id", clipId)
  71             .append("rect");
  72
  73         if (this.get('showXAxis')) {
  74             this._xAxis = d3.svg.axis().scale(this._x).orient("bottom").ticks(6);
  75             this._xAxisLabels = svg.append("g")
  76                 .attr("class", "x axis");
  77         }
  78
  79         var isInteractive = this.get('interactive');
  80         if (this.get('showYAxis')) {
  81             this._yAxis = d3.svg.axis().scale(this._y).orient("left").ticks(6).tickFormat(chartData.formatter);
  82
  83             this._yAxisLabels = svg.append('g').attr('class', 'y axis' + (isInteractive ? ' interactive' : ''));
  84             if (isInteractive) {
  85                 var self = this;
  86                 this._yAxisLabels.on('click', function () { self.toggleProperty('showFullYAxis'); });
  87             }
  88         }
  89
  90         this._clippedContainer = svg.append("g")
  91             .attr("clip-path", "url(#" + clipId + ")");
  92
  93         var xScale = this._x;
  94         var yScale = this._y;
  95         this._timeLine = d3.svg.line()
  96             .x(function(point) { return xScale(point.time); })
  97             .y(function(point) { return yScale(point.value); });
  98
  99         this._confidenceArea = d3.svg.area()
 100 //            .interpolate("cardinal")
 101             .x(function(point) { return xScale(point.time); })
 102             .y0(function(point) { return point.interval ? yScale(point.interval[0]) : null; })
 103             .y1(function(point) { return point.interval ? yScale(point.interval[1]) : null; });
 104
 105         this._paths = [];
 106         this._areas = [];
 107         this._dots = [];
 108         this._highlights = null;
 109
 110         this._currentTimeSeries = chartData.current;
 111         this._currentTimeSeriesData = this._currentTimeSeries.series();
 112         this._baselineTimeSeries = chartData.baseline;
 113         this._targetTimeSeries = chartData.target;
 114         this._movingAverageTimeSeries = chartData.movingAverage;
 115
 116         this._yAxisUnit = chartData.unit;
 117
 118         if (this._baselineTimeSeries) {
 119             this._paths.push(this._clippedContainer
 120                 .append("path")
 121                 .datum(this._baselineTimeSeries.series())
 122                 .attr("class", "baseline"));
 123         }
 124         if (this._targetTimeSeries) {
 125             this._paths.push(this._clippedContainer
 126                 .append("path")
 127                 .datum(this._targetTimeSeries.series())
 128                 .attr("class", "target"));
 129         }
 130
 131         var movingAverageIsVisible = this._movingAverageTimeSeries;
 132         var foregroundClass = movingAverageIsVisible ? '' : ' foreground';
 133         this._areas.push(this._clippedContainer
 134             .append("path")
 135             .datum(this._currentTimeSeriesData)
 136             .attr("class", "area" + foregroundClass));
 137
 138         this._paths.push(this._clippedContainer
 139             .append("path")
 140             .datum(this._currentTimeSeriesData)
 141             .attr("class", "current" + foregroundClass));
 142
 143         this._dots.push(this._clippedContainer
 144             .selectAll(".dot")
 145                 .data(this._currentTimeSeriesData)
 146             .enter().append("circle")
 147                 .attr("class", "dot" + foregroundClass)
 148                 .attr("r", this.get('chartPointRadius') || 1));
 149
 150         if (movingAverageIsVisible) {
 151             this._paths.push(this._clippedContainer
 152                 .append("path")
 153                 .datum(this._movingAverageTimeSeries.series())
 154                 .attr("class", "movingAverage"));
 155
 156             this._areas.push(this._clippedContainer
 157                 .append("path")
 158                 .datum(this._movingAverageTimeSeries.series())
 159                 .attr("class", "envelope"));
 160         }
 161
 162         if (isInteractive) {
 163             this._currentItemLine = this._clippedContainer
 164                 .append("line")
 165                 .attr("class", "current-item");
 166
 167             this._currentItemCircle = this._clippedContainer
 168                 .append("circle")
 169                 .attr("class", "dot current-item")
 170                 .attr("r", 3);
 171         }
 172
 173         this._brush = null;
 174         if (this.get('enableSelection')) {
 175             this._brush = d3.svg.brush()
 176                 .x(this._x)
 177                 .on("brush", this._brushChanged.bind(this));
 178
 179             this._brushRect = this._clippedContainer
 180                 .append("g")
 181                 .attr("class", "x brush");
 182         }
 183
 184         this._updateDomain();
 185         this._updateDimensionsIfNeeded();
 186
 187         // Work around the fact the brush isn't set if we updated it synchronously here.
 188         setTimeout(this._selectionChanged.bind(this), 0);
 189
 190         setTimeout(this._selectedItemChanged.bind(this), 0);
 191
 192         this._needsConstruction = false;
 193
 194         this._highlightedItemsChanged();
 195         this._rangesChanged();
 196     },
 197     _updateDomain: function ()
 198     {
 199         var xDomain = this.get('domain');
 200         var intrinsicXDomain = this._computeXAxisDomain(this._currentTimeSeriesData);
 201         if (!xDomain)
 202             xDomain = intrinsicXDomain;
 203         var yDomain = this._computeYAxisDomain(xDomain[0], xDomain[1]);
 204
 205         var currentXDomain = this._x.domain();
 206         var currentYDomain = this._y.domain();
 207         if (currentXDomain && App.domainsAreEqual(currentXDomain, xDomain)
 208             && currentYDomain && App.domainsAreEqual(currentYDomain, yDomain))
 209             return currentDomain;
 210
 211         this._x.domain(xDomain);
 212         this._y.domain(yDomain);
 213         return xDomain;
 214     },
 215     _updateDimensionsIfNeeded: function (newSelection)
 216     {
 217         var element = $(this.get('element'));
 218
 219         var newTotalWidth = element.width();
 220         var newTotalHeight = element.height();
 221         if (this._totalWidth == newTotalWidth && this._totalHeight == newTotalHeight)
 222             return;
 223
 224         this._totalWidth = newTotalWidth;
 225         this._totalHeight = newTotalHeight;
 226
 227         if (!this._rem)
 228             this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
 229         var rem = this._rem;
 230
 231         var padding = 0.5 * rem;
 232         var margin = {top: padding, right: padding, bottom: padding, left: padding};
 233         if (this._xAxis)
 234             margin.bottom += rem;
 235         if (this._yAxis)
 236             margin.left += 3 * rem;
 237
 238         this._margin = margin;
 239         this._contentWidth = this._totalWidth - margin.left - margin.right;
 240         this._contentHeight = this._totalHeight - margin.top - margin.bottom;
 241
 242         this._svg.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 243
 244         this._clipPath
 245             .attr("width", this._contentWidth)
 246             .attr("height", this._contentHeight);
 247
 248         this._x.range([0, this._contentWidth]);
 249         this._y.range([this._contentHeight, 0]);
 250
 251         if (this._xAxis) {
 252             this._xAxis.ticks(Math.round(this._contentWidth / 4 / rem));
 253             this._xAxis.tickSize(-this._contentHeight);
 254             this._xAxisLabels.attr("transform", "translate(0," + this._contentHeight + ")");
 255         }
 256
 257         if (this._yAxis) {
 258             this._yAxis.ticks(Math.round(this._contentHeight / 2 / rem));
 259             this._yAxis.tickSize(-this._contentWidth);
 260         }
 261
 262         if (this._currentItemLine) {
 263             this._currentItemLine
 264                 .attr("y1", 0)
 265                 .attr("y2", margin.top + this._contentHeight);
 266         }
 267
 268         this._relayoutDataAndAxes(this._currentSelection());
 269     },
 270     _updateBrush: function ()
 271     {
 272         this._brushRect
 273             .call(this._brush)
 274         .selectAll("rect")
 275             .attr("y", 1)
 276             .attr("height", this._contentHeight - 2);
 277         this._updateSelectionToolbar();
 278     },
 279     _relayoutDataAndAxes: function (selection)
 280     {
 281         var timeline = this._timeLine;
 282         this._paths.forEach(function (path) { path.attr("d", timeline); });
 283
 284         var confidenceArea = this._confidenceArea;
 285         this._areas.forEach(function (path) { path.attr("d", confidenceArea); });
 286
 287         var xScale = this._x;
 288         var yScale = this._y;
 289         this._dots.forEach(function (dot) {
 290             dot
 291                 .attr("cx", function(measurement) { return xScale(measurement.time); })
 292                 .attr("cy", function(measurement) { return yScale(measurement.value); });
 293         });
 294         this._updateHighlightPositions();
 295         this._updateRangeBarRects();
 296
 297         if (this._brush) {
 298             if (selection)
 299                 this._brush.extent(selection);
 300             else
 301                 this._brush.clear();
 302             this._updateBrush();
 303         }
 304
 305         this._updateCurrentItemIndicators();
 306
 307         if (this._xAxis)
 308             this._xAxisLabels.call(this._xAxis);
 309         if (!this._yAxis)
 310             return;
 311
 312         this._yAxisLabels.call(this._yAxis);
 313         if (this._yAxisUnitContainer)
 314             this._yAxisUnitContainer.remove();
 315         var x = - 3.2 * this._rem;
 316         var y = this._contentHeight / 2;
 317         this._yAxisUnitContainer = this._yAxisLabels.append("text")
 318             .attr("transform", "rotate(90 0 0) translate(" + y + ", " + (-x) + ")")
 319             .style("text-anchor", "middle")
 320             .text(this._yAxisUnit);
 321     },
 322     _updateHighlightPositions: function () {
 323         if (!this._highlights)
 324             return;
 325
 326         var xScale = this._x;
 327         var yScale = this._y;
 328         this._highlights
 329             .attr("cy", function(point) { return yScale(point.value); })
 330             .attr("cx", function(point) { return xScale(point.time); });
 331     },
 332     _computeXAxisDomain: function (timeSeries)
 333     {
 334         var extent = d3.extent(timeSeries, function(point) { return point.time; });
 335         var margin = 3600 * 1000; // Use x.inverse to compute the right amount from a margin.
 336         return [+extent[0] - margin, +extent[1] + margin];
 337     },
 338     _computeYAxisDomain: function (startTime, endTime)
 339     {
 340         var shouldShowFullYAxis = this.get('showFullYAxis');
 341         var range = this._minMaxForAllTimeSeries(startTime, endTime, !shouldShowFullYAxis);
 342         var min = range[0];
 343         var max = range[1];
 344         if (max < min)
 345             min = max = 0;
 346         else if (shouldShowFullYAxis)
 347             min = Math.min(min, 0);
 348         var diff = max - min;
 349         var margin = diff * 0.05;
 350
 351         yExtent = [min - margin, max + margin];
 352         return yExtent;
 353     },
 354     _minMaxForAllTimeSeries: function (startTime, endTime, ignoreOutliners)
 355     {
 356         var seriesList = [this._currentTimeSeries, this._movingAverageTimeSeries, this._baselineTimeSeries, this._targetTimeSeries];
 357         var min = Infinity;
 358         var max = -Infinity;
 359         for (var i = 0; i < seriesList.length; i++) {
 360             if (seriesList[i]) {
 361                 var minMax = seriesList[i].minMaxForTimeRange(startTime, endTime, ignoreOutliners);
 362                 min = Math.min(min, minMax[0]);
 363                 max = Math.max(max, minMax[1]);
 364             }
 365         }
 366         return [min, max];
 367     },
 368     _currentSelection: function ()
 369     {
 370         return this._brush && !this._brush.empty() ? this._brush.extent() : null;
 371     },
 372     _domainChanged: function ()
 373     {
 374         var selection = this._currentSelection() || this.get('sharedSelection');
 375         var newXDomain = this._updateDomain();
 376
 377         if (selection && newXDomain && selection[0] <= newXDomain[0] && newXDomain[1] <= selection[1])
 378             selection = null; // Otherwise the user has no way of clearing the selection.
 379
 380         this._relayoutDataAndAxes(selection);
 381     }.observes('domain', 'showFullYAxis'),
 382     _selectionChanged: function ()
 383     {
 384         this._updateSelection(this.get('selection'));
 385     }.observes('selection'),
 386     _updateSelection: function (newSelection)
 387     {
 388         if (!this._brush)
 389             return;
 390
 391         var currentSelection = this._currentSelection();
 392         if (newSelection && currentSelection && App.domainsAreEqual(newSelection, currentSelection))
 393             return;
 394
 395         var domain = this._x.domain();
 396         if (!newSelection || App.domainsAreEqual(domain, newSelection))
 397             this._brush.clear();
 398         else
 399             this._brush.extent(newSelection);
 400         this._updateBrush();
 401
 402         this._setCurrentSelection(newSelection);
 403     },
 404     _brushChanged: function ()
 405     {
 406         if (this._brush.empty()) {
 407             if (!this._brushExtent)
 408                 return;
 409
 410             this._setCurrentSelection(undefined);
 411
 412             // Avoid locking the indicator in _mouseDown when the brush was cleared in the same mousedown event.
 413             this._brushJustChanged = true;
 414             var self = this;
 415             setTimeout(function () {
 416                 self._brushJustChanged = false;
 417             }, 0);
 418
 419             return;
 420         }
 421
 422         this._setCurrentSelection(this._brush.extent());
 423     },
 424     _keyPressed: function (event)
 425     {
 426         if (!this._currentItemIndex || this._currentSelection())
 427             return;
 428
 429         var newIndex;
 430         switch (event.keyCode) {
 431         case 37: // Left
 432             newIndex = this._currentItemIndex - 1;
 433             break;
 434         case 39: // Right
 435             newIndex = this._currentItemIndex + 1;
 436             break;
 437         case 38: // Up
 438         case 40: // Down
 439         default:
 440             return;
 441         }
 442
 443         // Unlike mousemove, keydown shouldn't move off the edge.
 444         if (this._currentTimeSeriesData[newIndex])
 445             this._setCurrentItem(newIndex);
 446     },
 447     _mouseMoved: function (event)
 448     {
 449         if (!this._margin || this._currentSelection() || this._currentItemLocked)
 450             return;
 451
 452         var point = this._mousePointInGraph(event);
 453
 454         this._selectClosestPointToMouseAsCurrentItem(point);
 455     },
 456     _mouseLeft: function (event)
 457     {
 458         if (!this._margin || this._currentItemLocked)
 459             return;
 460
 461         this._selectClosestPointToMouseAsCurrentItem(null);
 462     },
 463     _mouseDown: function (event)
 464     {
 465         if (!this._margin || this._currentSelection() || this._brushJustChanged)
 466             return;
 467
 468         var point = this._mousePointInGraph(event);
 469         if (!point)
 470             return;
 471
 472         if (this._currentItemLocked) {
 473             this._currentItemLocked = false;
 474             this.set('selectedItem', null);
 475             return;
 476         }
 477
 478         this._currentItemLocked = true;
 479         this._selectClosestPointToMouseAsCurrentItem(point);
 480     },
 481     _mousePointInGraph: function (event)
 482     {
 483         var offset = $(this.get('element')).offset();
 484         if (!offset || !$(event.target).closest('svg').length)
 485             return null;
 486
 487         var point = {
 488             x: event.pageX - offset.left - this._margin.left,
 489             y: event.pageY - offset.top - this._margin.top
 490         };
 491
 492         var xScale = this._x;
 493         var yScale = this._y;
 494         var xDomain = xScale.domain();
 495         var yDomain = yScale.domain();
 496         if (point.x >= xScale(xDomain[0]) && point.x <= xScale(xDomain[1])
 497             && point.y <= yScale(yDomain[0]) && point.y >= yScale(yDomain[1]))
 498             return point;
 499
 500         return null;
 501     },
 502     _selectClosestPointToMouseAsCurrentItem: function (point)
 503     {
 504         var xScale = this._x;
 505         var yScale = this._y;
 506         var distanceHeuristics = function (m) {
 507             var mX = xScale(m.time);
 508             var mY = yScale(m.value);
 509             var xDiff = mX - point.x;
 510             var yDiff = mY - point.y;
 511             return xDiff * xDiff + yDiff * yDiff / 16; // Favor horizontal affinity.
 512         };
 513         distanceHeuristics = function (m) {
 514             return Math.abs(xScale(m.time) - point.x);
 515         }
 516
 517         var newItemIndex;
 518         if (point && !this._currentSelection()) {
 519             var distances = this._currentTimeSeriesData.map(distanceHeuristics);
 520             var minDistance = Number.MAX_VALUE;
 521             for (var i = 0; i < distances.length; i++) {
 522                 if (distances[i] < minDistance) {
 523                     newItemIndex = i;
 524                     minDistance = distances[i];
 525                 }
 526             }
 527         }
 528
 529         this._setCurrentItem(newItemIndex);
 530         this._updateSelectionToolbar();
 531     },
 532     _currentTimeChanged: function ()
 533     {
 534         if (!this._margin || this._currentSelection() || this._currentItemLocked)
 535             return
 536
 537         var currentTime = this.get('currentTime');
 538         if (currentTime) {
 539             for (var i = 0; i < this._currentTimeSeriesData.length; i++) {
 540                 var point = this._currentTimeSeriesData[i];
 541                 if (point.time >= currentTime) {
 542                     this._setCurrentItem(i, /* doNotNotify */ true);
 543                     return;
 544                 }
 545             }
 546         }
 547         this._setCurrentItem(undefined, /* doNotNotify */ true);
 548     }.observes('currentTime'),
 549     _setCurrentItem: function (newItemIndex, doNotNotify)
 550     {
 551         if (newItemIndex === this._currentItemIndex) {
 552             if (this._currentItemLocked)
 553                 this.set('selectedItem', this.get('currentItem') ? this.get('currentItem').measurement.id() : null);
 554             return;
 555         }
 556
 557         var newItem = this._currentTimeSeriesData[newItemIndex];
 558         this._brushExtent = undefined;
 559         this._currentItemIndex = newItemIndex;
 560
 561         if (!newItem) {
 562             this._currentItemLocked = false;
 563             this.set('selectedItem', null);
 564         }
 565
 566         this._updateCurrentItemIndicators();
 567
 568         if (!doNotNotify)
 569             this.set('currentTime', newItem ? newItem.time : undefined);
 570
 571         this.set('currentItem', newItem);
 572         if (this._currentItemLocked)
 573             this.set('selectedItem', newItem ? newItem.measurement.id() : null);
 574     },
 575     _selectedItemChanged: function ()
 576     {
 577         if (!this._margin)
 578             return;
 579
 580         var selectedId = this.get('selectedItem');
 581         var currentItem = this.get('currentItem');
 582         if (currentItem && currentItem.measurement.id() == selectedId)
 583             return;
 584
 585         var series = this._currentTimeSeriesData;
 586         var selectedItemIndex = undefined;
 587         for (var i = 0; i < series.length; i++) {
 588             if (series[i].measurement.id() == selectedId) {
 589                 this._updateSelection(null);
 590                 this._currentItemLocked = true;
 591                 this._setCurrentItem(i);
 592                 this._updateSelectionToolbar();
 593                 return;
 594             }
 595         }
 596     }.observes('selectedItem').on('init'),
 597     _highlightedItemsChanged: function () {
 598         var highlightedItems = this.get('highlightedItems');
 599
 600         if (!this._clippedContainer || !highlightedItems)
 601             return;
 602
 603         var data = this._currentTimeSeriesData.filter(function (item) { return highlightedItems[item.measurement.id()]; });
 604
 605         if (this._highlights)
 606             this._highlights.remove();
 607         this._highlights = this._clippedContainer
 608             .selectAll(".highlight")
 609                 .data(data)
 610             .enter().append("circle")
 611                 .attr("class", "highlight")
 612                 .attr("r", (this.get('chartPointRadius') || 1) * 1.8);
 613
 614         this._updateHighlightPositions();
 615     }.observes('highlightedItems'),
 616     _rangesChanged: function ()
 617     {
 618         if (!this._currentTimeSeries)
 619             return;
 620
 621         function midPoint(firstPoint, secondPoint) {
 622             if (firstPoint && secondPoint)
 623                 return (+firstPoint.time + +secondPoint.time) / 2;
 624             if (firstPoint)
 625                 return firstPoint.time;
 626             return secondPoint.time;
 627         }
 628         var currentTimeSeries = this._currentTimeSeries;
 629         var linkRoute = this.get('rangeRoute');
 630         this.set('rangeBars', (this.get('ranges') || []).map(function (range) {
 631             var start = currentTimeSeries.findPointByMeasurementId(range.get('startRun'));
 632             var end = currentTimeSeries.findPointByMeasurementId(range.get('endRun'));
 633             return Ember.Object.create({
 634                 startTime: midPoint(currentTimeSeries.previousPoint(start), start),
 635                 endTime: midPoint(end, currentTimeSeries.nextPoint(end)),
 636                 range: range,
 637                 left: null,
 638                 right: null,
 639                 rowIndex: null,
 640                 top: null,
 641                 bottom: null,
 642                 linkRoute: linkRoute,
 643                 linkId: range.get('id'),
 644                 label: range.get('label'),
 645             });
 646         }));
 647
 648         this._updateRangeBarRects();
 649     }.observes('ranges'),
 650     _updateRangeBarRects: function () {
 651         var rangeBars = this.get('rangeBars');
 652         if (!rangeBars || !rangeBars.length)
 653             return;
 654
 655         var xScale = this._x;
 656         var yScale = this._y;
 657
 658         // Expand the width of each range as needed and sort ranges by the left-edge of ranges.
 659         var minWidth = 3;
 660         var sortedBars = rangeBars.map(function (bar) {
 661             var left = xScale(bar.get('startTime'));
 662             var right = xScale(bar.get('endTime'));
 663             if (right - left < minWidth) {
 664                 left -= minWidth / 2;
 665                 right += minWidth / 2;
 666             }
 667             bar.set('left', left);
 668             bar.set('right', right);
 669             return bar;
 670         }).sort(function (first, second) { return first.get('left') - second.get('left'); });
 671
 672         // At this point, left edges of all ranges prior to a range R1 is on the left of R1.
 673         // Place R1 into a row in which right edges of all ranges prior to R1 is on the left of R1 to avoid overlapping ranges.
 674         var rows = [];
 675         sortedBars.forEach(function (bar) {
 676             var rowIndex = 0;
 677             for (; rowIndex < rows.length; rowIndex++) {
 678                 var currentRow = rows[rowIndex];
 679                 if (currentRow[currentRow.length - 1].get('right') < bar.get('left')) {
 680                     currentRow.push(bar);
 681                     break;
 682                 }
 683             }
 684             if (rowIndex >= rows.length)
 685                 rows.push([bar]);
 686             bar.set('rowIndex', rowIndex);
 687         });
 688         var rowHeight = 0.6 * this._rem;
 689         var firstRowTop = this._contentHeight - rows.length * rowHeight;
 690         var barHeight = 0.5 * this._rem;
 691
 692         $(this.get('element')).find('.rangeBarsContainerInlineStyle').css({
 693             left: this._margin.left + 'px',
 694             top: this._margin.top + firstRowTop + 'px',
 695             width: this._contentWidth + 'px',
 696             height: rows.length * barHeight + 'px',
 697             overflow: 'hidden',
 698             position: 'absolute',
 699         });
 700
 701         var margin = this._margin;
 702         sortedBars.forEach(function (bar) {
 703             var top = bar.get('rowIndex') * rowHeight;
 704             var height = barHeight;
 705             var left = bar.get('left');
 706             var width = bar.get('right') - left;
 707             bar.set('inlineStyle', 'left: ' + left + 'px; top: ' + top + 'px; width: ' + width + 'px; height: ' + height + 'px;');
 708         });
 709     },
 710     _updateCurrentItemIndicators: function ()
 711     {
 712         if (!this._currentItemLine)
 713             return;
 714
 715         var item = this._currentTimeSeriesData[this._currentItemIndex];
 716         if (!item) {
 717             this._currentItemLine.attr("x1", -1000).attr("x2", -1000);
 718             this._currentItemCircle.attr("cx", -1000);
 719             return;
 720         }
 721
 722         var x = this._x(item.time);
 723         var y = this._y(item.value);
 724
 725         this._currentItemLine
 726             .attr("x1", x)
 727             .attr("x2", x);
 728
 729         this._currentItemCircle
 730             .attr("cx", x)
 731             .attr("cy", y);
 732     },
 733     _setCurrentSelection: function (newSelection)
 734     {
 735         if (this._brushExtent === newSelection)
 736             return;
 737
 738         var points = null;
 739         if (newSelection) {
 740             points = this._currentTimeSeriesData
 741                 .filter(function (point) { return point.time >= newSelection[0] && point.time <= newSelection[1]; });
 742             if (!points.length)
 743                 points = null;
 744         }
 745
 746         this._brushExtent = newSelection;
 747         this._setCurrentItem(undefined);
 748         this._updateSelectionToolbar();
 749
 750         if (!App.domainsAreEqual(this.get('selection'), newSelection))
 751             this.set('selection', newSelection);
 752         this.set('selectedPoints', points);
 753     },
 754     _updateSelectionToolbar: function ()
 755     {
 756         if (!this.get('interactive'))
 757             return;
 758
 759         var selection = this._currentSelection();
 760         var selectionToolbar = $(this.get('element')).children('.selection-toolbar');
 761         if (selection) {
 762             var left = this._x(selection[0]);
 763             var right = this._x(selection[1]);
 764             selectionToolbar
 765                 .css({left: this._margin.left + right, top: this._margin.top + this._contentHeight})
 766                 .show();
 767         } else
 768             selectionToolbar.hide();
 769     },
 770     actions: {
 771         zoom: function ()
 772         {
 773             this.sendAction('zoom', this._currentSelection());
 774             this.set('selection', null);
 775         },
 776         openRange: function (range)
 777         {
 778             this.sendAction('openRange', range);
 779         },
 780     },
 781 });