td-plots 1.5.3 → 1.5.5

package/dist/index.esm.js

@@ -36,6 +36,319 @@ function styleInject(css, ref) {
 var css_248z = ".plot-container{height:100%;max-width:100%;min-height:300px;overflow:hidden!important;position:relative;width:100%}.plot-container>div{flex:1;height:100%!important;width:100%!important}.plot-container .main-svg{max-height:100%!important;max-width:100%!important}.plot-container .main-svg,.plot-container .plotly-graph-div,.plot-container svg.main-svg[height],.plot-container svg.main-svg[width]{height:100%!important;width:100%!important}.plot-container .point{border-radius:5px!important;overflow:hidden!important}.plot-container .cursor-ns-resize{height:0;width:0}.plot-container .cursor-ew-resize{fill:var(--selection-color,blue)!important;stroke:var(--selection-color,blue)!important}.plot-container .selectionlayer>path{stroke:var(--selection-color,blue)!important;stroke-dasharray:0!important;stroke-width:1px!important;opacity:.5!important}.plot-container .zoomlayer>path{stroke-dasharray:0!important;stroke:var(--selection-color,blue)!important;fill:var(--selection-color,blue)!important}.radial-histogram-container{aspect-ratio:1}.loading-overlay{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:300}";
 styleInject(css_248z);
 
+function formatDecimal(x) {
+  return Math.abs(x = Math.round(x)) >= 1e21
+      ? x.toLocaleString("en").replace(/,/g, "")
+      : x.toString(10);
+}
+
+// Computes the decimal coefficient and exponent of the specified number x with
+// significant digits p, where x is positive and p is in [1, 21] or undefined.
+// For example, formatDecimalParts(1.23) returns ["123", 0].
+function formatDecimalParts(x, p) {
+  if ((i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0) return null; // NaN, ±Infinity
+  var i, coefficient = x.slice(0, i);
+
+  // The string returned by toExponential either has the form \d\.\d+e[-+]\d+
+  // (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3).
+  return [
+    coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient,
+    +x.slice(i + 1)
+  ];
+}
+
+function exponent(x) {
+  return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;
+}
+
+function formatGroup(grouping, thousands) {
+  return function(value, width) {
+    var i = value.length,
+        t = [],
+        j = 0,
+        g = grouping[0],
+        length = 0;
+
+    while (i > 0 && g > 0) {
+      if (length + g + 1 > width) g = Math.max(1, width - length);
+      t.push(value.substring(i -= g, i + g));
+      if ((length += g + 1) > width) break;
+      g = grouping[j = (j + 1) % grouping.length];
+    }
+
+    return t.reverse().join(thousands);
+  };
+}
+
+function formatNumerals(numerals) {
+  return function(value) {
+    return value.replace(/[0-9]/g, function(i) {
+      return numerals[+i];
+    });
+  };
+}
+
+// [[fill]align][sign][symbol][0][width][,][.precision][~][type]
+var re = /^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;
+
+function formatSpecifier(specifier) {
+  if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
+  var match;
+  return new FormatSpecifier({
+    fill: match[1],
+    align: match[2],
+    sign: match[3],
+    symbol: match[4],
+    zero: match[5],
+    width: match[6],
+    comma: match[7],
+    precision: match[8] && match[8].slice(1),
+    trim: match[9],
+    type: match[10]
+  });
+}
+
+formatSpecifier.prototype = FormatSpecifier.prototype; // instanceof
+
+function FormatSpecifier(specifier) {
+  this.fill = specifier.fill === undefined ? " " : specifier.fill + "";
+  this.align = specifier.align === undefined ? ">" : specifier.align + "";
+  this.sign = specifier.sign === undefined ? "-" : specifier.sign + "";
+  this.symbol = specifier.symbol === undefined ? "" : specifier.symbol + "";
+  this.zero = !!specifier.zero;
+  this.width = specifier.width === undefined ? undefined : +specifier.width;
+  this.comma = !!specifier.comma;
+  this.precision = specifier.precision === undefined ? undefined : +specifier.precision;
+  this.trim = !!specifier.trim;
+  this.type = specifier.type === undefined ? "" : specifier.type + "";
+}
+
+FormatSpecifier.prototype.toString = function() {
+  return this.fill
+      + this.align
+      + this.sign
+      + this.symbol
+      + (this.zero ? "0" : "")
+      + (this.width === undefined ? "" : Math.max(1, this.width | 0))
+      + (this.comma ? "," : "")
+      + (this.precision === undefined ? "" : "." + Math.max(0, this.precision | 0))
+      + (this.trim ? "~" : "")
+      + this.type;
+};
+
+// Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k.
+function formatTrim(s) {
+  out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
+    switch (s[i]) {
+      case ".": i0 = i1 = i; break;
+      case "0": if (i0 === 0) i0 = i; i1 = i; break;
+      default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;
+    }
+  }
+  return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
+}
+
+var prefixExponent;
+
+function formatPrefixAuto(x, p) {
+  var d = formatDecimalParts(x, p);
+  if (!d) return x + "";
+  var coefficient = d[0],
+      exponent = d[1],
+      i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,
+      n = coefficient.length;
+  return i === n ? coefficient
+      : i > n ? coefficient + new Array(i - n + 1).join("0")
+      : i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i)
+      : "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y!
+}
+
+function formatRounded(x, p) {
+  var d = formatDecimalParts(x, p);
+  if (!d) return x + "";
+  var coefficient = d[0],
+      exponent = d[1];
+  return exponent < 0 ? "0." + new Array(-exponent).join("0") + coefficient
+      : coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + "." + coefficient.slice(exponent + 1)
+      : coefficient + new Array(exponent - coefficient.length + 2).join("0");
+}
+
+var formatTypes = {
+  "%": (x, p) => (x * 100).toFixed(p),
+  "b": (x) => Math.round(x).toString(2),
+  "c": (x) => x + "",
+  "d": formatDecimal,
+  "e": (x, p) => x.toExponential(p),
+  "f": (x, p) => x.toFixed(p),
+  "g": (x, p) => x.toPrecision(p),
+  "o": (x) => Math.round(x).toString(8),
+  "p": (x, p) => formatRounded(x * 100, p),
+  "r": formatRounded,
+  "s": formatPrefixAuto,
+  "X": (x) => Math.round(x).toString(16).toUpperCase(),
+  "x": (x) => Math.round(x).toString(16)
+};
+
+function identity(x) {
+  return x;
+}
+
+var map = Array.prototype.map,
+    prefixes = ["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];
+
+function formatLocale(locale) {
+  var group = locale.grouping === undefined || locale.thousands === undefined ? identity : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
+      currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "",
+      currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "",
+      decimal = locale.decimal === undefined ? "." : locale.decimal + "",
+      numerals = locale.numerals === undefined ? identity : formatNumerals(map.call(locale.numerals, String)),
+      percent = locale.percent === undefined ? "%" : locale.percent + "",
+      minus = locale.minus === undefined ? "−" : locale.minus + "",
+      nan = locale.nan === undefined ? "NaN" : locale.nan + "";
+
+  function newFormat(specifier) {
+    specifier = formatSpecifier(specifier);
+
+    var fill = specifier.fill,
+        align = specifier.align,
+        sign = specifier.sign,
+        symbol = specifier.symbol,
+        zero = specifier.zero,
+        width = specifier.width,
+        comma = specifier.comma,
+        precision = specifier.precision,
+        trim = specifier.trim,
+        type = specifier.type;
+
+    // The "n" type is an alias for ",g".
+    if (type === "n") comma = true, type = "g";
+
+    // The "" type, and any invalid type, is an alias for ".12~g".
+    else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = "g";
+
+    // If zero fill is specified, padding goes after sign and before digits.
+    if (zero || (fill === "0" && align === "=")) zero = true, fill = "0", align = "=";
+
+    // Compute the prefix and suffix.
+    // For SI-prefix, the suffix is lazily computed.
+    var prefix = symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : "",
+        suffix = symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "";
+
+    // What format function should we use?
+    // Is this an integer type?
+    // Can this type generate exponential notation?
+    var formatType = formatTypes[type],
+        maybeSuffix = /[defgprs%]/.test(type);
+
+    // Set the default precision if not specified,
+    // or clamp the specified precision to the supported range.
+    // For significant precision, it must be in [1, 21].
+    // For fixed precision, it must be in [0, 20].
+    precision = precision === undefined ? 6
+        : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision))
+        : Math.max(0, Math.min(20, precision));
+
+    function format(value) {
+      var valuePrefix = prefix,
+          valueSuffix = suffix,
+          i, n, c;
+
+      if (type === "c") {
+        valueSuffix = formatType(value) + valueSuffix;
+        value = "";
+      } else {
+        value = +value;
+
+        // Determine the sign. -0 is not less than 0, but 1 / -0 is!
+        var valueNegative = value < 0 || 1 / value < 0;
+
+        // Perform the initial formatting.
+        value = isNaN(value) ? nan : formatType(Math.abs(value), precision);
+
+        // Trim insignificant zeros.
+        if (trim) value = formatTrim(value);
+
+        // If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign.
+        if (valueNegative && +value === 0 && sign !== "+") valueNegative = false;
+
+        // Compute the prefix and suffix.
+        valuePrefix = (valueNegative ? (sign === "(" ? sign : minus) : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
+        valueSuffix = (type === "s" ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
+
+        // Break the formatted value into the integer “value” part that can be
+        // grouped, and fractional or exponential “suffix” part that is not.
+        if (maybeSuffix) {
+          i = -1, n = value.length;
+          while (++i < n) {
+            if (c = value.charCodeAt(i), 48 > c || c > 57) {
+              valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;
+              value = value.slice(0, i);
+              break;
+            }
+          }
+        }
+      }
+
+      // If the fill character is not "0", grouping is applied before padding.
+      if (comma && !zero) value = group(value, Infinity);
+
+      // Compute the padding.
+      var length = valuePrefix.length + value.length + valueSuffix.length,
+          padding = length < width ? new Array(width - length + 1).join(fill) : "";
+
+      // If the fill character is "0", grouping is applied after padding.
+      if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = "";
+
+      // Reconstruct the final output based on the desired alignment.
+      switch (align) {
+        case "<": value = valuePrefix + value + valueSuffix + padding; break;
+        case "=": value = valuePrefix + padding + value + valueSuffix; break;
+        case "^": value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); break;
+        default: value = padding + valuePrefix + value + valueSuffix; break;
+      }
+
+      return numerals(value);
+    }
+
+    format.toString = function() {
+      return specifier + "";
+    };
+
+    return format;
+  }
+
+  function formatPrefix(specifier, value) {
+    var f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier)),
+        e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
+        k = Math.pow(10, -e),
+        prefix = prefixes[8 + e / 3];
+    return function(value) {
+      return f(k * value) + prefix;
+    };
+  }
+
+  return {
+    format: newFormat,
+    formatPrefix: formatPrefix
+  };
+}
+
+var locale;
+var format;
+
+defaultLocale({
+  thousands: ",",
+  grouping: [3],
+  currency: ["$", ""]
+});
+
+function defaultLocale(definition) {
+  locale = formatLocale(definition);
+  format = locale.format;
+  locale.formatPrefix;
+  return locale;
+}
+
 // Utility functions for our components
 var ONEAVGMONTH = 2629800000; // Average month length in ms, copied from plotly constants in plotly.js/src/constants/numerical.js
 // Type guard to check if array contains only numbers
