axidio-styleguide-library1-v2 0.2.67 → 0.2.69

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

@@ -9131,16 +9131,46 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
     applyXLabelsOnSameLine(svg, subgroups, data, metaData, self, shortTickLengthBg, isMobile, isria) {
         const xAxisLabels = svg.selectAll('g.x1.axis1 g.tick text')
             .attr('class', 'lib-xaxis-labels-texts-drilldown')
-            .style('font-size', this.isHeaderVisible ? '18px' : '14px')
+            .style('font-size', () => {
+            if (isMobile)
+                return '12px'; // Smaller font on mobile
+            return this.isHeaderVisible ? '18px' : '14px';
+        })
             .attr('text-anchor', 'middle')
-            .attr('y', (d) => this.calculateXLabelYPosition(d, subgroups, data, metaData, self, shortTickLengthBg))
-            .attr('x', (d) => (self.chartData.data.length > 8 && !self.isZoomedOut) ? 1 : 0)
-            .text((d) => this.formatXLabelText(d, data, metaData, subgroups, self, isMobile));
-        // Apply writing-mode for grouped charts with date labels in zoomed-out view
+            .attr('y', (d) => {
+            if (isMobile) {
+                return 20; // Fixed position for mobile
+            }
+            return this.calculateXLabelYPosition(d, subgroups, data, metaData, self, shortTickLengthBg);
+        })
+            .attr('x', (d) => {
+            if (isMobile && self.isZoomedOut) {
+                return 0; // Center align on mobile
+            }
+            return (self.chartData.data.length > 8 && !self.isZoomedOut) ? 1 : 0;
+        })
+            .text((d) => {
+            if (isMobile) {
+                // For mobile, use shorter format
+                const text = d.toString().trim();
+                if (text.length > 8) {
+                    // If it's a date, keep first part before space or first 8 chars
+                    const dateMatch = text.match(/^(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})/);
+                    if (dateMatch) {
+                        return dateMatch[1];
+                    }
+                    // For other text, keep first 8 chars with ellipsis
+                    return text.substring(0, 8) + '...';
+                }
+                return text;
+            }
+            return this.formatXLabelText(d, data, metaData, subgroups, self, isMobile);
+        });
+        // Apply writing-mode for grouped charts with date labels in zoomed-out view (non-mobile only)
         xAxisLabels.each(function (d) {
             const isDateLabel = /^(\d{2,4}[-\/])?\d{2,4}[-\/]\d{2,4}$/.test(d.trim());
             const isWeekLabel = /week|wk|w\d+/i.test(d);
-            if (subgroups.length > 1 && self.isZoomedOut && data.length > 8 && isDateLabel && !isWeekLabel) {
+            if (!isMobile && subgroups.length > 1 && self.isZoomedOut && data.length > 8 && isDateLabel && !isWeekLabel) {
                 d3.select(this).style('writing-mode', 'sideways-lr');
             }
         });