Generalize delta statistics in Histogram.

tracing/tracing/value/ui/histogram_span.html

Index: tracing/tracing/value/ui/histogram_span.html
diff --git a/tracing/tracing/value/ui/histogram_span.html b/tracing/tracing/value/ui/histogram_span.html
index 3cbf4bfc353ad4384f23fed7cd151425d968d484..45767f460d725b69e8f1da03a43836dbf7d3aeb9 100644
--- a/tracing/tracing/value/ui/histogram_span.html
+++ b/tracing/tracing/value/ui/histogram_span.html
@@ -55,391 +55,394 @@ found in the LICENSE file.
 
 <script>
 'use strict';
+tr.exportTo('tr.v.ui', function() {
+  const DEFAULT_BAR_HEIGHT_PX = 5;
+  const TRUNCATE_BIN_MARGIN = 0.15;
+  const IGNORE_DELTA_STATISTICS_NAMES = [
+    `${tr.v.DELTA}min`,
+    `%${tr.v.DELTA}min`,
+    `${tr.v.DELTA}max`,
+    `%${tr.v.DELTA}max`,
+    `${tr.v.DELTA}sum`,
+    `%${tr.v.DELTA}sum`,
+    `${tr.v.DELTA}count`,
+    `%${tr.v.DELTA}count`,
+  ];
+
+  Polymer({
+    is: 'tr-v-ui-histogram-span',
+
+    created() {
+      this.histogram_ = undefined;
+      this.referenceHistogram_ = undefined;
+      this.graphWidth_ = undefined;
+      this.graphHeight_ = undefined;
+      this.mouseDownBin_ = undefined;
+      this.brushedBins_ = [];
+      this.prevBrushedBins_ = [];
+      this.canMergeSampleDiagnostics_ = true;
+    },
+
+    ready() {
+      this.$.drag_handle.target = this.$.container;
+      this.$.drag_handle.addEventListener(
+          'drag-handle-resize', this.onResize_.bind(this));
+    },
+
+    attached() {
+      if (this.histogram_ !== undefined) this.updateContents_();
+    },
+
+    get canMergeSampleDiagnostics() {
+      return this.canMergeSampleDiagnostics_;
+    },
+
+    set canMergeSampleDiagnostics(merge) {
+      this.canMergeSampleDiagnostics_ = merge;
+      this.$.merge_sample_diagnostics_container.style.display = (
+          merge ? '' : 'none');
+    },
+
+    onResize_(event) {
+      event.stopPropagation();
+      let heightPx = parseInt(this.$.container.style.height);
+      if (heightPx < this.defaultGraphHeight) {
+        heightPx = this.defaultGraphHeight;
+        this.$.container.style.height = this.defaultGraphHeight + 'px';
+      }
+      this.chart_.graphHeight = heightPx - (this.chart_.margin.top +
+          this.chart_.margin.bottom);
+    },
+
+    /**
+    * Get the width in pixels of the widest bar in the bar chart, not the total
+    * bar chart svg tag, which includes margins containing axes and legend.
+    *
+    * @return {number}
+    */
+    get graphWidth() {
+      return this.graphWidth_ || this.defaultGraphWidth;
+    },
+
+    /**
+    * Set the width in pixels of the widest bar in the bar chart, not the total
+    * bar chart svg tag, which includes margins containing axes and legend.
+    *
+    * @param {number} width
+    */
+    set graphWidth(width) {
+      this.graphWidth_ = width;
+    },
+
+    /**
+    * Get the height in pixels of the bars in the bar chart, not the total
+    * bar chart svg tag, which includes margins containing axes and legend.
+    *
+    * @return {number}
+    */
+    get graphHeight() {
+      return this.graphHeight_ || this.defaultGraphHeight;
+    },
+
+    /**
+    * Set the height in pixels of the bars in the bar chart, not the total
+    * bar chart svg tag, which includes margins containing axes and legend.
+    *
+    * @param {number} height
+    */
+    set graphHeight(height) {
+      this.graphHeight_ = height;
+    },
+
+    /**
+    * Get the height in pixels of one bar in the bar chart.
+    *
+    * @return {number}
+    */
+    get barHeight() {
+      return this.chart_.barHeight;
+    },
+
+    /**
+    * Set the height in pixels of one bar in the bar chart.
+    *
+    * @param {number} px
+    */
+    set barHeight(px) {
+      this.graphHeight = this.computeChartHeight_(px);
+    },
+
+    computeChartHeight_(barHeightPx) {
+      return (this.chart_.margin.top +
+          this.chart_.margin.bottom +
+          (barHeightPx * this.histogram.allBins.length));
+    },
+
+    get defaultGraphHeight() {
+      if (this.histogram && this.histogram.allBins.length === 1) {
+        return 150;
+      }
+      return this.computeChartHeight_(DEFAULT_BAR_HEIGHT_PX);
+    },
 
-const DELTA = String.fromCharCode(916);
-
-const ABS_DELTA_AVG_NAME = 'abs' + DELTA + 'avg';
-
-const DEFAULT_BAR_HEIGHT_PX = 5;
-
-const TRUNCATE_BIN_MARGIN = 0.15;
-
-Polymer({
-  is: 'tr-v-ui-histogram-span',
-
-  created() {
-    this.histogram_ = undefined;
-    this.referenceHistogram_ = undefined;
-    this.graphWidth_ = undefined;
-    this.graphHeight_ = undefined;
-    this.mouseDownBin_ = undefined;
-    this.brushedBins_ = [];
-    this.prevBrushedBins_ = [];
-    this.canMergeSampleDiagnostics_ = true;
-  },
-
-  ready() {
-    this.$.drag_handle.target = this.$.container;
-    this.$.drag_handle.addEventListener(
-        'drag-handle-resize', this.onResize_.bind(this));
-  },
-
-  attached() {
-    if (this.histogram_ !== undefined) this.updateContents_();
-  },
-
-  get canMergeSampleDiagnostics() {
-    return this.canMergeSampleDiagnostics_;
-  },
-
-  set canMergeSampleDiagnostics(merge) {
-    this.canMergeSampleDiagnostics_ = merge;
-    this.$.merge_sample_diagnostics_container.style.display = (
-        merge ? '' : 'none');
-  },
-
-  onResize_(event) {
-    event.stopPropagation();
-    let heightPx = parseInt(this.$.container.style.height);
-    if (heightPx < this.defaultGraphHeight) {
-      heightPx = this.defaultGraphHeight;
-      this.$.container.style.height = this.defaultGraphHeight + 'px';
-    }
-    this.chart_.graphHeight = heightPx - (this.chart_.margin.top +
-        this.chart_.margin.bottom);
-  },
-
-  /**
-   * Get the width in pixels of the widest bar in the bar chart, not the total
-   * bar chart svg tag, which includes margins containing axes and legend.
-   *
-   * @return {number}
-   */
-  get graphWidth() {
-    return this.graphWidth_ || this.defaultGraphWidth;
-  },
-
-  /**
-   * Set the width in pixels of the widest bar in the bar chart, not the total
-   * bar chart svg tag, which includes margins containing axes and legend.
-   *
-   * @param {number} width
-   */
-  set graphWidth(width) {
-    this.graphWidth_ = width;
-  },
-
-  /**
-   * Get the height in pixels of the bars in the bar chart, not the total
-   * bar chart svg tag, which includes margins containing axes and legend.
-   *
-   * @return {number}
-   */
-  get graphHeight() {
-    return this.graphHeight_ || this.defaultGraphHeight;
-  },
-
-  /**
-   * Set the height in pixels of the bars in the bar chart, not the total
-   * bar chart svg tag, which includes margins containing axes and legend.
-   *
-   * @param {number} height
-   */
-  set graphHeight(height) {
-    this.graphHeight_ = height;
-  },
-
-  /**
-   * Get the height in pixels of one bar in the bar chart.
-   *
-   * @return {number}
-   */
-  get barHeight() {
-    return this.chart_.barHeight;
-  },
-
-  /**
-   * Set the height in pixels of one bar in the bar chart.
-   *
-   * @param {number} px
-   */
-  set barHeight(px) {
-    this.graphHeight = this.computeChartHeight_(px);
-  },
-
-  computeChartHeight_(barHeightPx) {
-    return (this.chart_.margin.top +
-        this.chart_.margin.bottom +
-        (barHeightPx * this.histogram.allBins.length));
-  },
-
-  get defaultGraphHeight() {
-    if (this.histogram && this.histogram.allBins.length === 1) {
-      return 150;
-    }
-    return this.computeChartHeight_(DEFAULT_BAR_HEIGHT_PX);
-  },
-
-  get defaultGraphWidth() {
-    if (this.histogram.allBins.length === 1) {
-      return 100;
-    }
-    return 300;
-  },
-
-  get brushedBins() {
-    return this.brushedBins_;
-  },
-
-  set brushedBins(bins) {
-    this.brushedBins_ = bins;
-    let brushedBinIndices = new tr.b.Range();
-    for (let bin of bins) {
-      brushedBinIndices.addValue(this.histogram.allBins.indexOf(bin));
-    }
-    this.chart_.brushedRange = brushedBinIndices;
-    this.updateDiagnostics_();
-  },
-
-  updateBrushedRange_(binIndex) {
-    let brushedBinIndices = new tr.b.Range();
-    brushedBinIndices.addValue(tr.b.clamp(
-        this.mouseDownBinIndex_, 0, this.histogram.allBins.length - 1));
-    brushedBinIndices.addValue(tr.b.clamp(
-        binIndex, 0, this.histogram.allBins.length - 1));
-    brushedBinIndices.max += 1;
-    this.chart_.brushedRange = brushedBinIndices;
-
-    this.brushedBins_ = [];
-    for (let i = brushedBinIndices.min; i < brushedBinIndices.max; ++i) {
-      this.brushedBins.push(this.histogram.allBins[i]);
-    }
-  },
+    get defaultGraphWidth() {
+      if (this.histogram.allBins.length === 1) {
+        return 100;
+      }
+      return 300;
+    },
+
+    get brushedBins() {
+      return this.brushedBins_;
+    },
+
+    set brushedBins(bins) {
+      this.brushedBins_ = bins;
+      let brushedBinIndices = new tr.b.Range();
+      for (let bin of bins) {
+        brushedBinIndices.addValue(this.histogram.allBins.indexOf(bin));
+      }
+      this.chart_.brushedRange = brushedBinIndices;
+      this.updateDiagnostics_();
+    },
 
-  onMouseDown_(chartEvent) {
-    chartEvent.stopPropagation();
-    if (!this.histogram) {
-      return;
-    }
-    this.prevBrushedBins_ = this.brushedBins_;
-    this.mouseDownBinIndex_ = chartEvent.y;
-    this.updateBrushedRange_(chartEvent.y);
-  },
-
-  onMouseMove_(chartEvent) {
-    chartEvent.stopPropagation();
-    if (!this.histogram) {
-      return;
-    }
-    this.updateBrushedRange_(chartEvent.y);
-  },
+    updateBrushedRange_(binIndex) {
+      let brushedBinIndices = new tr.b.Range();
+      brushedBinIndices.addValue(tr.b.clamp(
+          this.mouseDownBinIndex_, 0, this.histogram.allBins.length - 1));
+      brushedBinIndices.addValue(tr.b.clamp(
+          binIndex, 0, this.histogram.allBins.length - 1));
+      brushedBinIndices.max += 1;
+      this.chart_.brushedRange = brushedBinIndices;
 
-  onMouseUp_(chartEvent) {
-    chartEvent.stopPropagation();
-    if (!this.histogram) {
-      return;
-    }
-    this.updateBrushedRange_(chartEvent.y);
-    if (this.prevBrushedBins_.length === 1 &&
-        this.brushedBins_.length === 1 &&
-        this.prevBrushedBins_[0] === this.brushedBins_[0]) {
       this.brushedBins_ = [];
-      this.chart_.brushedRange = new tr.b.Range();
-    }
-    this.updateDiagnostics_();
-    this.mouseDownBinIndex_ = undefined;
-  },
-
-  updateDiagnostics_() {
-    let maps = [];
-    for (let bin of this.brushedBins) {
-      for (let map of bin.diagnosticMaps) {
-        maps.push(map);
+      for (let i = brushedBinIndices.min; i < brushedBinIndices.max; ++i) {
+        this.brushedBins.push(this.histogram.allBins[i]);
       }
-    }
+    },
 
-    if (maps.length === 0) {
-      this.$.sample_diagnostics_container.style.display = 'none';
-      return;
-    }
+    onMouseDown_(chartEvent) {
+      chartEvent.stopPropagation();
+      if (!this.histogram) {
+        return;
+      }
+      this.prevBrushedBins_ = this.brushedBins_;
+      this.mouseDownBinIndex_ = chartEvent.y;
+      this.updateBrushedRange_(chartEvent.y);
+    },
+
+    onMouseMove_(chartEvent) {
+      chartEvent.stopPropagation();
+      if (!this.histogram) {
+        return;
+      }
+      this.updateBrushedRange_(chartEvent.y);
+    },
 
-    if (this.canMergeSampleDiagnostics &&
-        this.$.merge_sample_diagnostics.checked) {
-      let merged = new tr.v.d.DiagnosticMap();
-      for (let map of maps) {
-        merged.addDiagnostics(map);
+    onMouseUp_(chartEvent) {
+      chartEvent.stopPropagation();
+      if (!this.histogram) {
+        return;
+      }
+      this.updateBrushedRange_(chartEvent.y);
+      if (this.prevBrushedBins_.length === 1 &&
+          this.brushedBins_.length === 1 &&
+          this.prevBrushedBins_[0] === this.brushedBins_[0]) {
+        this.brushedBins_ = [];
+        this.chart_.brushedRange = new tr.b.Range();
+      }
+      this.updateDiagnostics_();
+      this.mouseDownBinIndex_ = undefined;
+    },
+
+    updateDiagnostics_() {
+      let maps = [];
+      for (let bin of this.brushedBins) {
+        for (let map of bin.diagnosticMaps) {
+          maps.push(map);
+        }
       }
-      maps = [merged];
-    }
 
-    this.$.sample_diagnostics_container.style.display = 'block';
-    this.$.sample_diagnostics.diagnosticMaps = maps;
-  },
+      if (maps.length === 0) {
+        this.$.sample_diagnostics_container.style.display = 'none';
+        return;
+      }
 
-  get histogram() {
-    return this.histogram_;
-  },
+      if (this.canMergeSampleDiagnostics &&
+          this.$.merge_sample_diagnostics.checked) {
+        let merged = new tr.v.d.DiagnosticMap();
+        for (let map of maps) {
+          merged.addDiagnostics(map);
+        }
+        maps = [merged];
+      }
 
-  set histogram(histogram) {
-    if (histogram === this.histogram_) return;
-    this.histogram_ = histogram;
-    if (this.isAttached) this.updateContents_();
-  },
+      this.$.sample_diagnostics_container.style.display = 'block';
+      this.$.sample_diagnostics.diagnosticMaps = maps;
+    },
 
-  get referenceHistogram() {
-    return this.referenceHistogram_;
-  },
+    get histogram() {
+      return this.histogram_;
+    },
 
-  set referenceHistogram(histogram) {
-    if (histogram === this.referenceHistogram_) {
-      return;
-    }
-    this.referenceHistogram_ = histogram;
-    if (this.histogram) this.updateContents_();
-  },
-
-  getDeltaScalars_(scalarMap) {
-    if (!(this.referenceHistogram instanceof tr.v.Histogram) ||
-        (this.histogram.unit !== this.referenceHistogram.unit) ||
-        (this.histogram.numValues === 0) &&
-        (this.referenceHistogram.numValues === 0)) {
-      return;
-    }
+    set histogram(histogram) {
+      if (histogram === this.histogram_) return;
+      this.histogram_ = histogram;
+      if (this.isAttached) this.updateContents_();
+    },
 
-    let mwu = tr.b.Statistics.mwu(
-        this.histogram.sampleValues, this.referenceHistogram.sampleValues);
+    get referenceHistogram() {
+      return this.referenceHistogram_;
+    },
 
-    for (let deltaStatName of tr.v.DELTA_STATISTIC_NAMES) {
-      let scalar = this.histogram.getStatisticScalar(
-          deltaStatName, this.referenceHistogram, mwu);
-      if (scalar === undefined) continue;
-      scalarMap.set(deltaStatName, scalar);
-    }
+    set referenceHistogram(histogram) {
+      if (histogram === this.referenceHistogram_) {
+        return;
+      }
+      this.referenceHistogram_ = histogram;
+      if (this.histogram) this.updateContents_();
+    },
+
+    getDeltaScalars_(statNames, scalarMap) {
+      if (!this.histogram.canCompare(this.referenceHistogram)) return;
+
+      let mwu = tr.b.Statistics.mwu(
+          this.histogram.sampleValues, this.referenceHistogram.sampleValues);
+
+      for (let deltaStatName of tr.v.Histogram.getDeltaStatisticsNames(
+          statNames)) {
+        if (IGNORE_DELTA_STATISTICS_NAMES.includes(deltaStatName)) continue;
+        let scalar = this.histogram.getStatisticScalar(
+            deltaStatName, this.referenceHistogram, mwu);
+        if (scalar === undefined) continue;
+        scalarMap.set(deltaStatName, scalar);
+      }
 
-    if (this.histogram.unit.improvementDirection !==
-        tr.b.ImprovementDirection.DONT_CARE) {
-      this.$.stats.setSignificanceForKey(
-          tr.v.ABS_DELTA_AVG_NAME, mwu.significance);
-    }
-  },
-
-  set isYLogScale(logScale) {
-    this.chart_.isYLogScale = logScale;
-  },
-
-  updateContents_() {
-    this.$.chart.style.display = 'none';
-    this.$.drag_handle.style.display = 'none';
-    this.$.sample_diagnostics_container.style.display = 'none';
-    this.$.container.style.justifyContent = '';
-    this.brushedBins_ = [];
-
-    while (Polymer.dom(this.$.chart).lastChild) {
-      Polymer.dom(this.$.chart).removeChild(
-          Polymer.dom(this.$.chart).lastChild);
-    }
+      if (this.histogram.unit.improvementDirection !==
+          tr.b.ImprovementDirection.DONT_CARE) {
+        this.$.stats.setSignificanceForKey(
+            `${tr.v.DELTA}avg`, mwu.significance);
+      }
+    },
 
-    if (!this.histogram) return;
-    this.$.container.style.display = '';
+    set isYLogScale(logScale) {
+      this.chart_.isYLogScale = logScale;
+    },
 
-    let scalarMap = new Map();
-    this.getDeltaScalars_(scalarMap);
-    for (let [name, scalar] of this.histogram.statisticsScalars) {
-      scalarMap.set(name, scalar);
-    }
-    this.$.stats.scalarMap = scalarMap;
-
-    if (this.histogram.diagnostics.size > 0) {
-      let diagnosticMap = new tr.v.d.DiagnosticMap();
-      for (let [key, diagnostic] of this.histogram.diagnostics) {
-        // Hide the 'merged from' and 'merged to' diagnostics, which are
-        // implementation details.
-        if (key !== tr.v.d.MERGED_FROM_DIAGNOSTIC_KEY &&
-            key !== tr.v.d.MERGED_TO_DIAGNOSTIC_KEY) {
-          diagnosticMap.set(key, diagnostic);
+    updateContents_() {
+      this.$.chart.style.display = 'none';
+      this.$.drag_handle.style.display = 'none';
+      this.$.sample_diagnostics_container.style.display = 'none';
+      this.$.container.style.justifyContent = '';
+      this.brushedBins_ = [];
+
+      while (Polymer.dom(this.$.chart).lastChild) {
+        Polymer.dom(this.$.chart).removeChild(
+            Polymer.dom(this.$.chart).lastChild);
+      }
+
+      if (!this.histogram) return;
+      this.$.container.style.display = '';
+
+      let scalarMap = new Map();
+      this.getDeltaScalars_(this.histogram.statisticsNames, scalarMap);
+      for (let [name, scalar] of this.histogram.statisticsScalars) {
+        scalarMap.set(name, scalar);
+      }
+      this.$.stats.scalarMap = scalarMap;
+
+      if (this.histogram.diagnostics.size > 0) {
+        let diagnosticMap = new tr.v.d.DiagnosticMap();
+        for (let [key, diagnostic] of this.histogram.diagnostics) {
+          // Hide the 'merged from' and 'merged to' diagnostics, which are
+          // implementation details.
+          if (key !== tr.v.d.MERGED_FROM_DIAGNOSTIC_KEY &&
+              key !== tr.v.d.MERGED_TO_DIAGNOSTIC_KEY) {
+            diagnosticMap.set(key, diagnostic);
+          }
         }
+        this.$.histogram_diagnostics.diagnosticMaps = [diagnosticMap];
+        this.$.histogram_diagnostics.style.display = 'block';
+      } else {
+        this.$.histogram_diagnostics.style.display = 'none';
       }
-      this.$.histogram_diagnostics.diagnosticMaps = [diagnosticMap];
-      this.$.histogram_diagnostics.style.display = 'block';
-    } else {
-      this.$.histogram_diagnostics.style.display = 'none';
-    }
 
-    if (this.histogram.numValues <= 1) {
-      this.brushedBins_ = this.histogram.allBins;
-      this.updateDiagnostics_();
-      this.$.container.style.justifyContent = 'flex-end';
-      return;
-    }
+      if (this.histogram.numValues <= 1) {
+        this.brushedBins_ = this.histogram.allBins;
+        this.updateDiagnostics_();
+        this.$.container.style.justifyContent = 'flex-end';
+        return;
+      }
 
-    this.$.chart.style.display = 'block';
-    this.$.drag_handle.style.display = 'block';
+      this.$.chart.style.display = 'block';
+      this.$.drag_handle.style.display = 'block';
+
+      if (this.histogram.allBins.length === 1) {
+        this.chart_ = new tr.ui.b.BoxChart();
+        Polymer.dom(this.$.chart).appendChild(this.chart_);
+        this.chart_.graphWidth = this.graphWidth;
+        this.chart_.graphHeight = this.graphHeight;
+        this.chart_.hideXAxis = true;
+        this.chart_.data = [
+          {
+            x: '',
+            color: 'blue',
+            percentile_0: this.histogram.running.min,
+            percentile_25: this.histogram.getApproximatePercentile(0.25),
+            percentile_50: this.histogram.getApproximatePercentile(0.5),
+            percentile_75: this.histogram.getApproximatePercentile(0.75),
+            percentile_100: this.histogram.running.max,
+          }
+        ];
+        this.brushedBins_ = this.histogram.allBins;
+        this.updateDiagnostics_();
+        return;
+      }
 
-    if (this.histogram.allBins.length === 1) {
-      this.chart_ = new tr.ui.b.BoxChart();
+      this.chart_ = new tr.ui.b.NameBarChart();
       Polymer.dom(this.$.chart).appendChild(this.chart_);
       this.chart_.graphWidth = this.graphWidth;
       this.chart_.graphHeight = this.graphHeight;
-      this.chart_.hideXAxis = true;
-      this.chart_.data = [
-        {
-          x: '',
-          color: 'blue',
-          percentile_0: this.histogram.running.min,
-          percentile_25: this.histogram.getApproximatePercentile(0.25),
-          percentile_50: this.histogram.getApproximatePercentile(0.5),
-          percentile_75: this.histogram.getApproximatePercentile(0.75),
-          percentile_100: this.histogram.running.max,
+      this.chart_.addEventListener('item-mousedown',
+          this.onMouseDown_.bind(this));
+      this.chart_.addEventListener('item-mousemove',
+          this.onMouseMove_.bind(this));
+      this.chart_.addEventListener('item-mouseup',
+          this.onMouseUp_.bind(this));
+      this.chart_.hideLegend = true;
+      this.chart_.getDataSeries('y').color = 'blue';
+      this.chart_.xAxisLabel = '#';
+      this.chart_.brushedRange = new tr.b.Range();
+
+      let chartData = [];
+      let binCounts = [];
+      for (let bin of this.histogram.allBins) {
+        let x = bin.range.min;
+        if (x === -Number.MAX_VALUE) {
+          x = '<' + new tr.b.Scalar(
+              this.histogram.unit, bin.range.max).toString();
+        } else {
+          x = new tr.b.Scalar(this.histogram.unit, x).toString();
         }
-      ];
-      this.brushedBins_ = this.histogram.allBins;
-      this.updateDiagnostics_();
-      return;
-    }
+        chartData.push({x: x, y: bin.count});
+        binCounts.push(bin.count);
+      }
 
-    this.chart_ = new tr.ui.b.NameBarChart();
-    Polymer.dom(this.$.chart).appendChild(this.chart_);
-    this.chart_.graphWidth = this.graphWidth;
-    this.chart_.graphHeight = this.graphHeight;
-    this.chart_.addEventListener('item-mousedown',
-        this.onMouseDown_.bind(this));
-    this.chart_.addEventListener('item-mousemove',
-        this.onMouseMove_.bind(this));
-    this.chart_.addEventListener('item-mouseup',
-        this.onMouseUp_.bind(this));
-    this.chart_.hideLegend = true;
-    this.chart_.getDataSeries('y').color = 'blue';
-    this.chart_.xAxisLabel = '#';
-    this.chart_.brushedRange = new tr.b.Range();
-
-    let chartData = [];
-    let binCounts = [];
-    for (let bin of this.histogram.allBins) {
-      let x = bin.range.min;
-      if (x === -Number.MAX_VALUE) {
-        x = '<' + new tr.b.Scalar(
-            this.histogram.unit, bin.range.max).toString();
-      } else {
-        x = new tr.b.Scalar(this.histogram.unit, x).toString();
+      // If the largest 1 or 2 bins are more than twice as large as the next
+      // largest bin, then set the dataRange max to TRUNCATE_BIN_MARGIN% more
+      // than that next largest bin.
+      binCounts.sort((x, y) => y - x);
+      let dataRange = tr.b.Range.fromExplicitRange(0, binCounts[0]);
+      if (binCounts[1] > 0 && binCounts[0] > (binCounts[1] * 2)) {
+        dataRange.max = binCounts[1] * (1 + TRUNCATE_BIN_MARGIN);
       }
-      chartData.push({x: x, y: bin.count});
-      binCounts.push(bin.count);
-    }
+      if (binCounts[2] > 0 && binCounts[1] > (binCounts[2] * 2)) {
+        dataRange.max = binCounts[2] * (1 + TRUNCATE_BIN_MARGIN);
+      }
+      this.chart_.overrideDataRange = dataRange;
 
-    // If the largest 1 or 2 bins are more than twice as large as the next
-    // largest bin, then set the dataRange max to TRUNCATE_BIN_MARGIN% more than
-    // that next largest bin.
-    binCounts.sort((x, y) => y - x);
-    let dataRange = tr.b.Range.fromExplicitRange(0, binCounts[0]);
-    if (binCounts[1] > 0 && binCounts[0] > (binCounts[1] * 2)) {
-      dataRange.max = binCounts[1] * (1 + TRUNCATE_BIN_MARGIN);
-    }
-    if (binCounts[2] > 0 && binCounts[1] > (binCounts[2] * 2)) {
-      dataRange.max = binCounts[2] * (1 + TRUNCATE_BIN_MARGIN);
+      this.chart_.data = chartData;
     }
-    this.chart_.overrideDataRange = dataRange;
-
-    this.chart_.data = chartData;
-  }
+  });
 });
 </script>