@@ -6052,11 +6365,17 @@ var Loading = function () {
 var Plot$2 = lazy(function () { return import('react-plotly.js'); });
 var HistogramPlot = function (props) {
     var _a, _b, _c, _d;
-    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _e = props.barColor, barColor = _e === void 0 ? 'rgb(72, 72, 74)' : _e, _f = props.unselectedBarColor, unselectedBarColor = _f === void 0 ? 'rgba(203, 195, 195, 0.88)' : _f, _g = props.selectorsColor, selectorsColor = _g === void 0 ? 'black' : _g, containerStyleOverrides = props.containerStyleOverrides, _h = props.unselectedData, unselectedData = _h === void 0 ? [] : _h, _j = props.handleClickOrSelection, handleClickOrSelection = _j === void 0 ? function () { } : _j, _k = props.onDeselect, onDeselect = _k === void 0 ? function () { } : _k, plotId = props.plotId, _l = props.selectByBin, selectByBin = _l === void 0 ? false : _l, dateTickFormat = props.dateTickFormat, binSizeOverride = props.binSizeOverride, _m = props.statsAnnotations, statsAnnotations = _m === void 0 ? ['mean'] : _m;
+    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _e = props.barColor, barColor = _e === void 0 ? "rgb(72, 72, 74)" : _e, _f = props.unselectedBarColor, unselectedBarColor = _f === void 0 ? "rgba(203, 195, 195, 0.88)" : _f, _g = props.selectorsColor, selectorsColor = _g === void 0 ? "black" : _g, containerStyleOverrides = props.containerStyleOverrides, _h = props.unselectedData, unselectedData = _h === void 0 ? [] : _h, _j = props.handleClickOrSelection, handleClickOrSelection = _j === void 0 ? function () { } : _j, _k = props.onDeselect, onDeselect = _k === void 0 ? function () { } : _k, plotId = props.plotId, _l = props.selectByBin, selectByBin = _l === void 0 ? false : _l, dateTickFormat = props.dateTickFormat, binSizeOverride = props.binSizeOverride, _m = props.statsAnnotations, statsAnnotations = _m === void 0 ? ["mean"] : _m, _o = props.emptySelectedRange, emptySelectedRange = _o === void 0 ? false : _o, _p = props.d3FormatValueString, d3FormatValueString = _p === void 0 ? ".1f" : _p;
     // Ref for plot container
     var containerRef = useRef(null);
     // Track any selections made in this plot so we can style the selection box.
-    var _o = useState(null), selectedRange = _o[0], setSelectedRange = _o[1];
+    var _q = useState(null), selectedRange = _q[0], setSelectedRange = _q[1];
+    // If the parent component wants to clear the selection, reset selectedRange to null.
+    useEffect(function () {
+        if (emptySelectedRange) {
+            setSelectedRange(null);
+        }
+    }, [emptySelectedRange]);
     // Combine all data into one for later calculations
     var allData = __spreadArray(__spreadArray([], data, true), unselectedData, true);
     // If all the data becomes selected, we should forget any old selections.
@@ -6066,13 +6385,15 @@ var HistogramPlot = function (props) {
         }
     }, [unselectedData]);
     // Set the bins based on the entire data set.
