@guardian/interactive-component-library 0.1.0-alpha.24 → 0.1.0-alpha.25

package/dist/interactive-component-library.umd.cjs

@@ -150,6 +150,8 @@
     backgroundRect
   };
   function preventOverlap(labelPositions, iteration = 0, labelSize = 12, coordinate = "y", moveBothLabels = true) {
+    const maxIterations = 10;
+    let totalOverlap = 0;
     for (let index2 = 1; index2 < labelPositions.length; index2++) {
       const previousElement = labelPositions[index2 - 1];
       const element = labelPositions[index2];
@@ -163,8 +165,12 @@
       } else {
         previousElement[coordinate] -= overlap;
       }
-      return labelPositions;
+      totalOverlap += overlap;
     }
+    if (totalOverlap > 0 && iteration < maxIterations) {
+      return preventOverlap(labelPositions, iteration + 1, labelSize, coordinate, moveBothLabels);
+    }
+    return labelPositions;
   }
   function uniqueBy(array, key) {
     return [...array.reduce((map, d2) => map.set(d2[key], d2), /* @__PURE__ */ new Map()).values()];
@@ -187,6 +193,10 @@
     hanging: "hanging",
     inline: "inline"
   };
+  const LabelOverlapConfig = {
+    labelSize: 20,
+    moveBothLabels: false
+  };
   function StackedBar({
     stack,
     width,
@@ -195,7 +205,8 @@
     labelType = LabelType.inline,
     showBackgroundRect = false,
     createSVG = true,
-    styles: styles2
+    styles: styles2,
+    labelOverlapConfig = LabelOverlapConfig
   }) {
     const rectElements = hooks.useRef([]);
     const textElements = hooks.useRef([]);
@@ -256,7 +267,7 @@
         totalW += itemWidth;
         return labelConfig;
       });
-      return preventOverlap(labels, 0, 20, "x", false);
+      return preventOverlap(labels, 0, labelOverlapConfig.labelSize, "x", labelOverlapConfig.moveBothLabels);
     }, [stack, height, width]);
     const backgroundRect2 = jsxRuntime.jsx("g", {
       children: jsxRuntime.jsx("rect", {
@@ -3228,15 +3239,15 @@
       })
     });
   }
-  const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
-  const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
-  const coalition = "_coalition_1ahqy_9";
-  const title = "_title_1ahqy_27";
-  const description = "_description_1ahqy_28";
-  const thresholdText = "_thresholdText_1ahqy_43";
-  const thresholdTextBold = "_thresholdTextBold_1ahqy_54";
-  const thresholdDot = "_thresholdDot_1ahqy_61";
-  const thresholdLine = "_thresholdLine_1ahqy_61";
+  const coalitionsWrapper = "_coalitionsWrapper_4egbd_9";
+  const coalitionsContainer = "_coalitionsContainer_4egbd_14";
+  const coalition = "_coalition_4egbd_9";
+  const title = "_title_4egbd_27";
+  const description = "_description_4egbd_28";
+  const thresholdText = "_thresholdText_4egbd_43";
+  const thresholdTextBold = "_thresholdTextBold_4egbd_54";
+  const thresholdDot = "_thresholdDot_4egbd_61";
+  const thresholdLine = "_thresholdLine_4egbd_62";
   const defaultStyles = {
     coalitionsWrapper,
     coalitionsContainer,
@@ -3258,7 +3269,8 @@
     abbreviationAccessor = "abbreviation",
     thresholdTextBold: thresholdTextBold2,
     thresholdText: thresholdText2,
-    styles: styles2
+    styles: styles2,
+    labelOverlapConfig = LabelOverlapConfig
   }) {
     const wrapperRef = hooks.useRef(null);
     const thresholdTextRef = hooks.useRef(null);
@@ -3312,6 +3324,8 @@
           },
           children: list.description
         }), jsxRuntime.jsx(StackedBar, {
+          labelOverlapConfig,
+          labelType: LabelType.hanging,
           stack: list.stack,
           width: list.width,
           height: barChartHeight,
@@ -3642,6 +3656,7 @@
   exports2.GradientIcon = GradientIcon;
   exports2.GridType = GridType;
   exports2.InfoButton = InfoButton;
+  exports2.LabelOverlapConfig = LabelOverlapConfig;
   exports2.LabelType = LabelType;
   exports2.LegendItem = LegendItem;
   exports2.Map = Map$1;