td-plots 1.11.6 → 1.12.0

package/dist/components/LineOnHistogram.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { PlotParams } from "react-plotly.js";
+export interface LineDataTrace {
+    x: Date[];
+    y: number[];
+    name?: string;
+    color?: string;
+    hovertemplate?: string;
+}
+export interface HistogramDataTrace {
+    x: Date[];
+    name?: string;
+    color?: string;
+    hovertemplate?: string;
+}
+export interface LineOnHistogramProps {
+    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 LineOnHistogram: (props: LineOnHistogramProps) => import("react/jsx-runtime").JSX.Element;
+export default LineOnHistogram;

package/dist/components/Utils.d.ts

@@ -1,4 +1,5 @@
 export declare const ONEAVGMONTH = 2629800000;
+export declare const ONEWEEK = 604800000;
 export declare const ONEDAY = 86400000;
 export declare const ONEHOUR = 3600000;
 export declare const ONEMINUTE = 60000;

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export type { SummaryComparisonPlotProps } from "./components/SummaryComparisonP
 export { SummaryComparisonPlotLegend } from "./components/SummaryComparisonPlot";
 export { default as LineWithHistogram } from "./components/LineWithHistogram";
 export type { LineWithHistogramProps } from "./components/LineWithHistogram";
+export { default as LineOnHistogram } from "./components/LineOnHistogram";
+export type { LineOnHistogramProps } from "./components/LineOnHistogram";
 export { default as BarPlot } from "./components/BarPlot";
 export type { BarPlotProps } from "./components/BarPlot";
 export { LegendColorItem, LegendLineItem } from "./components/LegendUtils";

package/dist/index.esm.js

@@ -355,6 +355,7 @@ function defaultLocale$2(definition) {
 
 // Utility functions for our components
 const ONEAVGMONTH = 2629800000; // Average month length in ms, copied from plotly constants in plotly.js/src/constants/numerical.js
+const ONEWEEK = 604800000; // One week in milliseconds
 const ONEDAY = 86400000; // One day in milliseconds
 const ONEHOUR = 3600000; // One hour in milliseconds
 const ONEMINUTE = 60000; // One minute in milliseconds
@@ -402,12 +403,12 @@ function calculateStandardDeviation(arr) {
 // Helpful for making nice bins
 const roundToNextDay = (timestamp) => {
     const date = new Date(timestamp);
-    date.setHours(23, 59, 59, 999); // End of day
+    date.setUTCHours(23, 59, 59, 999); // End of day
     return date.toISOString();
 };
 const roundToPrevDay = (timestamp) => {
     const date = new Date(timestamp);
-    date.setHours(0, 0, 0, 0); // Start of day
+    date.setUTCHours(0, 0, 0, 0); // Start of day
     return date.toISOString();
 };
 // Convert plotly M# string to number of milliseconds
@@ -540,7 +541,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(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$7 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 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;
@@ -1292,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" }) }) })] })), 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$7, { data: plotlyData, layout: layout, config: config, onSelected: handleSelection, onClick: handleClick, onDeselect: () => {
                             onDeselect();
                             setSelectedRange(null); // Remove selected box
                         }, onUpdate: handlePlotUpdate, useResizeHandler: true, style: {
@@ -1303,7 +1304,7 @@ const HistogramPlot = (props) => {
                         } }, `histogram-${plotId || "default"}`)] }) }) }));
 };
 
-const Plot$5 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$6 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 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;
@@ -1403,14 +1404,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$6, { data: plotlyData, layout: layout, config: config, onSelected: onSelected, onClick: onClick, useResizeHandler: true, style: {
                     width: "100%",
                     height: "100%",
                     display: "block",
                 } }) }) }));
 };
 
-const Plot$4 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$5 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const StatsDonut = (props) => {
     const { withCenterLabel = false, centerLabel, centerValue, showLegend = true, legendPosition = "right", containerStyle = {}, } = props;
     // Configure legend position based on prop
@@ -1458,7 +1459,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$5, { data: [
                     {
                         type: "pie",
                         values: props.values,
@@ -1491,7 +1492,7 @@ const StatsDonut = (props) => {
                 }, useResizeHandler: true }) }) }));
 };
 
