[object-stats] Visualizer: Show percentages in details selection
No-try: true Bug: v8:7266 Change-Id: I778fcf6b8e1abe5eac6e2f0d2600e4c5ec9fe549 Reviewed-on: https://chromium-review.googlesource.com/878821 Reviewed-by: Ulan Degenbaev <ulan@chromium.org> Commit-Queue: Michael Lippautz <mlippautz@chromium.org> Cr-Commit-Position: refs/heads/master@{#50769}
This commit is contained in:
parent
edf82ca34d
commit
6f55fdc82f
@ -20,9 +20,20 @@ found in the LICENSE file. -->
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
.box > ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.box > ul > li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.box > ul > li:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box > ul > li:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
@ -40,19 +40,36 @@ class DetailsSelection extends HTMLElement {
|
||||
return this._data;
|
||||
}
|
||||
|
||||
get selectedData() {
|
||||
console.assert(this.data, 'invalid data');
|
||||
console.assert(this.selection, 'invalid selection');
|
||||
return this.data[this.selection.isolate]
|
||||
.gcs[this.selection.gc][this.selection.data_set];
|
||||
}
|
||||
|
||||
buildCategory(name) {
|
||||
const div = document.createElement('div');
|
||||
div.id = name;
|
||||
div.classList.add('box');
|
||||
const span = document.createElement('span');
|
||||
div.appendChild(span);
|
||||
span.innerHTML = CATEGORY_NAMES.get(name) + ' ';
|
||||
const ul = document.createElement('ul');
|
||||
div.appendChild(ul);
|
||||
const name_li = document.createElement('li');
|
||||
ul.appendChild(name_li);
|
||||
name_li.innerHTML = CATEGORY_NAMES.get(name);
|
||||
const percent_li = document.createElement('li');
|
||||
ul.appendChild(percent_li);
|
||||
percent_li.innerHTML = '';
|
||||
percent_li.id = name + 'PercentContent';
|
||||
const all_li = document.createElement('li');
|
||||
ul.appendChild(all_li);
|
||||
const all_button = document.createElement('button');
|
||||
span.appendChild(all_button);
|
||||
all_li.appendChild(all_button);
|
||||
all_button.innerHTML = 'All';
|
||||
all_button.addEventListener('click', e => this.selectCategory(name));
|
||||
const none_li = document.createElement('li');
|
||||
ul.appendChild(none_li);
|
||||
const none_button = document.createElement('button');
|
||||
span.appendChild(none_button);
|
||||
none_li.appendChild(none_button);
|
||||
none_button.innerHTML = 'None';
|
||||
none_button.addEventListener('click', e => this.unselectCategory(name));
|
||||
const innerDiv = document.createElement('div');
|
||||
@ -126,6 +143,22 @@ class DetailsSelection extends HTMLElement {
|
||||
this.$('#csv-export').disabled = false;
|
||||
this.dispatchEvent(new CustomEvent(
|
||||
'change', {bubbles: true, composed: true, detail: this.selection}));
|
||||
|
||||
const overalls = {};
|
||||
let overall = 0;
|
||||
Object.entries(this.selection.categories).forEach(([key, value]) => {
|
||||
overalls[key] =
|
||||
Object.values(value).reduce(
|
||||
(accu, current) =>
|
||||
accu + this.selectedData.instance_type_data[current].overall,
|
||||
0) /
|
||||
KB;
|
||||
overall += overalls[key];
|
||||
});
|
||||
Object.entries(overalls).forEach(([key, value]) => {
|
||||
this.$('#' + key + 'PercentContent').innerHTML =
|
||||
`${(value / overall * 100).toFixed(1)}%`;
|
||||
});
|
||||
}
|
||||
|
||||
selectedInCategory(category) {
|
||||
|
Loading…
Reference in New Issue
Block a user