td-plots 1.10.0 → 1.10.2

package/dist/index.esm.js

@@ -1515,31 +1515,17 @@ const BoxPlot = (props) => {
             }; // Values map to x because the boxplot is horizontal
         return Object.assign({ type: "box", orientation: "h", name: trace.label, fillcolor: trace.fill === "none" ? "rgba(255, 255, 255, 0)" : undefined, line: {
                 color: trace.color || "#1f77b4", // Default to Plotly's default blue if no color provided
-            }, boxpoints: false, hoverinfo: "none" }, boxDefinition);
+            }, boxpoints: false, 
+            // hoverinfo: "none", // Disable default hover
+            width: trace.width }, boxDefinition);
     });
     const layout = Object.assign(Object.assign({}, extraLayoutConfig), { title: {
             text: title,
-        }, showlegend: false, autosize: true, width: undefined, height: undefined, margin: Object.assign({ l: 50, r: 35, t: 50, b: 50, pad: 4 }, extraLayoutConfig.margin), xaxis: {
-            title: {
+        }, showlegend: false, autosize: true, width: undefined, height: undefined, margin: Object.assign({ l: 50, r: 35, t: 50, b: 50, pad: 4 }, extraLayoutConfig.margin), xaxis: Object.assign({ title: {
                 text: xAxisTitle,
-            },
+            }, 
             // range: displayXAxis, // Fixed range prevents axis shifting during interaction or data updates
-            showgrid: true,
-            zeroline: false,
-            showline: true,
-            mirror: "ticks",
-            gridcolor: "#efefef",
-            gridwidth: 0.2,
-            zerolinecolor: "#969696",
-            zerolinewidth: 1,
-            linecolor: "#bababa",
-            linewidth: 1,
-            fixedrange: true, // Disable zooming
-            ticklabelposition: "outside",
-            // tickformat: isDateArray(data) ? dateTickFormat : d3FormatValueString, // Format ticks for dates
-            // automargin: true, // Adjust margin if tick labels rotate
-            // hoverformat: isNumberArray(allData) ? d3FormatValueString : undefined,
-        }, yaxis: Object.assign({ title: {
+            showgrid: true, zeroline: false, showline: true, mirror: "ticks", gridcolor: "#efefef", gridwidth: 0.2, zerolinecolor: "#969696", zerolinewidth: 1, linecolor: "#bababa", linewidth: 1, fixedrange: true, ticklabelposition: "outside" }, extraLayoutConfig.xaxis), yaxis: Object.assign({ title: {
                 text: yAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
                 standoff: 12, // Add space between title and axis
             }, automargin: true, showgrid: true, zeroline: false, showline: true, mirror: "ticks", gridcolor: "#efefef", gridwidth: 0.2, zerolinecolor: "#969696", zerolinewidth: 1, linecolor: "#bababa", linewidth: 1, fixedrange: true, tickcolor: "white", ticklen: 10, ticksuffix: "       " }, extraLayoutConfig.yaxis) });
@@ -1594,6 +1580,7 @@ function isBoxPlotDataSummary(value) {
         (value.mean === undefined || typeof value.mean === "number"));
 }
 
+const BOX_SIZE = 15;
 const SVGBoxWithLine = (props) => {
     const boxWidth = 35;
     const boxHeight = 15;
@@ -1602,12 +1589,45 @@ const SVGBoxWithLine = (props) => {
     return (jsxs("svg", { width: lineWidth, height: boxHeight, viewBox: `0 0 ${lineWidth + 3} ${boxHeight + 3}`, children: [jsx("line", { x1: 0, y1: lineY, x2: (lineWidth - boxWidth) / 2, y2: lineY, stroke: props.color, strokeWidth: "2" }), jsx("line", { x1: (lineWidth + boxWidth) / 2, y1: lineY, x2: lineWidth, y2: lineY, stroke: props.color, strokeWidth: "2" }), jsx("line", { x1: 0, y1: lineY - 5, x2: 0, y2: lineY + 5, stroke: props.color, strokeWidth: "2" }), jsx("line", { x1: lineWidth, y1: lineY - 5, x2: lineWidth, y2: lineY + 5, stroke: props.color, strokeWidth: "2" }), jsx("rect", { x: (lineWidth - boxWidth) / 2, y: "0", width: boxWidth, height: boxHeight, fill: props.boxStyle !== "outlined" ? props.color : "none", opacity: props.boxStyle === "shaded" ? 0.3 : 1 }), jsx("rect", { x: (lineWidth - boxWidth) / 2, y: "0", width: boxWidth, height: boxHeight, stroke: props.color, strokeWidth: "2", fill: "none" }), jsx("line", { x1: (lineWidth - boxWidth) / 2 + boxWidth * 0.5, y1: 0, x2: (lineWidth - boxWidth) / 2 + boxWidth * 0.5, y2: boxHeight, stroke: props.color, strokeWidth: "2" })] }));
 };
 const LegendBoxPlotItem = (props) => {
+    const labelKey = props.label == null
+        ? ""
+        : typeof props.label === "string"
+            ? props.label
+            : props.label.toString();
+    return (jsxs(Box, { sx: {
+            display: "flex",
+            alignItems: "center",
+            mr: 4,
+            fontFamily: "Open Sans, verdana, arial, sans-serif",
+        }, children: [jsx(SVGBoxWithLine, { color: props.color, boxStyle: props.boxStyle }), props.label] }, labelKey));
+};
+const LegendColorItem = (props) => {
+    const labelKey = props.label == null
+        ? ""
+        : typeof props.label === "string"
+            ? props.label
+            : props.label.toString();
+    return (jsxs(Box, { sx: {
+            display: "flex",
+            alignItems: "center",
+            mr: 4,
+            fontFamily: "Open Sans, verdana, arial, sans-serif",
+        }, children: [jsx(Box, { sx: Object.assign({ width: props.width || BOX_SIZE, height: props.height || BOX_SIZE, backgroundColor: props.color, marginRight: 1 }, props.styleOverrides) }), props.label] }, labelKey));
+};
+const LegendLineItem = (props) => {
+    const lineWidth = props.width || 40;
+    const lineHeight = props.height || 4;
+    const labelKey = props.label == null
+        ? ""
+        : typeof props.label === "string"
+            ? props.label
+            : props.label.toString();
     return (jsxs(Box, { sx: {
             display: "flex",
             alignItems: "center",
             mr: 4,
             fontFamily: "Open Sans, verdana, arial, sans-serif",
-        }, children: [jsx(SVGBoxWithLine, { color: props.color, boxStyle: props.boxStyle }), props.label] }, props.label));
+        }, children: [jsx("svg", { width: lineWidth, height: lineHeight, style: { marginRight: 8 }, children: jsx("line", { x1: 0, y1: lineHeight / 2, x2: lineWidth, y2: lineHeight / 2, stroke: props.color, strokeWidth: lineHeight }) }), props.label] }, labelKey));
 };
 
 // This component takes grouped data and transforms it for displaying with the BoxPlot component.
