clean up and parse url improvements

HdrHistogram · Nov 13, 2020 · 2a310ce · 2a310ce
1 parent 191ed75
commit 2a310ce
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,18 @@ The purpose of this JavaScript widget is to easily visualize latencies recorded
 
 ## Usage
 
+### Passing data in a URL
+
+If you are in a hurry, you can generate an URL containing the histogram(s) you want to plot as a base64 url encoded string(s). The URL should look like the one below:
+
+```ts
+`https://hdrhistogram.github.io/HdrHistogramWidget/parseUrl.html?unitText=${"ms"}&data.name=${"HISTFAAAA..."}&data.other_name=${"HISTFAAAA..."}`;
+```
+
+Here is a [working example](https://hdrhistogram.github.io/HdrHistogramWidget/parseUrl.html?unitText=ms&data.latency=HISTFAAAAkV42i1NTWgTQRTe93Yyna7jdEzTbaghpjWsEpaQxhLXumxLLEuRGpallJCDhxB6qXqQUsSDFFlDwRzEQikhJ%2BnFIOLFgkWk9NCz1LtIDx6lIPTixdm2b%2BbN%2B37mvZeJNoc1DTvaeSQuKlxUnDk5B6OnA9%2BO2O%2BdgY8%2FyMkR230N75zuys%2FJrXt7ma2r7cmNkXby0%2FVj89j8dSMa3sls8wN2yt8kvuvrdB8PsEv%2BwKG%2BD1%2FhA%2FZgHSJsunuw8HTKW6sstKxiaM%2BnJ7ycVS0Wl6ZWS%2Fmm4z5q%2BF3wX7gTQa60nCkGhelCvn7TCtOpmj1XKAXTE82i24FaG6puD%2FxKH2qNlzC7C%2F7DCMJKFyx%2FzY%2FAnV0LnB7Uwz4sbIAXbkNY24K5pT64fQgaPVhcPIR66y0EHfCrEQRhB%2BaDVSeCqtrf9J75Lct57tnNOXu10nLtesVdLpQb5fuW0yw5T0rTXt6rmPO5vJ2RpbGyJfPp7KzIWrmylDaX2WQqzS2ZLnCRFWbBHONcSDpGpTAEM7jB0zyZEaakWWokBZNoEJbkJEVJiglpMMYkJ4KajJnESHGRoianklBBDK4eyhnjBKUhKSWUKogaIUhUMMGQKk6QMko0olPU2JmvM6US1NVFxdWhGAfRY0FTQCMJvLBiFc%2FuuYYJBRMxH8QrKvGSKpdxHIdwWOUdZYzjJipyG2fwsTJXEAdwBB8o55b6kYi7B1XbOOI1tUBXOapWxiPjobEypJRXgHcVmcH3gF%2BkmvK3jfjvM%2BB%2FgsBx8g%3D%3D)
+
+### Writing some code
+
 This library is packaged as a UMD module, hence you can use it directly
 from JavaScript within a browser. To do so, you can simply include the bundle file from github's release page:
 

diff --git a/parseUrl.html b/parseUrl.html
@@ -8,7 +8,8 @@
 <body>
     <div id="graph"></div>
     <script>
-        HdrWidget.display(window.location);
+        HdrHistogramWidget.parseUrl();
+        HdrHistogramWidget.parseUrl();
     </script>
 </body>
 

diff --git a/src/index.ts b/src/index.ts
@@ -1,24 +1,27 @@
 import { decodeFromCompressedBase64, initWebAssembly } from "hdr-histogram-js";
 
-const loadGoogleChart = () =>
-  new Promise((resolve) => {
+let loadGoogleChartPromise: Promise<void> | undefined = undefined;
+const loadGoogleChart = () => {
+  if (loadGoogleChartPromise) {
+    return loadGoogleChartPromise;
+  }
+  loadGoogleChartPromise = new Promise((resolve) => {
     const body = document.getElementsByTagName("body")[0];
     const script = document.createElement("script");
     script.src = "https://www.google.com/jsapi";
     script.type = "text/javascript";
-    console.log("start load google");
     script.onload = function () {
-      console.log("load google");
       window.google.charts.load("current", {
         packages: ["corechart"],
       });
       window.google.charts.setOnLoadCallback(() => {
-        console.log("end load google");
         resolve();
       });
     };
     body.appendChild(script);
   });
+  return loadGoogleChartPromise;
+};
 
 export default class HdrHistogramWidget {
   maxPercentile: number;
@@ -29,8 +32,28 @@ export default class HdrHistogramWidget {
     return Promise.all([loadGoogleChart(), initWebAssembly()]);
   }
 
+  static async parseUrl(locationWithData: Location = location) {
+    let unitText: string = "milliseconds";
+    const params = new URLSearchParams(locationWithData.search);
+    let hasData = false;
+    const data: any = {};
+    params.forEach((value, key) => {
+      if (key === "unitText") {
+        unitText = value;
+      } else if (key.startsWith("data.")) {
+        hasData = true;
+        data[key.substring(5)] = value;
+      }
+    });
+    if (!hasData) {
+      throw new Error("No data found in url '" + locationWithData.href + "'");
+    }
+
+    return HdrHistogramWidget.display(data, unitText);
+  }
+
   static async display(
-    data: any = location,
+    data: any,
     unitText: string = "milliseconds",
     chartElement: HTMLElement = document.body
   ) {
@@ -41,22 +64,7 @@ export default class HdrHistogramWidget {
     }
 
     unitText = unitText || "milliseconds";
-    if (data.search && data.protocol) {
-      const params = new URLSearchParams(data.search);
-      let hasData = false;
-      data = {};
-      params.forEach((value, key) => {
-        if (key === "unitText") {
-          unitText = value;
-        } else if (key.startsWith("data.")) {
-          hasData = true;
-          data[key.substring(5)] = value;
-        }
-      });
-      if (!hasData) {
-        throw new Error("No data found in '" + params + "'");
-      }
-    }
+
     const widget = new HdrHistogramWidget(data, unitText, chartElement);
     widget.render();
     return widget;
@@ -70,12 +78,10 @@ export default class HdrHistogramWidget {
     let series: any[][] = [];
     Object.keys(data).forEach((name) => {
       if (data[name].startsWith("HIST")) {
-        console.log("Will try base64 decoding on " + name);
         const histogram = decodeFromCompressedBase64(data[name], 32, true);
         const histoOutput = histogram.outputPercentileDistribution();
         series = appendDataSeries(histoOutput, name, series);
       } else {
-        console.log("Good old histogram output parsing for " + name);
         series = appendDataSeries(data[name], name, series);
       }
     });