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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<!DOCTYPE html>
<!--
Copyright 2016 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/base/color_scheme.html">
<link rel="import" href="/tracing/ui/base/ui.html">
<link rel="import" href="/tracing/ui/tracks/chart_point.html">
<link rel="import" href="/tracing/ui/tracks/chart_series.html">
<link rel="import" href="/tracing/ui/tracks/chart_series_y_axis.html">
<link rel="import" href="/tracing/ui/tracks/chart_track.html">
<style>
.cpu-usage-track {
height: 90px;
}
</style>
<script>
'use strict';
tr.exportTo('tr.ui.tracks', function() {
const ColorScheme = tr.b.ColorScheme;
const ChartTrack = tr.ui.tracks.ChartTrack;
/**
* A track that displays the cpu usage of a process.
*
* @constructor
* @extends {tr.ui.tracks.ChartTrack}
*/
const CpuUsageTrack = tr.ui.b.define('cpu-usage-track', ChartTrack);
CpuUsageTrack.prototype = {
__proto__: ChartTrack.prototype,
decorate(viewport) {
ChartTrack.prototype.decorate.call(this, viewport);
this.classList.add('cpu-usage-track');
this.heading = 'CPU usage';
this.cpuUsageSeries_ = undefined;
},
// Given a tr.Model, it creates a cpu usage series and a graph.
initialize(model) {
if (model !== undefined) {
this.cpuUsageSeries_ = model.device.cpuUsageSeries;
} else {
this.cpuUsageSeries_ = undefined;
}
this.series = this.buildChartSeries_();
this.autoSetAllAxes({expandMax: true});
},
get hasVisibleContent() {
return !!this.cpuUsageSeries_ &&
this.cpuUsageSeries_.samples.length > 0;
},
addContainersToTrackMap(containerToTrackMap) {
containerToTrackMap.addContainer(this.series_, this);
},
buildChartSeries_(yAxis, color) {
if (!this.hasVisibleContent) return [];
yAxis = new tr.ui.tracks.ChartSeriesYAxis(0, undefined);
const usageSamples = this.cpuUsageSeries_.samples;
const pts = new Array(usageSamples.length + 1);
for (let i = 0; i < usageSamples.length; i++) {
pts[i] = new tr.ui.tracks.ChartPoint(undefined,
usageSamples[i].start, usageSamples[i].usage);
}
pts[usageSamples.length] = new tr.ui.tracks.ChartPoint(undefined,
usageSamples[usageSamples.length - 1].start, 0);
const renderingConfig = {
chartType: tr.ui.tracks.ChartSeriesType.AREA,
colorId: color
};
return [new tr.ui.tracks.ChartSeries(pts, yAxis, renderingConfig)];
},
};
return {
CpuUsageTrack,
};
});
</script>
|
