td-plots 1.11.1 → 1.11.3

package/dist/components/BarPlot.d.ts

@@ -38,6 +38,7 @@ export interface BarPlotProps {
     barHoverTemplate?: string;
     barGroups?: BarGroup[];
     barGroupTooltipTitle?: string;
+    d3FormatValueString?: string;
 }
 declare const BarPlot: (props: BarPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default BarPlot;

package/dist/components/SplitBoxPlot.d.ts

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

package/dist/components/SummaryComparisonPlot.d.ts

@@ -26,6 +26,7 @@ export type SummaryComparisonPlotProps = {
         populationMaxLabel?: string;
         userValueLabel?: string;
     };
+    d3FormatValueString?: string;
 };
 declare const SummaryComparisonPlot: (props: SummaryComparisonPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default SummaryComparisonPlot;

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 = [], d3FormatValueString = ".1f", addExtraYTitleRoom = false, } = props;
     // Transform the grouped data into an array for BoxPlot
     const boxPlotData = [
         ...groups.flatMap((group, groupIndex) => {
@@ -1923,25 +1922,14 @@ 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.
-    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
-        ? Math.max(0, ...additionalGroups.map((g) => g.label.length))
-        : 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 xshift = addExtraYTitleRoom ? -140 : -130; // Add extra shift if we're adding extra room for y-axis titles
     const yAxisTitleAnnotations = [];
     if (yAxisTitle) {
         const domainTop = additionalGroups.length > 0 ? yAxisSplitProportion - 0.01 : 1;
         yAxisTitleAnnotations.push({
             text: yAxisTitle,
-            x: yTitleLocationOverride || titleXPaper,
+            x: 0,
+            xshift: xshift,
             y: domainTop / 2,
             xref: "paper",
             yref: "paper",
@@ -1959,7 +1947,8 @@ const SplitBoxPlot = (props) => {
     if (secondYAxisTitle && additionalGroups.length > 0) {
         yAxisTitleAnnotations.push({
             text: secondYAxisTitle,
-            x: yTitleLocationOverride || titleXPaper,
+            x: 0,
+            xshift: xshift,
             y: (yAxisSplitProportion + 1) / 2,
             xref: "paper",
             yref: "paper",
@@ -1979,7 +1968,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",
@@ -1990,15 +1979,17 @@ const SplitBoxPlot = (props) => {
             ticklabelstandoff: 7,
             ticklabelposition: "outside left",
             title: { text: "" }, // rendered via annotation instead
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
         }, xaxis: {
             anchor: "y", // Anchor to primary y-axis
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
         }, margin: {
             t: title ? 50 : 70,
-            r: 50,
-            l: leftMargin,
+            r: 20,
+            l: 80, // Got to complicated to calculate. Adjust if necessary.
         }, shapes: [
             ...separatorShapes,
-            // ...differenceBetweenMediansLines,
             ...xAnnotations.map((annotation, annotationIndex) => ({
                 type: "line",
                 x0: annotation.x,
@@ -2018,12 +2009,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,
@@ -2050,6 +2042,7 @@ const SplitBoxPlot = (props) => {
             fixedrange: true,
             automargin: true,
             matches: "x", // Match the range of xaxis to keep them synchronized
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
         },
     })), (additionalGroups.length > 0 && {
         yaxis2: {
@@ -2085,7 +2078,7 @@ const Plot$2 = lazy(() => Promise.resolve().then(function () { return reactPlotl
 const SummaryComparisonPlot = (props) => {
     const { groups, userColor = "orange", height = 250, title = "", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "summary-comparison-plot", tooltipPosition = "right", startXAxisAtZero = true, unit = "", 
     // xAnnotations = [], TO DO
-    tooltipLabels = {}, } = props;
+    tooltipLabels = {}, d3FormatValueString = ".1f", } = props;
     // Ref for plot container
     const containerRef = useRef(null);
     // State for custom tooltip
@@ -2171,6 +2164,7 @@ const SummaryComparisonPlot = (props) => {
     };
     const comparedLines = [];
     const comparedAnnotations = [];
+    console.log("d3FormatValueString:", d3FormatValueString);
     // Transform the data into a format suitable for a plotly scatterplot
     const plotlyData = groups.flatMap((group, groupIndex) => {
         const traces = [];
@@ -2228,7 +2222,7 @@ const SummaryComparisonPlot = (props) => {
                 y: 1.1,
                 xref: "x",
                 yref: "paper",
-                text: `${group.data.userValue.toFixed(2)} ${unit}`,
+                text: `${format$1(d3FormatValueString)(group.data.userValue)} ${unit}`,
                 showarrow: false,
                 xanchor: "center",
                 yanchor: "bottom",
@@ -2243,9 +2237,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,
@@ -2269,7 +2264,7 @@ const SummaryComparisonPlot = (props) => {
         height: height,
         autosize: true,
         margin: {
-            l: 130,
+            l: 100,
             r: 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.
             t: title ? 70 : 40,
             b: 50,
@@ -2310,6 +2305,7 @@ const SummaryComparisonPlot = (props) => {
             zerolinewidth: 1,
             linecolor: "#bababa",
             linewidth: 1,
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
         },
         yaxis: {
             title: {
@@ -2647,25 +2643,41 @@ const BarPlot = (props) => {
     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;
+    d3FormatValueString = ".1f", } = 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 +2687,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;
@@ -2767,8 +2779,8 @@ const BarPlot = (props) => {
                 xref: "paper",
                 yref: "paper",
                 x0: 0,
-                y0: y2AxisPosition - 0.3, // Position behind the primary title
-                x1: 0.02 + title.length * 0.015, // Approximate width based on title length
+                y0: y2AxisPosition - 0.11, // Position behind the primary title
+                x1: 0.02 + title.length * 0.01, // Approximate width based on title length 0.3/
                 y1: y2AxisPosition - 0.01,
                 fillcolor: "rgba(255, 255, 255, 0.5)",
                 line: {
@@ -2837,8 +2849,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 +2867,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,13 +2909,16 @@ 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: {
                 text: xAxisTitle,
             },
             anchor: "y", // Anchor to primary y-axis
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
             showgrid: true,
             zeroline: false,
             showline: true,
@@ -2909,12 +2931,16 @@ 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",
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
         } }, (data2 && {
         xaxis2: {
             title: {
                 text: xAxis2Title,
+                standoff: 22,
             },
             side: "top",
             anchor: "y2", // Anchor to secondary y-axis
@@ -2931,13 +2957,16 @@ const BarPlot = (props) => {
             fixedrange: true,
             automargin: true,
             matches: "x", // Match the range of xaxis to keep them synchronized
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
         },
     })), { 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
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
+            nticks: 7, // Limit number of ticks to prevent overcrowding with the histogram
             automargin: true, // Required for standoff to work properly
             showgrid: true,
             zeroline: false,
@@ -2982,7 +3011,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 +3024,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 || "",