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