td-plots 1.5.0 → 1.5.2

package/dist/components/Utils.d.ts

@@ -5,3 +5,5 @@ export declare function calculateStandardDeviation(arr: number[] | Date[]): numb
 export declare const formatDateMDY: (timestamp: number) => string;
 export declare const roundToNextDay: (timestamp: number) => string;
 export declare const roundToPrevDay: (timestamp: number) => string;
+export declare const plotlyMToMilliseconds: (mString: string) => number;
+export declare const convertDateDescriptionToTimestamp: (startValue: string | number) => number;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { __spreadArray, __assign } from 'tslib';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { lazy, useRef, useState, useEffect, useMemo, Suspense } from 'react';
 import emStyled from '@emotion/styled';
@@ -37,6 +37,7 @@ var css_248z = ".plot-container{height:100%;max-width:100%;min-height:300px;over
 styleInject(css_248z);
 
 // 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
 var isNumberArray = function (arr) {
     return arr.every(function (item) { return typeof item === 'number' && !isNaN(item); });
@@ -89,6 +90,44 @@ var roundToPrevDay = function (timestamp) {
     date.setHours(0, 0, 0, 0); // Start of day
     return date.toISOString();
 };
+// Convert plotly M# string to number of milliseconds
+// According to the docs, plotly will use M# whenever the bin size is
+// larger than one average month. Even if the bin size is 2 years, plotly 
+// will still use M24 instead of Y2 (plotly.js/src/plots/cartesian/axes.js).
+var plotlyMToMilliseconds = function (mString) {
+    var match = mString.match(/^M(\d+)$/);
+    if (match) {
+        var months = parseInt(match[1], 10);
+        return months * ONEAVGMONTH;
+    }
+    else {
+        console.error("plotlyMToMilliseconds: Invalid M# string: ".concat(mString));
+    }
+    return 0;
+};
+// Convert a string specifying a day (with no time) to a timestamp
+var convertDateDescriptionToTimestamp = function (startValue) {
+    if (typeof startValue === 'number') {
+        // Then we're assuming it's already a timestamp
+        return startValue;
+    }
+    if (typeof startValue === 'string') {
+        // Try to parse the date string.
+        var date = new Date(startValue);
+        // Sometimes the date will fail to be a proper Date if it does not
+        // have a time component. Add a time stamp if necessary.
+        if (isNaN(date.getTime())) {
+            // Then date did not have a time and is just a day. Try adding a time.
+            var dateWithTime = new Date(startValue + 'T00:00:00');
+            if (isNaN(dateWithTime.getTime())) {
+                throw new Error("Cannot parse date: ".concat(startValue));
+            }
+            return dateWithTime.getTime();
+        }
+        return date.getTime();
+    }
+    throw new Error("Unexpected type for start value: ".concat(typeof startValue));
+};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1392,8 +1431,8 @@ function requireReactIs_production () {
 	  REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
 	  REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	  REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	  REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	  REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
 	  REACT_CONTEXT_TYPE = Symbol.for("react.context"),
 	  REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
 	  REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
@@ -1563,8 +1602,8 @@ function requireReactIs_development () {
 	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
 	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
 	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
 	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
 	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
@@ -2760,7 +2799,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 
 /**
- * @mui/styled-engine v7.3.2
+ * @mui/styled-engine v7.3.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5059,7 +5098,7 @@ function createColorScheme(options) {
     opacity,
     overlays,
     colorSpace,
-    ...rest
+    ...other
   } = options;
   // need to cast because `colorSpace` is considered internal at the moment.
   const palette = createPalette({
@@ -5073,7 +5112,7 @@ function createColorScheme(options) {
       ...opacity
     },
     overlays: overlays || getOverlays(palette.mode),
-    ...rest
+    ...other
   };
 }
 
@@ -5583,7 +5622,7 @@ function createTheme(options = {},
       light: true
     } : undefined,
     defaultColorScheme: initialDefaultColorScheme = palette?.mode,
-    ...rest
+    ...other
   } = options;
   const defaultColorSchemeInput = initialDefaultColorScheme || 'light';
   const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
@@ -5640,7 +5679,7 @@ function createTheme(options = {},
     colorSchemesInput.light = true;
   }
   return createThemeWithVars({
-    ...rest,
+    ...other,
     colorSchemes: colorSchemesInput,
     defaultColorScheme: defaultColorSchemeInput,
     ...(typeof cssVariables !== 'boolean' && cssVariables)
@@ -5729,7 +5768,7 @@ function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
 function getCircularProgressUtilityClass(slot) {
   return generateUtilityClass('MuiCircularProgress', slot);
 }
-generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'track', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 
 const SIZE = 44;
 const circularRotateKeyframe = keyframes`
@@ -5777,6 +5816,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `color${capitalize(color)}`],
     svg: ['svg'],
+    track: ['track'],
     circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink']
   };
   return composeClasses(slots, getCircularProgressUtilityClass, classes);
@@ -5862,6 +5902,15 @@ const CircularProgressCircle = styled('circle', {
     }
   }]
 })));
+const CircularProgressTrack = styled('circle', {
+  name: 'MuiCircularProgress',
+  slot: 'Track'
+})(memoTheme(({
+  theme
+}) => ({
+  stroke: 'currentColor',
+  opacity: (theme.vars || theme).palette.action.activatedOpacity
+})));
 
 /**
  * ## ARIA
@@ -5879,6 +5928,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     className,
     color = 'primary',
     disableShrink = false,
+    enableTrackSlot = false,
     size = 40,
     style,
     thickness = 3.6,
@@ -5893,7 +5943,8 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     size,
     thickness,
     value,
-    variant
+    variant,
+    enableTrackSlot
   };
   const classes = useUtilityClasses(ownerState);
   const circleStyle = {};
@@ -5919,11 +5970,20 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     role: "progressbar",
     ...rootProps,
     ...other,
-    children: /*#__PURE__*/jsx(CircularProgressSVG, {
+    children: /*#__PURE__*/jsxs(CircularProgressSVG, {
       className: classes.svg,
       ownerState: ownerState,
       viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: /*#__PURE__*/jsx(CircularProgressCircle, {
+      children: [enableTrackSlot ? /*#__PURE__*/jsx(CircularProgressTrack, {
+        className: classes.track,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness,
+        "aria-hidden": "true"
+      }) : null, /*#__PURE__*/jsx(CircularProgressCircle, {
         className: classes.circle,
         style: circleStyle,
         ownerState: ownerState,
@@ -5932,7 +5992,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
         r: (SIZE - thickness) / 2,
         fill: "none",
         strokeWidth: thickness
-      })
+      })]
     })
   });
 });
@@ -5967,6 +6027,12 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
     }
     return null;
   }),
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot: PropTypes.bool,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -6066,8 +6132,8 @@ var HistogramPlot = function (props) {
             // This is the start of the first bin out of all the traces. The global first bin.
             var globalFirstBinStart = void 0;
             if (isDateArray(data)) {
-                // Date bins are represented as strings. We'll need to convert them to timestamps.
-                globalFirstBinStart = new Date(event.points[0].data.xbins.start).getTime();
+                // Date bins are represented as strings (sometimes). We'll need to convert whatever plotly gives us to timestamps.
+                globalFirstBinStart = convertDateDescriptionToTimestamp(event.points[0].data.xbins.start);
                 minTraceValue = Math.min.apply(Math, data.map(function (d) { return d.getTime(); }));
             }
             else {
@@ -6080,10 +6146,14 @@ var HistogramPlot = function (props) {
                 minTraceValue = Math.min.apply(Math, data);
                 globalFirstBinStart = 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 binSize = typeof event.points[0].data.xbins.size === 'string'
+                ? plotlyMToMilliseconds(event.points[0].data.xbins.size)
+                : event.points[0].data.xbins.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) / event.points[0].data.xbins.size);
-            // Finally we can calculate the min and max values of the clicked bin.
-            var binSize = event.points[0].data.xbins.size;
+            var clickedBinGlobalIndex = clickedBinIndex + Math.floor((minTraceValue - globalFirstBinStart) / binSize);
             var _a = [
                 globalFirstBinStart + clickedBinGlobalIndex * binSize,
                 globalFirstBinStart + (clickedBinGlobalIndex + 1) * binSize
@@ -6116,7 +6186,11 @@ var HistogramPlot = function (props) {
                     // Means at least one bin has been selected
                     var firstBinMidPoint = new Date(event.points[0].x).getTime();
                     var lastBinMidPoint = new Date(event.points[event.points.length - 1].x).getTime();
-                    var binSize = event.points[0].data.xbins.size;
+                    // 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 binSize = typeof event.points[0].data.xbins.size === 'string'
+                        ? plotlyMToMilliseconds(event.points[0].data.xbins.size)
+                        : event.points[0].data.xbins.size;
                     minValue = new Date(firstBinMidPoint - binSize / 2);
                     maxValue = new Date(lastBinMidPoint + binSize / 2);
                 }
@@ -6281,7 +6355,7 @@ var HistogramPlot = function (props) {
     // 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
+    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.
@@ -6311,7 +6385,7 @@ var HistogramPlot = function (props) {
                 width: 0.5,
             },
         },
-        hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text
+        hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>',
     };
     var meanAnnotation = (statsAnnotations.includes('mean') && meanLine && data.length > 0) ? [{
             x: meanValue,
@@ -6402,6 +6476,7 @@ var HistogramPlot = function (props) {
             ticklabelposition: 'outside',
             tickformat: isDateArray(data) ? dateTickFormat : undefined, // 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,
         },
         yaxis: {
             title: {