td-plots 1.7.2 → 1.8.2

package/dist/index.js

@@ -8,6 +8,8 @@ var Button = require('@mui/material/Button');
 var Tooltip = require('@mui/material/Tooltip');
 var utils = require('@mui/material/utils');
 var IconButton = require('@mui/material/IconButton');
+var material = require('@mui/material');
+var Box = require('@mui/material/Box');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -36,7 +38,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".plot-container{height:100%;max-width:100%;min-height:300px;overflow:hidden!important;position:relative;width:100%}.plot-container>div{flex:1;height:100%!important;width:100%!important}.plot-container .main-svg{max-height:100%!important;max-width:100%!important}.plot-container .main-svg,.plot-container .plotly-graph-div,.plot-container svg.main-svg[height],.plot-container svg.main-svg[width]{height:100%!important;width:100%!important}.plot-container .point{border-radius:5px!important;overflow:hidden!important}.plot-container .cursor-ns-resize{height:0;width:0}.plot-container .cursor-ew-resize{fill:var(--selection-color,blue)!important;stroke:var(--selection-color,blue)!important}.plot-container .selectionlayer>path{stroke:var(--selection-color,blue)!important;stroke-dasharray:0!important;stroke-width:1px!important;opacity:.5!important}.plot-container .zoomlayer>path{stroke-dasharray:0!important;stroke:var(--selection-color,blue)!important;fill:var(--selection-color,blue)!important}.radial-histogram-container{aspect-ratio:1}.loading-overlay{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:300}.histogram-controls{pointer-events:auto}.histogram-controls.show-always{opacity:1;visibility:visible}.histogram-controls.show-on-hover{opacity:0;transition:opacity .2s ease-in-out,visibility .2s ease-in-out;visibility:hidden}.plot-container:hover .histogram-controls.show-on-hover{opacity:1;visibility:visible}";
+var css_248z = ".plot-container{height:100%;max-width:100%;min-height:300px;overflow:hidden!important;position:relative;width:100%}.plot-container>div{flex:1;width:100%!important}.plot-container .main-svg{max-height:100%!important;max-width:100%!important}.plot-container .main-svg,.plot-container .plotly-graph-div,.plot-container svg.main-svg[height],.plot-container svg.main-svg[width]{height:100%!important;width:100%!important}.plot-container .point{border-radius:5px!important;overflow:hidden!important}.plot-container .cursor-ns-resize{height:0;width:0}.plot-container .cursor-ew-resize{fill:var(--selection-color,blue)!important;stroke:var(--selection-color,blue)!important}.plot-container .selectionlayer>path{stroke:var(--selection-color,blue)!important;stroke-dasharray:0!important;stroke-width:1px!important;opacity:.5!important}.plot-container .zoomlayer>path{stroke-dasharray:0!important;stroke:var(--selection-color,blue)!important;fill:var(--selection-color,blue)!important}.radial-histogram-container{aspect-ratio:1}.loading-overlay{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:300}.histogram-controls{pointer-events:auto}.histogram-controls.show-always{opacity:1;visibility:visible}.histogram-controls.show-on-hover{opacity:0;transition:opacity .2s ease-in-out,visibility .2s ease-in-out;visibility:hidden}.histogram .plot-container:hover .histogram-controls.show-on-hover{opacity:1;visibility:visible}";
 styleInject(css_248z);
 
 function formatDecimal(x) {
@@ -424,6 +426,47 @@ const plotlyMToMilliseconds = (mString) => {
     }
     return 0;
 };
