td-plots 1.2.3 → 1.3.2

package/dist/index.js

@@ -5860,17 +5860,23 @@ 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.showMeanLine, showMeanLine = _f === void 0 ? true : _f, _g = props.showAllDataMeanLine, showAllDataMeanLine = _g === void 0 ? true : _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;
+    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;
     // Ref for plot container
     var containerRef = React.useRef(null);
     // Track any selections made in this plot so we can style the selection box.
-    var _m = React.useState(null), selectedRange = _m[0], setSelectedRange = _m[1];
+    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.
-    var _o = React.useState(undefined), fixedXAxisRange = _o[0], setFixedXAxisRange = _o[1];
+    var _m = React.useState(undefined), fixedXAxisRange = _m[0], setFixedXAxisRange = _m[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) {
@@ -5883,11 +5889,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]];
-                console.log('Captured range from onUpdate:', computedRange);
-                setFixedXAxisRange(computedRange);
+                setFixedXAxisRange(range);
             }
         }
     };
@@ -6018,11 +6020,12 @@ var HistogramPlot = function (props) {
             handleClickOrSelection(minValue, maxValue);
         }
     };
-    console.log('fixed range', fixedXAxisRange);
     // Create the selected range box
     var selectedRangeBox = React.useMemo(function () {
         if (!selectedRange)
             return [];
+        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)';
         return [{
@@ -6039,7 +6042,7 @@ var HistogramPlot = function (props) {
                 },
                 layer: 'above' // Ensure the selection box is above the bars
             }];
-    }, [selectedRange]);
+    }, [selectedRange, unselectedData]);
     var unselectedTrace = {
         x: unselectedData,
         type: 'histogram',
@@ -6078,7 +6081,7 @@ var HistogramPlot = function (props) {
     // 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 = showMeanLine ? [{
+    var meanLine = (showMeanLines && data.length > 0) ? [{
             type: 'line',
             x0: meanValue,
             y0: 1 - meanLineRadius,
@@ -6093,7 +6096,7 @@ var HistogramPlot = function (props) {
     // 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 = (showAllDataMeanLine && unselectedData.length > 0) ? [{
+    var allDataMeanLine = (showMeanLines && unselectedData.length > 0 && data.length > 0) ? [{
             type: 'line',
             x0: allDataMeanValue,
             y0: 1 - meanLineRadius,
@@ -6138,6 +6141,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: {
@@ -6162,7 +6167,7 @@ var HistogramPlot = function (props) {
         dragmode: 'select', // Enable drag to select
         selectdirection: 'h', // User can select in horizontal direction only
         shapes: tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], allDataMeanLine, true), meanLine, true), selectedRangeBox, true), // Add the mean line and selection box
-        annotations: (showMeanLine && meanLine) ? [{
+        annotations: (showMeanLines && 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',