axidio-styleguide-library1-v2 0.2.89 → 0.2.91

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

@@ -7857,8 +7857,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('x', 5)
                 .style('text-anchor', 'middle');
         }
-        // Mobile/tablet override - check for single-group date charts first
-        if (isMobile) {
+        // Mobile/tablet override - check for date labels and apply appropriate rotation
+        if (isMobile || isTablet) {
             const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
             const groupsCount = data.length || 0;
             // Check if we have dates in x-axis and single group
@@ -7871,19 +7871,30 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     hasDateValues = true;
                 }
             });
-            if (hasDateValues && subgroups && subgroups.length < 3) {
-                // For single chart with dates, ensure horizontal display
-                textNodes
-                    .style('writing-mode', 'horizontal-tb') // Explicitly set horizontal
-                    .classed('mobile-xaxis-override', false) // Remove vertical class
-                    .attr('transform', 'rotate(0)') // Remove any rotation
-                    .attr('text-anchor', 'middle') // Center align
-                    .attr('y', 20) // Push down a bit
-                    .attr('dx', '0') // Reset any x offset
-                    .attr('dy', '0'); // Reset any y offset
+            if (hasDateValues) {
+                if (isTablet) {
+                    // For tablet view with dates, rotate vertically
+                    textNodes
+                        .style('writing-mode', 'sideways-lr')
+                        .style('text-anchor', 'middle')
+                        .attr('y', 0)
+                        .attr('dx', '0')
+                        .attr('dy', '0');
+                }
+                else if (isMobile && subgroups && subgroups.length < 3) {
+                    // For mobile single chart with dates, keep horizontal
+                    textNodes
+                        .style('writing-mode', 'horizontal-tb')
+                        .classed('mobile-xaxis-override', false)
+                        .attr('transform', 'rotate(0)')
+                        .attr('text-anchor', 'middle')
+                        .attr('y', 20)
+                        .attr('dx', '0')
+                        .attr('dy', '0');
+                }
             }
             else if (!this.isHeaderVisible) {
-                // Default mobile behavior for non-date or multi-group
+                // Default mobile/tablet behavior for non-date labels
                 textNodes.classed('mobile-xaxis-override', true);
             }
         }