td-plots 1.10.2 → 1.11.0

package/dist/components/BoxPlot.d.ts

@@ -16,6 +16,8 @@ export interface BoxPlotDataTrace {
     fill?: "auto" | "none";
     y?: number;
     width?: number;
+    xaxis?: string;
+    yaxis?: string;
 }
 export interface BoxPlotProps {
     data: BoxPlotDataTrace[];

package/dist/components/SplitBoxPlot.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { BoxPlotDataTrace } from "./BoxPlot";
+export interface SplitBoxPlotProps {
+    groups: BoxPlotDataTrace[];
+    additionalGroups?: BoxPlotDataTrace[];
+    width?: number;
+    height?: number;
+    title?: string;
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    secondXAxisTitle?: string;
+    secondYAxisTitle?: string;
+    containerStyleOverrides?: React.CSSProperties;
+    plotId?: string;
+    unit?: string;
+    xAnnotations?: {
+        x: number;
+        text?: string;
+        color?: string;
+    }[];
+}
+declare const SplitBoxPlot: (props: SplitBoxPlotProps) => import("react/jsx-runtime").JSX.Element;
+export default SplitBoxPlot;

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { default as PairedComparisonsBoxPlot } from "./components/PairedComparis
 export type { PairedComparisonsBoxPlotProps } from "./components/PairedComparisonsBoxPlot";
 export { default as BoxPlot } from "./components/BoxPlot";
 export type { BoxPlotProps } from "./components/BoxPlot";
+export { default as SplitBoxPlot } from "./components/SplitBoxPlot";
+export type { SplitBoxPlotProps } from "./components/SplitBoxPlot";
 export { default as SummaryComparisonPlot } from "./components/SummaryComparisonPlot";
 export type { SummaryComparisonPlotProps } from "./components/SummaryComparisonPlot";
 export { SummaryComparisonPlotLegend } from "./components/SummaryComparisonPlot";

package/dist/index.esm.js

@@ -1512,12 +1512,13 @@ const BoxPlot = (props) => {
             : {
                 x: trace.values,
                 y0: trace.y !== undefined ? trace.y : undefined,
+                showMean: true,
             }; // 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", // Disable default hover
-            width: trace.width }, boxDefinition);
+            width: trace.width, xaxis: trace.xaxis, yaxis: trace.yaxis }, boxDefinition);
     });
     const layout = Object.assign(Object.assign({}, extraLayoutConfig), { title: {
             text: title,
@@ -1537,6 +1538,7 @@ 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: {
@@ -1666,19 +1668,6 @@ const PairedComparisonsBoxPlot = (props) => {
             },
         };
     });
-    groups.map((group, groupIndex) => ({
-        type: "line",
-        yref: "y",
-        xref: "paper",
-        x0: -0.01,
-        x1: -0.01,
-        y0: groupIndex - 0.4, // Align with the center of the group
-        y1: groupIndex + 0.4,
-        line: {
-            color: group.color || "orange",
-            width: 7,
-        },
-    }));
     const differenceAnnotations = [];
     const differenceBetweenMediansLines = [];
     // Find reasonable max and min for the x axis.
@@ -1818,11 +1807,7 @@ const PairedComparisonsBoxPlot = (props) => {
             t: 5,
             r: 50,
         },
-        shapes: [
-            ...separatorShapes,
-            ...differenceBetweenMediansLines,
-            // ...groupAnnotations,
-        ],
+        shapes: [...separatorShapes, ...differenceBetweenMediansLines],
         annotations: differenceAnnotations,
     };
     const legendNode = (jsxs(Box$1, { sx: { display: "flex", justifyContent: "flex-end", mb: 2 }, children: [jsx(LegendBoxPlotItem, { label: pairLabels[0], color: "#626280", boxStyle: "shaded" }), jsx(LegendBoxPlotItem, { label: pairLabels[1], color: "#626280", boxStyle: "outlined" })] }));
