<!DOCTYPE html>
<!--
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/tracing/ui/base/chart_base_2d_brushable_x.html">

<link rel="stylesheet" href="/tracing/ui/base/line_chart.css">

<script>
'use strict';

tr.exportTo('tr.ui.b', function() {
  var ChartBase2DBrushX = tr.ui.b.ChartBase2DBrushX;

  /**
   * @constructor
   */
  var LineChart = tr.ui.b.define('line-chart', ChartBase2DBrushX);

  LineChart.prototype = {
    __proto__: ChartBase2DBrushX.prototype,

    decorate: function() {
      ChartBase2DBrushX.prototype.decorate.call(this);
      Polymer.dom(this).classList.add('line-chart');
    },

    isDatumFieldSeries_: function(fieldName) {
      return fieldName != 'x';
    },

    getXForDatum_: function(datum, index) {
      return datum.x;
    },

    updateDataContents_: function(dataSel) {
      dataSel.selectAll('*').remove();
      var dataBySeriesKey = this.getDataBySeriesKey_();
      var seriesKeys = [...this.seriesByKey_.keys()];
      var pathsSel = dataSel.selectAll('path').data(seriesKeys);
      pathsSel.enter()
          .append('path')
          .attr('class', 'line')
          .style('stroke', function(key) {
              return this.getDataSeries(key).color;
            }.bind(this))
          .attr('d', function(key) {
              var line = d3.svg.line()
                .x(function(d) { return this.xScale_(d.x); }.bind(this))
                .y(function(d) { return this.yScale_(d[key]); }.bind(this));
              return line(dataBySeriesKey[key]);
            }.bind(this));
      pathsSel.exit().remove();
    }
  };

  return {
    LineChart: LineChart
  };
});
</script>