td-plots 1.11.2 → 1.11.3

package/dist/index.js

@@ -1820,7 +1820,7 @@ const PairedComparisonsBoxPlot = (props) => {
 // This component shows a set of main boxplots as one collection, then allowes for additional
 // boxes to be shown in a subplot above the main boxplots for comparison.
 const SplitBoxPlot = (props) => {
-    const { groups, additionalGroups = [], width = 600, height = 400, title = "", xAxisTitle, yAxisTitle, secondXAxisTitle, secondYAxisTitle, containerStyleOverrides, plotId = "paired-comparisons-boxplot", xAnnotations = [], } = props;
+    const { groups, additionalGroups = [], width = 600, height = 400, title = "", xAxisTitle, yAxisTitle, secondXAxisTitle, secondYAxisTitle, containerStyleOverrides, plotId = "paired-comparisons-boxplot", xAnnotations = [], d3FormatValueString = ".1f", addExtraYTitleRoom = false, } = props;
     // Transform the grouped data into an array for BoxPlot
     const boxPlotData = [
         ...groups.flatMap((group, groupIndex) => {
@@ -1924,23 +1924,14 @@ const SplitBoxPlot = (props) => {
     });
     const totalGroups = groups.length + additionalGroups.length;
     const yAxisSplitProportion = additionalGroups.length > 0 ? groups.length / totalGroups : 1;
-    // Render y-axis titles as annotations so we can specifically set xshift in px from the axis.
-    // Calculating approximate label width in pixels to ensure the title is far enough away from the longest label,
-    // with a minimum distance to look good even with short labels.
-    const charWidth = 8; // ~px per character for Open Sans 14px (Plotly title font)
-    const primaryMaxChars = Math.max(0, ...groups.map((g) => g.label.length));
-    const secondaryMaxChars = additionalGroups.length > 0
-        ? Math.max(0, ...additionalGroups.map((g) => g.label.length))
-        : primaryMaxChars;
-    const maxLabelChars = Math.max(primaryMaxChars, secondaryMaxChars);
-    const approxLabelPx = maxLabelChars * charWidth;
+    const xshift = addExtraYTitleRoom ? -140 : -130; // Add extra shift if we're adding extra room for y-axis titles
     const yAxisTitleAnnotations = [];
     if (yAxisTitle) {
         const domainTop = additionalGroups.length > 0 ? yAxisSplitProportion - 0.01 : 1;
         yAxisTitleAnnotations.push({
             text: yAxisTitle,
             x: 0,
-            xshift: -120,
+            xshift: xshift,
             y: domainTop / 2,
             xref: "paper",
             yref: "paper",
@@ -1959,7 +1950,7 @@ const SplitBoxPlot = (props) => {
         yAxisTitleAnnotations.push({
             text: secondYAxisTitle,
             x: 0,
-            xshift: -120,
+            xshift: xshift,
             y: (yAxisSplitProportion + 1) / 2,
             xref: "paper",
             yref: "paper",
@@ -1990,15 +1981,17 @@ const SplitBoxPlot = (props) => {
             ticklabelstandoff: 7,
             ticklabelposition: "outside left",
             title: { text: "" }, // rendered via annotation instead
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
         }, xaxis: {
             anchor: "y", // Anchor to primary y-axis
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
         }, margin: {
             t: title ? 50 : 70,
             r: 20,
-            l: Math.max(130, approxLabelPx + 40),
+            l: 80, // Got to complicated to calculate. Adjust if necessary.
         }, shapes: [
             ...separatorShapes,
-            // ...differenceBetweenMediansLines,
             ...xAnnotations.map((annotation, annotationIndex) => ({
                 type: "line",
                 x0: annotation.x,
@@ -2051,6 +2044,7 @@ const SplitBoxPlot = (props) => {
             fixedrange: true,
             automargin: true,
             matches: "x", // Match the range of xaxis to keep them synchronized
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
         },
     })), (additionalGroups.length > 0 && {
         yaxis2: {
@@ -2086,7 +2080,7 @@ const Plot$2 = React.lazy(() => Promise.resolve().then(function () { return reac
 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 = {}, } = props;
+    tooltipLabels = {}, d3FormatValueString = ".1f", } = props;
     // Ref for plot container
     const containerRef = React.useRef(null);
     // State for custom tooltip
@@ -2172,6 +2166,7 @@ const SummaryComparisonPlot = (props) => {
     };
     const comparedLines = [];
     const comparedAnnotations = [];
+    console.log("d3FormatValueString:", d3FormatValueString);
     // Transform the data into a format suitable for a plotly scatterplot
     const plotlyData = groups.flatMap((group, groupIndex) => {
         const traces = [];
@@ -2229,7 +2224,7 @@ const SummaryComparisonPlot = (props) => {
                 y: 1.1,
                 xref: "x",
                 yref: "paper",
-                text: `${group.data.userValue.toFixed(2)} ${unit}`,
+                text: `${format$1(d3FormatValueString)(group.data.userValue)} ${unit}`,
                 showarrow: false,
                 xanchor: "center",
                 yanchor: "bottom",
@@ -2271,7 +2266,7 @@ const SummaryComparisonPlot = (props) => {
         height: height,
         autosize: true,
         margin: {
-            l: 130,
+            l: 100,
             r: 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.
             t: title ? 70 : 40,
             b: 50,
@@ -2312,6 +2307,7 @@ const SummaryComparisonPlot = (props) => {
             zerolinewidth: 1,
             linecolor: "#bababa",
             linewidth: 1,
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
         },
         yaxis: {
             title: {
@@ -2649,7 +2645,7 @@ const BarPlot = (props) => {
     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;
+    d3FormatValueString = ".1f", } = props;
     // Ref for plot container
     const containerRef = React.useRef(null);
     const plotMetaRef = React.useRef(null);
@@ -2785,8 +2781,8 @@ const BarPlot = (props) => {
                 xref: "paper",
                 yref: "paper",
                 x0: 0,
-                y0: y2AxisPosition - 0.3, // Position behind the primary title
-                x1: 0.02 + title.length * 0.015, // Approximate width based on title length
+                y0: y2AxisPosition - 0.11, // Position behind the primary title
+                x1: 0.02 + title.length * 0.01, // Approximate width based on title length 0.3/
                 y1: y2AxisPosition - 0.01,
                 fillcolor: "rgba(255, 255, 255, 0.5)",
                 line: {
@@ -2924,6 +2920,7 @@ const BarPlot = (props) => {
                 text: xAxisTitle,
             },
             anchor: "y", // Anchor to primary y-axis
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
             showgrid: true,
             zeroline: false,
             showline: true,
@@ -2940,6 +2937,7 @@ const BarPlot = (props) => {
                 ? BAR_GROUP_SHAPE_TOP_PX + BAR_GROUP_SHAPE_HEIGHT_PX
                 : 8, // tick length in px.
             tickcolor: "white",
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
         } }, (data2 && {
         xaxis2: {
             title: {
@@ -2961,6 +2959,7 @@ const BarPlot = (props) => {
             fixedrange: true,
             automargin: true,
             matches: "x", // Match the range of xaxis to keep them synchronized
+            tickformat: d3FormatValueString, // Format ticks using provided d3 format string
         },
     })), { yaxis: {
             title: {
@@ -2968,6 +2967,8 @@ const BarPlot = (props) => {
                 standoff: 15, // Add space between title and axis
             },
             domain: data2 ? [0, y2AxisPosition - 0.01] : [0, 1], // Ensure primary y-axis takes full height
+            hoverformat: d3FormatValueString, // Format hover values using provided d3 format string
+            nticks: 7, // Limit number of ticks to prevent overcrowding with the histogram
             automargin: true, // Required for standoff to work properly
             showgrid: true,
             zeroline: false,