@@ -1830,6 +1815,222 @@ const PairedComparisonsBoxPlot = (props) => {
     return (jsxs("div", { style: Object.assign({}, containerStyles), children: [showLegend && legendNode, jsx(BoxPlot, { data: boxPlotData, width: width, height: height, title: title, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, extraLayoutConfig: extraLayoutConfig, containerStyleOverrides: containerStyleOverrides, plotId: `${plotId}-boxplot` })] }));
 };
 
+// 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;
+    // 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
+            const groupColor = group.color || "orange";
+            return Object.assign(Object.assign({}, group), { color: group.color || groupColor, width: 0.28, fill: "none", y: groupYPosition, yaxis: "y" });
+        }),
+        ...additionalGroups.map((group, groupIndex) => {
+            return Object.assign(Object.assign({}, group), { color: group.color || "blue", y: groupIndex, xaxis: "x2", yaxis: "y2", fill: "auto", width: 0.28 });
+        }),
+    ];
+    // We have to construct nice ticks. We can position them with the group indices.
+    const tickvals = groups.map((_, index) => index);
+    const ticktext = groups.map((group) => group.label);
+    // Draw some gray rectangles to live behind the boxes to help separate the groups
+    const separatorShapes = groups.map((group, groupIndex) => {
+        return {
+            type: "rect",
+            x0: 0,
+            x1: 1,
+            xref: "paper",
+            y0: groupIndex - 0.5,
+            y1: groupIndex + 0.5,
+            yref: "y",
+            fillcolor: groupIndex % 2 === 0 ? "#ffffff" : "#e7e5e5",
+            opacity: 0.2,
+            layer: "below",
+            line: {
+                width: 0,
+            },
+        };
+    });
+    // Leaving these for now because we're planning to use them in a tooltip or on hover.
+    const differenceAnnotations = [];
+    // Find reasonable max and min for the x axis.
+    let globalMin = Infinity;
+    let globalMax = -Infinity;
+    // The following is only for updating difference annotations.
+    groups.forEach((group, groupIndex) => {
+        // Update global min and max
+        if (isBoxPlotDataSummary(group.values)) {
+            globalMin = Math.min(globalMin, group.values.lowerWhisker);
+            globalMax = Math.max(globalMax, group.values.upperWhisker);
+        }
+        else if (Array.isArray(group.values)) {
+            const boxMin = Math.min(...group.values);
+            const boxMax = Math.max(...group.values);
+            globalMin = Math.min(globalMin, boxMin);
+            globalMax = Math.max(globalMax, boxMax);
+        }
+        if (additionalGroups.length === 0 ||
+            group.label !== additionalGroups[0].label) {
+            return; // Don't show an annotation if we don't have data for both boxes
+        }
+        const medianA = isBoxPlotDataSummary(group.values)
+            ? group.values.median
+            : computeMedian(group.values);
+        const medianB = isBoxPlotDataSummary(group.values)
+            ? group.values.median
+            : computeMedian(group.values);
+        const q1A = isBoxPlotDataSummary(group.values)
+            ? group.values.q1
+            : computeQuartile(group.values, 1);
+        const q3A = isBoxPlotDataSummary(group.values)
+            ? group.values.q3
+            : computeQuartile(group.values, 3);
+        const q1B = isBoxPlotDataSummary(group.values)
+            ? group.values.q1
+            : computeQuartile(group.values, 1);
+        const q3B = isBoxPlotDataSummary(group.values)
+            ? group.values.q3
+            : computeQuartile(group.values, 3);
+        const differenceBetweenMedians = medianB - medianA;
+        // If we have the quartiles for the first box, we can determine if the second box's median is inside or outside the box
+        const annotationColor = isBoxPlotDataSummary(group.values)
+            ? q3B < q1A || q1B > q3A
+                ? "red"
+                : medianB < q1A || medianB > q3A
+                    ? "orange"
+                    : "gray"
+            : "gray";
+        if (annotationColor === "gray") {
+            return; // Don't show an annotation if the medians are close enough that they overlap in the boxes
+        }
+        differenceAnnotations.push({
+            yref: "y",
+            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)}${props.unit ? ` ${props.unit}` : ""}   `, // Show the difference between the medians with optional unit
+            showarrow: false,
+            xanchor: "left",
+            align: "left",
+            font: {
+                size: 16,
+                color: annotationColor,
+                style: "italic",
+                weight: "bold",
+            },
+        });
+    });
+    const totalGroups = groups.length + additionalGroups.length;
+    const yAxisSplitProportion = additionalGroups.length > 0 ? groups.length / totalGroups : 1;
+    const extraLayoutConfig = Object.assign(Object.assign({ yaxis: {
+            type: "linear", // Use linear axis for numeric positioning of boxes
+            tickmode: "array",
+            tickvals,
+            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
+            tickcolor: "#ffffff",
+            ticklen: 0,
+            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,
+            },
+        }, xaxis: {
+            anchor: "y", // Anchor to primary y-axis
+        }, margin: {
+            t: title ? 50 : 40,
+            r: 50,
+        }, shapes: [
+            ...separatorShapes,
+            // ...differenceBetweenMediansLines,
+            ...xAnnotations.map((annotation) => ({
+                type: "line",
+                x0: annotation.x,
+                x1: annotation.x,
+                y0: 0,
+                y1: 1.05,
+                xref: "x",
+                yref: "paper",
+                line: {
+                    color: annotation.color || "rgba(255, 0, 0, 0.7)",
+                    width: 2,
+                    dash: "dash",
+                },
+            })),
+        ], annotations: [
+            // ...differenceAnnotations,
+            ...xAnnotations.map((annotation) => ({
+                x: annotation.x,
+                y: 1.06,
+                xref: "x",
+                yref: "paper",
+                text: annotation.text || "",
+                showarrow: false,
+                yanchor: "bottom",
+                font: {
+                    color: annotation.color || "rgba(255, 0, 0, 0.7)",
+                    size: 12,
+                },
+            })),
+        ] }, (additionalGroups && {
+        xaxis2: {
+            title: {
+                text: secondXAxisTitle || "", // Set default to empty string to prevent Plotly from adding its own default title
+            },
+            side: "top",
+            anchor: "y2", // Anchor to secondary y-axis
+            showgrid: true,
+            zeroline: false,
+            showline: true,
+            showticklabels: true, // Show x-axis tick labels for histogram
+            gridcolor: "#efefef",
+            gridwidth: 0.2,
+            zerolinecolor: "#969696",
+            zerolinewidth: 1,
+            linecolor: "#bababa",
+            linewidth: 1,
+            fixedrange: true,
+            automargin: true,
+            matches: "x", // Match the range of xaxis to keep them synchronized
+        },
+    })), (additionalGroups && {
+        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
+            },
+            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,
+            ticklabelposition: "outside left",
+            showline: true,
+            mirror: "ticks",
+            gridcolor: "#efefef",
+            gridwidth: 0.2,
+            zerolinecolor: "#969696",
+            zerolinewidth: 1,
+            linecolor: "#bababa",
+            linewidth: 1,
+            fixedrange: true, // Disable zooming
+            ticktext: additionalGroups.map((group) => group.label), // Use additional group labels for secondary y-axis ticks
+            tickvals: additionalGroups.map((_, index) => index), // Position ticks based on the number of additional groups
+            tickanchor: "end",
+            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;
@@ -100248,5 +100449,5 @@ var reactPlotlyWrapper$1 = /*#__PURE__*/Object.freeze({
   default: reactPlotlyWrapper
 });
 
-export { BarPlot, BoxPlot, HistogramPlot, LegendColorItem, LegendLineItem, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
+export { BarPlot, BoxPlot, HistogramPlot, LegendColorItem, LegendLineItem, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, SplitBoxPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
 //# sourceMappingURL=index.esm.js.map