Perf - Add commas to large numbers in ticks and hover text.

Bug: skia:9325
Change-Id: Ie6810006f5077fcd4056577b97231efef17c35a1
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/234538
Auto-Submit: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Ravi Mistry <rmistry@google.com>
Commit-Queue: Joe Gregorio <jcgregorio@google.com>
diff --git a/perf/modules/explore-sk/explore-sk.js b/perf/modules/explore-sk/explore-sk.js
index 5c54c98..aecb064 100644
--- a/perf/modules/explore-sk/explore-sk.js
+++ b/perf/modules/explore-sk/explore-sk.js
@@ -71,7 +71,7 @@
   <div id=buttons>
     <domain-picker-sk id=range .state=${ele.state} @domain-changed=${ele._rangeChange}></domain-picker-sk>
     <button @click=${ele._removeHighlighted} title="Remove all the highlighted traces.">Remove Highlighted</button>
-    <button @click=${ele._removeAll} title="Remove all the traces.">Remove All</button>
+    <button @click=${(e) => ele._removeAll()} title="Remove all the traces.">Remove All</button>
     <button @click=${ele._highlightedOnly} title="Remove all but the highlighted traces.">Highlighted Only</button>
     <button @click=${ele._clearHighlights} title="Remove highlights from all traces.">Clear Highlights</button>
     <button @click=${ele._resetAxes} title="Reset back to the original zoom level.">Reset Axes</button>
@@ -627,13 +627,22 @@
     });
   }
 
-  _removeAll() {
+  /**
+   * Removes all traces.
+   *
+   * @param skipHistory {Boolean} - If true then don't update the URL. Used
+   * in calls like _normalize() where this is just an intermediate state we
+   * don't want in history.
+   */
+  _removeAll(skipHistory) {
     this.state.formulas = [];
     this.state.queries = [];
     this.state.keys = "";
     this._plot.removeAll();
     this._lines = [];
-    this._stateHasChanged();
+    if (!skipHistory) {
+      this._stateHasChanged();
+    }
   }
 
   // When Remove Highlighted or Highlighted Only are pressed then create a
@@ -692,12 +701,13 @@
     }
     promise.then(() => {
       let f = `norm(shortcut("${this.state.keys}"))`
-      this._removeAll();
+      this._removeAll(true);
       let body = this._requestFrameBodyFromState();
       Object.assign(body, {
         formulas: [f],
       });
       this.state.formulas.push(f);
+      this._stateHasChanged();
       this._requestFrame(body, (json) => {
         this._addTraces(json, true, false);
       });
@@ -713,12 +723,13 @@
     }
     promise.then(() => {
       let f = `scale_by_ave(shortcut("${this.state.keys}"))`
-      this._removeAll();
+      this._removeAll(true);
       var body = this._requestFrameBodyFromState();
       Object.assign(body, {
         formulas: [f],
       });
       this.state.formulas.push(f);
+      this._stateHasChanged();
       this._requestFrame(body, (json) => {
         this._addTraces(json, true, false);
       });
diff --git a/perf/modules/plot-simple-sk/plot-simple-sk.js b/perf/modules/plot-simple-sk/plot-simple-sk.js
index 1a0857e..1d5a19d 100644
--- a/perf/modules/plot-simple-sk/plot-simple-sk.js
+++ b/perf/modules/plot-simple-sk/plot-simple-sk.js
@@ -114,16 +114,17 @@
             caretPadding: 10,
             callbacks: {
               label: (tooltipItem, data) => {
-                var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                const label = data.datasets[tooltipItem.datasetIndex].label || '';
+                const tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                 let detail = {
                   id: label,
-                  value: tooltipItem.value,
+                  value: tooltipValue,
                   index: tooltipItem.index,
                   pt: [tooltipItem.index, tooltipItem.value],
                 };
                 this.dispatchEvent(new CustomEvent('trace_focused', {detail: detail, bubbles: true}));
 
-                return `Value: ${tooltipItem.value}`;
+                return parseFloat(tooltipValue).toLocaleString();
               }
             },
           },
@@ -152,6 +153,13 @@
                 autoSkip: true,
                 maxTicksLimit: 10,
               },
+            }],
+            yAxes: [{
+              ticks: {
+                callback: function(value, index, values) {
+                  return parseFloat(value).toLocaleString();
+                },
+              },
             }]
           },
           legend: {
@@ -266,8 +274,8 @@
    * @return {Number} A 32 bit hash for the given string.
    */
   _hashString(s) {
-    var hash = 0;
-    for (var i = s.length - 1; i >= 0; i--) {
+    let hash = 0;
+    for (let i = s.length - 1; i >= 0; i--) {
       hash = ((hash << 5) - hash) + s.charCodeAt(i);
       hash |= 0;
     }
@@ -291,7 +299,7 @@
    *
    * @example
    *
-   *     var lines = {
+   *     let lines = {
    *       foo: [
    *         [0.1, 3.7],
    *         [0.2, 3.8],
@@ -303,7 +311,7 @@
    *         [0.5, 3.9],
    *       ],
    *     };
-   *     var labels = [new Date(), new Date()];
+   *     let labels = [new Date(), new Date()];
    *     plot.addLines(lines, labels);
    */
   addLines(lines, labels) {
@@ -340,7 +348,7 @@
    */
   deleteLine(id) {
     let ds = this._chart.data.datasets;
-    for (var i = 0; i < ds.length; i++) {
+    for (let i = 0; i < ds.length; i++) {
       if (ds[i].label === id) {
         this._chart.data.datasets.splice(i, 1);
       }
@@ -440,7 +448,7 @@
    *
    * @example
    *
-   *     var bands = [
+   *     let bands = [
    *       [0.0, 0.1],
    *       [0.5, 1.2],
    *     ];