td-plots 1.8.2 → 1.9.0

package/dist/components/LineWithHistogram.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { PlotParams } from "react-plotly.js";
+import "./plotStyles.scss";
+export interface LineDataTrace {
+    x: number[] | Date[];
+    y: number[];
+    name?: string;
+    color?: string;
+    hovertemplate?: string;
+}
+export interface HistogramDataTrace {
+    x: number[] | Date[];
+    name?: string;
+    color?: string;
+    hovertemplate?: string;
+}
+export interface LineWithHistogramProps {
+    lineData: LineDataTrace;
+    histogramData: HistogramDataTrace;
+    width?: number;
+    height?: number;
+    title?: string;
+    plotId?: string;
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    y2AxisTitle?: string;
+    containerStyleOverrides?: React.CSSProperties;
+    extraLayoutConfig?: Partial<PlotParams["layout"]>;
+    revision?: number;
+}
+declare const LineWithHistogram: (props: LineWithHistogramProps) => import("react/jsx-runtime").JSX.Element;
+export default LineWithHistogram;

package/dist/index.d.ts

@@ -12,8 +12,7 @@ export type { BoxPlotProps } from "./components/BoxPlot";
 export { default as SummaryComparisonPlot } from "./components/SummaryComparisonPlot";
 export type { SummaryComparisonPlotProps } from "./components/SummaryComparisonPlot";
 export { SummaryComparisonPlotLegend } from "./components/SummaryComparisonPlot";
-export { default as LinePlot } from "./components/LinePlot";
-export type { LinePlotProps } from "./components/LinePlot";
-export { default as TestPlot } from "./components/TestPlot";
+export { default as LineWithHistogram } from "./components/LineWithHistogram";
+export type { LineWithHistogramProps } from "./components/LineWithHistogram";
 export { isDateArray, isNumberArray } from "./components/Utils";
 export type { PlotParams } from "react-plotly.js";

package/dist/index.esm.js

@@ -36,7 +36,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;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}";
+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}.plot-container.histogram:hover .histogram-controls.show-on-hover{opacity:1;visibility:visible}";
 styleInject(css_248z);
 
 function formatDecimal(x) {
@@ -539,7 +539,7 @@ var SettingsIcon = createSvgIcon(/*#__PURE__*/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$6 = lazy(() => import('react-plotly.js'));
+const Plot$5 = 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;
@@ -1291,7 +1291,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" }) }) })] })), jsx(Plot$6, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
+                                        }, colorOverride: barColor, valueLabelFormat: valueLabelFormat, titleStylingOverrides: settingsTitleStylingOverrides, disabledTooltipText: "Requires 10 or more data points" }) }) })] })), jsx(Plot$5, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
                             onDeselect();
                             setSelectedRange(null); // Remove selected box
                         }, onUpdate: handlePlotUpdate, useResizeHandler: true, style: {
@@ -1302,7 +1302,7 @@ const HistogramPlot = (props) => {
                         } }, `histogram-${plotId || "default"}`)] }) }) }));
 };
 
-const Plot$5 = lazy(() => import('react-plotly.js'));
+const Plot$4 = 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;
@@ -1402,14 +1402,14 @@ const RadialHistogramPlot = (props) => {
         staticPlot: false,
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    return (jsx("div", { ref: containerRef, className: "plot-container radial-histogram-container", style: Object.assign({ '--selection-color': selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$5, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
+    return (jsx("div", { ref: containerRef, className: "plot-container radial-histogram-container", style: Object.assign({ '--selection-color': selectorsColor }, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$4, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
                     width: "100%",
                     height: "100%",
                     display: "block"
                 } }) }) }));
 };
 
-const Plot$4 = lazy(() => import('react-plotly.js'));
+const Plot$3 = 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
@@ -1457,7 +1457,7 @@ const StatsDonut = (props) => {
             },
         ]
         : [];
