axidio-styleguide-library1-v2 0.3.18 → 0.3.20

package/fesm2022/axidio-styleguide-library1-v2.mjs

@@ -7902,6 +7902,35 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 textNodes.classed('mobile-xaxis-override', true);
             }
         }
+        // Tablet view: auto-rotate labels vertically when they overlap or are too long
+        if (isTablet) {
+            const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
+            // Measure max label width
+            let maxLabelWidth = 0;
+            textNodes.each(function () {
+                try {
+                    const bbox = this.getBBox();
+                    if (bbox && bbox.width && bbox.width > maxLabelWidth) {
+                        maxLabelWidth = bbox.width;
+                    }
+                }
+                catch (e) {
+                    // ignore measurement errors
+                }
+            });
+            // Determine available tick slot width
+            const slotWidth = (typeof x.bandwidth === 'function') ? x.bandwidth() : 0;
+            const labelCount = textNodes.size ? textNodes.size() : 0;
+            // If labels are wider than the slot or there are many labels, rotate vertically
+            if ((slotWidth > 0 && maxLabelWidth > slotWidth * 0.75) || labelCount > 3) {
+                textNodes
+                    .style('writing-mode', 'sideways-lr')
+                    .style('text-anchor', 'middle')
+                    .attr('y', 30)
+                    .attr('x', 0)
+                    .classed('mobile-xaxis-override', true);
+            }
+        }
     }
     applyXLabelsOnSameLine(svg, subgroups, data, metaData, self, shortTickLengthBg, isMobile, isria) {
         const xAxisLabels = svg.selectAll('g.x1.axis1 g.tick text')
@@ -8611,8 +8640,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             else {
                 const words = label.split(' ');
                 text.text(null);
-                words.forEach((word) => {
-                    text.append('tspan').text(word);
+                words.forEach((word, idx) => {
+                    text.append('tspan')
+                        .attr('x', 0)
+                        .attr('dy', '0em')
+                        .text(word + (idx < words.length - 1 ? ' ' : ''));
                 });
             }
         })