blob: 534c01632fd84018cab0ad428550f9a9a9bc5149 [file] [log] [blame]
<!DOCTYPE html>
<!--
Copyright 2015 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/analysis/analysis_sub_view.html">
<link rel="import" href="/tracing/ui/analysis/frame_power_usage_chart.html">
<link rel="import" href="/tracing/ui/analysis/power_sample_summary_table.html">
<link rel="import" href="/tracing/ui/analysis/power_sample_table.html">
<polymer-element name="tr-ui-a-multi-power-sample-sub-view"
extends="tr-ui-a-sub-view">
<template>
<style>
:host {
display: flex;
flex-direction: row;
}
#tables {
display: flex;
flex-direction: column;
width: 50%;
}
#chart {
width: 50%;
}
</style>
<div id="tables">
<tr-ui-a-power-sample-summary-table id="summaryTable">
</tr-ui-a-power-sample-summary-table>
<tr-ui-a-power-sample-table id="samplesTable">
</tr-ui-a-power-sample-table>
</div>
<tr-ui-a-frame-power-usage-chart id="chart">
</tr-ui-a-frame-power-usage-chart>
</template>
</polymer-element>
<script>
'use strict';
// TODO(charliea): Add a dropdown that allows the user to select which type of
// power sample analysis view they want (e.g. table of samples, graph).
Polymer('tr-ui-a-multi-power-sample-sub-view', {
ready: function() {
this.currentSelection_ = undefined;
},
get selection() {
return this.currentSelection_;
},
set selection(selection) {
this.currentSelection_ = selection;
this.updateContents_();
},
updateContents_: function() {
var samples = this.selection;
var vSyncTimestamps = (this.selection === undefined) ?
[] : this.selection[0].series.device.vSyncTimestamps;
this.$.summaryTable.samples = samples;
this.$.samplesTable.samples = samples;
this.$.chart.setData(this.selection, vSyncTimestamps);
}
});
</script>