td-plots 1.2.2 → 1.2.3

package/dist/components/Histogram.d.ts

@@ -14,6 +14,7 @@ export type HistogramPlotProps = {
     containerStyleOverrides?: React.CSSProperties;
     onDeselect?: () => void;
     plotId?: string;
+    selectByBin?: boolean;
 };
 export declare const HistogramPlot: (props: HistogramPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default HistogramPlot;

package/dist/index.esm.js

@@ -5840,25 +5840,35 @@ var Loading = function () {
 var Plot$2 = 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;
+    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;
     // Ref for plot container
     var containerRef = useRef(null);
     // Track any selections made in this plot so we can style the selection box.
-    var _l = useState(null), selectedRange = _l[0], setSelectedRange = _l[1];
+    var _m = useState(null), selectedRange = _m[0], setSelectedRange = _m[1];
     // Set the bins based on the entire data set.
     var nBins = Math.ceil(Math.sqrt(data.length + unselectedData.length));
     // 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 _m = useState(undefined), fixedXAxisRange = _m[0], setFixedXAxisRange = _m[1];
+    var _o = useState(undefined), fixedXAxisRange = _o[0], setFixedXAxisRange = _o[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 handlePlotInitialized = function (figure, graphDiv) {
-        var _a, _b;
-        if (((_b = (_a = figure.layout) === null || _a === void 0 ? void 0 : _a.xaxis) === null || _b === void 0 ? void 0 : _b.range) && !fixedXAxisRange) {
-            var computedRange = typeof (figure.layout.xaxis.range[0]) === 'string'
-                ? [new Date(figure.layout.xaxis.range[0]), new Date(figure.layout.xaxis.range[1])]
-                : [figure.layout.xaxis.range[0], figure.layout.xaxis.range[1]];
-            setFixedXAxisRange(computedRange);
+    var handlePlotUpdate = function (figure, graphDiv) {
+        var _a;
+        if (!fixedXAxisRange) {
+            var currentLayout = graphDiv._fullLayout;
+            if ((_a = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.xaxis) === null || _a === void 0 ? void 0 : _a.range) {
+                var range = currentLayout.xaxis.range;
+                // Skip temporary [-1, 1] range
+                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);
+            }
         }
     };
     // Create handler for click event that can use event data to update the plot if desired.
@@ -5927,18 +5937,68 @@ var HistogramPlot = function (props) {
         var minValue;
         var maxValue;
         if (typeof event.range.x[0] === 'string' && typeof event.range.x[1] === 'string') {
-            // Then we must be dealing with dates
-            minValue = new Date(event.range.x[0]);
-            maxValue = new Date(event.range.x[1]);
-            setSelectedRange([minValue, maxValue]);
+            // Then we are must be dealing with dates
+            if (selectByBin) {
+                // Set selected range to include the whole bin if at least half the bin is within the explicit range
+                // Plotly already tells us which bins were selected based on this logic. These are the points in the event.
+                if (event.points && event.points.length > 0) {
+                    // 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);
+                }
+                else {
+                    // No bins selected, so the range should be empty.
+                    minValue = new Date(event.range.x[0]);
+                    maxValue = minValue;
+                }
+            }
+            else {
+                // Set the range based on the explicit selection boundaries
+                minValue = new Date(event.range.x[0]);
+                maxValue = new Date(event.range.x[1]);
+            }
         }
         else {
-            minValue = event.range.x[0];
-            maxValue = event.range.x[1];
-            setSelectedRange([minValue, maxValue]);
+            // Handle selection for numbers
+            if (selectByBin) {
+                // 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;
+                    minValue = roundedMinValue;
+                    maxValue = roundedMaxValue;
+                }
+                else {
+                    // No bins selected, so set the range to be empty.
+                    minValue = event.range.x[0];
+                    maxValue = minValue;
+                }
+            }
+            else {
+                // Set the range based on the explicit selection boundaries
+                minValue = event.range.x[0];
+                maxValue = event.range.x[1];
+            }
+        }
+        if (minValue !== undefined && maxValue !== undefined) {
+            // Update selected range. Have to be strict about types.
+            if (typeof minValue === 'number' && typeof maxValue === 'number') {
+                setSelectedRange([minValue, maxValue]);
+            }
+            else if (minValue instanceof Date && maxValue instanceof Date) {
+                setSelectedRange([minValue, maxValue]);
+            }
+            handleClickOrSelection(minValue, maxValue);
         }
-        handleClickOrSelection(minValue, maxValue);
     };
+    console.log('fixed range', fixedXAxisRange);
     // Create the selected range box
     var selectedRangeBox = useMemo(function () {
         if (!selectedRange)
@@ -6111,7 +6171,7 @@ var HistogramPlot = function (props) {
     return (jsx("div", { ref: containerRef, className: "plot-container ".concat(plotId), style: __assign({ '--selection-color': selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Fragment, { children: jsx(Plot$2, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: function () {
                         onDeselect();
                         setSelectedRange(null); // Remove selected box
-                    }, onInitialized: handlePlotInitialized, useResizeHandler: true, style: {
+                    }, onUpdate: handlePlotUpdate, useResizeHandler: true, style: {
                         width: "100%",
                         height: "100%",
                         display: "block"