-    var nBins = (data.length + unselectedData.length) >= 10 ? Math.ceil(Math.sqrt(data.length + unselectedData.length)) : 0;
+    var nBins = data.length + unselectedData.length >= 10
+        ? Math.ceil(Math.sqrt(data.length + unselectedData.length))
+        : 0;
     // Plotly determines "nice" bins which consequently means it internally decides the axis range. We need
     // to access that information once the plot has been initialized so that we can prevent the
     // axis range from changing during interaction. Dates use strings.
-    var _p = useState(undefined), fixedXAxisRange = _p[0], setFixedXAxisRange = _p[1];
+    var _r = useState(undefined), fixedXAxisRange = _r[0], setFixedXAxisRange = _r[1];
     // track xbins too
-    var _q = useState(undefined), binSize = _q[0], setBinSize = _q[1];
+    var _s = useState(undefined), binSize = _s[0], setBinSize = _s[1];
     // Once the plot is drawn, record the initial axis range so we can keep it fixed.
     // figure should be Readonly<Plotly.Figure> but react-plotly.js doesn't expose that type, so we use any.
     var handlePlotUpdate = function (figure, graphDiv) {
@@ -6090,7 +6411,11 @@ var HistogramPlot = function (props) {
         }
         if (!binSize) {
             // Get the bin size from the first trace. Both traces should have the same bin size.
-            if (figure && figure.data && figure.data.length > 0 && figure.data[0].xbins && figure.data[0].xbins.size) {
+            if (figure &&
+                figure.data &&
+                figure.data.length > 0 &&
+                figure.data[0].xbins &&
+                figure.data[0].xbins.size) {
                 setBinSize(figure.data[0].xbins.size);
             }
         }
@@ -6100,22 +6425,22 @@ var HistogramPlot = function (props) {
     // Add keyboard event listeners to track shift key
     useEffect(function () {
         var handleKeyDown = function (e) {
-            if (e.key === 'Shift') {
+            if (e.key === "Shift") {
                 isShiftPressed.current = true;
             }
         };
         var handleKeyUp = function (e) {
-            if (e.key === 'Shift') {
+            if (e.key === "Shift") {
                 isShiftPressed.current = false;
             }
         };
         // Add event listeners to document to catch shift key globally
-        document.addEventListener('keydown', handleKeyDown);
-        document.addEventListener('keyup', handleKeyUp);
+        document.addEventListener("keydown", handleKeyDown);
+        document.addEventListener("keyup", handleKeyUp);
         // Cleanup
         return function () {
-            document.removeEventListener('keydown', handleKeyDown);
-            document.removeEventListener('keyup', handleKeyUp);
+            document.removeEventListener("keydown", handleKeyDown);
+            document.removeEventListener("keyup", handleKeyUp);
         };
     }, []);
     // Create handler for click event that can use event data to update the plot if desired.
@@ -6125,11 +6450,12 @@ var HistogramPlot = function (props) {
             return;
         }
         // Use the bin number to determine which bar was clicked and determine the range of the clicked bar.
-        if ("binNumber" in event.points[0] && typeof event.points[0].binNumber === 'number') {
+        if ("binNumber" in event.points[0] &&
+            typeof event.points[0].binNumber === "number") {
             // Get the index of the clicked bar with respect to the trace. So if
             // my trace has only one bar (0, 1] but another trace has bars (-1, 0], (0, 1], (1, 2], etc.
             // then when I click on (0, 1] in my trace the index will be 0, even thought it would be
-            // the second bar in the other trace. Because of this, we can't use data.xbins to 
+            // the second bar in the other trace. Because of this, we can't use data.xbins to
             // find the clicked bar, because its start and end values are based on all traces, not just the clicked trace.
             var clickedBinIndex = event.points[0].binNumber;
             // Handle dates and numbers separately
@@ -6139,26 +6465,35 @@ var HistogramPlot = function (props) {
             var globalFirstBinStart = void 0;
             if (isDateArray(data)) {
                 // Date bins are represented as strings (sometimes). We'll need to convert whatever plotly gives us to timestamps.
-                globalFirstBinStart = fixedXAxisRange ? new Date(fixedXAxisRange[0]).getTime() : new Date(event.points[0].data.xbins.start).getTime();
-                minTraceValue = (event.points[0].curveNumber === 0) ? Math.min.apply(Math, data.map(function (d) { return d.getTime(); })) : Math.min.apply(Math, unselectedData.map(function (d) { return d.getTime(); }));
+                globalFirstBinStart = fixedXAxisRange
+                    ? new Date(fixedXAxisRange[0]).getTime()
+                    : new Date(event.points[0].data.xbins.start).getTime();
+                minTraceValue =
+                    event.points[0].curveNumber === 0
+                        ? Math.min.apply(Math, data.map(function (d) { return d.getTime(); })) : Math.min.apply(Math, unselectedData.map(function (d) { return d.getTime(); }));
             }
             else {
                 // Get the min value of the trace and the beginning of the first bin (globally)
-                minTraceValue = (event.points[0].curveNumber === 0) ? Math.min.apply(Math, data) : Math.min.apply(Math, unselectedData);
-                globalFirstBinStart = fixedXAxisRange ? fixedXAxisRange[0] : event.points[0].data.xbins.start;
+                minTraceValue =
+                    event.points[0].curveNumber === 0
+                        ? Math.min.apply(Math, data) : Math.min.apply(Math, unselectedData);
+                globalFirstBinStart = fixedXAxisRange
+                    ? fixedXAxisRange[0]
+                    : event.points[0].data.xbins.start;
             }
             // Finally, we need to calculate the min and max values of the clicked bin.
             // If the bin size is a month or more, plotly records it in their "mstring" format like "M3" for 3 months.
             // We then must convert it back to milliseconds. Otherwise, it's always ms.
             var size = binSize !== null && binSize !== void 0 ? binSize : (_d = (_c = (_b = (_a = event.points) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.xbins) === null || _d === void 0 ? void 0 : _d.size;
-            var convertedBinSize = typeof size === 'string'
+            var convertedBinSize = typeof size === "string"
                 ? plotlyMToMilliseconds(size)
                 : size;
             // This minTraceValue is in the 0th bin of this trace. Find the index of this bin in the whole plot.
-            var clickedBinGlobalIndex = clickedBinIndex + Math.floor((minTraceValue - globalFirstBinStart) / convertedBinSize);
+            var clickedBinGlobalIndex = clickedBinIndex +
+                Math.floor((minTraceValue - globalFirstBinStart) / convertedBinSize);
             var _e = [
                 globalFirstBinStart + clickedBinGlobalIndex * convertedBinSize,
-                globalFirstBinStart + (clickedBinGlobalIndex + 1) * convertedBinSize
+                globalFirstBinStart + (clickedBinGlobalIndex + 1) * convertedBinSize,
             ], minBinValue = _e[0], maxBinValue = _e[1];
             if (isDateArray(data)) {
                 var minDate = new Date(minBinValue);
@@ -6191,7 +6526,8 @@ var HistogramPlot = function (props) {
         }
         var minValue;
         var maxValue;
-        if (typeof event.range.x[0] === 'string' && typeof event.range.x[1] === 'string') {
+        if (typeof event.range.x[0] === "string" &&
+            typeof event.range.x[1] === "string") {
             // Then we are must be dealing with dates
             if (selectByBin) {
                 // Set selected range to include the whole bin if at least half the bin is within the explicit range
@@ -6202,7 +6538,7 @@ var HistogramPlot = function (props) {
                     var lastBinMidPoint = new Date(event.points[event.points.length - 1].x).getTime();
                     // If the bin size is a month or more, plotly records it in their "mstring" format like "M3" for 3 months.
                     // We then must convert it back to milliseconds. Otherwise, it's always ms.
-                    var convertedBinSize = typeof binSize === 'string'
+                    var convertedBinSize = typeof binSize === "string"
                         ? plotlyMToMilliseconds(binSize)
                         : binSize;
                     minValue = new Date(firstBinMidPoint - convertedBinSize / 2);
@@ -6249,7 +6585,7 @@ var HistogramPlot = function (props) {
         }
         if (minValue !== undefined && maxValue !== undefined) {
             // Update selected range. Have to be strict about types.
-            if (typeof minValue === 'number' && typeof maxValue === 'number') {
+            if (typeof minValue === "number" && typeof maxValue === "number") {
                 var newMinMax = [minValue, maxValue];
                 if (isShiftPressed.current && selectedRange) {
                     setSelectedRange(__spreadArray(__spreadArray([], selectedRange, true), [newMinMax], false));
@@ -6277,128 +6613,146 @@ var HistogramPlot = function (props) {
         if (unselectedData.length === 0)
             return []; // Don't show the box if the entire dataset is selected.
         // Create a multiply-like effect by using a semi-transparent dark overlay
-        var multiplyColor = 'rgba(29, 104, 185, 0.1)';
+        var multiplyColor = "rgba(29, 104, 185, 0.1)";
         return selectedRange.map(function (maxMin) { return ({
-            type: 'rect',
+            type: "rect",
             x0: isDateArray(maxMin) ? maxMin[0].getTime() : maxMin[0],
             x1: isDateArray(maxMin) ? maxMin[1].getTime() : maxMin[1],
             y0: 0,
             y1: 1,
-            yref: 'paper',
+            yref: "paper",
             fillcolor: multiplyColor,
             line: {
                 width: 1,
-                color: multiplyColor
+                color: multiplyColor,
             },
-            layer: 'above' // Ensure the selection box is above the bars
+            layer: "above", // Ensure the selection box is above the bars
         }); });
     }, [selectedRange, unselectedData]);
     // Calculate the mean of the selected data using normalized data
     var meanValue = (_a = calculateMean(data)) !== null && _a !== void 0 ? _a : 0; // Default to 0 if no data
     var stdevValue = (_b = calculateStandardDeviation(data)) !== null && _b !== void 0 ? _b : 0;
     var meanLineRadius = 0.01; // distance from the top of the y axis to the top/bottom end of the mean line
-    var meanLine = (statsAnnotations.includes('mean') && data.length > 0) ? [{
-            type: 'line',
-            x0: meanValue,
-            y0: 1 - meanLineRadius,
-            x1: meanValue,
-            yref: 'paper',
-            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
-            line: {
-                color: barColor,
-                width: 1.5,
-            }
-        }] : [];
+    var meanLine = statsAnnotations.includes("mean") && data.length > 0
+        ? [
+            {
+                type: "line",
+                x0: meanValue,
+                y0: 1 - meanLineRadius,
+                x1: meanValue,
+                yref: "paper",
+                y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+                line: {
+                    color: barColor,
+                    width: 1.5,
+                },
+            },
+        ]
+        : [];
     // Draw mean line for all data
     var allDataMeanValue = (_c = calculateMean(allData)) !== null && _c !== void 0 ? _c : 0;
-    var allDataMeanLine = (statsAnnotations.includes('mean') && unselectedData.length > 0 && data.length > 0) ? [{
-            type: 'line',
-            x0: allDataMeanValue,
-            y0: 1 - meanLineRadius,
-            x1: allDataMeanValue,
-            yref: 'paper',
-            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
-            line: {
-                color: unselectedBarColor,
-                width: 1.5,
-            }
-        }] : [];
-    var stdevLines = (statsAnnotations.includes('stdev') && data.length > 0) ? [{
-            type: 'line',
-            x0: meanValue - stdevValue,
-            y0: 1 - meanLineRadius,
-            x1: meanValue - stdevValue,
-            yref: 'paper',
-            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
-            line: {
-                color: barColor,
-                width: 1.5,
-                dash: 'dot',
-            }
-        },
-        {
-            type: 'line',
-            x0: meanValue + stdevValue,
-            y0: 1 - meanLineRadius,
-            x1: meanValue + stdevValue,
-            yref: 'paper',
-            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
-            line: {
-                color: barColor,
-                width: 1.5,
-                dash: 'dot',
-            }
-        }]
+    var allDataMeanLine = statsAnnotations.includes("mean") &&
+        unselectedData.length > 0 &&
+        data.length > 0
+        ? [
+            {
+                type: "line",
+                x0: allDataMeanValue,
+                y0: 1 - meanLineRadius,
+                x1: allDataMeanValue,
+                yref: "paper",
+                y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+                line: {
+                    color: unselectedBarColor,
+                    width: 1.5,
+                },
+            },
+        ]
+        : [];
+    var stdevLines = statsAnnotations.includes("stdev") && data.length > 0
+        ? [
+            {
+                type: "line",
+                x0: meanValue - stdevValue,
+                y0: 1 - meanLineRadius,
+                x1: meanValue - stdevValue,
+                yref: "paper",
+                y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+                line: {
+                    color: barColor,
+                    width: 1.5,
+                    dash: "dot",
+                },
+            },
+            {
+                type: "line",
+                x0: meanValue + stdevValue,
+                y0: 1 - meanLineRadius,
+                x1: meanValue + stdevValue,
+                yref: "paper",
+                y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+                line: {
+                    color: barColor,
+                    width: 1.5,
+                    dash: "dot",
+                },
+            },
+        ]
         : [];
     var allDataStdevValue = (_d = calculateStandardDeviation(allData)) !== null && _d !== void 0 ? _d : 0;
-    var allDataStdevLines = (statsAnnotations.includes('stdev') && unselectedData.length > 0 && data.length > 0) ? [{
-            type: 'line',
-            x0: allDataMeanValue - allDataStdevValue,
-            y0: 1 - meanLineRadius,
-            x1: allDataMeanValue - allDataStdevValue,
-            yref: 'paper',
-            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
-            line: {
-                color: unselectedBarColor,
-                width: 1.5,
-                dash: 'dot',
-            }
-        },
-        {
-            type: 'line',
-            x0: allDataMeanValue + allDataStdevValue,
-            y0: 1 - meanLineRadius,
-            x1: allDataMeanValue + allDataStdevValue,
-            yref: 'paper',
-            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
-            line: {
-                color: unselectedBarColor,
-                width: 1.5,
-                dash: 'dot',
-            }
-        }]
+    var allDataStdevLines = statsAnnotations.includes("stdev") &&
+        unselectedData.length > 0 &&
+        data.length > 0
+        ? [
+            {
+                type: "line",
+                x0: allDataMeanValue - allDataStdevValue,
+                y0: 1 - meanLineRadius,
+                x1: allDataMeanValue - allDataStdevValue,
+                yref: "paper",
+                y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+                line: {
+                    color: unselectedBarColor,
+                    width: 1.5,
+                    dash: "dot",
+                },
+            },
+            {
+                type: "line",
+                x0: allDataMeanValue + allDataStdevValue,
+                y0: 1 - meanLineRadius,
+                x1: allDataMeanValue + allDataStdevValue,
+                yref: "paper",
+                y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+                line: {
+                    color: unselectedBarColor,
+                    width: 1.5,
+                    dash: "dot",
+                },
+            },
+        ]
         : [];
-    // If binSizeOverride is provided, use it to set the bin size and range explicitly. 
+    // If binSizeOverride is provided, use it to set the bin size and range explicitly.
     // Plotly does a better job of setting bins and ending them at nice numbers, so only use
     // this prop when necessary.
-    var xBins = (binSizeOverride && allData.length > 0)
-        ? (isDateArray(allData)
+    var xBins = binSizeOverride && allData.length > 0
+        ? isDateArray(allData)
             ? {
                 start: roundToPrevDay(Math.min.apply(Math, allData.map(function (d) { return d.getTime(); }))), // Find a nice round number as a starting point.
                 end: roundToNextDay(Math.max.apply(Math, allData.map(function (d) { return d.getTime(); }))),
-                size: binSizeOverride // bin size in milliseconds
+                size: binSizeOverride, // bin size in milliseconds
             }
             : isNumberArray(allData)
                 ? {
                     start: Math.floor(Math.min.apply(Math, allData)),
                     end: Math.ceil(Math.max.apply(Math, allData)),
-                    size: binSizeOverride
+                    size: binSizeOverride,
                 }
-                : undefined)
+                : undefined
         : undefined;
     var unselectedTrace = {
         x: unselectedData,
-        type: 'histogram',
+        type: "histogram",
         autobinx: false,
         xbins: xBins,
         // nbinsx is valid but not included in the type definition
@@ -6411,59 +6765,73 @@ var HistogramPlot = function (props) {
                 width: 0.5,
             },
         },
-        hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>',
+        hovertemplate: "[%{x})<br>Count: %{y}<extra></extra>",
     };
-    var meanAnnotation = (statsAnnotations.includes('mean') && meanLine && data.length > 0) ? [{
-            x: meanValue,
-            y: 1 + meanLineRadius + 0.04, // Position above the mean line. Value set with respect to the paper coordinates.
-            yref: 'paper',
-            text: "<span style=\"font-weight:300\">AVG </span><span style=\"font-weight:600\">".concat(isDateArray(data) ? new Date(meanValue).toLocaleDateString('en-US', {
-                month: '2-digit',
-                day: '2-digit',
-                year: '2-digit'
-            }) : meanValue.toFixed(2), "</span>"),
-            xanchor: 'center',
-            yanchor: 'bottom',
-            showarrow: false,
-            font: {
-                color: barColor,
-                size: 12,
+    var meanAnnotation = statsAnnotations.includes("mean") && meanLine && data.length > 0
+        ? [
+            {
+                x: meanValue,
+                y: 1 + meanLineRadius + 0.04, // Position above the mean line. Value set with respect to the paper coordinates.
+                yref: "paper",
+                text: "<span style=\"font-weight:300\">AVG </span><span style=\"font-weight:600\">".concat(isDateArray(data)
+                    ? new Date(meanValue).toLocaleDateString("en-US", {
+                        month: "2-digit",
+                        day: "2-digit",
+                        year: "2-digit",
+                    })
+                    : format(d3FormatValueString)(meanValue), "</span>"),
+                xanchor: "center",
+                yanchor: "bottom",
+                showarrow: false,
+                font: {
+                    color: barColor,
+                    size: 12,
+                },
             },
-        }] : [];
-    var stdevAnnotation = (statsAnnotations.includes('stdev') && stdevLines && data.length > 0) ? [{
-            x: meanValue, // Draw above the mean annotation
-            y: 1 + meanLineRadius + (statsAnnotations.includes('mean') ? 0.11 : 0.04),
-            yref: 'paper',
-            text: "<span style=\"font-weight:300\">\u03C3 </span><span style=\"font-weight:600\">&plusmn;".concat(isDateArray(data) ? new Date(stdevValue).toLocaleDateString('en-US', {
-                month: '2-digit',
-                day: '2-digit',
-                year: '2-digit'
-            }) : stdevValue.toFixed(2), "</span>"),
-            xanchor: 'center',
-            yanchor: 'bottom',
-            showarrow: false,
-            font: {
-                color: barColor,
-                size: 12,
+        ]
+        : [];
+    var stdevAnnotation = statsAnnotations.includes("stdev") && stdevLines && data.length > 0
+        ? [
+            {
+                x: meanValue, // Draw above the mean annotation
+                y: 1 +
+                    meanLineRadius +
+                    (statsAnnotations.includes("mean") ? 0.11 : 0.04),
+                yref: "paper",
+                text: "<span style=\"font-weight:300\">\u03C3 </span><span style=\"font-weight:600\">&plusmn;".concat(isDateArray(data)
+                    ? new Date(stdevValue).toLocaleDateString("en-US", {
+                        month: "2-digit",
+                        day: "2-digit",
+                        year: "2-digit",
+                    })
+                    : format(d3FormatValueString)(stdevValue), "</span>"),
+                xanchor: "center",
+                yanchor: "bottom",
+                showarrow: false,
+                font: {
+                    color: barColor,
+                    size: 12,
+                },
             },
-        }] : [];
+        ]
+        : [];
     var plotlyData = [
         {
             x: data,
-            type: 'histogram',
+            type: "histogram",
             autobinx: false,
             xbins: xBins,
             // nbinsx is valid but not included in the type definition
             //@ts-ignore
             nbinsx: nBins, // Maximum number of bins. Plotly may adjust to make bins "nicer".
             marker: {
-                color: barColor !== null && barColor !== void 0 ? barColor : 'blue',
+                color: barColor !== null && barColor !== void 0 ? barColor : "blue",
                 line: {
                     color: "white",
                     width: 0.5,
                 },
             },
-            hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text
+            hovertemplate: "[%{x})<br>Count: %{y}<extra></extra>", // Custom hover text
         },
         unselectedTrace,
     ];
@@ -6471,63 +6839,63 @@ var HistogramPlot = function (props) {
         title: {
             text: title,
         },
-        barmode: 'stack', // Stack unselected bars on top of selected bars
+        barmode: "stack", // Stack unselected bars on top of selected bars
         showlegend: false,
         autosize: true,
         width: undefined, // Let autosize handle width
         height: undefined, // Let autosize handle height
         margin: {
             l: 50,
-            r: 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.  
+            r: 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.
             t: 40 + (title ? 50 : 0), // Add extra top margin if there is a title
             b: 50,
-            pad: 4
+            pad: 4,
         },
         xaxis: {
             title: {
-                text: xAxisTitle
+                text: xAxisTitle,
             },
             range: fixedXAxisRange, // Fixed range prevents axis shifting during interaction or data updates
             showgrid: true,
             zeroline: false,
             showline: true,
-            mirror: 'ticks',
-            gridcolor: '#efefef',
+            mirror: "ticks",
+            gridcolor: "#efefef",
             gridwidth: 0.2,
-            zerolinecolor: '#969696',
+            zerolinecolor: "#969696",
             zerolinewidth: 1,
-            linecolor: '#bababa',
+            linecolor: "#bababa",
             linewidth: 1,
             fixedrange: true, // Disable zooming
-            ticklabelposition: 'outside',
-            tickformat: isDateArray(data) ? dateTickFormat : undefined, // Format ticks for dates
+            ticklabelposition: "outside",
+            tickformat: isDateArray(data) ? dateTickFormat : d3FormatValueString, // Format ticks for dates
             automargin: true, // Adjust margin if tick labels rotate
-            hoverformat: (isNumberArray(allData) && Math.max.apply(Math, allData) - Math.min.apply(Math, allData) > 3) ? '.1~f' : undefined,
+            hoverformat: isNumberArray(allData) ? d3FormatValueString : undefined,
         },
         yaxis: {
             title: {
-                text: 'Count',
+                text: "Count",
                 standoff: 12, // Add space between title and axis
             },
             automargin: true, // Required for standoff to work properly
             showgrid: true,
             zeroline: false,
             showline: true,
-            mirror: 'ticks',
-            gridcolor: '#efefef',
+            mirror: "ticks",
+            gridcolor: "#efefef",
             gridwidth: 0.2,
-            zerolinecolor: '#969696',
+            zerolinecolor: "#969696",
             zerolinewidth: 1,
-            linecolor: '#bababa',
+            linecolor: "#bababa",
             linewidth: 1,
             fixedrange: true, // Disable zooming
-            ticksuffix: ' ', // Add space between y axis and ticks
+            ticksuffix: " ", // Add space between y axis and ticks
         },
         bargap: 0.03, // Gap between bars
-        dragmode: 'select', // Enable drag to select
-        selectdirection: 'h', // User can select in horizontal direction only
+        dragmode: "select", // Enable drag to select
+        selectdirection: "h", // User can select in horizontal direction only
         shapes: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], allDataMeanLine, true), meanLine, true), selectedRangeBox, true), stdevLines, true), allDataStdevLines, true), // Add the mean line and selection box
-        annotations: __spreadArray(__spreadArray([], meanAnnotation, true), stdevAnnotation, true)
+        annotations: __spreadArray(__spreadArray([], meanAnnotation, true), stdevAnnotation, true),
     };
     var config = {
         responsive: true, // Make the plot responsive
@@ -6537,14 +6905,14 @@ var HistogramPlot = function (props) {
         staticPlot: false, // Enable interactivity
     };
     var containerStyles = __assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    return (jsx("div", { ref: containerRef, className: "plot-container ".concat(plotId), style: __assign({ '--selection-color': selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Fragment, { children: jsx(Plot$2, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: function () {
+    return (jsx("div", { ref: containerRef, className: "plot-container ".concat(plotId), style: __assign({ "--selection-color": selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Fragment, { children: jsx(Plot$2, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: function () {
                         onDeselect();
                         setSelectedRange(null); // Remove selected box
                     }, onUpdate: handlePlotUpdate, useResizeHandler: true, style: {
                         width: "100%",
                         height: "100%",
-                        display: "block"
-                    } }, "histogram-".concat(plotId || 'default')) }) }) }));
+                        display: "block",
+                    } }, "histogram-".concat(plotId || "default")) }) }) }));
 };
 
 var Plot$1 = lazy(function () { return import('react-plotly.js'); });