td-plots 1.2.0 → 1.2.1

package/dist/components/Histogram.d.ts

@@ -4,7 +4,6 @@ export type HistogramPlotProps = {
     data: number[] | Date[];
     unselectedData?: number[] | Date[];
     showMeanLine?: boolean;
-    meanLineColor?: string;
     title?: string;
     xAxisTitle?: string;
     barColor?: string;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx as jsx$1, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { forwardRef, useContext, lazy, useRef, Suspense } from 'react';
+import { forwardRef, useContext, lazy, useRef, useState, useMemo, Suspense } from 'react';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -7787,9 +7787,13 @@ var Loading = function () {
 var Plot$2 = lazy(function () { return import('react-plotly.js'); });
 var HistogramPlot = function (props) {
     var _a;
-    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _b = props.barColor, barColor = _b === void 0 ? 'rgb(72, 72, 74)' : _b, _c = props.unselectedBarColor, unselectedBarColor = _c === void 0 ? 'rgba(203, 195, 195, 0.88)' : _c, _d = props.selectorsColor, selectorsColor = _d === void 0 ? 'black' : _d, _e = props.showMeanLine, showMeanLine = _e === void 0 ? true : _e, _f = props.meanLineColor, meanLineColor = _f === void 0 ? 'grey' : _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;
+    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _b = props.barColor, barColor = _b === void 0 ? 'rgb(72, 72, 74)' : _b, _c = props.unselectedBarColor, unselectedBarColor = _c === void 0 ? 'rgba(203, 195, 195, 0.88)' : _c, _d = props.selectorsColor, selectorsColor = _d === void 0 ? 'black' : _d, _e = props.showMeanLine, showMeanLine = _e === void 0 ? true : _e, containerStyleOverrides = props.containerStyleOverrides, _f = props.unselectedData, unselectedData = _f === void 0 ? [] : _f, _g = props.handleClickOrSelection, handleClickOrSelection = _g === void 0 ? function () { } : _g, _h = props.onDeselect, onDeselect = _h === void 0 ? function () { } : _h, plotId = props.plotId;
     // Ref for plot container
     var containerRef = useRef(null);
+    // Track any selections made in this plot so we can style the selection box.
+    var _j = useState(null), selectedRange = _j[0], setSelectedRange = _j[1];
+    // Set the bins based on the entire data set.
+    var nBins = Math.ceil(Math.sqrt(data.length + unselectedData.length));
     // Create handler for click event that can use event data to update the plot if desired.
     var handleClick = function (event) {
         if (!event || !event.points || event.points.length === 0) {
@@ -7800,9 +7804,8 @@ var HistogramPlot = function (props) {
         if (event.points[0].curveNumber !== 0) {
             return;
         }
-        // If we are given a function to update the data (handleClickOrSelection), use
-        // the bin number to determine which bar was clicked and determine the range of the clicked bar.
-        if (handleClickOrSelection && "binNumber" in event.points[0] && typeof event.points[0].binNumber === 'number') {
+        // 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
             // my trace has only one bar (0, 1] but another trace has bars (-1, 0], (0, 1], (1, 2], etc.
             // then when I click on (0, 1] in my trace the index will be 0, even thought it would be
@@ -7841,9 +7844,11 @@ var HistogramPlot = function (props) {
                 var minDate = new Date(minBinValue);
                 var maxDate = new Date(maxBinValue);
                 handleClickOrSelection(minDate, maxDate);
+                setSelectedRange([minDate, maxDate]);
             }
             else {
                 handleClickOrSelection(minBinValue, maxBinValue);
+                setSelectedRange([minBinValue, maxBinValue]);
             }
         }
     };
@@ -7858,17 +7863,36 @@ var HistogramPlot = function (props) {
             // Then we must be dealing with dates
             minValue = new Date(event.range.x[0]);
             maxValue = new Date(event.range.x[1]);
+            setSelectedRange([minValue, maxValue]);
         }
         else {
             minValue = event.range.x[0];
             maxValue = event.range.x[1];
+            setSelectedRange([minValue, maxValue]);
         }
-        if (handleClickOrSelection) {
-            handleClickOrSelection(minValue, maxValue);
-        }
+        handleClickOrSelection(minValue, maxValue);
     };
-    // Set the bins based on the entire data set.
-    var nBins = Math.ceil(Math.sqrt(data.length + unselectedData.length));
+    // Create the selected range box
+    var selectedRangeBox = useMemo(function () {
+        if (!selectedRange)
+            return [];
+        // 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
+            }];
+    }, [selectedRange]);
     var unselectedTrace = {
         x: unselectedData,
         type: 'histogram',
@@ -7917,18 +7941,21 @@ var HistogramPlot = function (props) {
         isDateArray(allData) ? new Date(dataMin - padding) : dataMin - padding,
         isDateArray(allData) ? new Date(dataMax + padding) : dataMax + padding
     ];
+    var meanLineRadius = 0.01; // distance from the top of the y axis to the top/bottom end of the mean line
     var meanLine = showMeanLine ? {
         type: 'line',
         x0: meanValue,
-        y0: 0,
+        y0: 1 - meanLineRadius,
         x1: meanValue,
         yref: 'paper',
-        y1: 1.04, // Extend slightly above so we can annotate better
+        y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
         line: {
-            color: meanLineColor,
+            color: barColor,
             width: 1.5,
         }
     } : {};
+    // Draw the mean line annotation on right unless the mean is too close to the upper end of the x-axis range.
+    var drawMeanAnnotationOnRight = meanValue < (0.75 * (fixedXAxisRange[1] - fixedXAxisRange[0]) + fixedXAxisRange[0]);
     var layout = {
         title: {
             text: title,
@@ -7965,8 +7992,10 @@ var HistogramPlot = function (props) {
         },
         yaxis: {
             title: {
-                text: 'Count'
+                text: 'Count',
+                standoff: 12, // Add space between title and axis
             },
+            automargin: true, // Required for standoff to work properly
             showgrid: true,
             zeroline: false,
             showline: true,
@@ -7983,19 +8012,22 @@ var HistogramPlot = function (props) {
         bargap: 0.03, // Gap between bars
         dragmode: 'select', // Enable drag to select
         selectdirection: 'h', // User can select in horizontal direction only
-        shapes: meanLine ? [meanLine] : [], // Add the mean line if it exists
-        annotations: showMeanLine ? [{
+        shapes: __spreadArray([meanLine], selectedRangeBox, true), // Add the mean line and selection box
+        annotations: (showMeanLine && meanLine) ? [{
                 x: meanValue,
-                y: 1.12, // Position above the top of the plot
+                y: 1 + meanLineRadius + 0.12, // Position above the mean line
                 yref: 'paper',
                 text: "Mean: ".concat(isDateArray(data) ? new Date(meanValue).toLocaleDateString('en-US', {
                     month: 'short',
                     day: '2-digit',
                     year: 'numeric'
                 }) : meanValue.toFixed(2)),
-                showarrow: false, // No arrow for the annotation
+                xanchor: drawMeanAnnotationOnRight ? 'left' : 'right',
+                yanchor: 'top',
+                xshift: drawMeanAnnotationOnRight ? -3 : 3,
+                showarrow: false,
                 font: {
-                    color: meanLineColor,
+                    color: barColor,
                     size: 12,
                 },
             }] : [],
@@ -8008,7 +8040,10 @@ var HistogramPlot = function (props) {
         staticPlot: false, // Enable interactivity
     };
     var containerStyles = __assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    return (jsx$1("div", { ref: containerRef, className: "plot-container ".concat(plotId), style: __assign({ '--selection-color': selectorsColor }, containerStyles), children: jsx$1(Suspense, { fallback: jsx$1(Loading, {}), children: jsx$1(Fragment, { children: jsx$1(Plot$2, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: onDeselect, useResizeHandler: true, style: {
+    return (jsx$1("div", { ref: containerRef, className: "plot-container ".concat(plotId), style: __assign({ '--selection-color': selectorsColor }, containerStyles), children: jsx$1(Suspense, { fallback: jsx$1(Loading, {}), children: jsx$1(Fragment, { children: jsx$1(Plot$2, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: function () {
+                        onDeselect();
+                        setSelectedRange(null); // Remove selected box
+                    }, useResizeHandler: true, style: {
                         width: "100%",
                         height: "100%",
                         display: "block"