axidio-styleguide-library1-v2 0.6.79 → 0.6.80

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

@@ -3743,7 +3743,7 @@ class GroupChartComponent extends ComponentUniqueId {
             this.renderMultiChartXAxis(svg, x, height, data, metaData);
         }
         if (this.chartConfiguration.xLabelsOnSameLine) {
-            this.renderXLabelsOnSameLine(svg, data, metaData);
+            this.renderXLabelsOnSameLine(svg, data, metaData, x);
         }
         // Bottom x-axis
         const xAxis2 = svg
@@ -3794,34 +3794,42 @@ class GroupChartComponent extends ComponentUniqueId {
             }
         });
     }
-    renderXLabelsOnSameLine(svg, data, metaData) {
-        const short_tick_length_bg = 5;
-        const long_tick_length_bg = 30;
-        svg
-            .selectAll('g.x1.axis1 g.tick text')
-            .attr('class', 'lib-xaxis-labels-texts-drilldown')
-            .attr('y', short_tick_length_bg)
-            .text((d) => {
-            const isValueToBeIgnored = data.some((indiv) => indiv.name.toLowerCase() === d.trim().toLowerCase() &&
+    renderXLabelsOnSameLine(svg, data, metaData, x) {
+        const shortY = 8;
+        const longY = 26;
+        // Remove previously added split labels (important on resize)
+        svg.selectAll('.lib-xaxis-split').remove();
+        const ticks = svg.selectAll('g.x1.axis1 g.tick');
+        ticks.each((d, i, nodes) => {
+            const tick = d3.select(nodes[i]);
+            const label = d.trim().toLowerCase();
+            const ignore = data.some((indiv) => indiv.name.toLowerCase() === label &&
                 indiv[metaData.keyList[0]] === -1);
-            if (isValueToBeIgnored)
-                return '';
-            if (d.trim().indexOf(' ') > -1) {
-                return d.trim().substring(0, d.indexOf(' ')).toLowerCase();
+            if (ignore) {
+                tick.select('text').text('');
+                return;
             }
-            return d.toLowerCase();
-        });
-        svg
-            .selectAll('g.x1.axis1 g.tick')
-            .append('text')
-            .attr('class', 'lib-xaxis-labels-texts-drilldown')
-            .attr('y', long_tick_length_bg)
-            .attr('fill', 'currentColor')
-            .text((d) => {
-            if (d.trim().indexOf(' ') > -1) {
-                return d.trim().substring(d.indexOf(' ')).toLowerCase();
+            const bandwidth = x?.bandwidth?.() || 60;
+            const maxCharsPerLine = Math.floor(bandwidth / 7); // responsive
+            const truncate = (text) => text.length > maxCharsPerLine
+                ? text.slice(0, maxCharsPerLine - 1) + '…'
+                : text;
+            const parts = label.split(' ');
+            // First line
+            tick
+                .select('text')
+                .attr('class', 'lib-xaxis-labels-texts-drilldown lib-xaxis-split')
+                .attr('y', shortY)
+                .text(truncate(parts[0]));
+            // Second line (only if exists)
+            if (parts.length > 1 && bandwidth > 35) {
+                tick
+                    .append('text')
+                    .attr('class', 'lib-xaxis-labels-texts-drilldown lib-xaxis-split')
+                    .attr('y', longY)
+                    .attr('text-anchor', 'middle')
+                    .text(truncate(parts.slice(1).join(' ')));
             }
-            return '';
         });
     }
     renderYAxis(svg, svgYAxisLeft, svgYAxisRight, y, dimensions) {
@@ -4032,6 +4040,24 @@ class GroupChartComponent extends ComponentUniqueId {
         }
         return xSubgroup.bandwidth();
     }
+    truncateTextByWidth(text, maxWidth, fontSize = 12, fontFamily = 'sans-serif') {
+        if (!text)
+            return '';
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context)
+            return text;
+        context.font = `${fontSize}px ${fontFamily}`;
+        if (context.measureText(text).width <= maxWidth) {
+            return text;
+        }
+        let truncated = text;
+        while (truncated.length > 0 &&
+            context.measureText(truncated + '…').width > maxWidth) {
+            truncated = truncated.slice(0, -1);
+        }
+        return truncated + '…';
+    }
     getBarHeight(d, y, height) {
         if (d.value === -1)
             return height - y(0);
@@ -7814,7 +7840,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             // more than one subgroup so grouped bars don't get congested.
             // On desktop: enable scrolling when there are many groups or
             // multiple subgroups (keeps previous behavior).
-            if ((isMobile || isTablet) && subgroupsCount > 1) {
+            if ((isMobile) && subgroupsCount > 1) {
                 innerContainer.style('overflow-x', 'auto');
                 innerContainer.classed('scroll-enabled', true);
             }
@@ -8025,6 +8051,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         // }
         // ✅ Tablet View — Rotate if text > 10 characters
         if (isTablet) {
+            const isria = this.customChartConfiguration.isRia;
             const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
             textNodes.each(function (d) {
                 const text = d ? d.toString().trim() : '';
@@ -8034,8 +8061,10 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 if (!isDateString && text.length > 10) {
                     const trimmed = text.slice(0, 9) + '…';
                     textNodes
-                        .style('font-size', '10px');
-                    // .text(trimmed)
+                        .style('font-size', '9px');
+                    if (isria) {
+                        textNodes.text(trimmed);
+                    }
                 }
             });
         }