1<!DOCTYPE html>
2<!--
3Copyright (c) 2014 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<link rel="import" href="/tracing/ui/base/chart_base_2d_brushable_x.html">
9
10<link rel="stylesheet" href="/tracing/ui/base/line_chart.css">
11
12<script>
13'use strict';
14
15tr.exportTo('tr.ui.b', function() {
16  var ChartBase2DBrushX = tr.ui.b.ChartBase2DBrushX;
17
18  /**
19   * @constructor
20   */
21  var LineChart = tr.ui.b.define('line-chart', ChartBase2DBrushX);
22
23  LineChart.prototype = {
24    __proto__: ChartBase2DBrushX.prototype,
25
26    decorate: function() {
27      ChartBase2DBrushX.prototype.decorate.call(this);
28      this.classList.add('line-chart');
29    },
30
31    isDatumFieldSeries_: function(fieldName) {
32      return fieldName != 'x';
33    },
34
35    getXForDatum_: function(datum, index) {
36      return datum.x;
37    },
38
39    updateDataContents_: function(dataSel) {
40      dataSel.selectAll('*').remove();
41      var dataBySeriesKey = this.getDataBySeriesKey_();
42      var pathsSel = dataSel.selectAll('path').data(this.seriesKeys_);
43      pathsSel.enter()
44          .append('path')
45          .attr('class', 'line')
46          .style('stroke', function(key) {
47              return tr.ui.b.getColorOfKey(key);
48            })
49          .attr('d', function(key) {
50              var line = d3.svg.line()
51                .x(function(d) { return this.xScale_(d.x); }.bind(this))
52                .y(function(d) { return this.yScale_(d[key]); }.bind(this));
53              return line(dataBySeriesKey[key]);
54            }.bind(this));
55      pathsSel.exit().remove();
56    }
57  };
58
59  return {
60    LineChart: LineChart
61  };
62});
63</script>
64