axidio-styleguide-library1-v2 0.0.929 → 0.0.931

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

@@ -8818,13 +8818,18 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             })
                 .attr('y', function (d) {
                 // If grouped chart, no xLabel, and label is a date, add extra offset
+                let baseY = self.isHeaderVisible ? short_tick_length_bg + 25 : short_tick_length_bg;
                 if (subgroups.length > 1 &&
                     !metaData.xLabel &&
                     (/\d{2,4}[-\/]\d{2}[-\/]\d{2,4}/.test(d) || /\d{2,4}[-\/]\d{2,4}/.test(d))) {
                     // If header is visible, use a smaller offset (e.g., +15), else +25
-                    return (self.isHeaderVisible ? short_tick_length_bg + 15 : short_tick_length_bg + 25);
+                    baseY = self.isHeaderVisible ? short_tick_length_bg + 15 : short_tick_length_bg + 25;
                 }
-                return self.isHeaderVisible ? short_tick_length_bg + 25 : short_tick_length_bg;
+                // Add a little extra space if the date label contains a space (will be split into two lines)
+                if (/\d{2,4}[-\/]\d{2,4}/.test(d) && d.indexOf(' ') > -1) {
+                    baseY += 4; // Add 4px extra space for two-line date labels
+                }
+                return baseY;
             })
                 .attr('x', function (d) {
                 if (self.chartData.data.length > 8 && !self.isZoomedOut) {
@@ -8839,7 +8844,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     return firstPart.substring(0, 3).toLowerCase();
                 }
                 data.map((indiv) => {
-                    if (indiv.name.toLowerCase() == d.trim().toLowerCase() &&
+                    if (indiv.name &&
+                        indiv.name.toLowerCase() == d.trim().toLowerCase() &&
                         indiv[metaData.keyList[0]] == -1) {
                         isValueToBeIgnored = true;
                     }
@@ -8847,8 +8853,16 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 if (isValueToBeIgnored) {
                     return '';
                 }
-                // If label looks like a date (contains digits and - or /), show full label as one line
+                // If label looks like a date (contains digits and - or /)
                 if (/\d{2,4}[-\/]/.test(d)) {
+                    // If there is a space, show the part after the space on the next line
+                    if (d.indexOf(' ') > -1) {
+                        var first = d.substring(0, d.indexOf(' '));
+                        var second = d.substring(d.indexOf(' ') + 1).trim();
+                        // Use tspan for line break if supported, else join with \n
+                        // If SVG tspan is supported, this will be split into two lines by the .each below
+                        return first + '\n' + second;
+                    }
                     return d;
                 }
                 if (d.trim().indexOf(' ') > -1) {
@@ -9565,15 +9579,25 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .each((d, i, nodes) => {
                 const text = d3.select(nodes[i]);
                 const label = text.text();
-                const words = label.split(' ');
-                text.text(null); // Clear current text
-                // Add each word to a new tspan
-                words.forEach((word, index) => {
-                    text.append('tspan').text(word);
-                    // .attr('x', '15')
-                    // .attr('dy', index === 0 ? '0em' : '0.9em') // Reduced vertical spacing
-                    // .attr('text-anchor', 'end');
-                });
+                // If label contains \n, split and use tspan for each line
+                if (label.indexOf('\n') > -1) {
+                    const lines = label.split('\n');
+                    text.text(null);
+                    lines.forEach((line, idx) => {
+                        text.append('tspan')
+                            .text(line)
+                            .attr('x', 0)
+                            .attr('dy', idx === 0 ? '0em' : '1.1em');
+                    });
+                }
+                else {
+                    // Fallback: split by space for other labels
+                    const words = label.split(' ');
+                    text.text(null);
+                    words.forEach((word, index) => {
+                        text.append('tspan').text(word);
+                    });
+                }
             })
                 .style('fill', 'var(--chart-text-color)')
                 .attr('transform', null); // Remove rotate if using line breaks