td-plots 1.10.1 → 1.10.2

package/dist/components/BarPlot.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
+export interface BarGroup {
+    name: string;
+    label?: string;
+    min: number;
+    max: number;
+    color: string;
+}
 export interface BarPlotProps {
     data: {
         x: number;
@@ -6,6 +13,8 @@ export interface BarPlotProps {
     }[];
     data2?: number[];
     data2Selected?: [number, number];
+    data2SelectedColor?: string;
+    barDataWidth?: number;
     barWidth?: number;
     barColor?: string;
     barColor2?: string;
@@ -27,6 +36,8 @@ export interface BarPlotProps {
         color?: string;
     }[];
     barHoverTemplate?: string;
+    barGroups?: BarGroup[];
+    barGroupTooltipTitle?: string;
 }
 declare const BarPlot: (props: BarPlotProps) => import("react/jsx-runtime").JSX.Element;
 export default BarPlot;

package/dist/components/LegendUtils.d.ts

@@ -3,8 +3,15 @@ export type BoxProps = {
     boxStyle: "filled" | "outlined" | "shaded";
 };
 export type LegendItemProps = {
-    label: string;
+    label: string | React.ReactNode;
     color: string;
+    width?: number;
+    height?: number;
+    styleOverrides?: React.CSSProperties;
+};
+export type LegendBoxPlotItemProps = LegendItemProps & {
     boxStyle: "filled" | "outlined" | "shaded";
 };
-export declare const LegendBoxPlotItem: (props: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LegendBoxPlotItem: (props: LegendBoxPlotItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LegendColorItem: (props: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LegendLineItem: (props: LegendItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -16,5 +16,7 @@ export { default as LineWithHistogram } from "./components/LineWithHistogram";
 export type { LineWithHistogramProps } from "./components/LineWithHistogram";
 export { default as BarPlot } from "./components/BarPlot";
 export type { BarPlotProps } from "./components/BarPlot";
+export { LegendColorItem, LegendLineItem } from "./components/LegendUtils";
+export type { LegendItemProps } from "./components/LegendUtils";
 export { isDateArray, isNumberArray } from "./components/Utils";
 export type { PlotParams } from "react-plotly.js";

package/dist/index.esm.js

@@ -1580,6 +1580,7 @@ function isBoxPlotDataSummary(value) {
         (value.mean === undefined || typeof value.mean === "number"));
 }
 
+const BOX_SIZE = 15;
 const SVGBoxWithLine = (props) => {
     const boxWidth = 35;
     const boxHeight = 15;
@@ -1588,12 +1589,45 @@ const SVGBoxWithLine = (props) => {
     return (jsxs("svg", { width: lineWidth, height: boxHeight, viewBox: `0 0 ${lineWidth + 3} ${boxHeight + 3}`, children: [jsx("line", { x1: 0, y1: lineY, x2: (lineWidth - boxWidth) / 2, y2: lineY, stroke: props.color, strokeWidth: "2" }), jsx("line", { x1: (lineWidth + boxWidth) / 2, y1: lineY, x2: lineWidth, y2: lineY, stroke: props.color, strokeWidth: "2" }), jsx("line", { x1: 0, y1: lineY - 5, x2: 0, y2: lineY + 5, stroke: props.color, strokeWidth: "2" }), jsx("line", { x1: lineWidth, y1: lineY - 5, x2: lineWidth, y2: lineY + 5, stroke: props.color, strokeWidth: "2" }), 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 }), jsx("rect", { x: (lineWidth - boxWidth) / 2, y: "0", width: boxWidth, height: boxHeight, stroke: props.color, strokeWidth: "2", fill: "none" }), 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" })] }));
 };
 const LegendBoxPlotItem = (props) => {
+    const labelKey = props.label == null
+        ? ""
+        : typeof props.label === "string"
+            ? props.label
+            : props.label.toString();
     return (jsxs(Box, { sx: {
             display: "flex",
             alignItems: "center",
             mr: 4,
             fontFamily: "Open Sans, verdana, arial, sans-serif",
-        }, children: [jsx(SVGBoxWithLine, { color: props.color, boxStyle: props.boxStyle }), props.label] }, props.label));
+        }, children: [jsx(SVGBoxWithLine, { color: props.color, boxStyle: props.boxStyle }), props.label] }, labelKey));
+};
+const LegendColorItem = (props) => {
+    const labelKey = props.label == null
+        ? ""
+        : typeof props.label === "string"
+            ? props.label
+            : props.label.toString();
+    return (jsxs(Box, { sx: {
+            display: "flex",
+            alignItems: "center",
+            mr: 4,
+            fontFamily: "Open Sans, verdana, arial, sans-serif",
+        }, children: [jsx(Box, { sx: Object.assign({ width: props.width || BOX_SIZE, height: props.height || BOX_SIZE, backgroundColor: props.color, marginRight: 1 }, props.styleOverrides) }), props.label] }, labelKey));
+};
+const LegendLineItem = (props) => {
+    const lineWidth = props.width || 40;
+    const lineHeight = props.height || 4;
+    const labelKey = props.label == null
+        ? ""
+        : typeof props.label === "string"
+            ? props.label
+            : props.label.toString();
+    return (jsxs(Box, { sx: {
+            display: "flex",
+            alignItems: "center",
+            mr: 4,
+            fontFamily: "Open Sans, verdana, arial, sans-serif",
+        }, children: [jsx("svg", { width: lineWidth, height: lineHeight, style: { marginRight: 8 }, children: jsx("line", { x1: 0, y1: lineHeight / 2, x2: lineWidth, y2: lineHeight / 2, stroke: props.color, strokeWidth: lineHeight }) }), props.label] }, labelKey));
 };
 
 // This component takes grouped data and transforms it for displaying with the BoxPlot component.
@@ -2322,30 +2356,88 @@ const LineWithHistogram = (props) => {
 
 const Plot = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const BarPlot = (props) => {
-    const { data, data2 = null, data2Selected = [], barWidth = 0.8, barColor = "rgb(205, 26, 154)", // Default bar color (red)
+    var _a, _b;
+    const { data, data2 = null, data2Selected = [], barDataWidth = 2, barWidth = 0.8, barColor = "rgb(205, 26, 154)", // Default bar color (red)
     barColor2 = "rgba(100, 200, 255, 0.7)", // Default histogram bar color (blue)
+    data2SelectedColor = "rgba(255, 0, 0, 0.5)", // Default color for the histogram selection box (red)
     width = 600, height = 400, title = "", title2 = "", // Default title for histogram subplot
     xAxisTitle = "X Axis", yAxisTitle = "Y Axis", xAxis2Title = "", yAxis2Title = "", xAccessor = (d) => d.x, yAccessor = (d) => d.y, containerStyleOverrides = {}, plotId = "bar-plot", xAnnotations = [], barHoverTemplate = "", // Default hover template for bars
+    barGroups = [], // Optional array of bar groups for grouping bars by color
+    barGroupTooltipTitle = "Group", // Default title for the bar group tooltip
      } = props;
     // Ref for plot container
     const containerRef = useRef(null);
+    const plotMetaRef = useRef(null);
+    const [barGroupTooltip, setBarGroupTooltip] = useState(null);
     const y2AxisPosition = 0.72; // Position of the secondary y-axis (histogram) as a fraction of the plot height
+    const capturePlotMeta = (_figure, graphDiv) => {
+        var _a, _b, _c;
+        try {
+            const m = (_a = graphDiv._fullLayout) === null || _a === void 0 ? void 0 : _a.margin;
+            const r = (_c = (_b = graphDiv._fullLayout) === null || _b === void 0 ? void 0 : _b.xaxis) === null || _c === void 0 ? void 0 : _c.range;
+            if (m && r) {
+                plotMetaRef.current = {
+                    xRange: r,
+                    margin: { l: m.l, r: m.r, t: m.t, b: m.b },
+                };
+            }
+        }
+        catch (_d) { }
+    };
+    const handleBarGroupMouseMove = (e) => {
+        var _a;
+        if (!containerRef.current ||
+            barGroups.length === 0 ||
+            !plotMetaRef.current) {
+            setBarGroupTooltip(null);
+            return;
+        }
+        const { xRange, margin } = plotMetaRef.current;
+        const rect = containerRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const containerHeight = containerRef.current.clientHeight;
+        const containerWidth = containerRef.current.clientWidth;
+        const plotW = containerWidth - margin.l - margin.r;
+        containerHeight - margin.t - margin.b;
+        const plotBottom = containerHeight - margin.b;
+        // barGroupShapes sit at y0=-0.02, y1=-0.04 in paper coords (just below the x-axis line)
+        const stripTop = plotBottom - 10; // Plot bottom extends further than the x axis. Value here adjusted manually.
+        const stripBottom = plotBottom + 20; // approximate. Doesn't have to be perfect.
+        if (mouseY < stripTop || mouseY > stripBottom) {
+            setBarGroupTooltip(null);
+            return;
+        }
+        const dataX = xRange[0] + ((mouseX - margin.l) / plotW) * (xRange[1] - xRange[0]);
+        const hovered = barGroups.find((g) => dataX >= g.min && dataX <= g.max);
+        setBarGroupTooltip(hovered
+            ? {
+                x: mouseX,
+                y: plotBottom,
+                name: hovered.name,
+                label: (_a = hovered.label) !== null && _a !== void 0 ? _a : hovered.name,
+                color: hovered.color,
+                min: hovered.min,
+                max: hovered.max,
+            }
+            : null);
+    };
     const plotlyData = [
         {
             x: data.map((point) => xAccessor(point)),
             y: data.map((point) => yAccessor(point)),
-            // customdata: data.map((point) => [xAccessor(point) + 2]),
+            customdata: data.map((point) => [xAccessor(point) + barDataWidth]),
             yaxis: "y",
             type: "bar",
             marker: {
-                color: barColor, // Use the provided bar color
+                color: "white", // Use the provided bar color
                 line: {
-                    color: "white",
-                    width: 0.5,
+                    color: barColor,
+                    width: 2,
                 },
             },
             width: barWidth, // width centered on the x value.
-            // hovertemplate: barHoverTemplate || "%{y}", // Use provided hover template or default to showing y value
+            hovertemplate: barHoverTemplate || "%{y}", // Use provided hover template or default to showing y value
         },
     ];
     const histogramSubplotData = data2
@@ -2362,11 +2454,10 @@ const BarPlot = (props) => {
                 },
                 xaxis: "x2", // Use secondary x-axis for histogram
                 yaxis: "y2", // Place histogram on secondary y-axis
+                hovertemplate: "[%{x})<br>Count: %{y}<extra></extra>", // Custom hover text
             },
         ]
         : [];
-    // Create a multiply-like effect by using a semi-transparent dark overlay
-    const multiplyColor = "rgba(29, 104, 185, 0.1)";
     const selectedHistogramShape = data2Selected.length === 2
         ? [
             {
@@ -2376,10 +2467,10 @@ const BarPlot = (props) => {
                 y0: y2AxisPosition, // Start at the top of the histogram subplot
                 y1: 1,
                 yref: "paper",
-                fillcolor: multiplyColor,
                 line: {
-                    width: 1,
-                    color: multiplyColor,
+                    width: 2,
+                    color: data2SelectedColor,
+                    dash: "dot",
                 },
                 layer: "above", // Ensure the selection box is above the bars
             },
@@ -2455,6 +2546,59 @@ const BarPlot = (props) => {
             },
         ]
         : [];
+    const xMax = data.length > 0 ? Math.max(...data.map((d) => xAccessor(d))) : 0;
+    const barGroupShapes = barGroups.flatMap((group) => [
+        {
+            type: "rect",
+            xref: "x",
+            yref: "paper",
+            x0: group.min,
+            x1: group.max > xMax ? xMax + barWidth : group.max,
+            y0: -0.02,
+            y1: -0.07,
+            fillcolor: group.color,
+            line: {
+                width: 1,
+                color: "white",
+            },
+        },
+    ]);
+    const barGroupShapeAnnotation = barGroups.length > 0
+        ? {
+            xref: "x",
+            yref: "paper",
+            x: barGroups[0].min + barDataWidth / 2,
+            y: -0.043,
+            text: barGroupTooltipTitle,
+            showarrow: false,
+            yanchor: "middle",
+            xanchor: "left",
+            font: {
+                size: 14,
+                color: "#fff",
+                weight: 500,
+            },
+        }
+        : null;
+    const barGroupHighlightBox = barGroupTooltip
+        ? [
+            {
+                type: "rect",
+                xref: "x",
+                yref: "paper",
+                x0: barGroupTooltip.min,
+                x1: barGroupTooltip.max > xMax ? xMax + barWidth : barGroupTooltip.max,
+                y0: 0,
+                y1: data2 ? y2AxisPosition - 0.02 : 1,
+                fillcolor: colorToRGBA(barGroupTooltip.color, 0.2),
+                line: {
+                    width: 2,
+                    color: barGroupTooltip.color,
+                },
+                layer: "above",
+            },
+        ]
+        : [];
     const layout = Object.assign(Object.assign(Object.assign(Object.assign({ title: data2
             ? undefined
             : {
@@ -2481,8 +2625,9 @@ const BarPlot = (props) => {
             linecolor: "#bababa",
             linewidth: 1,
             fixedrange: true, // Disable zooming
-            // tickformat: isDateArray(data) ? dateTickFormat : d3FormatValueString, // Format ticks for dates
             automargin: true, // Adjust margin if tick labels rotate
+            ticklen: 21,
+            tickcolor: "white",
         } }, (data2 && {
         xaxis2: {
             title: {
@@ -2547,12 +2692,14 @@ const BarPlot = (props) => {
     })), { bargap: 0.03, shapes: [
             ...titleBackgroundShapes,
             ...selectedHistogramShape,
+            ...barGroupShapes,
+            ...barGroupHighlightBox,
             ...xAnnotations.map((annotation) => ({
                 type: "line",
                 x0: annotation.x,
                 x1: annotation.x,
                 y0: 0,
-                y1: 1.1,
+                y1: 1.05,
                 xref: "x",
                 yref: "paper",
                 line: {
@@ -2562,9 +2709,10 @@ const BarPlot = (props) => {
             })),
         ], annotations: [
             ...titleAnnotations,
+            ...(barGroupShapeAnnotation ? [barGroupShapeAnnotation] : []),
             ...xAnnotations.map((annotation) => ({
                 x: annotation.x,
-                y: 1.11,
+                y: 1.06,
                 xref: "x",
                 yref: "paper",
                 text: annotation.text || "",
@@ -2576,7 +2724,6 @@ const BarPlot = (props) => {
                 },
             })),
         ] });
-    console.log("BarPlot layout:", layout);
     const config = {
         responsive: true, // Make the plot responsive
         displayModeBar: false, // Hide the mode bar
@@ -2585,20 +2732,39 @@ const BarPlot = (props) => {
         staticPlot: false, // Enable interactivity
     };
     const containerStyles = Object.assign({ width: "100%", height: "100%", position: "relative" }, containerStyleOverrides);
-    console.log([...plotlyData, ...histogramSubplotData]);
-    return (jsx("div", { ref: containerRef, className: `plot-container histogram ${plotId}`, style: Object.assign({}, containerStyles), children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx("div", { style: {
-                    position: "relative",
-                    width: "100%",
-                    height: "100%",
-                }, children: jsx(Plot, { data: [...plotlyData, ...histogramSubplotData], 
-                    // Type doesn't contain "mirror" prop but it works.
-                    //@ts-ignore
-                    layout: layout, config: config, useResizeHandler: true, style: {
+    return (jsxs("div", { ref: containerRef, className: `plot-container histogram ${plotId}`, style: Object.assign(Object.assign({}, containerStyles), { cursor: barGroupTooltip ? "pointer" : "default" }), onMouseMove: handleBarGroupMouseMove, onMouseLeave: () => setBarGroupTooltip(null), children: [jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx("div", { style: {
+                        position: "relative",
                         width: "100%",
                         height: "100%",
-                        display: "block",
-                        transition: "opacity 0.15s ease-in-out",
-                    } }, `bar-${plotId || "default"}`) }) }) }));
+                    }, children: jsx(Plot, { data: [...plotlyData, ...histogramSubplotData], 
+                        // Type doesn't contain "mirror" prop but it works.
+                        //@ts-ignore
+                        layout: layout, config: config, useResizeHandler: true, style: {
+                            width: "100%",
+                            height: "100%",
+                            display: "block",
+                            transition: "opacity 0.15s ease-in-out",
+                        }, onInitialized: capturePlotMeta, onUpdate: capturePlotMeta }, `bar-${plotId || "default"}`) }) }), barGroupTooltip && (jsxs("div", { style: {
+                    position: "absolute",
+                    left: barGroupTooltip.x + 250 >
+                        ((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : Infinity)
+                        ? barGroupTooltip.x - 250
+                        : barGroupTooltip.x + 12,
+                    top: barGroupTooltip.y + 10,
+                    backgroundColor: "rgba(255, 255, 255, 0.9)",
+                    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 ${barGroupTooltip.color}`,
+                    fontFamily: '"Open Sans", verdana, arial, sans-serif',
+                    maxWidth: "250px",
+                }, children: [barGroupTooltipTitle, ": ", jsx("b", { children: barGroupTooltip.label })] }))] }));
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -100082,5 +100248,5 @@ var reactPlotlyWrapper$1 = /*#__PURE__*/Object.freeze({
   default: reactPlotlyWrapper
 });
 
-export { BarPlot, BoxPlot, HistogramPlot, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
+export { BarPlot, BoxPlot, HistogramPlot, LegendColorItem, LegendLineItem, LineWithHistogram, PairedComparisonsBoxPlot, RadialHistogramPlot, StatsDonut, SummaryComparisonPlot, SummaryComparisonPlotLegend, isDateArray, isNumberArray };
 //# sourceMappingURL=index.esm.js.map