[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:
Michael Lippautz 2018-01-22 16:50:48 +01:00 committed by Commit Bot
parent edf82ca34d
commit 6f55fdc82f
2 changed files with 52 additions and 8 deletions

View File

@ -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;
}

View File

@ -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) {