src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/line_chart.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 tvcm.require('tvcm.range');
   8 tvcm.require('tvcm.ui.d3');
   9 tvcm.require('tvcm.ui.chart_base');
  10
  11 tvcm.requireStylesheet('tvcm.ui.line_chart');
  12
  13 tvcm.exportTo('tvcm.ui', function() {
  14   var ChartBase = tvcm.ui.ChartBase;
  15   var getColorOfKey = tvcm.ui.getColorOfKey;
  16
  17   /**
  18    * @constructor
  19    */
  20   var LineChart = tvcm.ui.define('line-chart', ChartBase);
  21
  22   LineChart.prototype = {
  23     __proto__: ChartBase.prototype,
  24
  25     decorate: function() {
  26       ChartBase.prototype.decorate.call(this);
  27       this.classList.add('line-chart');
  28
  29       this.xScale_ = d3.scale.linear();
  30       this.yScale_ = d3.scale.linear();
  31       d3.select(this.chartAreaElement)
  32           .append('g')
  33           .attr('id', 'series');
  34     },
  35
  36     /**
  37      * Sets the data array for the object
  38      *
  39      * @param {Array} data The data. Each element must be an object, with at
  40      * least an x property. All other properties become series names in the
  41      * chart.
  42      */
  43     set data(data) {
  44       if (data.length == 0)
  45         throw new Error('Data must be nonzero. Pass undefined.');
  46
  47       var keys;
  48       if (data !== undefined) {
  49         var d = data[0];
  50         if (d.x === undefined)
  51           throw new Error('Elements must have "x" fields');
  52         keys = d3.keys(data[0]);
  53         keys.splice(keys.indexOf('x'), 1);
  54         if (keys.length == 0)
  55           throw new Error('Elements must have at least one other field than X');
  56       } else {
  57         keys = undefined;
  58       }
  59       this.data_ = data;
  60       this.seriesKeys_ = keys;
  61
  62       this.updateContents_();
  63     },
  64
  65     getLegendKeys_: function() {
  66       if (this.seriesKeys_ &&
  67           this.seriesKeys_.length > 1)
  68         return this.seriesKeys_.slice();
  69       return [];
  70     },
  71
  72     updateScales_: function(width, height) {
  73       if (this.data_ === undefined)
  74         return;
  75
  76       // X.
  77       this.xScale_.range([0, width]);
  78       this.xScale_.domain(d3.extent(this.data_, function(d) { return d.x; }));
  79
  80       // Y.
  81       var yRange = new tvcm.Range();
  82       this.data_.forEach(function(d) {
  83         this.seriesKeys_.forEach(function(k) {
  84           yRange.addValue(d[k]);
  85         });
  86       }, this);
  87
  88       this.yScale_.range([height, 0]);
  89       this.yScale_.domain([yRange.min, yRange.max]);
  90     },
  91
  92     updateContents_: function() {
  93       ChartBase.prototype.updateContents_.call(this);
  94       if (!this.data_)
  95         return;
  96
  97       var chartAreaSel = d3.select(this.chartAreaElement);
  98       var seriesSel = chartAreaSel.select('#series');
  99       var pathsSel = seriesSel.selectAll('path').data(this.seriesKeys_);
 100       pathsSel.enter()
 101           .append('path')
 102           .attr('class', 'line')
 103           .style('stroke', function(key) {
 104             return getColorOfKey(key);
 105           })
 106           .attr('d', function(key) {
 107             var line = d3.svg.line()
 108               .x(function(d) { return this.xScale_(d.x); }.bind(this))
 109               .y(function(d) { return this.yScale_(d[key]); }.bind(this));
 110             return line(this.data_);
 111           }.bind(this));
 112       pathsSel.exit().remove();
 113     }
 114   };
 115
 116   return {
 117     LineChart: LineChart
 118   };
 119 });