axidio-styleguide-library1-v2 0.2.63 → 0.2.64

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

@@ -9136,12 +9136,21 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .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
+        // Apply writing-mode only for mobile in zoom-out view
         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) {
-                d3.select(this).style('writing-mode', 'sideways-lr');
+            const element = d3.select(this);
+            // Only apply rotation and increased dy for mobile in zoom-out view
+            if (isMobile && subgroups.length > 1 && self.isZoomedOut && data.length > 8 && isDateLabel && !isWeekLabel) {
+                element
+                    .style('writing-mode', 'sideways-lr')
+                    .attr('y', 30); // Increase dy to 30 for better alignment in mobile zoom-out view
+            }
+            else {
+                element
+                    .style('writing-mode', null)
+                    .attr('y', null); // Reset to default positioning when not in mobile zoom-out view
             }
         });
         // Add second line for non-date labels on desktop