axidio-styleguide-library1-v2 0.3.21 → 0.3.22

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

@@ -7902,7 +7902,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 textNodes.classed('mobile-xaxis-override', true);
             }
         }
-        // Tablet view: auto-rotate labels vertically when they overlap or are too long
+        // Tablet view: try to wrap long labels into two lines first; fall back to vertical rotation
         if (isTablet) {
             const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
             // Measure max label width
@@ -7918,17 +7918,61 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     // 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 labels are too wide or many, attempt wrapping
             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);
+                let wrapped = 0;
+                textNodes.each(function (d) {
+                    const t = d3.select(this);
+                    let label = (typeof d === 'string') ? d : t.text();
+                    if (!label || label.indexOf('\n') > -1)
+                        return;
+                    // Try splitting on spaces into two roughly equal parts
+                    if (label.indexOf(' ') > -1) {
+                        const words = label.trim().split(/\s+/);
+                        const mid = Math.ceil(words.length / 2);
+                        const first = words.slice(0, mid).join(' ');
+                        const second = words.slice(mid).join(' ');
+                        if (second && second.length > 0) {
+                            t.text(null);
+                            t.append('tspan').attr('x', 0).attr('dy', '0em').text(first);
+                            t.append('tspan').attr('x', 0).attr('dy', '1.1em').text(second);
+                            wrapped++;
+                            return;
+                        }
+                    }
+                    // If no spaces, try splitting on slash or dash
+                    const sepIdx = Math.max(label.lastIndexOf('/'), label.lastIndexOf('-'));
+                    if (sepIdx > 0 && sepIdx < label.length - 1) {
+                        const first = label.substring(0, sepIdx + 1);
+                        const second = label.substring(sepIdx + 1);
+                        t.text(null);
+                        t.append('tspan').attr('x', 0).attr('dy', '0em').text(first);
+                        t.append('tspan').attr('x', 0).attr('dy', '1.1em').text(second);
+                        wrapped++;
+                        return;
+                    }
+                    // Fallback: split roughly in the middle
+                    if (label.length > 8) {
+                        const mid = Math.floor(label.length / 2);
+                        const first = label.substring(0, mid);
+                        const second = label.substring(mid);
+                        t.text(null);
+                        t.append('tspan').attr('x', 0).attr('dy', '0em').text(first);
+                        t.append('tspan').attr('x', 0).attr('dy', '1.1em').text(second);
+                        wrapped++;
+                    }
+                });
+                // If very few labels were wrapped, it's better to rotate vertically instead
+                if (wrapped < Math.max(1, Math.floor(labelCount / 3))) {
+                    textNodes
+                        .style('writing-mode', 'sideways-lr')
+                        .style('text-anchor', 'middle')
+                        .attr('y', 30)
+                        .attr('x', 0)
+                        .classed('mobile-xaxis-override', true);
+                }
             }
         }
     }