-const Plot$3 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$4 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const BoxPlot = (props) => {
     const { data, width = 600, height = 400, title = "Box Plot", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "boxplot", extraLayoutConfig = {}, } = props;
     // Ref for plot container
@@ -1544,7 +1545,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$4, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, 
                         // onHover={handleHover}
                         // onUnhover={handleUnhover}
                         style: {
@@ -2074,7 +2075,7 @@ const SplitBoxPlot = (props) => {
     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 Plot$3 = 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 = "", xAnnotations = [], tooltipLabels = {}, d3FormatValueString = ".1f", } = props;
     // Ref for plot container
@@ -2349,7 +2350,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$3, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, onHover: handleHover, onUnhover: handleUnhover, style: {
                             width: "100%",
                             height: `${height}px`,
                             display: "block",
@@ -2404,7 +2405,7 @@ const SummaryComparisonPlotLegend = ({ comparedDataLabel, summarizedDataLabel, c
                                 } })] }), jsx("span", { children: comparedDataLabel })] }), jsxs("div", { style: { display: "flex", gap: "5px", alignItems: "center" }, children: [jsx(Box, { sx: { width: 30, height: 5, backgroundColor: color } }), jsx("span", { children: summarizedDataLabel })] })] }));
 };
 
-const Plot$1 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const Plot$2 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 // 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.
@@ -2528,7 +2529,7 @@ const LineWithHistogram = (props) => {
             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
+                color: "white", // Match fill color
                 width: 0, // No border
             },
             layer: "below", // Ensure shapes are drawn below traces
