1<!DOCTYPE html> 2<!-- 3Copyright (c) 2013 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/tracks/chart_axis.html"> 9<link rel="import" href="/tracing/ui/tracks/chart_point.html"> 10<link rel="import" href="/tracing/ui/tracks/chart_series.html"> 11<link rel="import" href="/tracing/ui/tracks/chart_track.html"> 12<link rel="import" href="/tracing/ui/base/ui.html"> 13 14<script> 15'use strict'; 16 17tr.exportTo('tr.ui.tracks', function() { 18 19 /** 20 * A track that displays a Counter object. 21 * @constructor 22 * @extends {ChartTrack} 23 */ 24 var CounterTrack = tr.ui.b.define('counter-track', tr.ui.tracks.ChartTrack); 25 26 CounterTrack.prototype = { 27 __proto__: tr.ui.tracks.ChartTrack.prototype, 28 29 decorate: function(viewport) { 30 tr.ui.tracks.ChartTrack.prototype.decorate.call(this, viewport); 31 this.classList.add('counter-track'); 32 }, 33 34 get counter() { 35 return this.chart; 36 }, 37 38 set counter(counter) { 39 this.heading = counter.name + ': '; 40 this.series = CounterTrack.buildChartSeriesFromCounter(counter); 41 this.autoSetAllAxes({expandMax: true}); 42 }, 43 44 getModelEventFromItem: function(chartValue) { 45 return chartValue; 46 } 47 }; 48 49 CounterTrack.buildChartSeriesFromCounter = function(counter) { 50 var numSeries = counter.series.length; 51 var totals = counter.totals; 52 53 // Create one common axis for all series. 54 var chartAxis = new tr.ui.tracks.ChartAxis(0, undefined); 55 56 // Build one chart series for each counter series. 57 var chartSeries = counter.series.map(function(series, seriesIndex) { 58 var chartPoints = series.samples.map(function(sample, sampleIndex) { 59 var total = totals[sampleIndex * numSeries + seriesIndex]; 60 return new tr.ui.tracks.ChartPoint(sample, sample.timestamp, total); 61 }); 62 var renderingConfig = { 63 chartType: tr.ui.tracks.ChartSeriesType.AREA, 64 colorId: series.color 65 }; 66 return new tr.ui.tracks.ChartSeries( 67 chartPoints, chartAxis, renderingConfig); 68 }); 69 70 // Show the first series (with the smallest cumulative value) at the top. 71 chartSeries.reverse(); 72 73 return chartSeries; 74 }; 75 76 return { 77 CounterTrack: CounterTrack 78 }; 79}); 80</script> 81