blob: ba43169524233dfc9874eae9ec9cfb99eda9a80f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<!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);
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 pathsSel = dataSel.selectAll('path').data(this.seriesKeys_);
pathsSel.enter()
.append('path')
.attr('class', 'line')
.style('stroke', function(key) {
return tr.ui.b.getColorOfKey(key);
})
.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>
|