+// Helper function to convert color to rgba with specified opacity
+const colorToRGBA = (color, opacity) => {
+    // For named colors, create a temporary element to get computed rgb
+    // This is a fallback that works in browser environments
+    const temp = document.createElement("div");
+    temp.style.color = color;
+    document.body.appendChild(temp);
+    const computed = window.getComputedStyle(temp).color;
+    document.body.removeChild(temp);
+    const rgbMatch = computed.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (rgbMatch) {
+        return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${opacity})`;
+    }
+    // Fallback: return original color
+    return color;
+};
+const computeMedian = (data) => {
+    if (data.length === 0) {
+        return 0;
+    }
+    const values = data.sort((a, b) => a - b);
+    const mid = Math.floor(values.length / 2);
+    return values.length % 2 !== 0
+        ? values[mid]
+        : (values[mid - 1] + values[mid]) / 2;
+};
+const computeQuartile = (data, quartile) => {
+    if (data.length === 0) {
+        return 0;
+    }
+    const values = data.sort((a, b) => a - b);
+    const pos = (values.length - 1) * (quartile / 4);
+    const base = Math.floor(pos);
+    const rest = pos - base;
+    if (values[base + 1] !== undefined) {
+        return values[base] + rest * (values[base + 1] - values[base]);
+    }
+    else {
+        return values[base];
+    }
+};
 
 // Loading component renders a circular spinner above an element (usually a plot)
 const Loading = () => {
@@ -498,7 +541,7 @@ var SettingsIcon = utils.createSvgIcon(/*#__PURE__*/jsxRuntime.jsx("path", {
   d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"
 }), 'Settings');
 
-const Plot$3 = React.lazy(() => import('react-plotly.js'));
+const Plot$6 = React.lazy(() => import('react-plotly.js'));
 const HistogramPlot = (props) => {
     var _a, _b, _c, _d;
     const { data, title, xAxisTitle, barColor = "rgb(72, 72, 74)", unselectedBarColor = "rgba(203, 195, 195, 0.88)", selectorsColor = "black", containerStyleOverrides, unselectedData = [], handleClickOrSelection = () => { }, onDeselect = () => { }, plotId, selectByBin = false, dateTickFormat, binSizeOverride, statsAnnotations = ["mean"], emptySelectedRange = false, d3FormatValueString = ".1f", showBinSizeControls = "always", onBinSizeCalculated, onBinSizeChange, showBinSizeControlValue = true, isMobile = false, settingsTitleStylingOverrides = {}, } = props;
@@ -1133,7 +1176,9 @@ const HistogramPlot = (props) => {
                     .map((n) => n * ONEAVGMONTH)
                     .concat([defaultBinSize])
                 : unitOfTime === "day"
-                    ? [1, 2, 3, 5, 7, 30].map((n) => n * ONEDAY).concat([defaultBinSize])
+                    ? [1, 2, 3, 5, 7, 30]
+                        .map((n) => n * ONEDAY)
+                        .concat([defaultBinSize])
                     : unitOfTime === "hr"
                         ? [1, 2, 3, 6, 12, 24]
                             .map((n) => n * ONEHOUR)
@@ -1195,7 +1240,7 @@ const HistogramPlot = (props) => {
             return valueLabel;
         };
     }
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `plot-container ${plotId}`, style: Object.assign({ "--selection-color": selectorsColor }, containerStyles), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsxs("div", { style: {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `plot-container histogram ${plotId}`, style: Object.assign({ "--selection-color": selectorsColor }, containerStyles), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsxs("div", { style: {
                     position: "relative",
                     width: "100%",
                     height: "100%",
@@ -1248,7 +1293,7 @@ const HistogramPlot = (props) => {
                                             const newBinSize = newValue;
                                             setBinSize(newBinSize);
                                             onBinSizeChange === null || onBinSizeChange === void 0 ? void 0 : onBinSizeChange(newBinSize);
-                                        }, colorOverride: barColor, valueLabelFormat: valueLabelFormat, titleStylingOverrides: settingsTitleStylingOverrides, disabledTooltipText: "Requires 10 or more data points" }) }) })] })), jsxRuntime.jsx(Plot$3, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
+                                        }, colorOverride: barColor, valueLabelFormat: valueLabelFormat, titleStylingOverrides: settingsTitleStylingOverrides, disabledTooltipText: "Requires 10 or more data points" }) }) })] })), jsxRuntime.jsx(Plot$6, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
                             onDeselect();
                             setSelectedRange(null); // Remove selected box
                         }, onUpdate: handlePlotUpdate, useResizeHandler: true, style: {
@@ -1259,7 +1304,7 @@ const HistogramPlot = (props) => {
                         } }, `histogram-${plotId || "default"}`)] }) }) }));
 };
 
-const Plot$2 = React.lazy(() => import('react-plotly.js'));
+const Plot$5 = React.lazy(() => import('react-plotly.js'));
 const RadialHistogramPlot = (props) => {
     const { data, barColor = 'rgb(72, 72, 74)', unselectedBarColor = 'rgba(203, 195, 195, 0.88)', selectorsColor = 'black', onSelected, onClick, containerStyleOverrides, barWidth = 20, // Default bar width in degrees
      } = props;
@@ -1359,14 +1404,14 @@ const RadialHistogramPlot = (props) => {
         staticPlot: false,
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: "plot-container radial-histogram-container", style: Object.assign({ '--selection-color': selectorsColor }, containerStyles), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsx(Plot$2, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: "plot-container radial-histogram-container", style: Object.assign({ '--selection-color': selectorsColor }, containerStyles), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsx(Plot$5, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
                     width: "100%",
                     height: "100%",
                     display: "block"
                 } }) }) }));
 };
 
-const Plot$1 = React.lazy(() => import('react-plotly.js'));
+const Plot$4 = React.lazy(() => import('react-plotly.js'));
 const StatsDonut = (props) => {
     const { withCenterLabel = false, centerLabel, centerValue, showLegend = true, legendPosition = "right", containerStyle = {}, } = props;
     // Configure legend position based on prop
@@ -1414,7 +1459,7 @@ const StatsDonut = (props) => {
             },
         ]
         : [];
-    return (jsxRuntime.jsx("div", { style: Object.assign({ width: "100%", height: "100%", minHeight: "300px", display: "flex", justifyContent: "center", alignItems: "center" }, containerStyle), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsx(Plot$1, { data: [
+    return (jsxRuntime.jsx("div", { style: Object.assign({ width: "100%", height: "100%", minHeight: "300px", display: "flex", justifyContent: "center", alignItems: "center" }, containerStyle), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsx(Plot$4, { data: [
                     {
                         type: "pie",
                         values: props.values,
@@ -1447,6 +1492,713 @@ const StatsDonut = (props) => {
                 }, useResizeHandler: true }) }) }));
 };
 
+const Plot$3 = React.lazy(() => import('react-plotly.js'));
+const BoxPlot = (props) => {
+    const { data, width = 600, height = 400, title = "Box Plot", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "boxplot", extraLayoutConfig = {}, } = props;
+    // Ref for plot container
+    const containerRef = React.useRef(null);
+    // State for custom tooltip
+    const [tooltip, setTooltip] = React.useState({ visible: false, x: 0, y: 0, content: "", color: "#1f77b4" });
+    const plotlyData = data.map((trace) => {
+        const boxDefinition = isBoxPlotDataSummary(trace.values)
+            ? {
+                y0: trace.y !== undefined ? trace.y : [trace.label], // Position the box at this y-value
+                lowerfence: [trace.values.lowerWhisker],
+                q1: [trace.values.q1],
+                median: [trace.values.median],
+                q3: [trace.values.q3],
+                upperfence: [trace.values.upperWhisker],
+                mean: trace.values.mean ? [trace.values.mean] : undefined,
+            }
+            : {
+                x: trace.values,
+                y0: trace.y !== undefined ? trace.y : undefined,
+            }; // 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);
+    });
+    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: {
+                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: {
+                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) });
+    const config = {
+        responsive: true, // Make the plot responsive
+        displayModeBar: false, // Hide the mode bar
+        displaylogo: false, // Hide the Plotly logo
+        scrollZoom: false, // Disable zooming with scroll
+        staticPlot: false, // Enable interactivity
+    };
+    const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
+    return (jsxRuntime.jsx("div", { ref: containerRef, 
+        // className={`plot-container ${plotId}`}
+        style: Object.assign({}, containerStyles), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsxs("div", { style: {
+                    position: "relative",
+                    width: "100%",
+                    height: "100%",
+                }, children: [jsxRuntime.jsx(Plot$3, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, 
+                        // onHover={handleHover}
+                        // onUnhover={handleUnhover}
+                        style: {
+                            width: "100%",
+                            height: "100%",
+                            display: "block",
+                            transition: "opacity 0.15s ease-in-out",
+                        } }, `boxplot-${plotId || "default"}`), tooltip.visible && (jsxRuntime.jsx("div", { style: {
+                            position: "fixed",
+                            left: tooltip.x + 10,
+                            top: tooltip.y - 10,
+                            backgroundColor: "white",
+                            color: "#333",
+                            padding: "8px 12px",
+                            borderRadius: "4px",
+                            fontSize: "13px",
+                            lineHeight: "1.5",
+                            pointerEvents: "none",
+                            zIndex: 1000,
+                            whiteSpace: "nowrap",
+                            boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                            border: `2px solid ${tooltip.color}`,
+                            fontFamily: '"Open Sans", verdana, arial, sans-serif',
+                        }, dangerouslySetInnerHTML: { __html: tooltip.content } }))] }) }) }));
+};
+function isBoxPlotDataSummary(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        typeof value.lowerWhisker === "number" &&
+        typeof value.q1 === "number" &&
+        typeof value.median === "number" &&
+        typeof value.q3 === "number" &&
+        typeof value.upperWhisker === "number" &&
+        (value.mean === undefined || typeof value.mean === "number"));
+}
+
+const SVGBoxWithLine = (props) => {
+    const boxWidth = 35;
+    const boxHeight = 15;
+    const lineWidth = boxWidth * 2; // 90% width
+    const lineY = boxHeight / 2; // Vertical center
+    return (jsxRuntime.jsxs("svg", { width: lineWidth, height: boxHeight, viewBox: `0 0 ${lineWidth + 3} ${boxHeight + 3}`, children: [jsxRuntime.jsx("line", { x1: 0, y1: lineY, x2: (lineWidth - boxWidth) / 2, y2: lineY, stroke: props.color, strokeWidth: "2" }), jsxRuntime.jsx("line", { x1: (lineWidth + boxWidth) / 2, y1: lineY, x2: lineWidth, y2: lineY, stroke: props.color, strokeWidth: "2" }), jsxRuntime.jsx("line", { x1: 0, y1: lineY - 5, x2: 0, y2: lineY + 5, stroke: props.color, strokeWidth: "2" }), jsxRuntime.jsx("line", { x1: lineWidth, y1: lineY - 5, x2: lineWidth, y2: lineY + 5, stroke: props.color, strokeWidth: "2" }), jsxRuntime.jsx("rect", { x: (lineWidth - boxWidth) / 2, y: "0", width: boxWidth, height: boxHeight, fill: props.boxStyle !== "outlined" ? props.color : "none", opacity: props.boxStyle === "shaded" ? 0.3 : 1 }), jsxRuntime.jsx("rect", { x: (lineWidth - boxWidth) / 2, y: "0", width: boxWidth, height: boxHeight, stroke: props.color, strokeWidth: "2", fill: "none" }), jsxRuntime.jsx("line", { x1: (lineWidth - boxWidth) / 2 + boxWidth * 0.5, y1: 0, x2: (lineWidth - boxWidth) / 2 + boxWidth * 0.5, y2: boxHeight, stroke: props.color, strokeWidth: "2" })] }));
+};
+// export const OutlinedBox = (props: BoxProps) => {
+//   return (
+//     <Box
+//       border={`2px solid ${props.color}`}
+//       width={BOX_SIZE}
+//       height={BOX_SIZE}
+//       mr={1}
+//     />
+//   );
+// };
+// export const FilledBox = (props: BoxProps) => {
+//   return (
+//     <Box
+//       width={BOX_SIZE}
+//       height={BOX_SIZE}
+//       sx={{
+//         backgroundColor: props.color,
+//         border: `2px solid ${props.color}`,
+//       }}
+//       mr={1}
+//     />
+//   );
+// };
+// export const ShadedBox = (props: BoxProps) => {
+//   return (
+//     <Box
+//       width={BOX_SIZE}
+//       height={BOX_SIZE}
+//       sx={{
+//         border: `2px solid ${props.color}`,
+//         position: "relative",
+//         "&::before": {
+//           content: '""',
+//           position: "absolute",
+//           top: 0,
+//           left: 0,
+//           right: 0,
+//           bottom: 0,
+//           backgroundColor: `${props.color}`,
+//           opacity: 0.5,
+//         },
+//       }}
+//       mr={1}
+//     />
+//   );
+// };
+// export const LegendItem = (props: LegendItemProps) => {
+//   return (
+//     <Box
+//       key={props.label}
+//       display="flex"
+//       alignItems="center"
+//       mr={1}
+//       sx={{
+//         fontFamily: "Open Sans, verdana, arial, sans-serif",
+//       }}
+//     >
+//       {props.boxStyle === "shaded" ? (
+//         <ShadedBox color={props.color} />
+//       ) : props.boxStyle === "outlined" ? (
+//         <OutlinedBox color={props.color} />
+//       ) : (
+//         <FilledBox color={props.color} />
+//       )}
+//       {props.label}
+//     </Box>
+//   );
+// };
+const LegendBoxPlotItem = (props) => {
+    return (jsxRuntime.jsxs(Box, { display: "flex", alignItems: "center", mr: 4, sx: {
+            fontFamily: "Open Sans, verdana, arial, sans-serif",
+        }, children: [jsxRuntime.jsx(SVGBoxWithLine, { color: props.color, boxStyle: props.boxStyle }), props.label] }, props.label));
+};
+
+// This component takes grouped data and transforms it for displaying with the BoxPlot component.
+// The highest level is the group (ex, rating bracket), and then within each group are individual boxes (ex, mine vs others' throws within that rating bracket)
+// Importantly, this component is currently optimized for two boxes per group. It could be extended in the future to allow for more within-group boxes if useful.
+const PairedComparisonsBoxPlot = (props) => {
+    const { groups, pairLabels, width = 600, height = 400, title = "", xAxisTitle, yAxisTitle, containerStyleOverrides, showLegend = true, plotId = "paired-comparisons-boxplot", } = 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 })));
+    });
+    // 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.groupLabel);
+    // 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" : "#f8f8f8",
+            opacity: 0.05,
+            layer: "below",
+            line: {
+                width: 0,
+            },
+        };
+    });
+    const groupAnnotations = 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 = [];
+    groups.forEach((group, groupIndex) => {
+        // console.log(group.boxes);
+        if ((!isBoxPlotDataSummary(group.boxes[0].values) &&
+            group.boxes[0].values.length == 0) ||
+            (!isBoxPlotDataSummary(group.boxes[1].values) &&
+                group.boxes[1].values.length == 0)) {
+            return; // Don't show an annotation if we don't have data for both boxes
+        }
+        const medianA = isBoxPlotDataSummary(group.boxes[0].values)
+            ? group.boxes[0].values.median
+            : computeMedian(group.boxes[0].values);
+        const medianB = isBoxPlotDataSummary(group.boxes[1].values)
+            ? group.boxes[1].values.median
+            : computeMedian(group.boxes[1].values);
+        const q1A = isBoxPlotDataSummary(group.boxes[0].values)
+            ? group.boxes[0].values.q1
+            : computeQuartile(group.boxes[0].values, 1);
+        const q3A = isBoxPlotDataSummary(group.boxes[0].values)
+            ? group.boxes[0].values.q3
+            : computeQuartile(group.boxes[0].values, 3);
+        const q1B = isBoxPlotDataSummary(group.boxes[1].values)
+            ? group.boxes[1].values.q1
+            : computeQuartile(group.boxes[1].values, 1);
+        const q3B = isBoxPlotDataSummary(group.boxes[1].values)
+            ? group.boxes[1].values.q3
+            : computeQuartile(group.boxes[1].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.boxes[0].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)}`,
+            showarrow: false,
+            xanchor: "left",
+            align: "left",
+            font: {
+                size: 12,
+                color: annotationColor,
+                style: "italic",
+            },
+        });
+        differenceBetweenMediansLines.push({
+            type: "line",
+            x0: medianA,
+            x1: medianB,
+            xref: "x",
+            y0: groupIndex,
+            y1: groupIndex,
+            yref: "y",
+            line: {
+                color: annotationColor,
+                width: 2,
+            },
+        });
+        differenceBetweenMediansLines.push({
+            type: "line",
+            x0: medianA,
+            x1: medianA,
+            xref: "x",
+            y0: groupIndex - 0.05,
+            y1: groupIndex,
+            yref: "y",
+            line: {
+                color: annotationColor,
+                width: 2,
+            },
+        });
+        differenceBetweenMediansLines.push({
+            type: "line",
+            x0: medianB,
+            x1: medianB,
+            xref: "x",
+            y0: groupIndex,
+            y1: groupIndex + 0.05,
+            yref: "y",
+            line: {
+                color: annotationColor,
+                width: 2,
+            },
+        });
+    });
+    const extraLayoutConfig = {
+        yaxis: {
+            type: "linear", // Use linear axis for numeric positioning of boxes
+            tickmode: "array",
+            tickvals,
+            ticktext,
+            range: [-0.5, groups.length - 0.5], // Add some padding to the y-axis range to accommodate the boxes
+            tickcolor: "#ffffff",
+            showgrid: false,
+        },
+        margin: {
+            t: 5,
+            r: 50,
+        },
+        shapes: [
+            ...separatorShapes,
+            ...differenceBetweenMediansLines,
+            ...groupAnnotations,
+        ],
+        annotations: differenceAnnotations,
+    };
+    const legendNode = (jsxRuntime.jsxs(material.Box, { display: "flex", justifyContent: "flex-end", mb: 2, children: [jsxRuntime.jsx(LegendBoxPlotItem, { label: pairLabels[0], color: "#626280", boxStyle: "shaded" }), jsxRuntime.jsx(LegendBoxPlotItem, { label: pairLabels[1], color: "#626280", boxStyle: "outlined" })] }));
+    const containerStyles = Object.assign({ width: width, height: height, position: "relative", display: "flex", flexDirection: "column", gap: 0 }, containerStyleOverrides);
+    return (jsxRuntime.jsxs("div", { style: Object.assign({}, containerStyles), children: [showLegend && legendNode, jsxRuntime.jsx(BoxPlot, { data: boxPlotData, width: width, height: height, title: title, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, extraLayoutConfig: extraLayoutConfig, containerStyleOverrides: containerStyleOverrides, plotId: `${plotId}-boxplot` })] }));
+};
+
+const Plot$2 = React.lazy(() => import('react-plotly.js'));
+const SummaryComparisonPlot = (props) => {
+    const { groups, height = 250, title = "", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "summary-comparison-plot", tooltipPosition = "right", startXAxisAtZero = true, } = props;
+    // Ref for plot container
+    const containerRef = React.useRef(null);
+    // State for custom tooltip
+    const [tooltip, setTooltip] = React.useState({
+        visible: false,
+        x: 0,
+        y: 0,
+        content: "",
+        color: "#1f77b4",
+    });
+    const handleHover = (event) => {
+        var _a, _b;
+        if (!event.points || event.points.length === 0)
+            return;
+        const point = event.points[0];
+        const eventData = point.data;
+        if (!eventData)
+            return;
+        // Use the name of the trace to identify the group, then find the corresponding data for that group to display in the tooltip
+        // This way we don't have to worry if we hovered over the line or the marker, we can show the same tooltip content based on the group
+        const groupName = eventData.name || "Unknown Group";
+        const groupData = (_a = groups.find((g) => g.groupLabel === groupName)) === null || _a === void 0 ? void 0 : _a.data;
+        if (!groupData)
+            return;
+        let content = `<div style="margin-bottom: 8px;">`;
+        let contentColor = "orange";
+        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)
+            : "NA";
+        const comparedMedianText = groupData.comparedMedian !== undefined
+            ? groupData.comparedMedian.toFixed(2)
+            : "NA";
+        content += `
+      <table style="width: 100%; margin-top: 4px;">
+        <tr>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">Population P25:</td>
+          <td style="text-align: right; padding: 2px 0;">${summarizedMinText}</td>
+        </tr>
+        <tr>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">Population P75:</td>
+          <td style="text-align: right; padding: 2px 0;">${summarizedMaxText}</td>
+        </tr>
+        <tr>
+          <td style="text-align: left; padding: 2px 18px 2px 0;">My Median:</td>
+          <td style="text-align: right; padding: 2px 0;">${comparedMedianText}</td>
+        </tr>
+      </table>
+    `;
+        contentColor = eventData.line
+            ? eventData.line.color
+            : eventData.marker.color || contentColor;
+        // Position tooltip at the end of the line (75th percentile)
+        // 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);
+            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) {
+                tooltipX = pixelX + point.xaxis._offset + containerRect.left; // Adjust for x-axis offset and container position
+                tooltipY = pixelY + point.yaxis._offset + containerRect.top; // Adjust for y-axis offset and container position
+            }
+        }
+        setTooltip({
+            visible: true,
+            x: tooltipX,
+            y: tooltipY,
+            content,
+            color: contentColor,
+        });
+    };
+    const handleUnhover = () => {
+        setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
+    };
+    // 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: [0 + groupIndex * 0.1, 0 + groupIndex * 0.1],
+                line: {
+                    color: colorToRGBA(group.color || "orange", 1),
+                    width: 2,
+                },
+                showlegend: false,
+                hoverinfo: "none",
+            });
+        }
+        if (group.data.comparedMedian !== undefined) {
+            traces.push({
+                type: "scatter",
+                mode: "markers",
+                name: group.groupLabel,
+                x: [group.data.comparedMedian],
+                y: [0 + groupIndex * 0.1],
+                marker: {
+                    color: group.color || "orange",
+                    size: 10,
+                    symbol: "circle",
+                    line: {
+                        color: "white",
+                        width: 1,
+                    },
+                },
+                showlegend: false,
+                hoverinfo: "none",
+            });
+        }
+        return traces;
+    });
+    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);
+    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);
+    const layout = {
+        width: undefined,
+        height: height,
+        autosize: true,
+        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,
+            b: 50,
+            pad: 4,
+            // ...extraLayoutConfig.margin, // Merge in any extra margin config provided via props
+        },
+        title: {
+            text: title,
+            font: {
+                size: 16,
+            },
+            xref: "paper",
+            x: 0.5,
+            xanchor: "center",
+        },
+        xaxis: {
+            title: {
+                text: xAxisTitle,
+                font: {
+                    size: 14,
+                },
+            },
+            showgrid: true,
+            showline: true,
+            fixedrange: true, // Disable zooming
+            zeroline: false,
+            range: [
+                startXAxisAtZero ? 0 : xRangeMin - (xRangeMax - xRangeMin) * 0.3,
+                xRangeMax + (xRangeMax - xRangeMin) * 0.3,
+            ], // Add padding to the x-axis range
+            mirror: true,
+            gridcolor: "#efefef",
+            gridwidth: 0.2,
+            zerolinecolor: "#969696",
+            zerolinewidth: 1,
+            linecolor: "#bababa",
+            linewidth: 1,
+        },
+        yaxis: {
+            mirror: "ticks",
+            gridcolor: "#efefef",
+            gridwidth: 0.2,
+            zerolinecolor: "#969696",
+            zerolinewidth: 1,
+            linecolor: "#bababa",
+            linewidth: 1,
+            showticklabels: true,
+            showgrid: false,
+            showline: true,
+            zeroline: false,
+            fixedrange: true, // Disable zooming and pan interactions
+            tickmode: "array",
+            tickvals: groups.map((_, index) => 0 + index * 0.1),
+            ticktext: groups.map((group) => group.groupLabel),
+            ticks: "inside",
+            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
+        },
+        hovermode: "y",
+    };
+    const containerStyles = Object.assign({ width: "100%", height: height, position: "relative", display: "flex", flexDirection: "column", gap: 0 }, containerStyleOverrides);
+    const config = {
+        responsive: true, // Enable responsive mode for width
+        displayModeBar: false, // Hide the mode bar
+        displaylogo: false, // Hide the Plotly logo
+        scrollZoom: false, // Disable zooming with scroll
+        staticPlot: false, // Enable interactivity
+    };
+    return (jsxRuntime.jsx("div", { ref: containerRef, 
+        // className={`plot-container ${plotId}`}
+        style: Object.assign({}, containerStyles), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsxs("div", { style: {
+                    position: "relative",
+                    width: "100%",
+                    height: "100%",
+                }, children: [jsxRuntime.jsx(Plot$2, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, onHover: handleHover, onUnhover: handleUnhover, style: {
+                            width: "100%",
+                            height: `${height}px`,
+                            display: "block",
+                            transition: "opacity 0.15s ease-in-out",
+                        } }, `boxplot-${plotId || "default"}`), tooltip.visible && (jsxRuntime.jsx("div", { style: {
+                            position: "fixed",
+                            left: tooltipPosition === "right" ? tooltip.x + 10 : undefined,
+                            right: tooltipPosition === "left"
+                                ? window.innerWidth - tooltip.x + 10 // Measured in pixels from the right edge of the screen
+                                : undefined,
+                            transform: tooltipPosition === "right" ? "translateX(10px)" : undefined,
+                            top: tooltip.y - 18,
+                            backgroundColor: "rgba(255, 255, 255, 0.8)",
+                            borderRadius: "4px",
+                            color: "#333",
+                            padding: "8px 12px",
+                            fontSize: "13px",
+                            lineHeight: "1.5",
+                            pointerEvents: "none",
+                            zIndex: 1000,
+                            whiteSpace: "nowrap",
+                            boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                            borderLeft: `7px solid ${tooltip.color}`,
+                            fontFamily: '"Open Sans", verdana, arial, sans-serif',
+                        }, dangerouslySetInnerHTML: { __html: tooltip.content } }))] }) }) }));
+};
+const SummaryComparisonPlotLegend = ({ comparedDataLabel, summarizedDataLabel, color = "orange", }) => {
+    return (jsxRuntime.jsxs("div", { style: {
+            display: "flex",
+            gap: "20px",
+            alignItems: "center",
+            flexDirection: "row",
+        }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsxRuntime.jsx(Box, { width: 13, height: 13, sx: {
+                            backgroundColor: color,
+                            borderRadius: "20px",
+                        } }), jsxRuntime.jsx("span", { children: comparedDataLabel })] }), jsxRuntime.jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsxRuntime.jsx(Box, { width: 30, height: 3, sx: { backgroundColor: color } }), jsxRuntime.jsx("span", { children: summarizedDataLabel })] })] }));
+};
+
+const Plot$1 = React.lazy(() => import('react-plotly.js'));
+const LinePlot = (props) => {
+    var _a, _b;
+    const { data, width = 600, height = 400, title, xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "boxplot", extraLayoutConfig = {}, additionalYAxis, additionalContextTrace, } = props;
+    // Ref for plot container
+    const containerRef = React.useRef(null);
+    const plotlyData = data.map((trace) => {
+        return {
+            type: "scatter",
+            mode: "lines+markers",
+            x: trace.x,
+            y: trace.y,
+            name: trace.label,
+            line: {
+                color: trace.color || "#1f77b4", // Default to Plotly's default blue if no color provided
+            },
+            marker: {
+                color: trace.color || "#1f77b4",
+                size: 6,
+            },
+            zorder: 1, // Ensure lines are above any additional context traces (like scatter points)
+        };
+    });
+    const layout = Object.assign(Object.assign(Object.assign({}, extraLayoutConfig), { title: {
+            text: title,
+        }, showlegend: false, autosize: true, width: undefined, height: undefined, hovermode: "closest", margin: {
+            l: 50,
+            r: additionalContextTrace ? 80 : 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.
+            t: title ? 50 : 20, // Adjust top margin based on whether a title is provided
+            b: 50,
+            pad: 4,
+        }, xaxis: {
+            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",
+        }, yaxis: {
+            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
+                font: {
+                    color: ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.color) || "#1f77b4", // Match y-axis title color to line color
+                },
+            },
+            automargin: true, // Required for standoff to work properly
+            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
+            tickfont: {
+                color: ((_b = data[0]) === null || _b === void 0 ? void 0 : _b.color) || "#1f77b4", // Match y-axis tick color to line color
+            },
+            tickcolor: "white", // Hide default ticks since we're using them for group labels in the paired comparisons plot
+            ticklen: 10, // Give ticks a length to push labels away from y axis.
+            // ticksuffix: "       ", // Add space between y axis and ticks
+        } }), (additionalYAxis
+        ? { yaxis2: Object.assign(Object.assign({}, additionalYAxis), { side: "right", overlaying: "y" }) }
+        : {}));
+    const config = {
+        responsive: true, // Make the plot responsive
+        displayModeBar: false, // Hide the mode bar
+        displaylogo: false, // Hide the Plotly logo
+        scrollZoom: false, // Disable zooming with scroll
+        staticPlot: false, // Enable interactivity
+    };
+    const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
+    return (jsxRuntime.jsx("div", { ref: containerRef, style: Object.assign({}, containerStyles), children: jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx(Loading, {}), children: jsxRuntime.jsx("div", { style: {
+                    position: "relative",
+                    width: "100%",
+                    height: "100%",
+                }, children: jsxRuntime.jsx(Plot$1, { data: [
+                        ...(additionalContextTrace ? [additionalContextTrace] : []),
+                        ...plotlyData,
+                    ], layout: layout, config: config, useResizeHandler: true, style: {
+                        width: "100%",
+                        height: "100%",
+                        display: "block",
+                        transition: "opacity 0.15s ease-in-out",
+                    }, onHover: () => {
+                        console.log("hovering");
+                    } }, `boxplot-${plotId || "default"}`) }) }) }));
+};
+
 const Plot = React.lazy(() => import('react-plotly.js'));
 const TestPlot = (props) => {
     var _a, _b;
@@ -1466,9 +2218,14 @@ const TestPlot = (props) => {
     return jsxRuntime.jsx(Plot, { data: data, layout: layout });
 };
 
+exports.BoxPlot = BoxPlot;
 exports.HistogramPlot = HistogramPlot;
+exports.LinePlot = LinePlot;
+exports.PairedComparisonsBoxPlot = PairedComparisonsBoxPlot;
 exports.RadialHistogramPlot = RadialHistogramPlot;
 exports.StatsDonut = StatsDonut;
+exports.SummaryComparisonPlot = SummaryComparisonPlot;
+exports.SummaryComparisonPlotLegend = SummaryComparisonPlotLegend;
 exports.TestPlot = TestPlot;
 exports.isDateArray = isDateArray;
 exports.isNumberArray = isNumberArray;