axidio-styleguide-library1-v2 0.2.91 → 0.2.93

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 date labels and apply appropriate rotation
-        if (isMobile || isTablet) {
+        // Mobile/tablet override - check for single-group date charts first
+        if (isMobile) {
             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,30 +7871,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     hasDateValues = true;
                 }
             });
-            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');
-                }
+            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
             }
             else if (!this.isHeaderVisible) {
-                // Default mobile/tablet behavior for non-date labels
+                // Default mobile behavior for non-date or multi-group
                 textNodes.classed('mobile-xaxis-override', true);
             }
         }
@@ -7971,9 +7960,26 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         };
         const labelInfo = hasDateAndTime(d);
         // Apply date-week trimming only for mobile and tablet screens
-        if (isSmallScreen && labelInfo.isDate && labelInfo.isWeek) {
-            const datePart = d.match(/\d{2,4}[-\/]\d{1,2}[-\/]\d{1,4}/);
-            return datePart ? datePart[0] : d;
+        // Mobile: show full date (including year). Tablet: show only month/day.
+        const isMobileScreen = window.innerWidth < 576;
+        const isTabletScreen = window.innerWidth >= 576 && window.innerWidth < 992;
+        if ((isMobileScreen || isTabletScreen) && labelInfo.isDate && labelInfo.isWeek) {
+            const datePartMatch = d.match(/\d{2,4}[-\/]\d{1,2}[-\/]\d{1,4}/);
+            if (!datePartMatch)
+                return d;
+            const datePart = datePartMatch[0];
+            if (isTabletScreen) {
+                // Return only MM/DD (handle both YYYY/MM/DD and MM/DD/YYYY)
+                const parts = datePart.split(/[-\/]/);
+                if (parts[0].length === 4) {
+                    // YYYY/MM/DD -> MM/DD
+                    return `${parts[1]}/${parts[2]}`;
+                }
+                // MM/DD/YYYY -> MM/DD
+                return `${parts[0]}/${parts[1]}`;
+            }
+            // Mobile: return full date including year
+            return datePart;
         }
         // Mobile handling: keep date labels intact for single-series charts (do not trim)
         if (isMobile) {