[object-stats] Add histogram

No-try: true
Bug: v8:7266
Change-Id: I8b8ec94c1909e7404774afd576968cf843c043ff
Reviewed-on: https://chromium-review.googlesource.com/873033
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Commit-Queue: Michael Lippautz <mlippautz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#50673}

tools/heap-stats/global-timeline.js

@@ -86,7 +86,6 @@ class GlobalTimeline extends HTMLElement {
   }
 
   getInstanceTypeData() {
-    const categories = Object.keys(this.selection.categories);
     const instance_types =
         Object.values(this.selection.categories)
             .reduce((accu, current) => accu.concat(current), []);

tools/heap-stats/histogram-viewer.html

@@ -0,0 +1,16 @@
+<!-- Copyright 2018 the V8 project authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. -->
+<template id="histogram-viewer-template">
+<style>
+#chart {
+  width: 100%;
+  height: 800px;
+}
+</style>
+<div id="container" style="display: none;">
+  <h2>Details</h2>
+  <div id="chart"></div>
+</div>
+</template>
+<script type="text/javascript"  src="histogram-viewer.js"></script>

tools/heap-stats/histogram-viewer.js

@@ -0,0 +1,124 @@
+// Copyright 2018 the V8 project authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+'use strict';
+
+const histogram_viewer_template =
+    document.currentScript.ownerDocument.querySelector(
+        '#histogram-viewer-template');
+
+class HistogramViewer extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.appendChild(histogram_viewer_template.content.cloneNode(true));
+  }
+
+  $(id) {
+    return this.shadowRoot.querySelector(id);
+  }
+
+  set data(value) {
+    this._data = value;
+    this.stateChanged();
+  }
+
+  get data() {
+    return this._data;
+  }
+
+  set selection(value) {
+    this._selection = value;
+    this.stateChanged();
+  }
+
+  get selection() {
+    return this._selection;
+  }
+
+  isValid() {
+    return this.data && this.selection;
+  }
+
+  hide() {
+    this.$('#container').style.display = 'none';
+  }
+
+  show() {
+    this.$('#container').style.display = 'block';
+  }
+
+  stateChanged() {
+    if (this.isValid()) {
+      this.drawChart();
+    } else {
+      this.hide();
+    }
+  }
+
+  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];
+  }
+
+  getCategoryData() {
+    const labels = [
+      'Bucket',
+      ...Object.keys(this.selection.categories)
+          .map(k => this.selection.category_names.get(k))
+    ];
+    const data = this.selectedData.bucket_sizes.map(
+        (bucket_size, index) =>
+            [`<${bucket_size}`,
+             ...Object.values(this.selection.categories)
+                 .map(
+                     instance_types =>
+                         instance_types
+                             .map(
+                                 instance_type =>
+                                     this.selectedData
+                                         .instance_type_data[instance_type]
+                                         .histogram[index])
+                             .reduce((accu, current) => accu + current, 0))]);
+    // Adjust last histogram bucket label.
+    data[data.length - 1][0] = 'rest';
+    return [labels, ...data];
+  }
+
+  getInstanceTypeData() {
+    const instance_types =
+        Object.values(this.selection.categories)
+            .reduce((accu, current) => accu.concat(current), []);
+    const labels = ['Bucket', ...instance_types];
+    const data = this.selectedData.bucket_sizes.map(
+        (bucket_size, index) =>
+            [`<${bucket_size}`,
+             ...instance_types.map(
+                 instance_type =>
+                     this.selectedData.instance_type_data[instance_type]
+                         .histogram[index])]);
+    // Adjust last histogram bucket label.
+    data[data.length - 1][0] = 'rest';
+    return [labels, ...data];
+  }
+
+  drawChart() {
+    const chart_data = (this.selection.merge_categories) ?
+        this.getCategoryData() :
+        this.getInstanceTypeData();
+    const data = google.visualization.arrayToDataTable(chart_data);
+    const options = {
+      legend: {position: 'top', maxLines: '1'},
+      chartArea: {width: '85%', height: '85%'},
+      bar: {groupWidth: '80%'},
+    };
+    const chart = new google.visualization.BarChart(this.$('#chart'));
+    this.show();
+    chart.draw(data, options);
+  }
+}
+
+customElements.define('histogram-viewer', HistogramViewer);

tools/heap-stats/index.html

@@ -13,6 +13,7 @@ found in the LICENSE file. -->
 
   <link rel="import" href="details-selection.html">
   <link rel="import" href="global-timeline.html">
+  <link rel="import" href="histogram-viewer.html">
   <link rel="import" href="trace-file-reader.html">
 
   <style type="text/css">
@@ -28,7 +29,7 @@ body {
 
 'use strict';
 
-google.charts.load('current', {'packages':['line', 'corechart']});
+google.charts.load('current', {'packages':['line', 'corechart', 'bar']});
 
 function $(id) { return document.querySelector(id); }
 
@@ -47,15 +48,16 @@ function globalDataChanged(e) {
   state.selection = null;
   $('#global-timeline').selection = state.selection;
   $('#global-timeline').data = state.data;
-  $('#type-details').selection = state.selection;
-  $('#type-details').data = state.data;
+  $('#histogram-viewer').selection = state.selection;
+  $('#histogram-viewer').data = state.data;
   $('#details-selection').data = state.data;
 }
 
 function globalSelectionChangedA(e) {
   state.selection = e.detail;
+  console.log(state.selection);
   $('#global-timeline').selection = state.selection;
-  $('#type-details').selection = state.selection;
+  $('#histogram-viewer').selection = state.selection;
 }
 
   </script>
@@ -82,7 +84,7 @@ function globalSelectionChangedA(e) {
   </p>
   <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
   <global-timeline id="global-timeline"></global-timeline>
-  <type-details id="type-details"></type-details>
+  <histogram-viewer id="histogram-viewer"></histogram-viewer>
 </body>
 
 </html>