td-plots 1.10.0 → 1.10.1

package/dist/components/BoxPlot.d.ts

@@ -15,6 +15,7 @@ export interface BoxPlotDataTrace {
     color?: string;
     fill?: "auto" | "none";
     y?: number;
+    width?: number;
 }
 export interface BoxPlotProps {
     data: BoxPlotDataTrace[];

package/dist/components/PairedComparisonsBoxPlot.d.ts

@@ -17,6 +17,7 @@ export interface PairedComparisonsBoxPlotProps {
     containerStyleOverrides?: React.CSSProperties;
     showLegend?: boolean;
     plotId?: string;
+    unit?: string;
 }
 declare const PairedComparisonsBoxPlot: (props: PairedComparisonsBoxPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default PairedComparisonsBoxPlot;

package/dist/components/SummaryComparisonPlot.d.ts

@@ -20,6 +20,7 @@ export type SummaryComparisonPlotProps = {
     plotId?: string;
     tooltipPosition?: "left" | "right";
     startXAxisAtZero?: boolean;
+    unit?: string;
 };
 declare const SummaryComparisonPlot: (props: SummaryComparisonPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default SummaryComparisonPlot;

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) });
@@ -1618,10 +1604,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 +1624,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 +1647,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 +1705,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 +1765,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 +1787,7 @@ const PairedComparisonsBoxPlot = (props) => {
         shapes: [
             ...separatorShapes,
             ...differenceBetweenMediansLines,
-            ...groupAnnotations,
+            // ...groupAnnotations,
         ],
         annotations: differenceAnnotations,
     };
@@ -1780,7 +1798,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 +1880,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 +1892,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 +1907,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 +1920,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 +1974,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 +1984,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 +2034,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 = {