-    return (jsx("div", { style: Object.assign({ width: "100%", height: "100%", minHeight: "300px", display: "flex", justifyContent: "center", alignItems: "center" }, containerStyle), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$4, { data: [
+    return (jsx("div", { style: Object.assign({ width: "100%", height: "100%", minHeight: "300px", display: "flex", justifyContent: "center", alignItems: "center" }, containerStyle), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$3, { data: [
                     {
                         type: "pie",
                         values: props.values,
@@ -1490,7 +1490,7 @@ const StatsDonut = (props) => {
                 }, useResizeHandler: true }) }) }));
 };
 
-const Plot$3 = lazy(() => import('react-plotly.js'));
+const Plot$2 = 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
@@ -1556,7 +1556,7 @@ const BoxPlot = (props) => {
                     position: "relative",
                     width: "100%",
                     height: "100%",
-                }, children: [jsx(Plot$3, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, 
+                }, children: [jsx(Plot$2, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, 
                         // onHover={handleHover}
                         // onUnhover={handleUnhover}
                         style: {
@@ -1842,7 +1842,7 @@ 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` })] }));
 };
 
-const Plot$2 = lazy(() => import('react-plotly.js'));
+const Plot$1 = 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
@@ -1886,11 +1886,11 @@ const SummaryComparisonPlot = (props) => {
         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: left; padding: 2px 18px 2px 0;">Population avg-\u03C3:</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: left; padding: 2px 18px 2px 0;">Population avg+\u03C3:</td>
           <td style="text-align: right; padding: 2px 0;">${summarizedMaxText}</td>
         </tr>
         <tr>
@@ -2056,7 +2056,7 @@ const SummaryComparisonPlot = (props) => {
                     position: "relative",
                     width: "100%",
                     height: "100%",
-                }, children: [jsx(Plot$2, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, onHover: handleHover, onUnhover: handleUnhover, style: {
+                }, children: [jsx(Plot$1, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, onHover: handleHover, onUnhover: handleUnhover, style: {
                             width: "100%",
                             height: `${height}px`,
                             display: "block",
@@ -2095,42 +2095,150 @@ const SummaryComparisonPlotLegend = ({ comparedDataLabel, summarizedDataLabel, c
                         } }), jsx("span", { children: comparedDataLabel })] }), jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsx(Box, { width: 30, height: 3, sx: { backgroundColor: color } }), jsx("span", { children: summarizedDataLabel })] })] }));
 };
 
-const Plot$1 = 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;
+const Plot = lazy(() => import('react-plotly.js'));
+// This component plots a line chart in the foreground with a histogram in the backgroun. The histogram
+// is used only for context, while the line is intended to have the focus. To that end, the line plot has hover interactions
+// while the histogram does not.
+// Additionally, because of plotly restrictions in the web (overlaying y issues) we cannot draw both plots
+// as normal. Instead, we first render a histogram, extract the calculated bin positions and heights from the rendered plot, and
+// then render a second plot with just the line and use the extracted histogram bin information to draw the histogram as shapes in
+// the background of the line plot. This allows us to have a shared x-axis and aligned y-axes for both plots, while only having hover
+// interactions on the line plot.
+const LineWithHistogram = (props) => {
+    const { lineData, histogramData, width = 600, height = 400, title, xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "lineplot", extraLayoutConfig = {}, y2AxisTitle, revision = 0, } = props;
     // Ref for plot container
     const containerRef = 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
-            },
+    // State to store extracted histogram bin information
+    const [histogramBins, setHistogramBins] = useState([]);
+    // State to trigger re-render of hidden histogram plot when data changes
+    const [hiddenPlotKey, setHiddenPlotKey] = useState(0);
+    // When histogram data changes, reset bins and remount the hidden plot so onInitialized re-fires
+    useEffect(() => {
+        setHistogramBins([]);
+        setHiddenPlotKey((k) => k + 1);
+    }, [histogramData.x]);
+    // Callback to extract histogram bin data from Plotly after it's rendered
+    const handlePlotInitialized = (figure, graphDiv) => {
+        try {
+            // Only extract once - prevent infinite loop
+            if (histogramBins.length > 0) {
+                return;
+            }
+            // Access the calculated histogram data from Plotly's internal data
+            const histogramTrace = graphDiv.data[0]; // First trace is the histogram
+            if (histogramTrace && histogramTrace.type === "histogram") {
+                // Plotly computes x (bin edges) and y (bin heights) after rendering
+                // We need to access the computed bins from the graph div
+                const fullData = graphDiv.calcdata;
+                if (fullData && fullData[0]) {
+                    const histCalcData = fullData[0]; // Contains bin information
+                    const bins = [];
+                    // Extract bin information from Plotly's calculated data
+                    for (let i = 0; i < histCalcData.length; i++) {
+                        const point = histCalcData[i];
+                        if (point.p0 !== undefined &&
+                            point.p1 !== undefined &&
+                            point.s !== undefined) {
+                            bins.push({
+                                x0: point.p0,
+                                x1: point.p1,
+                                y: point.s, // bin height
+                            });
+                        }
+                    }
+                    if (bins.length > 0) {
+                        setHistogramBins(bins);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error("Error extracting histogram bins:", error);
+        }
+    };
+    // Data for the hidden histogram plot used to extract bin information.
+    // This plot is not visible and is only used for bin calculation.
+    const histogramPlotlyData = [
+        {
+            type: "histogram",
+            x: histogramData.x,
+            name: histogramData.name || "histogram",
             marker: {
-                color: trace.color || "#1f77b4",
+                color: histogramData.color || "rgb(211, 211, 212)",
+                line: {
+                    color: "white",
+                    width: 0.5,
+                },
+            },
+        },
+    ];
+    const plotlyData = [
+        // Only the line trace - no histogram trace in main plot
+        // Line trace on primary y-axis for hover interactions
+        Object.assign({ type: "scatter", mode: "lines+markers", x: lineData.x, y: lineData.y, name: lineData.name, line: {
+                color: lineData.color || "#1f77b4",
+                shape: "hv", // Step-wise line.
+            }, marker: {
+                color: lineData.color || "#1f77b4",
                 size: 6,
+            }, hoverinfo: lineData.hovertemplate ? "text" : "x+y+name" }, (lineData.hovertemplate && { hovertemplate: lineData.hovertemplate })),
+        // Dummy invisible point on yaxis2 to force the axis to render
+        // Position it at the top of the histogram range to ensure the
+        // y2 axis scales appropriately even if the line data doesn't reach that high.
+        // This is a hack to work around Plotly's behavior of not rendering an axis if no data
+        // is plotted on it.
+        ...(histogramBins.length > 0
+            ? [
+                {
+                    type: "scatter",
+                    mode: "markers",
+                    yaxis: "y2",
+                    x: [lineData.x[0]], // First x point
+                    y: [Math.max(...histogramBins.map((bin) => bin.y))], // Top of histogram range
+                    marker: {
+                        size: 0.1,
+                        opacity: 0,
+                        color: "rgba(0,0,0,0)",
+                    },
+                    hoverinfo: "skip",
+                    showlegend: false,
+                },
+            ]
+            : []),
+    ];
+    // Convert histogram bins to Plotly shapes (rectangles drawn in the background)
+    // Use yaxis2 coordinates so bins align with the right y-axis
+    const histogramShapes = histogramBins.length > 0
+        ? histogramBins.map((bin) => ({
+            type: "rect",
+            xref: "x",
+            yref: "y2", // Use secondary y-axis to match the histogram scale
+            x0: bin.x0,
+            x1: bin.x1,
+            y0: 0, // Start at y2 = 0
+            y1: bin.y, // Height matches bin count on y2 axis
+            fillcolor: histogramData.color || "rgb(211, 211, 212)",
+            line: {
+                color: histogramData.color || "rgb(211, 211, 212)", // Match fill color
+                width: 0, // No border
             },
-            zorder: 1, // Ensure lines are above any additional context traces (like scatter points)
-        };
-    });
-    const layout = Object.assign(Object.assign(Object.assign({}, extraLayoutConfig), { title: {
+            layer: "below", // Ensure shapes are drawn below traces
+        }))
+        : [];
+    const layout = 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.
+            r: 80, // 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: {
+        }, 
+        // Add histogram shapes as background rectangles
+        shapes: histogramShapes, xaxis: {
             title: {
                 text: xAxisTitle,
             },
-            // range: displayXAxis, // Fixed range prevents axis shifting during interaction or data updates
             showgrid: true,
             zeroline: false,
             showline: true,
@@ -2148,7 +2256,7 @@ const LinePlot = (props) => {
                 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
+                    color: lineData.color || "#1f77b4", // Match y-axis title color to line color
                 },
             },
             automargin: true, // Required for standoff to work properly
@@ -2164,14 +2272,33 @@ const LinePlot = (props) => {
             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
+                color: lineData.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" }) }
-        : {}));
+        }, 
+        // Second y-axis for histogram bin counts (right side)
+        yaxis2: {
+            side: "right",
+            overlaying: "y",
+            showgrid: false, // Hide grid for histogram axis
+            zeroline: false, // Hide zero line
+            showline: true,
+            linecolor: "#bababa",
+            linewidth: 1,
+            tickfont: {
+                color: histogramData.color || "rgb(150, 150, 150)",
+            },
+            title: {
+                text: y2AxisTitle || "Count",
+                font: {
+                    color: histogramData.color || "rgb(150, 150, 150)",
+                },
+                standoff: 22,
+            },
+            tickprefix: " ", // Add space between the ticks and axis
+            fixedrange: true,
+        } });
     const config = {
         responsive: true, // Make the plot responsive
         displayModeBar: false, // Hide the mode bar
@@ -2180,41 +2307,17 @@ const LinePlot = (props) => {
         staticPlot: false, // Enable interactivity
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    return (jsx("div", { ref: containerRef, style: Object.assign({}, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx("div", { style: {
-                    position: "relative",
-                    width: "100%",
-                    height: "100%",
-                }, children: jsx(Plot$1, { data: [
-                        ...(additionalContextTrace ? [additionalContextTrace] : []),
-                        ...plotlyData,
-                    ], layout: layout, config: config, useResizeHandler: true, style: {
+    return (jsx("div", { ref: containerRef, style: Object.assign({}, containerStyles), children: jsxs(Suspense, { fallback: jsx(Loading, {}), children: [jsx("div", { style: {
+                        position: "relative",
                         width: "100%",
                         height: "100%",
-                        display: "block",
-                        transition: "opacity 0.15s ease-in-out",
-                    }, onHover: () => {
-                        console.log("hovering");
-                    } }, `boxplot-${plotId || "default"}`) }) }) }));
-};
-
-const Plot = lazy(() => import('react-plotly.js'));
-const TestPlot = (props) => {
-    var _a, _b;
-    const data = [
-        {
-            x: [1, 2, 3, 4],
-            y: [10, 15, 13, 17],
-            type: 'bar',
-            marker: { color: 'blue' },
-        },
-    ];
-    const layout = {
-        title: { text: 'Test Bar Plot' },
-        xaxis: { title: { text: (_a = props.xaxisTitle) !== null && _a !== void 0 ? _a : 'X Axis' } },
-        yaxis: { title: { text: (_b = props.yaxisTitle) !== null && _b !== void 0 ? _b : 'Y Axis' } },
-    };
-    return jsx(Plot, { data: data, layout: layout });
+                    }, children: jsx(Plot, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, style: {
+                            width: "100%",
+                            height: "100%",
+                            display: "block",
+                            transition: "opacity 0.15s ease-in-out",
+                        }, revision: revision }, `lineplot-${plotId || "default"}`) }), jsx("div", { style: { display: "none" }, children: jsx(Plot, { data: histogramPlotlyData, layout: { width: 400, height: 300 }, onInitialized: handlePlotInitialized }, `hidden-histogram-${plotId || "default"}-${hiddenPlotKey}`) })] }) }));
 };
 
-export { BoxPlot, HistogramPlot, LinePlot, PairedComparisonsBoxPlot, RadialHistogramPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, TestPlot, isDateArray, isNumberArray };
+export { BoxPlot, HistogramPlot, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
 //# sourceMappingURL=index.esm.js.map