td-plots 1.5.1 → 1.5.3

package/dist/components/Histogram.d.ts

@@ -9,7 +9,7 @@ export type HistogramPlotProps = {
     barColor?: string;
     unselectedBarColor?: string;
     selectorsColor?: string;
-    handleClickOrSelection?: (minValue: number | Date, maxValue: number | Date) => void;
+    handleClickOrSelection?: (minValue: number | Date, maxValue: number | Date, shiftKeyPressed?: boolean) => void;
     containerStyleOverrides?: React.CSSProperties;
     onDeselect?: () => void;
     plotId?: string;

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

@@ -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,21 @@ 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;
+};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6041,6 +6057,8 @@ var HistogramPlot = function (props) {
     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];
+    // 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.
     useEffect(function () {
         if (unselectedData.length === 0) {
@@ -6053,6 +6071,8 @@ var HistogramPlot = function (props) {
     // 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];
+    // track xbins too
+    var _q = useState(undefined), binSize = _q[0], setBinSize = _q[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) {
@@ -6068,17 +6088,42 @@ var HistogramPlot = function (props) {
                 setFixedXAxisRange(range);
             }
         }
+        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) {
+                setBinSize(figure.data[0].xbins.size);
+            }
+        }
     };
+    // Track shift key state
+    var isShiftPressed = useRef(false);
+    // Add keyboard event listeners to track shift key
+    useEffect(function () {
+        var handleKeyDown = function (e) {
+            if (e.key === 'Shift') {
+                isShiftPressed.current = true;
+            }
+        };
+        var handleKeyUp = function (e) {
+            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);
+        // Cleanup
+        return function () {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
     // Create handler for click event that can use event data to update the plot if desired.
     var handleClick = function (event) {
+        var _a, _b, _c, _d;
         if (!event || !event.points || event.points.length === 0) {
             return;
         }
-        // The main trace is always curve number 0.
-        // If we clicked the unselected data trace, nothing should happen.
-        if (event.points[0].curveNumber !== 0) {
-            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') {
             // Get the index of the clicked bar with respect to the trace. So if
@@ -6093,37 +6138,49 @@ 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();
-                minTraceValue = Math.min.apply(Math, data.map(function (d) { return d.getTime(); }));
+                // 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(); }));
             }
             else {
-                // All of the event info should be numbers
-                if (typeof event.points[0].data.xbins.start !== 'number') {
-                    console.error("Unexpected type for xbins.start. Expected number.");
-                    return;
-                }
                 // Get the min value of the trace and the beginning of the first bin (globally)
-                minTraceValue = Math.min.apply(Math, data);
-                globalFirstBinStart = 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'
+                ? 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) / 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 _a = [
-                globalFirstBinStart + clickedBinGlobalIndex * binSize,
-                globalFirstBinStart + (clickedBinGlobalIndex + 1) * binSize
-            ], minBinValue = _a[0], maxBinValue = _a[1];
+            var clickedBinGlobalIndex = clickedBinIndex + Math.floor((minTraceValue - globalFirstBinStart) / convertedBinSize);
+            var _e = [
+                globalFirstBinStart + clickedBinGlobalIndex * convertedBinSize,
+                globalFirstBinStart + (clickedBinGlobalIndex + 1) * convertedBinSize
+            ], minBinValue = _e[0], maxBinValue = _e[1];
             if (isDateArray(data)) {
                 var minDate = new Date(minBinValue);
                 var maxDate = new Date(maxBinValue);
-                handleClickOrSelection(minDate, maxDate);
-                setSelectedRange([minDate, maxDate]);
+                handleClickOrSelection(minDate, maxDate, isShiftPressed.current);
+                var newMinMax = [minDate, maxDate];
+                if (isShiftPressed.current && selectedRange) {
+                    setSelectedRange(__spreadArray(__spreadArray([], selectedRange, true), [newMinMax], false));
+                }
+                else {
+                    setSelectedRange([newMinMax]);
+                }
             }
             else {
-                handleClickOrSelection(minBinValue, maxBinValue);
-                setSelectedRange([minBinValue, maxBinValue]);
+                handleClickOrSelection(minBinValue, maxBinValue, isShiftPressed.current);
+                var newMinMax = [minBinValue, maxBinValue];
+                if (isShiftPressed.current && selectedRange) {
+                    setSelectedRange(__spreadArray(__spreadArray([], selectedRange, true), [newMinMax], false));
+                }
+                else {
+                    setSelectedRange([newMinMax]);
+                }
             }
         }
     };
@@ -6143,9 +6200,13 @@ 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;
-                    minValue = new Date(firstBinMidPoint - binSize / 2);
-                    maxValue = new Date(lastBinMidPoint + binSize / 2);
+                    // 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'
+                        ? plotlyMToMilliseconds(binSize)
+                        : binSize;
+                    minValue = new Date(firstBinMidPoint - convertedBinSize / 2);
+                    maxValue = new Date(lastBinMidPoint + convertedBinSize / 2);
                 }
                 else {
                     // No bins selected, so the range should be empty.
@@ -6165,11 +6226,12 @@ var HistogramPlot = function (props) {
                 // Set the range based on the bins selected. Plotly will include a bin in event.points if
                 // at least half of it is selected.
                 if (event.points && event.points.length > 0) {
-                    var firstBinMidPoint = event.points[0].x;
-                    var lastBinMidPoint = event.points[event.points.length - 1].x;
-                    var binSize = event.points[0].data.xbins.size;
-                    var roundedMinValue = firstBinMidPoint - binSize / 2;
-                    var roundedMaxValue = lastBinMidPoint + binSize / 2;
+                    // Find the max and min midpoints. They may be from curve 0 or 1.
+                    var firstBinMidPoint = Math.min.apply(Math, event.points.map(function (p) { return p.x; }));
+                    var lastBinMidPoint = Math.max.apply(Math, event.points.map(function (p) { return p.x; }));
+                    var convertedBinSize = binSize;
+                    var roundedMinValue = firstBinMidPoint - convertedBinSize / 2;
+                    var roundedMaxValue = lastBinMidPoint + convertedBinSize / 2;
                     minValue = roundedMinValue;
                     maxValue = roundedMaxValue;
                 }
@@ -6188,12 +6250,24 @@ 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') {
-                setSelectedRange([minValue, maxValue]);
+                var newMinMax = [minValue, maxValue];
+                if (isShiftPressed.current && selectedRange) {
+                    setSelectedRange(__spreadArray(__spreadArray([], selectedRange, true), [newMinMax], false));
+                }
+                else {
+                    setSelectedRange([newMinMax]);
+                }
             }
             else if (minValue instanceof Date && maxValue instanceof Date) {
-                setSelectedRange([minValue, maxValue]);
+                var newMinMax = [minValue, maxValue];
+                if (isShiftPressed.current && selectedRange) {
+                    setSelectedRange(__spreadArray(__spreadArray([], selectedRange, true), [newMinMax], false));
+                }
+                else {
+                    setSelectedRange([newMinMax]);
+                }
             }
-            handleClickOrSelection(minValue, maxValue);
+            handleClickOrSelection(minValue, maxValue, isShiftPressed.current);
         }
     };
     // Create the selected range box
@@ -6204,20 +6278,20 @@ var HistogramPlot = function (props) {
             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)';
-        return [{
-                type: 'rect',
-                x0: isDateArray(selectedRange) ? selectedRange[0].getTime() : selectedRange[0],
-                x1: isDateArray(selectedRange) ? selectedRange[1].getTime() : selectedRange[1],
-                y0: 0,
-                y1: 1,
-                yref: 'paper',
-                fillcolor: multiplyColor,
-                line: {
-                    width: 1,
-                    color: multiplyColor
-                },
-                layer: 'above' // Ensure the selection box is above the bars
-            }];
+        return selectedRange.map(function (maxMin) { return ({
+            type: 'rect',
+            x0: isDateArray(maxMin) ? maxMin[0].getTime() : maxMin[0],
+            x1: isDateArray(maxMin) ? maxMin[1].getTime() : maxMin[1],
+            y0: 0,
+            y1: 1,
+            yref: 'paper',
+            fillcolor: multiplyColor,
+            line: {
+                width: 1,
+                color: multiplyColor
+            },
+            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
@@ -6236,7 +6310,6 @@ var HistogramPlot = function (props) {
             }
         }] : [];
     // Draw mean line for all data
-    var allData = __spreadArray(__spreadArray([], data, true), unselectedData, true);
     var allDataMeanValue = (_c = calculateMean(allData)) !== null && _c !== void 0 ? _c : 0;
     var allDataMeanLine = (statsAnnotations.includes('mean') && unselectedData.length > 0 && data.length > 0) ? [{
             type: 'line',
@@ -6308,7 +6381,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.
@@ -6338,7 +6411,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,
@@ -6429,6 +6502,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: {