td-plots 1.11.0 → 1.11.1

package/dist/components/LegendUtils.d.ts

@@ -14,4 +14,7 @@ export type LegendBoxPlotItemProps = LegendItemProps & {
 };
 export declare const LegendBoxPlotItem: (props: LegendBoxPlotItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const LegendColorItem: (props: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const LegendLineItem: (props: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+export type LegendLineItemProps = LegendItemProps & {
+    strokeDasharray?: string;
+};
+export declare const LegendLineItem: (props: LegendLineItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SplitBoxPlot.d.ts

@@ -18,6 +18,7 @@ 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/components/SummaryComparisonPlot.d.ts

@@ -1,16 +1,16 @@
-type SummaryComparisonData = {
-    comparedMedian?: number;
-    summarizedMin?: number;
-    summarizedMax?: number;
-    summarizedMean?: number;
+type BracketData = {
+    userValue?: number;
+    populationMin: number;
+    populationMax: number;
 };
-type SummaryComparisonGroup = {
+type BracketDataWithMeta = {
     groupLabel: string;
-    data: SummaryComparisonData;
+    data: BracketData;
     color?: string;
 };
 export type SummaryComparisonPlotProps = {
-    groups: SummaryComparisonGroup[];
+    groups: BracketDataWithMeta[];
+    userColor?: string;
     width?: number;
     height?: number;
     title?: string;
@@ -21,6 +21,11 @@ export type SummaryComparisonPlotProps = {
     tooltipPosition?: "left" | "right";
     startXAxisAtZero?: boolean;
     unit?: string;
+    tooltipLabels?: {
+        populationMinLabel?: string;
+        populationMaxLabel?: string;
+        userValueLabel?: string;
+    };
 };
 declare const SummaryComparisonPlot: (props: SummaryComparisonPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default SummaryComparisonPlot;

package/dist/index.d.ts

@@ -19,6 +19,6 @@ export type { LineWithHistogramProps } from "./components/LineWithHistogram";
 export { default as BarPlot } from "./components/BarPlot";
 export type { BarPlotProps } from "./components/BarPlot";
 export { LegendColorItem, LegendLineItem } from "./components/LegendUtils";
-export type { LegendItemProps } from "./components/LegendUtils";
+export type { LegendItemProps, LegendLineItemProps, } from "./components/LegendUtils";
 export { isDateArray, isNumberArray } from "./components/Utils";
 export type { PlotParams } from "react-plotly.js";

package/dist/index.esm.js

@@ -1619,6 +1619,7 @@ const LegendColorItem = (props) => {
 const LegendLineItem = (props) => {
     const lineWidth = props.width || 40;
     const lineHeight = props.height || 4;
+    const dashArray = props.strokeDasharray || "";
     const labelKey = props.label == null
         ? ""
         : typeof props.label === "string"
@@ -1629,7 +1630,7 @@ const LegendLineItem = (props) => {
             alignItems: "center",
             mr: 4,
             fontFamily: "Open Sans, verdana, arial, sans-serif",
-        }, 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));
+        }, 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, strokeDasharray: dashArray }) }), props.label] }, labelKey));
 };
 
 // This component takes grouped data and transforms it for displaying with the BoxPlot component.