@@ -1618,10 +1638,12 @@ const PairedComparisonsBoxPlot = (props) => {
     // Transform the grouped data into an array for BoxPlot
     const boxPlotData = groups.flatMap((group, groupIndex) => {
         const groupYPosition = groupIndex; // Position the group on the y-axis based on its index
-        group.color || "orange";
-        return group.boxes.map((box, boxIndex) => (Object.assign(Object.assign({}, box), { 
-            // color: box.color || groupColor, // Use box color if provided, otherwise use group color
-            color: "#75757f", fill: boxIndex % 2 === 0 ? "none" : "auto", y: groupYPosition + 0.15 + (boxIndex - 1) * 0.3 })));
+        const groupColor = group.color || "orange";
+        return group.boxes.map((box, boxIndex) => (Object.assign(Object.assign({}, box), { color: box.color || groupColor, width: 0.28, fill: boxIndex % 2 === 0 ? "none" : "auto", y: boxIndex % 2 === 0 &&
+                Array.isArray(group.boxes[1].values) &&
+                group.boxes[1].values.length === 0
+                ? groupYPosition
+                : groupYPosition + 0.25 + (boxIndex - 1) * 0.5 })));
     });
     // We have to construct nice ticks. We can position them with the group indices.
     const tickvals = groups.map((_, index) => index);
@@ -1636,15 +1658,15 @@ const PairedComparisonsBoxPlot = (props) => {
             y0: groupIndex - 0.5,
             y1: groupIndex + 0.5,
             yref: "y",
-            fillcolor: groupIndex % 2 === 0 ? "#ffffff" : "#f8f8f8",
-            opacity: 0.05,
+            fillcolor: groupIndex % 2 === 0 ? "#ffffff" : "#e7e5e5",
+            opacity: 0.2,
             layer: "below",
             line: {
                 width: 0,
             },
         };
     });
