td-plots 1.11.3 → 1.11.5

package/dist/components/BarPlot.d.ts

@@ -14,7 +14,6 @@ export interface BarPlotProps {
     data2?: number[];
     data2Selected?: [number, number];
     data2SelectedColor?: string;
-    barDataWidth?: number;
     barWidth?: number;
     barColor?: string;
     barColor2?: string;

package/dist/components/SummaryComparisonPlot.d.ts

@@ -1,7 +1,7 @@
 type BracketData = {
-    userValue?: number;
     populationMin: number;
     populationMax: number;
+    userValue?: number;
 };
 type BracketDataWithMeta = {
     groupLabel: string;
@@ -10,7 +10,6 @@ type BracketDataWithMeta = {
 };
 export type SummaryComparisonPlotProps = {
     groups: BracketDataWithMeta[];
-    userColor?: string;
     width?: number;
     height?: number;
     title?: string;
@@ -21,6 +20,12 @@ export type SummaryComparisonPlotProps = {
     tooltipPosition?: "left" | "right";
     startXAxisAtZero?: boolean;
     unit?: string;
+    xAnnotations?: {
+        x: number;
+        text?: string;
+        label?: string;
+        color?: string;
+    }[];
     tooltipLabels?: {
         populationMinLabel?: string;
         populationMaxLabel?: string;

package/dist/index.esm.js

@@ -2076,9 +2076,7 @@ const SplitBoxPlot = (props) => {
 
 const Plot$2 = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const SummaryComparisonPlot = (props) => {
-    const { groups, userColor = "orange", height = 250, title = "", xAxisTitle, yAxisTitle, containerStyleOverrides, plotId = "summary-comparison-plot", tooltipPosition = "right", startXAxisAtZero = true, unit = "", 
-    // xAnnotations = [], TO DO
-    tooltipLabels = {}, d3FormatValueString = ".1f", } = 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
     const containerRef = useRef(null);
     // State for custom tooltip
@@ -2162,9 +2160,8 @@ const SummaryComparisonPlot = (props) => {
     const handleUnhover = () => {
         setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
     };
-    const comparedLines = [];
-    const comparedAnnotations = [];
-    console.log("d3FormatValueString:", d3FormatValueString);
+    const xAnnotationLines = [];
+    const xAnnotationText = [];
     // Transform the data into a format suitable for a plotly scatterplot
     const plotlyData = groups.flatMap((group, groupIndex) => {
         const traces = [];
@@ -2181,22 +2178,26 @@ const SummaryComparisonPlot = (props) => {
             showlegend: false,
             hoverinfo: "none",
         });
-        if (group.data.userValue !== undefined) {
+        return traces;
+    });
+    xAnnotations.forEach((annotation, annotationIndex) => {
+        var _a, _b, _c;
+        if (xAnnotations.length > 0) {
             const CIRCLE_RADIUS_PX = 6;
-            comparedLines.push({
+            xAnnotationLines.push({
                 type: "line",
-                name: group.groupLabel,
-                x0: group.data.userValue,
-                x1: group.data.userValue,
+                name: annotation.label || "Annotation",
+                x0: annotation.x,
+                x1: annotation.x,
                 y0: 0,
                 y1: 1.1,
                 yref: "paper",
                 line: {
-                    color: colorToRGBA(userColor, 1),
+                    color: colorToRGBA((_a = annotation.color) !== null && _a !== void 0 ? _a : "orange", 1),
                     width: 2,
                 },
             });
-            comparedLines.push({
+            xAnnotationLines.push({
                 type: "circle",
                 xref: "x",
                 yref: "y",
@@ -2205,60 +2206,54 @@ const SummaryComparisonPlot = (props) => {
                 // visual size regardless of the axis scale.
                 xsizemode: "pixel",
                 ysizemode: "pixel",
-                xanchor: group.data.userValue,
-                yanchor: groupIndex * 0.1,
+                xanchor: annotation.x,
+                yanchor: annotationIndex * 0.1,
                 x0: -CIRCLE_RADIUS_PX,
                 x1: CIRCLE_RADIUS_PX,
                 y0: -CIRCLE_RADIUS_PX,
                 y1: CIRCLE_RADIUS_PX,
-                fillcolor: colorToRGBA(userColor, 1),
+                fillcolor: colorToRGBA((_b = annotation.color) !== null && _b !== void 0 ? _b : "orange", 1),
                 line: {
                     color: "white",
                     width: 1,
                 },
             });
-            comparedAnnotations.push({
-                x: group.data.userValue,
+            xAnnotationText.push({
+                x: annotation.x,
                 y: 1.1,
                 xref: "x",
                 yref: "paper",
-                text: `${format$1(d3FormatValueString)(group.data.userValue)} ${unit}`,
+                text: `${format$1(d3FormatValueString)(annotation.x)} ${unit}`,
                 showarrow: false,
                 xanchor: "center",
                 yanchor: "bottom",
                 font: {
-                    color: colorToRGBA(userColor, 1),
+                    color: colorToRGBA((_c = annotation.color) !== null && _c !== void 0 ? _c : "orange", 1),
                     size: 12,
                 },
             });
         }
-        return traces;
-    });
-    // Add tick label for the compared annotation value
-    if (comparedAnnotations.length > 0) {
-        comparedAnnotations.push({
+        // Add "tick" label
+        xAnnotationText.push({
             x: 0, // Position to the left of the y-axis
             y: 1.1, // Should match the y position of the compared median annotation
             xref: "paper",
             xshift: -10,
             yref: "paper",
-            text: "My AVG",
+            text: annotation.label || annotation.text || "Annotation",
             showarrow: false,
             xanchor: "right",
             yanchor: "bottom",
         });
-    }
+    });
     // xRangeMin a little funky because we want to ensure a non-zero value is calculated
     // in case startXAxisAtZero is false. populationMin is our anchor and
     // if that is not defined then we can fall back to a min of 0. If userValue is not defined
     // we want to listen to populationMin for computing xRangeMin.
-    const xRangeMin = groups.reduce((min, group) => { var _a; return Math.min(min, group.data.populationMin, (_a = group.data.userValue) !== null && _a !== void 0 ? _a : Infinity); }, Infinity);
+    const xRangeMin = Math.min(groups.reduce((min, group) => Math.min(min, group.data.populationMin), Infinity), xAnnotations.reduce((min, annotation) => Math.min(min, annotation.x), Infinity));
     // Similar logic for xRangeMax. If nothing is defined, set the max to 0.
     // Otherwise, listen to populationMax and userValue if given.
-    const xRangeMax = groups.reduce((max, group) => {
-        var _a;
-        return Math.max(max, group.data.populationMax, (_a = group.data.userValue) !== null && _a !== void 0 ? _a : -Infinity);
-    }, -Infinity);
+    const xRangeMax = Math.max(groups.reduce((max, group) => Math.max(max, group.data.populationMax), -Infinity), xAnnotations.reduce((max, annotation) => Math.max(max, annotation.x), -Infinity));
     const layout = {
         width: undefined,
         height: height,
@@ -2337,8 +2332,8 @@ const SummaryComparisonPlot = (props) => {
             ticklabelstandoff: 5,
         },
         hovermode: "y",
-        shapes: comparedLines,
-        annotations: comparedAnnotations,
+        shapes: xAnnotationLines,
+        annotations: xAnnotationText,
     };
     const containerStyles = Object.assign({ width: "100%", height: height, position: "relative", display: "flex", flexDirection: "column", gap: 0 }, containerStyleOverrides);
     const config = {
@@ -2636,7 +2631,7 @@ const LineWithHistogram = (props) => {
 const Plot = lazy(() => Promise.resolve().then(function () { return reactPlotlyWrapper$1; }));
 const BarPlot = (props) => {
     var _a, _b;
-    const { data, data2 = null, data2Selected = [], barDataWidth = 2, barWidth = 0.8, barColor = "rgb(205, 26, 154)", // Default bar color (red)
+    const { data, data2 = null, data2Selected = [], barWidth = 2, 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
@@ -2721,7 +2716,7 @@ const BarPlot = (props) => {
         {
             x: data.map((point) => xAccessor(point)),
             y: data.map((point) => yAccessor(point)),
-            customdata: data.map((point) => [xAccessor(point) + barDataWidth]),
+            customdata: data.map((point) => [xAccessor(point) + barWidth]),
             yaxis: "y",
             type: "bar",
             marker: {
@@ -2753,7 +2748,7 @@ const BarPlot = (props) => {
             },
         ]
         : [];
-    const selectedHistogramShape = data2Selected.length === 2
+    const selectedHistogramShape = data2Selected.length === 2 && data2Selected[0] < data2Selected[1]
         ? [
             {
                 type: "rect",
@@ -2866,7 +2861,7 @@ const BarPlot = (props) => {
         ? {
             xref: "x",
             yref: "paper",
-            x: barGroups[0].min + barDataWidth / 2,
+            x: barGroups[0].min + barWidth / 2,
             // Convert the pixel center of the shape band to a paper y coordinate using
             // the actual rendered plot area height so it stays inside the shape on any screen size.
             y: -18 /