@@ -1818,7 +1819,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 = [], } = props;
+    const { groups, additionalGroups = [], width = 600, height = 400, title = "", xAxisTitle, yAxisTitle, secondXAxisTitle, secondYAxisTitle, containerStyleOverrides, plotId = "paired-comparisons-boxplot", xAnnotations = [], yTitleLocationOverride, } = props;
     // Transform the grouped data into an array for BoxPlot
     const boxPlotData = [
         ...groups.flatMap((group, groupIndex) => {
@@ -1922,6 +1923,57 @@ 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 yAxisTitleAnnotations = [];
+    if (yAxisTitle) {
+        const domainTop = additionalGroups.length > 0 ? yAxisSplitProportion - 0.01 : 1;
+        yAxisTitleAnnotations.push({
+            text: yAxisTitle,
+            x: yTitleLocationOverride || titleXPaper,
+            y: domainTop / 2,
+            xref: "paper",
+            yref: "paper",
+            showarrow: false,
+            textangle: "-90",
+            xanchor: "center",
+            yanchor: "middle",
+            font: {
+                family: '"Open Sans", verdana, arial, sans-serif',
+                size: 14,
+                color: "rgb(68, 68, 68)",
+            },
+        });
+    }
+    if (secondYAxisTitle && additionalGroups.length > 0) {
+        yAxisTitleAnnotations.push({
+            text: secondYAxisTitle,
+            x: yTitleLocationOverride || titleXPaper,
+            y: (yAxisSplitProportion + 1) / 2,
+            xref: "paper",
+            yref: "paper",
+            showarrow: false,
+            textangle: "-90",
+            xanchor: "center",
+            yanchor: "middle",
+            font: {
+                family: '"Open Sans", verdana, arial, sans-serif',
+                size: 14,
+                color: "rgb(68, 68, 68)",
+            }, // styled to look like plotly's default title styling
+        });
+    }
     const extraLayoutConfig = Object.assign(Object.assign({ yaxis: {
             type: "linear", // Use linear axis for numeric positioning of boxes
             tickmode: "array",
@@ -1929,44 +1981,44 @@ const SplitBoxPlot = (props) => {
             ticktext,
             automargin: true,
             range: [-0.5, groups.length - 0.5], // Add some padding to the y-axis range to accommodate the boxes
-            domain: additionalGroups ? [0, yAxisSplitProportion - 0.01] : [0, 1], // Ensure primary y-axis takes full height
+            domain: additionalGroups.length > 0 ? [0, yAxisSplitProportion - 0.01] : [0, 1], // Ensure primary y-axis takes full height
             tickcolor: "#ffffff",
             ticklen: 0,
+            ticksuffix: "", // clear the BoxPlot default suffix so label widths match yaxis2
             showgrid: false,
             //@ts-ignore
             ticklabelstandoff: 7,
             ticklabelposition: "outside left",
-            title: {
-                text: yAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
-                standoff: 45,
-            },
+            title: { text: "" }, // rendered via annotation instead
         }, xaxis: {
             anchor: "y", // Anchor to primary y-axis
         }, margin: {
-            t: title ? 50 : 40,
+            t: title ? 50 : 70,
             r: 50,
+            l: leftMargin,
         }, shapes: [
             ...separatorShapes,
             // ...differenceBetweenMediansLines,
-            ...xAnnotations.map((annotation) => ({
+            ...xAnnotations.map((annotation, annotationIndex) => ({
                 type: "line",
                 x0: annotation.x,
                 x1: annotation.x,
                 y0: 0,
-                y1: 1.05,
+                y1: 1.05 + annotationIndex * 0.05,
                 xref: "x",
                 yref: "paper",
                 line: {
                     color: annotation.color || "rgba(255, 0, 0, 0.7)",
                     width: 2,
-                    dash: "dash",
+                    dash: "dot",
                 },
             })),
         ], annotations: [
+            ...yAxisTitleAnnotations,
             // ...differenceAnnotations,
-            ...xAnnotations.map((annotation) => ({
+            ...xAnnotations.map((annotation, annotationIndex) => ({
                 x: annotation.x,
-                y: 1.06,
+                y: 1.05 + annotationIndex * 0.05, // Stack annotations above the plot with some spacing
                 xref: "x",
                 yref: "paper",
                 text: annotation.text || "",
@@ -1977,10 +2029,11 @@ const SplitBoxPlot = (props) => {
                     size: 12,
                 },
             })),
-        ] }, (additionalGroups && {
+        ] }, (additionalGroups.length > 0 && {
         xaxis2: {
             title: {
                 text: secondXAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
+                standoff: 10 + xAnnotations.length * 12, // Add extra space to accommodate annotations.
             },
             side: "top",
             anchor: "y2", // Anchor to secondary y-axis
@@ -1998,17 +2051,16 @@ const SplitBoxPlot = (props) => {
             automargin: true,
             matches: "x", // Match the range of xaxis to keep them synchronized
         },
-    })), (additionalGroups && {
+    })), (additionalGroups.length > 0 && {
         yaxis2: {
             domain: [yAxisSplitProportion, 1], // Adjust domain for secondary y-axis (histogram)
-            title: {
-                text: secondYAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
-                standoff: 45, // Add space between title and axis
-            },
+            title: { text: "" }, // rendered via annotation instead
             range: [-0.5, additionalGroups.length - 0.5], // Add some padding to the y-axis range to accommodate the boxes
             automargin: true, // Required for standoff to work properly
             showgrid: true,
             zeroline: false,
+            ticklen: 0,
+            ticksuffix: "",
             ticklabelposition: "outside left",
             showline: true,
             mirror: "ticks",
@@ -2025,15 +2077,15 @@ const SplitBoxPlot = (props) => {
             ticklabelstandoff: 7,
         },
     }));
-    console.log("extraLayoutConfig:", extraLayoutConfig);
     const containerStyles = Object.assign({ width: width, height: height, position: "relative", display: "flex", flexDirection: "column", gap: 0 }, containerStyleOverrides);
-    console.log(boxPlotData);
     return (jsx("div", { style: Object.assign({}, containerStyles), children: jsx(BoxPlot, { data: boxPlotData, width: width, height: height, title: title, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, extraLayoutConfig: extraLayoutConfig, containerStyleOverrides: containerStyleOverrides, plotId: `${plotId}-boxplot` }) }));
 };
 
 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, unit = "", } = 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;
     // Ref for plot container
     const containerRef = useRef(null);
     // State for custom tooltip
@@ -2063,40 +2115,42 @@ const SummaryComparisonPlot = (props) => {
         let tooltipX = event.event.clientX;
         let tooltipY = event.event.clientY;
         content += `<strong>${groupName}</strong><br/>`;
-        const summarizedMinText = groupData.summarizedMin
-            ? groupData.summarizedMin.toFixed(2)
-            : "NA";
-        const summarizedMaxText = groupData.summarizedMax
-            ? groupData.summarizedMax.toFixed(2)
+        const populationMinText = groupData.populationMin !== undefined
+            ? groupData.populationMin.toFixed(2)
             : "NA";
-        const comparedMedianText = groupData.comparedMedian !== undefined
-            ? groupData.comparedMedian.toFixed(2)
+        const populationMaxText = groupData.populationMax !== undefined
+            ? groupData.populationMax.toFixed(2)
             : "NA";
         content += `
       <table style="width: 100%; margin-top: 4px;">
         <tr>
-          <td style="text-align: left; padding: 2px 18px 2px 0;">Population avg-\u03C3:</td>
-          <td style="text-align: right; padding: 2px 0;">${summarizedMinText}</td>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">${tooltipLabels.populationMinLabel || "Population avg-\u03C3"}:</td>
+          <td style="text-align: right; padding: 2px 0;">${populationMinText}</td>
         </tr>
         <tr>
-          <td style="text-align: left; padding: 2px 18px 2px 0;">Population avg+\u03C3:</td>
-          <td style="text-align: right; padding: 2px 0;">${summarizedMaxText}</td>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">${tooltipLabels.populationMaxLabel || "Population avg+\u03C3"}:</td>
+          <td style="text-align: right; padding: 2px 0;">${populationMaxText}</td>
         </tr>
+        `;
+        if (groupData.userValue !== undefined) {
+            const userValueText = groupData.userValue.toFixed(2);
+            content += `
         <tr>
-          <td style="text-align: left; padding: 2px 18px 2px 0;">My Median:</td>
-          <td style="text-align: right; padding: 2px 0;">${comparedMedianText}</td>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">${tooltipLabels.userValueLabel || "My value"}:</td>
+          <td style="text-align: right; padding: 2px 0;">${userValueText}</td>
         </tr>
-      </table>
-    `;
+      `;
+        }
+        content += `</table></div>`;
         contentColor = eventData.line
             ? eventData.line.color
             : eventData.marker.color || contentColor;
-        // Position tooltip at the end of the line (75th percentile)
+        // Position tooltip at the end of the line (populationMax for right tooltip, populationMin for left tooltip)
         // Use the xaxis d2p method to convert data coordinate to pixel coordinate
         if (point.xaxis && typeof point.xaxis.d2p === "function") {
             const pixelX = tooltipPosition === "right"
-                ? point.xaxis.d2p(groupData.summarizedMax)
-                : point.xaxis.d2p(groupData.summarizedMin);
+                ? point.xaxis.d2p(groupData.populationMax)
+                : point.xaxis.d2p(groupData.populationMin);
             const pixelY = point.yaxis.d2p(eventData.y[0]); // Use the y coordinate of the line for vertical positioning
             const containerRect = (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             if (containerRect) {
@@ -2120,63 +2174,68 @@ const SummaryComparisonPlot = (props) => {
     // Transform the data into a format suitable for a plotly scatterplot
     const plotlyData = groups.flatMap((group, groupIndex) => {
         const traces = [];
-        if (group.data.summarizedMin !== undefined &&
-            group.data.summarizedMax !== undefined) {
-            traces.push({
-                type: "scatter",
-                mode: "lines",
-                name: group.groupLabel,
-                x: [group.data.summarizedMin, group.data.summarizedMax],
-                y: [groupIndex * 0.1, groupIndex * 0.1],
-                line: {
-                    color: colorToRGBA(group.color || "orange", 1),
-                    width: 6,
-                },
-                showlegend: false,
-                hoverinfo: "none",
-            });
-        }
-        if (group.data.comparedMedian !== undefined) {
-            traces.push({
-                type: "scatter",
-                mode: "markers",
-                name: group.groupLabel,
-                x: [group.data.comparedMedian],
-                y: [groupIndex * 0.1],
-                marker: {
-                    color: colorToRGBA(group.color || "orange", 1),
-                    size: 10,
-                    symbol: "circle",
-                    line: {
-                        color: "white",
-                        width: 1,
-                    },
-                },
-                showlegend: false,
-                hoverinfo: "none",
-            });
+        traces.push({
+            type: "scatter",
+            mode: "lines",
+            name: group.groupLabel,
+            x: [group.data.populationMin, group.data.populationMax],
+            y: [groupIndex * 0.1, groupIndex * 0.1],
+            line: {
+                color: colorToRGBA(group.color || "orange", 1),
+                width: 6,
+            },
+            showlegend: false,
+            hoverinfo: "none",
+        });
+        if (group.data.userValue !== undefined) {
+            const CIRCLE_RADIUS_PX = 6;
             comparedLines.push({
                 type: "line",
                 name: group.groupLabel,
-                x0: group.data.comparedMedian,
-                x1: group.data.comparedMedian,
+                x0: group.data.userValue,
+                x1: group.data.userValue,
                 y0: 0,
                 y1: 1.1,
                 yref: "paper",
                 line: {
-                    color: group.color || "orange",
+                    color: colorToRGBA(userColor, 1),
                     width: 2,
                 },
             });
+            comparedLines.push({
+                type: "circle",
+                xref: "x",
+                yref: "y",
+                // Pixel-mode: xanchor/yanchor are data coords for the center;
+                // x0/x1/y0/y1 are pixel offsets, so the circle stays a fixed
+                // visual size regardless of the axis scale.
+                xsizemode: "pixel",
+                ysizemode: "pixel",
+                xanchor: group.data.userValue,
+                yanchor: groupIndex * 0.1,
+                x0: -CIRCLE_RADIUS_PX,
+                x1: CIRCLE_RADIUS_PX,
+                y0: -CIRCLE_RADIUS_PX,
+                y1: CIRCLE_RADIUS_PX,
+                fillcolor: colorToRGBA(userColor, 1),
+                line: {
+                    color: "white",
+                    width: 1,
+                },
+            });
             comparedAnnotations.push({
-                x: group.data.comparedMedian,
-                y: 1.08,
+                x: group.data.userValue,
+                y: 1.1,
                 xref: "x",
                 yref: "paper",
-                text: `${group.data.comparedMedian.toFixed(2)} ${unit}`,
+                text: `${group.data.userValue.toFixed(2)} ${unit}`,
                 showarrow: false,
                 xanchor: "center",
                 yanchor: "bottom",
+                font: {
+                    color: colorToRGBA(userColor, 1),
+                    size: 12,
+                },
             });
         }
         return traces;
@@ -2185,7 +2244,7 @@ const SummaryComparisonPlot = (props) => {
     if (comparedAnnotations.length > 0) {
         comparedAnnotations.push({
             x: -0.03, // Position to the left of the y-axis
-            y: 1.03,
+            y: 1.1, // Should match the y position of the compared median annotation
             xref: "paper",
             yref: "paper",
             text: "My AVG",
@@ -2194,14 +2253,17 @@ const SummaryComparisonPlot = (props) => {
             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);
-    }, 0);
+    // xRangeMin a little funky because we want to ensure a non-zero value is calculated
+    // in case startXAxisAtZero is false. populationMin is our anchor and
+    // if that is not defined then we can fall back to a min of 0. If userValue is not defined
+    // we want to listen to populationMin for computing xRangeMin.
+    const xRangeMin = groups.reduce((min, group) => { var _a; return Math.min(min, group.data.populationMin, (_a = group.data.userValue) !== null && _a !== void 0 ? _a : Infinity); }, Infinity);
+    // Similar logic for xRangeMax. If nothing is defined, set the max to 0.
+    // Otherwise, listen to populationMax and userValue if given.
     const xRangeMax = groups.reduce((max, group) => {
-        var _a, _b;
-        return Math.max(max, (_a = group.data.summarizedMax) !== null && _a !== void 0 ? _a : -Infinity, (_b = group.data.comparedMedian) !== null && _b !== void 0 ? _b : -Infinity);
-    }, 0);
+        var _a;
+        return Math.max(max, group.data.populationMax, (_a = group.data.userValue) !== null && _a !== void 0 ? _a : -Infinity);
+    }, -Infinity);
     const layout = {
         width: undefined,
         height: height,
@@ -2250,6 +2312,12 @@ const SummaryComparisonPlot = (props) => {
             linewidth: 1,
         },
         yaxis: {
+            title: {
+                text: yAxisTitle,
+                font: {
+                    size: 14,
+                },
+            },
             mirror: "ticks",
             gridcolor: "#efefef",
             gridwidth: 0.2,
@@ -2323,12 +2391,26 @@ const SummaryComparisonPlotLegend = ({ comparedDataLabel, summarizedDataLabel, c
             gap: "20px",
             alignItems: "center",
             flexDirection: "row",
-        }, children: [jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsx(Box, { sx: {
+        }, children: [jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsxs("div", { style: {
+                            position: "relative",
                             width: 13,
-                            height: 13,
-                            backgroundColor: color,
-                            borderRadius: "20px",
-                        } }), jsx("span", { children: comparedDataLabel })] }), jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsx(Box, { sx: { width: 30, height: 3, backgroundColor: color } }), jsx("span", { children: summarizedDataLabel })] })] }));
+                            height: 20,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: [jsx(Box, { sx: {
+                                    position: "absolute",
+                                    width: 3,
+                                    height: 20,
+                                    backgroundColor: color,
+                                } }), jsx(Box, { sx: {
+                                    position: "relative",
+                                    width: 10,
+                                    height: 10,
+                                    backgroundColor: color,
+                                    borderRadius: "20px",
+                                    border: `1px solid white`,
+                                } })] }), jsx("span", { children: comparedDataLabel })] }), jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsx(Box, { sx: { width: 30, height: 5, backgroundColor: color } }), jsx("span", { children: summarizedDataLabel })] })] }));
 };
 
 const Plot$1 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));