-    const groupAnnotations = groups.map((group, groupIndex) => ({
+    groups.map((group, groupIndex) => ({
         type: "line",
         yref: "y",
         xref: "paper",
@@ -1659,8 +1681,23 @@ const PairedComparisonsBoxPlot = (props) => {
     }));
     const differenceAnnotations = [];
     const differenceBetweenMediansLines = [];
+    // Find reasonable max and min for the x axis.
+    let globalMin = Infinity;
+    let globalMax = -Infinity;
     groups.forEach((group, groupIndex) => {
-        // console.log(group.boxes);
+        // Update global min and max
+        group.boxes.forEach((box) => {
+            if (isBoxPlotDataSummary(box.values)) {
+                globalMin = Math.min(globalMin, box.values.lowerWhisker);
+                globalMax = Math.max(globalMax, box.values.upperWhisker);
+            }
+            else if (Array.isArray(box.values)) {
+                const boxMin = Math.min(...box.values);
+                const boxMax = Math.max(...box.values);
+                globalMin = Math.min(globalMin, boxMin);
+                globalMax = Math.max(globalMax, boxMax);
+            }
+        });
         if ((!isBoxPlotDataSummary(group.boxes[0].values) &&
             group.boxes[0].values.length == 0) ||
             (!isBoxPlotDataSummary(group.boxes[1].values) &&
@@ -1702,14 +1739,15 @@ const PairedComparisonsBoxPlot = (props) => {
             xref: "x",
             x: medianB > medianA ? medianB : medianA, // Position the annotation at the larger median
             y: groupIndex, // Align with the center of the group
-            text: `   ${differenceBetweenMedians.toFixed(1)}`,
+            text: `   ${differenceBetweenMedians.toFixed(1)}${props.unit ? ` ${props.unit}` : ""}   `, // Show the difference between the medians with optional unit
             showarrow: false,
             xanchor: "left",
             align: "left",
             font: {
-                size: 12,
+                size: 16,
                 color: annotationColor,
                 style: "italic",
+                weight: "bold",
             },
         });
         differenceBetweenMediansLines.push({
@@ -1761,6 +1799,20 @@ const PairedComparisonsBoxPlot = (props) => {
             range: [-0.5, groups.length - 0.5], // Add some padding to the y-axis range to accommodate the boxes
             tickcolor: "#ffffff",
             showgrid: false,
+            ticklabelposition: "inside",
+            //@ts-ignore
+            ticklabelstandoff: 10,
+            ticksuffix: "       ", // Add space between ticks and data
+            title: {
+                text: yAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
+                standoff: 45,
+            },
+        },
+        xaxis: {
+            insiderange: [
+                globalMin - (globalMax - globalMin) * 0.1,
+                globalMax + (globalMax - globalMin) * 0.1,
+            ], // Set the x-axis range based on the global min and max values with some padding
         },
         margin: {
             t: 5,
@@ -1769,7 +1821,7 @@ const PairedComparisonsBoxPlot = (props) => {
         shapes: [
             ...separatorShapes,
             ...differenceBetweenMediansLines,
-            ...groupAnnotations,
+            // ...groupAnnotations,
         ],
         annotations: differenceAnnotations,
     };
@@ -1780,7 +1832,7 @@ const PairedComparisonsBoxPlot = (props) => {
 
 const Plot$2 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const SummaryComparisonPlot = (props) => {
-    const { groups, height = 250, title = "", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "summary-comparison-plot", tooltipPosition = "right", startXAxisAtZero = true, } = props;
+    const { groups, height = 250, title = "", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "summary-comparison-plot", tooltipPosition = "right", startXAxisAtZero = true, unit = "", } = props;
     // Ref for plot container
     const containerRef = useRef(null);
     // State for custom tooltip
@@ -1862,6 +1914,8 @@ const SummaryComparisonPlot = (props) => {
     const handleUnhover = () => {
         setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
     };
+    const comparedLines = [];
+    const comparedAnnotations = [];
     // Transform the data into a format suitable for a plotly scatterplot
     const plotlyData = groups.flatMap((group, groupIndex) => {
         const traces = [];
@@ -1872,10 +1926,10 @@ const SummaryComparisonPlot = (props) => {
                 mode: "lines",
                 name: group.groupLabel,
                 x: [group.data.summarizedMin, group.data.summarizedMax],
-                y: [0 + groupIndex * 0.1, 0 + groupIndex * 0.1],
+                y: [groupIndex * 0.1, groupIndex * 0.1],
                 line: {
                     color: colorToRGBA(group.color || "orange", 1),
-                    width: 2,
+                    width: 6,
                 },
                 showlegend: false,
                 hoverinfo: "none",
@@ -1887,9 +1941,9 @@ const SummaryComparisonPlot = (props) => {
                 mode: "markers",
                 name: group.groupLabel,
                 x: [group.data.comparedMedian],
-                y: [0 + groupIndex * 0.1],
+                y: [groupIndex * 0.1],
                 marker: {
-                    color: group.color || "orange",
+                    color: colorToRGBA(group.color || "orange", 1),
                     size: 10,
                     symbol: "circle",
                     line: {
@@ -1900,9 +1954,45 @@ const SummaryComparisonPlot = (props) => {
                 showlegend: false,
                 hoverinfo: "none",
             });
+            comparedLines.push({
+                type: "line",
+                name: group.groupLabel,
+                x0: group.data.comparedMedian,
+                x1: group.data.comparedMedian,
+                y0: 0,
+                y1: 1.1,
+                yref: "paper",
+                line: {
+                    color: group.color || "orange",
+                    width: 2,
+                },
+            });
+            comparedAnnotations.push({
+                x: group.data.comparedMedian,
+                y: 1.08,
+                xref: "x",
+                yref: "paper",
+                text: `${group.data.comparedMedian.toFixed(2)} ${unit}`,
+                showarrow: false,
+                xanchor: "center",
+                yanchor: "bottom",
+            });
         }
         return traces;
     });
+    // Add tick label for the compared annotation value
+    if (comparedAnnotations.length > 0) {
+        comparedAnnotations.push({
+            x: -0.03, // Position to the left of the y-axis
+            y: 1.03,
+            xref: "paper",
+            yref: "paper",
+            text: "My AVG",
+            showarrow: false,
+            xanchor: "right",
+            yanchor: "bottom",
+        });
+    }
     const xRangeMin = groups.reduce((min, group) => {
         var _a, _b;
         return Math.min(min, (_a = group.data.summarizedMin) !== null && _a !== void 0 ? _a : Infinity, (_b = group.data.comparedMedian) !== null && _b !== void 0 ? _b : Infinity);
@@ -1918,10 +2008,9 @@ const SummaryComparisonPlot = (props) => {
         margin: {
             l: 130,
             r: 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.
-            t: title ? 50 : 5,
+            t: title ? 70 : 40,
             b: 50,
             pad: 4,
-            // ...extraLayoutConfig.margin, // Merge in any extra margin config provided via props
         },
         title: {
             text: title,
@@ -1929,8 +2018,12 @@ const SummaryComparisonPlot = (props) => {
                 size: 16,
             },
             xref: "paper",
-            x: 0.5,
-            xanchor: "center",
+            x: 0,
+            xanchor: "left",
+            yanchor: "bottom",
+            pad: {
+                b: 30,
+            },
         },
         xaxis: {
             title: {
@@ -1975,8 +2068,12 @@ const SummaryComparisonPlot = (props) => {
             range: [-0.08, 0.08 + (groups.length - 1) * 0.1], // Add padding around the groups
             automargin: true,
             tickcolor: "white", // Hide default ticks since we're using them for group labels in the paired comparisons plot
+            //@ts-ignore
+            ticklabelstandoff: 5,
         },
         hovermode: "y",
+        shapes: comparedLines,
+        annotations: comparedAnnotations,
     };
     const containerStyles = Object.assign({ width: "100%", height: height, position: "relative", display: "flex", flexDirection: "column", gap: 0 }, containerStyleOverrides);
     const config = {
@@ -2259,30 +2356,88 @@ const LineWithHistogram = (props) => {
 
 const Plot = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const BarPlot = (props) => {
-    const { data, data2 = null, data2Selected = [], barWidth = 0.8, barColor = "rgb(205, 26, 154)", // Default bar color (red)
+    var _a, _b;
+    const { data, data2 = null, data2Selected = [], barDataWidth = 2, barWidth = 0.8, barColor = "rgb(205, 26, 154)", // Default bar color (red)
     barColor2 = "rgba(100, 200, 255, 0.7)", // Default histogram bar color (blue)
+    data2SelectedColor = "rgba(255, 0, 0, 0.5)", // Default color for the histogram selection box (red)
     width = 600, height = 400, title = "", title2 = "", // Default title for histogram subplot
     xAxisTitle = "X Axis", yAxisTitle = "Y Axis", xAxis2Title = "", yAxis2Title = "", xAccessor = (d) => d.x, yAccessor = (d) => d.y, containerStyleOverrides = {}, plotId = "bar-plot", xAnnotations = [], barHoverTemplate = "", // Default hover template for bars
+    barGroups = [], // Optional array of bar groups for grouping bars by color
+    barGroupTooltipTitle = "Group", // Default title for the bar group tooltip
      } = props;
     // Ref for plot container
     const containerRef = useRef(null);
+    const plotMetaRef = useRef(null);
+    const [barGroupTooltip, setBarGroupTooltip] = useState(null);
     const y2AxisPosition = 0.72; // Position of the secondary y-axis (histogram) as a fraction of the plot height
+    const capturePlotMeta = (_figure, graphDiv) => {
+        var _a, _b, _c;
+        try {
+            const m = (_a = graphDiv._fullLayout) === null || _a === void 0 ? void 0 : _a.margin;
+            const r = (_c = (_b = graphDiv._fullLayout) === null || _b === void 0 ? void 0 : _b.xaxis) === null || _c === void 0 ? void 0 : _c.range;
+            if (m && r) {
+                plotMetaRef.current = {
+                    xRange: r,
+                    margin: { l: m.l, r: m.r, t: m.t, b: m.b },
+                };
+            }
+        }
+        catch (_d) { }
+    };
+    const handleBarGroupMouseMove = (e) => {
+        var _a;
+        if (!containerRef.current ||
+            barGroups.length === 0 ||
+            !plotMetaRef.current) {
+            setBarGroupTooltip(null);
+            return;
+        }
+        const { xRange, margin } = plotMetaRef.current;
+        const rect = containerRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const containerHeight = containerRef.current.clientHeight;
+        const containerWidth = containerRef.current.clientWidth;
+        const plotW = containerWidth - margin.l - margin.r;
+        containerHeight - margin.t - margin.b;
+        const plotBottom = containerHeight - margin.b;
+        // barGroupShapes sit at y0=-0.02, y1=-0.04 in paper coords (just below the x-axis line)
+        const stripTop = plotBottom - 10; // Plot bottom extends further than the x axis. Value here adjusted manually.
+        const stripBottom = plotBottom + 20; // approximate. Doesn't have to be perfect.
+        if (mouseY < stripTop || mouseY > stripBottom) {
+            setBarGroupTooltip(null);
+            return;
+        }
+        const dataX = xRange[0] + ((mouseX - margin.l) / plotW) * (xRange[1] - xRange[0]);
+        const hovered = barGroups.find((g) => dataX >= g.min && dataX <= g.max);
+        setBarGroupTooltip(hovered
+            ? {
+                x: mouseX,
+                y: plotBottom,
+                name: hovered.name,
+                label: (_a = hovered.label) !== null && _a !== void 0 ? _a : hovered.name,
+                color: hovered.color,
+                min: hovered.min,
+                max: hovered.max,
+            }
+            : null);
+    };
     const plotlyData = [
         {
             x: data.map((point) => xAccessor(point)),
             y: data.map((point) => yAccessor(point)),
-            // customdata: data.map((point) => [xAccessor(point) + 2]),
+            customdata: data.map((point) => [xAccessor(point) + barDataWidth]),
             yaxis: "y",
             type: "bar",
             marker: {
-                color: barColor, // Use the provided bar color
+                color: "white", // Use the provided bar color
                 line: {
-                    color: "white",
-                    width: 0.5,
+                    color: barColor,
+                    width: 2,
                 },
             },
             width: barWidth, // width centered on the x value.
-            // hovertemplate: barHoverTemplate || "%{y}", // Use provided hover template or default to showing y value
+            hovertemplate: barHoverTemplate || "%{y}", // Use provided hover template or default to showing y value
         },
     ];
     const histogramSubplotData = data2
@@ -2299,11 +2454,10 @@ const BarPlot = (props) => {
                 },
                 xaxis: "x2", // Use secondary x-axis for histogram
                 yaxis: "y2", // Place histogram on secondary y-axis
+                hovertemplate: "[%{x})<br>Count: %{y}<extra></extra>", // Custom hover text
             },
         ]
         : [];
-    // Create a multiply-like effect by using a semi-transparent dark overlay
-    const multiplyColor = "rgba(29, 104, 185, 0.1)";
     const selectedHistogramShape = data2Selected.length === 2
         ? [
             {
@@ -2313,10 +2467,10 @@ const BarPlot = (props) => {
                 y0: y2AxisPosition, // Start at the top of the histogram subplot
                 y1: 1,
                 yref: "paper",
-                fillcolor: multiplyColor,
                 line: {
-                    width: 1,
-                    color: multiplyColor,
+                    width: 2,
+                    color: data2SelectedColor,
+                    dash: "dot",
                 },
                 layer: "above", // Ensure the selection box is above the bars
             },
@@ -2392,6 +2546,59 @@ const BarPlot = (props) => {
             },
         ]
         : [];
+    const xMax = data.length > 0 ? Math.max(...data.map((d) => xAccessor(d))) : 0;
+    const barGroupShapes = barGroups.flatMap((group) => [
+        {
+            type: "rect",
+            xref: "x",
+            yref: "paper",
+            x0: group.min,
+            x1: group.max > xMax ? xMax + barWidth : group.max,
+            y0: -0.02,
+            y1: -0.07,
+            fillcolor: group.color,
+            line: {
+                width: 1,
+                color: "white",
+            },
+        },
+    ]);
+    const barGroupShapeAnnotation = barGroups.length > 0
+        ? {
+            xref: "x",
+            yref: "paper",
+            x: barGroups[0].min + barDataWidth / 2,
+            y: -0.043,
+            text: barGroupTooltipTitle,
+            showarrow: false,
+            yanchor: "middle",
+            xanchor: "left",
+            font: {
+                size: 14,
+                color: "#fff",
+                weight: 500,
+            },
+        }
+        : null;
+    const barGroupHighlightBox = barGroupTooltip
+        ? [
+            {
+                type: "rect",
+                xref: "x",
+                yref: "paper",
+                x0: barGroupTooltip.min,
+                x1: barGroupTooltip.max > xMax ? xMax + barWidth : barGroupTooltip.max,
+                y0: 0,
+                y1: data2 ? y2AxisPosition - 0.02 : 1,
+                fillcolor: colorToRGBA(barGroupTooltip.color, 0.2),
+                line: {
+                    width: 2,
+                    color: barGroupTooltip.color,
+                },
+                layer: "above",
+            },
+        ]
+        : [];
     const layout = Object.assign(Object.assign(Object.assign(Object.assign({ title: data2
             ? undefined
             : {
@@ -2418,8 +2625,9 @@ const BarPlot = (props) => {
             linecolor: "#bababa",
             linewidth: 1,
             fixedrange: true, // Disable zooming
-            // tickformat: isDateArray(data) ? dateTickFormat : d3FormatValueString, // Format ticks for dates
             automargin: true, // Adjust margin if tick labels rotate
+            ticklen: 21,
+            tickcolor: "white",
         } }, (data2 && {
         xaxis2: {
             title: {
@@ -2484,12 +2692,14 @@ const BarPlot = (props) => {
     })), { bargap: 0.03, shapes: [
             ...titleBackgroundShapes,
             ...selectedHistogramShape,
+            ...barGroupShapes,
+            ...barGroupHighlightBox,
             ...xAnnotations.map((annotation) => ({
                 type: "line",
                 x0: annotation.x,
                 x1: annotation.x,
                 y0: 0,
-                y1: 1.1,
+                y1: 1.05,
                 xref: "x",
                 yref: "paper",
                 line: {
@@ -2499,9 +2709,10 @@ const BarPlot = (props) => {
             })),
         ], annotations: [
             ...titleAnnotations,
+            ...(barGroupShapeAnnotation ? [barGroupShapeAnnotation] : []),
             ...xAnnotations.map((annotation) => ({
                 x: annotation.x,
-                y: 1.11,
+                y: 1.06,
                 xref: "x",
                 yref: "paper",
                 text: annotation.text || "",
@@ -2513,7 +2724,6 @@ const BarPlot = (props) => {
                 },
             })),
         ] });
-    console.log("BarPlot layout:", layout);
     const config = {
         responsive: true, // Make the plot responsive
         displayModeBar: false, // Hide the mode bar
@@ -2522,20 +2732,39 @@ const BarPlot = (props) => {
         staticPlot: false, // Enable interactivity
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    console.log([...plotlyData, ...histogramSubplotData]);
-    return (jsx("div", { ref: containerRef, className: `plot-container histogram ${plotId}`, style: Object.assign({}, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx("div", { style: {
-                    position: "relative",
-                    width: "100%",
-                    height: "100%",
-                }, children: jsx(Plot, { data: [...plotlyData, ...histogramSubplotData], 
-                    // Type doesn't contain "mirror" prop but it works.
-                    //@ts-ignore
-                    layout: layout, config: config, useResizeHandler: true, style: {
+    return (jsxs("div", { ref: containerRef, className: `plot-container histogram ${plotId}`, style: Object.assign(Object.assign({}, containerStyles), { cursor: barGroupTooltip ? "pointer" : "default" }), onMouseMove: handleBarGroupMouseMove, onMouseLeave: () => setBarGroupTooltip(null), children: [jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx("div", { style: {
+                        position: "relative",
                         width: "100%",
                         height: "100%",
-                        display: "block",
-                        transition: "opacity 0.15s ease-in-out",
-                    } }, `bar-${plotId || "default"}`) }) }) }));
+                    }, children: jsx(Plot, { data: [...plotlyData, ...histogramSubplotData], 
+                        // Type doesn't contain "mirror" prop but it works.
+                        //@ts-ignore
+                        layout: layout, config: config, useResizeHandler: true, style: {
+                            width: "100%",
+                            height: "100%",
+                            display: "block",
+                            transition: "opacity 0.15s ease-in-out",
+                        }, onInitialized: capturePlotMeta, onUpdate: capturePlotMeta }, `bar-${plotId || "default"}`) }) }), barGroupTooltip && (jsxs("div", { style: {
+                    position: "absolute",
+                    left: barGroupTooltip.x + 250 >
+                        ((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : Infinity)
+                        ? barGroupTooltip.x - 250
+                        : barGroupTooltip.x + 12,
+                    top: barGroupTooltip.y + 10,
+                    backgroundColor: "rgba(255, 255, 255, 0.9)",
+                    borderRadius: "4px",
+                    color: "#333",
+                    padding: "8px 12px",
+                    fontSize: "13px",
+                    lineHeight: "1.5",
+                    pointerEvents: "none",
+                    zIndex: 1000,
+                    whiteSpace: "nowrap",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                    borderLeft: `7px solid ${barGroupTooltip.color}`,
+                    fontFamily: '"Open Sans", verdana, arial, sans-serif',
+                    maxWidth: "250px",
+                }, children: [barGroupTooltipTitle, ": ", jsx("b", { children: barGroupTooltip.label })] }))] }));
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -100019,5 +100248,5 @@ var reactPlotlyWrapper$1 = /*#__PURE__*/Object.freeze({
   default: reactPlotlyWrapper
 });
 
-export { BarPlot, BoxPlot, HistogramPlot, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
+export { BarPlot, BoxPlot, HistogramPlot, LegendColorItem, LegendLineItem, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
 //# sourceMappingURL=index.esm.js.map