td-plots 1.5.0 → 1.5.2

package/dist/index.js

@@ -57,6 +57,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); });
@@ -109,6 +110,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;
@@ -1412,8 +1451,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"),
@@ -1583,8 +1622,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"),
@@ -2780,7 +2819,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
@@ -5079,7 +5118,7 @@ function createColorScheme(options) {
     opacity,
     overlays,
     colorSpace,
-    ...rest
+    ...other
   } = options;
   // need to cast because `colorSpace` is considered internal at the moment.
   const palette = createPalette({
@@ -5093,7 +5132,7 @@ function createColorScheme(options) {
       ...opacity
     },
     overlays: overlays || getOverlays(palette.mode),
-    ...rest
+    ...other
   };
 }
 
@@ -5603,7 +5642,7 @@ function createTheme(options = {},
       light: true
     } : undefined,
     defaultColorScheme: initialDefaultColorScheme = palette?.mode,
-    ...rest
+    ...other
   } = options;
   const defaultColorSchemeInput = initialDefaultColorScheme || 'light';
   const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
@@ -5660,7 +5699,7 @@ function createTheme(options = {},
     colorSchemesInput.light = true;
   }
   return createThemeWithVars({
-    ...rest,
+    ...other,
     colorSchemes: colorSchemesInput,
     defaultColorScheme: defaultColorSchemeInput,
     ...(typeof cssVariables !== 'boolean' && cssVariables)
@@ -5749,7 +5788,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 = react.keyframes`
@@ -5797,6 +5836,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);
@@ -5882,6 +5922,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
@@ -5899,6 +5948,7 @@ const CircularProgress = /*#__PURE__*/React__namespace.forwardRef(function Circu
     className,
     color = 'primary',
     disableShrink = false,
+    enableTrackSlot = false,
     size = 40,
     style,
     thickness = 3.6,
@@ -5913,7 +5963,8 @@ const CircularProgress = /*#__PURE__*/React__namespace.forwardRef(function Circu
     size,
     thickness,
     value,
-    variant
+    variant,
+    enableTrackSlot
   };
   const classes = useUtilityClasses(ownerState);
   const circleStyle = {};
@@ -5939,11 +5990,20 @@ const CircularProgress = /*#__PURE__*/React__namespace.forwardRef(function Circu
     role: "progressbar",
     ...rootProps,
     ...other,
-    children: /*#__PURE__*/jsxRuntime.jsx(CircularProgressSVG, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(CircularProgressSVG, {
       className: classes.svg,
       ownerState: ownerState,
       viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: /*#__PURE__*/jsxRuntime.jsx(CircularProgressCircle, {
+      children: [enableTrackSlot ? /*#__PURE__*/jsxRuntime.jsx(CircularProgressTrack, {
+        className: classes.track,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness,
+        "aria-hidden": "true"
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(CircularProgressCircle, {
         className: classes.circle,
         style: circleStyle,
         ownerState: ownerState,
@@ -5952,7 +6012,7 @@ const CircularProgress = /*#__PURE__*/React__namespace.forwardRef(function Circu
         r: (SIZE - thickness) / 2,
         fill: "none",
         strokeWidth: thickness
-      })
+      })]
     })
   });
 });
@@ -5987,6 +6047,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.
@@ -6086,8 +6152,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 {
@@ -6100,10 +6166,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
@@ -6136,7 +6206,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);
                 }
@@ -6301,7 +6375,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.
@@ -6331,7 +6405,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,
@@ -6422,6 +6496,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: {