axidio-styleguide-library1-v2 0.6.80 → 0.6.82

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, x);
+            this.renderXLabelsOnSameLine(svg, data, metaData);
         }
         // Bottom x-axis
         const xAxis2 = svg
@@ -3794,42 +3794,34 @@ class GroupChartComponent extends ComponentUniqueId {
             }
         });
     }
-    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 &&
+    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() &&
                 indiv[metaData.keyList[0]] === -1);
-            if (ignore) {
-                tick.select('text').text('');
-                return;
+            if (isValueToBeIgnored)
+                return '';
+            if (d.trim().indexOf(' ') > -1) {
+                return d.trim().substring(0, 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 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();
             }
+            return '';
         });
     }
     renderYAxis(svg, svgYAxisLeft, svgYAxisRight, y, dimensions) {
@@ -4040,24 +4032,6 @@ 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);