td-plots 1.3.1 → 1.4.0

package/dist/index.js

@@ -77,6 +77,18 @@ function calculateMean(arr) {
         return sum / arr.length;
     }
 }
+// Utilities for rounding dates to the nearest day.
+// Helpful for making nice bins
+var roundToNextDay = function (timestamp) {
+    var date = new Date(timestamp);
+    date.setHours(23, 59, 59, 999); // End of day
+    return date.toISOString();
+};
+var roundToPrevDay = function (timestamp) {
+    var date = new Date(timestamp);
+    date.setHours(0, 0, 0, 0); // Start of day
+    return date.toISOString();
+};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -5860,13 +5872,19 @@ var Loading = function () {
 var Plot$2 = React.lazy(function () { return import('react-plotly.js'); });
 var HistogramPlot = function (props) {
     var _a, _b;
-    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _c = props.barColor, barColor = _c === void 0 ? 'rgb(72, 72, 74)' : _c, _d = props.unselectedBarColor, unselectedBarColor = _d === void 0 ? 'rgba(203, 195, 195, 0.88)' : _d, _e = props.selectorsColor, selectorsColor = _e === void 0 ? 'black' : _e, _f = props.showMeanLines, showMeanLines = _f === void 0 ? true : _f, containerStyleOverrides = props.containerStyleOverrides, _g = props.unselectedData, unselectedData = _g === void 0 ? [] : _g, _h = props.handleClickOrSelection, handleClickOrSelection = _h === void 0 ? function () { } : _h, _j = props.onDeselect, onDeselect = _j === void 0 ? function () { } : _j, plotId = props.plotId, _k = props.selectByBin, selectByBin = _k === void 0 ? false : _k;
+    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _c = props.barColor, barColor = _c === void 0 ? 'rgb(72, 72, 74)' : _c, _d = props.unselectedBarColor, unselectedBarColor = _d === void 0 ? 'rgba(203, 195, 195, 0.88)' : _d, _e = props.selectorsColor, selectorsColor = _e === void 0 ? 'black' : _e, _f = props.showMeanLines, showMeanLines = _f === void 0 ? true : _f, containerStyleOverrides = props.containerStyleOverrides, _g = props.unselectedData, unselectedData = _g === void 0 ? [] : _g, _h = props.handleClickOrSelection, handleClickOrSelection = _h === void 0 ? function () { } : _h, _j = props.onDeselect, onDeselect = _j === void 0 ? function () { } : _j, plotId = props.plotId, _k = props.selectByBin, selectByBin = _k === void 0 ? false : _k, dateTickFormat = props.dateTickFormat, binSizeOverride = props.binSizeOverride;
     // Ref for plot container
     var containerRef = React.useRef(null);
     // Track any selections made in this plot so we can style the selection box.
     var _l = React.useState(null), selectedRange = _l[0], setSelectedRange = _l[1];
+    // If all the data becomes selected, we should forget any old selections.
+    React.useEffect(function () {
+        if (unselectedData.length === 0) {
+            setSelectedRange(null); // Clear selection box if all data is selected
+        }
+    }, [unselectedData]);
     // Set the bins based on the entire data set.
-    var nBins = Math.ceil(Math.sqrt(data.length + unselectedData.length));
+    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.
@@ -5883,10 +5901,7 @@ var HistogramPlot = function (props) {
                 if (range[0] === -1 && range[1] === 1) {
                     return;
                 }
-                var computedRange = typeof (range[0]) === 'string'
-                    ? [new Date(range[0]), new Date(range[1])]
-                    : [range[0], range[1]];
-                setFixedXAxisRange(computedRange);
+                setFixedXAxisRange(range);
             }
         }
     };
@@ -6040,10 +6055,59 @@ var HistogramPlot = function (props) {
                 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 meanLineRadius = 0.01; // distance from the top of the y axis to the top/bottom end of the mean line
+    var meanLine = (showMeanLines && 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 allData = tslib.__spreadArray(tslib.__spreadArray([], data, true), unselectedData, true);
+    var allDataMeanValue = (_b = calculateMean(allData)) !== null && _b !== void 0 ? _b : 0;
+    var allDataMeanLine = (showMeanLines && 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,
+            }
+        }] : [];
+    // 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
+        ? (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 * 86400000 // bin size in milliseconds
+            }
+            : isNumberArray(allData)
+                ? {
+                    start: Math.floor(Math.min.apply(Math, allData)),
+                    end: Math.ceil(Math.max.apply(Math, allData)),
+                    size: binSizeOverride
+                }
+                : undefined)
+        : undefined;
     var unselectedTrace = {
         x: unselectedData,
         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".
@@ -6061,6 +6125,7 @@ var HistogramPlot = function (props) {
             x: data,
             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".
@@ -6075,36 +6140,6 @@ var HistogramPlot = function (props) {
         },
         unselectedTrace,
     ];
-    // 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 meanLineRadius = 0.01; // distance from the top of the y axis to the top/bottom end of the mean line
-    var meanLine = (showMeanLines && 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 allData = tslib.__spreadArray(tslib.__spreadArray([], data, true), unselectedData, true);
-    var allDataMeanValue = (_b = calculateMean(allData)) !== null && _b !== void 0 ? _b : 0;
-    var allDataMeanLine = (showMeanLines && 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 layout = {
         title: {
             text: title,
@@ -6138,6 +6173,8 @@ var HistogramPlot = function (props) {
             linewidth: 1,
             fixedrange: true, // Disable zooming
             ticklabelposition: 'outside',
+            tickformat: isDateArray(data) ? dateTickFormat : undefined, // Format ticks for dates
+            automargin: true, // Adjust margin if tick labels rotate
         },
         yaxis: {
             title: {
@@ -6326,4 +6363,6 @@ var TestPlot = function (props) {
 exports.HistogramPlot = HistogramPlot;
 exports.RadialHistogramPlot = RadialHistogramPlot;
 exports.TestPlot = TestPlot;
+exports.isDateArray = isDateArray;
+exports.isNumberArray = isNumberArray;
 //# sourceMappingURL=index.js.map