| <!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> |
