axidio-styleguide-library1-v2 0.2.90 → 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);
             }
         }
@@ -7953,19 +7964,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         // Check if we're on mobile or tablet
         const isSmallScreen = window.innerWidth < 992; // Less than 992px (mobile or tablet)
         // Check if label contains both date and week information
-        const formatDatePart = (dateStr) => {
-            // Match different date formats: MM/DD/YYYY, YYYY/MM/DD, etc.
-            const match = dateStr.match(/(\d{1,4})[-\/](\d{1,2})[-\/](\d{1,4})/);
-            if (!match)
-                return dateStr;
-            const [_, part1, part2, part3] = match;
-            // Check if year is first (YYYY/MM/DD)
-            if (part1.length === 4) {
-                return `${part2}/${part3}`; // Return MM/DD
-            }
-            // For MM/DD/YYYY format
-            return `${part1}/${part2}`; // Return MM/DD
-        };
         const hasDateAndTime = (text) => {
             const dateMatch = /\d{2,4}[-\/]\d{1,2}[-\/]\d{1,4}/.test(text) || !isNaN(Date.parse(text));
             const weekMatch = /week|wk|w\d+/i.test(text);
@@ -7975,10 +7973,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         // 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}/);
-            if (datePart) {
-                return formatDatePart(datePart[0]);
-            }
-            return d;
+            return datePart ? datePart[0] : d;
         }
         // Mobile handling: keep date labels intact for single-series charts (do not trim)
         if (isMobile) {