td-plots 1.11.1 → 1.11.2

package/dist/components/SplitBoxPlot.d.ts

@@ -18,7 +18,6 @@ export interface SplitBoxPlotProps {
         text?: string;
         color?: string;
     }[];
-    yTitleLocationOverride?: number;
 }
 declare const SplitBoxPlot: (props: SplitBoxPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitBoxPlot;

package/dist/index.esm.js

@@ -1538,7 +1538,6 @@ const BoxPlot = (props) => {
         staticPlot: false, // Enable interactivity
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    console.log("layout:", layout); // Debugging log to inspect the final layout object
     return (jsx("div", { ref: containerRef, 
         // className={`plot-container ${plotId}`}
         style: Object.assign({}, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsxs("div", { style: {
@@ -1819,7 +1818,7 @@ const PairedComparisonsBoxPlot = (props) => {
 // This component shows a set of main boxplots as one collection, then allowes for additional
 // boxes to be shown in a subplot above the main boxplots for comparison.
 const SplitBoxPlot = (props) => {
-    const { groups, additionalGroups = [], width = 600, height = 400, title = "", xAxisTitle, yAxisTitle, secondXAxisTitle, secondYAxisTitle, containerStyleOverrides, plotId = "paired-comparisons-boxplot", xAnnotations = [], yTitleLocationOverride, } = props;
+    const { groups, additionalGroups = [], width = 600, height = 400, title = "", xAxisTitle, yAxisTitle, secondXAxisTitle, secondYAxisTitle, containerStyleOverrides, plotId = "paired-comparisons-boxplot", xAnnotations = [], } = props;
     // Transform the grouped data into an array for BoxPlot
     const boxPlotData = [
         ...groups.flatMap((group, groupIndex) => {
@@ -1923,8 +1922,9 @@ const SplitBoxPlot = (props) => {
     });
     const totalGroups = groups.length + additionalGroups.length;
     const yAxisSplitProportion = additionalGroups.length > 0 ? groups.length / totalGroups : 1;
-    // Render y-axis titles as annotations so both always land at the same paper x,
-    // Using this annotations approach because we found the standoff prop to be unreliable across subplots with different label widths.
+    // Render y-axis titles as annotations so we can specifically set xshift in px from the axis.
+    // Calculating approximate label width in pixels to ensure the title is far enough away from the longest label,
+    // with a minimum distance to look good even with short labels.
     const charWidth = 8; // ~px per character for Open Sans 14px (Plotly title font)
     const primaryMaxChars = Math.max(0, ...groups.map((g) => g.label.length));
     const secondaryMaxChars = additionalGroups.length > 0
@@ -1932,16 +1932,13 @@ const SplitBoxPlot = (props) => {
         : primaryMaxChars;
     const maxLabelChars = Math.max(primaryMaxChars, secondaryMaxChars);
     const approxLabelPx = maxLabelChars * charWidth;
-    const leftMargin = approxLabelPx + 75; // tick labels + title + gaps
-    const plotContentWidth = Math.max(1, width - leftMargin - 50);
-    // 0.83 corrects for charWidth=8 overestimating rendered tick-label width (Open Sans 12px ≈ 6.6px/char)
-    const titleXPaper = -(approxLabelPx * 0.83) / plotContentWidth;
     const yAxisTitleAnnotations = [];
     if (yAxisTitle) {
         const domainTop = additionalGroups.length > 0 ? yAxisSplitProportion - 0.01 : 1;
         yAxisTitleAnnotations.push({
             text: yAxisTitle,
-            x: yTitleLocationOverride || titleXPaper,
+            x: 0,
+            xshift: -120,
             y: domainTop / 2,
             xref: "paper",
             yref: "paper",
@@ -1959,7 +1956,8 @@ const SplitBoxPlot = (props) => {
     if (secondYAxisTitle && additionalGroups.length > 0) {
         yAxisTitleAnnotations.push({
             text: secondYAxisTitle,
-            x: yTitleLocationOverride || titleXPaper,
+            x: 0,
+            xshift: -120,
             y: (yAxisSplitProportion + 1) / 2,
             xref: "paper",
             yref: "paper",
@@ -1979,7 +1977,7 @@ const SplitBoxPlot = (props) => {
             tickmode: "array",
             tickvals,
             ticktext,
-            automargin: true,
+            // automargin: true,
             range: [-0.5, groups.length - 0.5], // Add some padding to the y-axis range to accommodate the boxes
             domain: additionalGroups.length > 0 ? [0, yAxisSplitProportion - 0.01] : [0, 1], // Ensure primary y-axis takes full height
             tickcolor: "#ffffff",
@@ -1994,8 +1992,8 @@ const SplitBoxPlot = (props) => {
             anchor: "y", // Anchor to primary y-axis
         }, margin: {
             t: title ? 50 : 70,
-            r: 50,
-            l: leftMargin,
+            r: 20,
+            l: Math.max(130, approxLabelPx + 40),
         }, shapes: [
             ...separatorShapes,
             // ...differenceBetweenMediansLines,
@@ -2018,12 +2016,13 @@ const SplitBoxPlot = (props) => {
             // ...differenceAnnotations,
             ...xAnnotations.map((annotation, annotationIndex) => ({
                 x: annotation.x,
-                y: 1.05 + annotationIndex * 0.05, // Stack annotations above the plot with some spacing
+                y: 1,
                 xref: "x",
                 yref: "paper",
                 text: annotation.text || "",
                 showarrow: false,
                 yanchor: "bottom",
+                yshift: 18 + annotationIndex * 20, // stack in pixels — stable across screen sizes
                 font: {
                     color: annotation.color || "rgba(255, 0, 0, 0.7)",
                     size: 12,
@@ -2243,9 +2242,10 @@ const SummaryComparisonPlot = (props) => {
     // 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
+            x: 0, // Position to the left of the y-axis
             y: 1.1, // Should match the y position of the compared median annotation
             xref: "paper",
+            xshift: -10,
             yref: "paper",
             text: "My AVG",
             showarrow: false,
@@ -2651,21 +2651,37 @@ const BarPlot = (props) => {
     // Ref for plot container
     const containerRef = useRef(null);
     const plotMetaRef = useRef(null);
+    // Pixel offsets from the x-axis line for the bar group shapes.
+    // 45px clears tick marks + labels + axis title; the 15px band sits below all of them.
+    const BAR_GROUP_SHAPE_TOP_PX = 8;
+    const BAR_GROUP_SHAPE_HEIGHT_PX = 20;
+    // px above the top of the plot area — lands between x2 tick labels (~15px) and x2 title (~35px)
+    const X_ANNOTATION_TOP_PX = 22;
+    // Tracks the rendered plot area height so we can convert the shape's fixed pixel
+    // center back into a paper y coordinate for the annotation.
+    const [plotAreaHeight, setPlotAreaHeight] = useState(300);
     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;
+        var _a, _b, _c, _d, _e, _f;
         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;
+            const h = (_d = graphDiv._fullLayout) === null || _d === void 0 ? void 0 : _d.height;
             if (m && r) {
                 plotMetaRef.current = {
                     xRange: r,
                     margin: { l: m.l, r: m.r, t: m.t, b: m.b },
+                    height: (_f = h !== null && h !== void 0 ? h : (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 400,
                 };
+                if (h) {
+                    const newPlotH = h - m.t - m.b;
+                    if (newPlotH > 0)
+                        setPlotAreaHeight(newPlotH);
+                }
             }
         }
-        catch (_d) { }
+        catch (_g) { }
     };
     const handleBarGroupMouseMove = (e) => {
         var _a;
@@ -2675,18 +2691,18 @@ const BarPlot = (props) => {
             setBarGroupTooltip(null);
             return;
         }
-        const { xRange, margin } = plotMetaRef.current;
+        const { xRange, margin, height: plotlyHeight } = 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.
+        // Use Plotly's own reported height so plotBottom is consistent with the margin values
+        const plotBottom = plotlyHeight - margin.b - 35; // Subtracting and extra 35px to finally get it in the right spot.
+        // Shapes use yanchor=0 (x-axis line) with negative pixel y values, which maps to
+        // positive screen-y (downward). Strip bounds mirror those pixel offsets exactly.
+        const stripTop = plotBottom;
+        const stripBottom = plotBottom + BAR_GROUP_SHAPE_TOP_PX + BAR_GROUP_SHAPE_HEIGHT_PX + 5; // Give a little extra room on the bottom.
         if (mouseY < stripTop || mouseY > stripBottom) {
             setBarGroupTooltip(null);
             return;
@@ -2837,8 +2853,12 @@ const BarPlot = (props) => {
             yref: "paper",
             x0: group.min,
             x1: group.max > xMax ? xMax + barWidth : group.max,
-            y0: -0.02,
-            y1: -0.07,
+            // Anchor at the x-axis line (paper y=0) so the pixel offset is consistent
+            // regardless of plot height — avoids overlap with tick labels on small screens.
+            yanchor: 0,
+            ysizemode: "pixel",
+            y0: -BAR_GROUP_SHAPE_TOP_PX,
+            y1: -28,
             fillcolor: group.color,
             line: {
                 width: 1,
@@ -2851,7 +2871,10 @@ const BarPlot = (props) => {
             xref: "x",
             yref: "paper",
             x: barGroups[0].min + barDataWidth / 2,
-            y: -0.043,
+            // Convert the pixel center of the shape band to a paper y coordinate using
+            // the actual rendered plot area height so it stays inside the shape on any screen size.
+            y: -18 /
+                plotAreaHeight,
             text: barGroupTooltipTitle,
             showarrow: false,
             yanchor: "middle",
@@ -2890,7 +2913,9 @@ const BarPlot = (props) => {
             l: 50,
             r: 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.
             t: 40 + (title ? 50 : 0), // Add extra top margin if there is a title
-            b: 50,
+            b: barGroups.length > 0
+                ? BAR_GROUP_SHAPE_TOP_PX + BAR_GROUP_SHAPE_HEIGHT_PX + 15
+                : 50,
             pad: 4,
         }, xaxis: {
             title: {
@@ -2909,12 +2934,15 @@ const BarPlot = (props) => {
             linewidth: 1,
             fixedrange: true, // Disable zooming
             automargin: true, // Adjust margin if tick labels rotate
-            ticklen: 21,
+            ticklen: barGroups.length > 0
+                ? BAR_GROUP_SHAPE_TOP_PX + BAR_GROUP_SHAPE_HEIGHT_PX
+                : 8, // tick length in px.
             tickcolor: "white",
         } }, (data2 && {
         xaxis2: {
             title: {
                 text: xAxis2Title,
+                standoff: 22,
             },
             side: "top",
             anchor: "y2", // Anchor to secondary y-axis
@@ -2935,7 +2963,7 @@ const BarPlot = (props) => {
     })), { yaxis: {
             title: {
                 text: yAxisTitle !== null && yAxisTitle !== void 0 ? yAxisTitle : "Count",
-                standoff: 12, // Add space between title and axis
+                standoff: 15, // Add space between title and axis
             },
             domain: data2 ? [0, y2AxisPosition - 0.01] : [0, 1], // Ensure primary y-axis takes full height
             automargin: true, // Required for standoff to work properly
@@ -2982,7 +3010,7 @@ const BarPlot = (props) => {
                 x0: annotation.x,
                 x1: annotation.x,
                 y0: 0,
-                y1: 1.05,
+                y1: 1 + (X_ANNOTATION_TOP_PX - 4) / plotAreaHeight,
                 xref: "x",
                 yref: "paper",
                 line: {
@@ -2995,7 +3023,7 @@ const BarPlot = (props) => {
             ...(barGroupShapeAnnotation ? [barGroupShapeAnnotation] : []),
             ...xAnnotations.map((annotation) => ({
                 x: annotation.x,
-                y: 1.06,
+                y: 1 + X_ANNOTATION_TOP_PX / plotAreaHeight,
                 xref: "x",
                 yref: "paper",
                 text: annotation.text || "",