@@ -2552,7 +2553,7 @@ const LineWithHistogram = (props) => {
             zeroline: false,
             showline: true,
             mirror: "ticks",
-            gridcolor: "#efefef",
+            gridcolor: "rgba(239, 239, 239, 0.5)",
             gridwidth: 0.2,
             zerolinecolor: "#969696",
             zerolinewidth: 1,
@@ -2620,12 +2621,142 @@ const LineWithHistogram = (props) => {
                         position: "relative",
                         width: "100%",
                         height: "100%",
-                    }, children: jsx(Plot$1, { data: plotlyData, layout: layout, config: config, useResizeHandler: true, style: {
+                    }, children: jsx(Plot$2, { 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$1, { data: histogramPlotlyData, layout: { width: 400, height: 300 }, onInitialized: handlePlotInitialized }, `hidden-histogram-${plotId || "default"}-${hiddenPlotKey}`) })] }) }));
+                        }, revision: revision }, `lineplot-${plotId || "default"}`) }), jsx("div", { style: { display: "none" }, children: jsx(Plot$2, { data: histogramPlotlyData, layout: { width: 400, height: 300 }, onInitialized: handlePlotInitialized }, `hidden-histogram-${plotId || "default"}-${hiddenPlotKey}`) })] }) }));
+};
+
+const Plot$1 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
+const SPLIT = 0.33;
+const GAP = 0.03;
+// Stacked subplots sharing a single x-axis: histogram on top (yaxis2), line on bottom (yaxis).
+// Because both traces use xaxis "x", hovermode "x unified" spans both panels simultaneously.
+// histogramData.x must be in the same domain as lineData.x for hover to be meaningful.
+const LineOnHistogram = (props) => {
+    const { lineData, histogramData, title, xAxisTitle, yAxisTitle, y2AxisTitle, containerStyleOverrides, plotId = "lineplot", extraLayoutConfig = {}, revision = 0, } = props;
+    const sharedAxisStyle = {
+        showgrid: true,
+        zeroline: false,
+        showline: true,
+        mirror: "ticks",
+        gridcolor: "rgba(239, 239, 239, 0.5)",
+        gridwidth: 0.2,
+        linecolor: "#bababa",
+        linewidth: 1,
+        fixedrange: true,
+    };
+    const lineDataTimes = lineData.x.map((d) => d.getTime());
+    const adjustedBinSize = lineDataTimes.length > 1 &&
+        Math.max(...lineDataTimes) - Math.min(...lineDataTimes) > ONEAVGMONTH * 6
+        ? ONEWEEK
+        : ONEDAY;
+    const lineMarkerSymbols = lineData.x.map((d, i) => {
+        if (i === 0) {
+            return "arrow-up";
+        }
+        if (i === lineData.x.length - 1) {
+            return "arrow-up";
+        }
+        return "circle";
+    });
+    const lineMarkerSymbolStandoff = lineData.x.map((d, i) => {
+        if (i === 0) {
+            return -6;
+        }
+        if (i === lineData.x.length - 1) {
+            return -6;
+        }
+        return 0;
+    });
+    const lineMarkerSymbolAngles = lineData.x.map((d, i) => {
+        if (i === 0) {
+            return -90;
+        }
+        if (i === lineData.x.length - 1) {
+            return 90;
+        }
+        return 0;
+    });
+    const plotlyData = [
+        {
+            type: "histogram",
+            x: histogramData.x,
+            xaxis: "x",
+            yaxis: "y",
+            xbins: histogramData.x.length > 0
+                ? {
+                    size: adjustedBinSize,
+                    start: roundToPrevDay(Math.min(...histogramData.x.map((d) => new Date(d).getTime()))),
+                    end: new Date(Math.max(...histogramData.x.map((d) => new Date(d).getTime())) +
+                        adjustedBinSize).toISOString(),
+                }
+                : undefined,
+            name: histogramData.name || "histogram",
+            marker: {
+                color: histogramData.color || "rgb(211, 211, 212)",
+                line: { color: "white", width: 0.5 },
+            },
+            hovertemplate: histogramData.hovertemplate || "Count: %{y}<extra></extra>",
+        },
+        {
+            // Invisible dummy trace — forces xaxis2 (top x-axis) to render
+            type: "scatter",
+            x: histogramData.x.slice(0, 1),
+            y: [null],
+            xaxis: "x2",
+            yaxis: "y2",
+            mode: "markers",
+            marker: { opacity: 0, size: 0.1 },
+            hoverinfo: "skip",
+            showlegend: false,
+        },
+        {
+            type: "scatter",
+            mode: "lines+markers",
+            x: lineData.x,
+            y: lineData.y,
+            xaxis: "x",
+            yaxis: "y2",
+            name: lineData.name,
+            line: { color: lineData.color || "#1f77b4", shape: "hv" },
+            marker: {
+                color: lineData.color || "#1f77b4",
+                size: 6,
+                symbol: lineMarkerSymbols,
+                // @ts-ignore
+                standoff: lineMarkerSymbolStandoff,
+                angle: lineMarkerSymbolAngles,
+            },
+            hovertemplate: lineData.hovertemplate || "%{y}<extra></extra>",
+        },
+    ];
+    const layout = Object.assign(Object.assign({}, extraLayoutConfig), { title: { text: title }, showlegend: false, autosize: true, width: undefined, height: undefined, hovermode: "x unified", margin: { l: 50, r: 20, t: title ? 50 : 40, b: 50, pad: 4 }, xaxis: Object.assign(Object.assign({}, sharedAxisStyle), { title: { text: xAxisTitle }, domain: [0, 1], anchor: "y", ticklen: 4, tickcolor: "white", 
+            //@ts-ignore
+            unifiedhovertitle: {
+                text: "%{x|%B %d, %Y}",
+            } }), xaxis2: Object.assign(Object.assign({}, sharedAxisStyle), { overlaying: "x", matches: "x", side: "top", anchor: "y2", ticklen: 4, tickcolor: "white" }), yaxis: Object.assign(Object.assign({}, sharedAxisStyle), { domain: [0, SPLIT - GAP / 2], anchor: "x", title: {
+                text: yAxisTitle || "",
+                standoff: 12,
+            }, automargin: true, gridcolor: "#efefef", tickcolor: "white", ticklen: 10 }), yaxis2: Object.assign(Object.assign({}, sharedAxisStyle), { domain: [SPLIT + GAP / 2, 1], anchor: "x", showgrid: false, zeroline: false, showline: true, linecolor: "#bababa", linewidth: 1, fixedrange: true, title: {
+                text: y2AxisTitle || "Count",
+                standoff: 12,
+            }, nticks: new Set(lineData.y).size === 1 ? 1 : undefined, tickvals: new Set(lineData.y).size === 1 ? [lineData.y[0]] : undefined }) });
+    const config = {
+        responsive: true,
+        displayModeBar: false,
+        displaylogo: false,
+        scrollZoom: false,
+        staticPlot: false,
+    };
+    return (jsx("div", { style: Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Plot$1, { 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"}`) }) }));
 };
 
 const Plot = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
@@ -100555,5 +100686,5 @@ var reactPlotlyWrapper$1 = /*#__PURE__*/Object.freeze({
   default: reactPlotlyWrapper
 });
 
-export { BarPlot, BoxPlot, HistogramPlot, LegendColorItem, LegendLineItem, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, SplitBoxPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
+export { BarPlot, BoxPlot, HistogramPlot, LegendColorItem, LegendLineItem, LineOnHistogram, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, SplitBoxPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
 //# sourceMappingURL=index.esm.js.map