From 9026e0ce4127725d48f039ecb8add616b490c017 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Thu, 7 May 2020 12:59:10 -0400
Subject: [PATCH] Sci notation on continuous legend (#1450)

* sci notation on continuous legend

* significant digits
---
 .../components/brushableHistogram/index.js    | 24 +++++++++++++++----
 .../src/components/continuousLegend/index.js  |  9 ++++++-
 client/src/util/significantDigits.js          | 10 ++++++++
 3 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 client/src/util/significantDigits.js

diff --git a/client/src/components/brushableHistogram/index.js b/client/src/components/brushableHistogram/index.js
index 0e4521cd..fce92ddb 100644
--- a/client/src/components/brushableHistogram/index.js
+++ b/client/src/components/brushableHistogram/index.js
@@ -15,6 +15,7 @@ import * as globals from "../../globals";
 import actions from "../../actions";
 import { histogramContinuous } from "../../util/dataframe/histogram";
 import { makeContinuousDimensionName } from "../../util/nameCreators";
+import significantDigits from "../../util/significantDigits";
 
 function clamp(val, rng) {
   return Math.max(Math.min(val, rng[1]), rng[0]);
@@ -288,6 +289,23 @@ class HistogramBrush extends React.PureComponent {
     }
   };
 
+  maybeScientific = (x) => {
+    let format = ",";
+    const _ticks = x.ticks(4);
+
+    if (x.domain().some((n) => Math.abs(n) >= 10000)) {
+      /* 
+        heuristic: if the last tick d3 wants to render has one significant
+        digit ie., 2000, render 2e+3, but if it's anything else ie., 42000000 render
+        4.20e+n
+      */
+      format =
+        significantDigits(_ticks[_ticks.length - 1]) === 1 ? ".0e" : ".2e";
+    }
+
+    return format;
+  };
+
   removeHistogram = () => {
     const {
       dispatch,
@@ -406,11 +424,7 @@ class HistogramBrush extends React.PureComponent {
         d3
           .axisBottom(x)
           .ticks(4)
-          .tickFormat(
-            d3.format(
-              x.domain().some((n) => Math.abs(n) >= 10000) ? ".2e" : ","
-            )
-          )
+          .tickFormat(d3.format(this.maybeScientific(x)))
       );
 
     /* Y AXIS */
diff --git a/client/src/components/continuousLegend/index.js b/client/src/components/continuousLegend/index.js
index 9ca3aa1d..217c4233 100644
--- a/client/src/components/continuousLegend/index.js
+++ b/client/src/components/continuousLegend/index.js
@@ -61,7 +61,14 @@ const continuous = (selectorId, colorscale, colorAccessor) => {
   });
   */
 
-  const legendaxis = d3.axisRight().scale(legendscale).tickSize(6).ticks(8);
+  const legendaxis = d3
+    .axisRight(legendscale)
+    .ticks(6)
+    .tickFormat(
+      d3.format(
+        legendscale.domain().some((n) => Math.abs(n) >= 10000) ? ".0e" : ","
+      )
+    );
 
   const svg = d3
     .select(selectorId)
diff --git a/client/src/util/significantDigits.js b/client/src/util/significantDigits.js
new file mode 100644
index 00000000..6d3e005e
--- /dev/null
+++ b/client/src/util/significantDigits.js
@@ -0,0 +1,10 @@
+/* 
+    via https://github.com/nodef/extra-number/blob/master/scripts/significantDigits.js
+*/
+
+export default (n) => {
+  return n
+    .toExponential()
+    .replace(/e[\+\-0-9]*$/, "")
+    .replace(/^0\.?0*|\./, "").length;
+};