axidio-styleguide-library1-v2 0.2.68 → 0.2.69

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

@@ -9103,7 +9103,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 }
             });
             if (hasDateValues && subgroups && subgroups.length < 3) {
-                // For single-series charts on mobile, ensure horizontal display
+                // 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
@@ -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');
             }
         });
@@ -9299,32 +9329,16 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
     setupXSubgroupScale(subgroups, x, self) {
         const xSubgroup = d3.scaleBand().domain(subgroups);
         if (subgroups.length > 1 && !this.isZoomedOut) {
-            xSubgroup.range([0, x.bandwidth()]).padding(0.25); // Add padding between bars
+            xSubgroup.range([0, x.bandwidth()]);
         }
         else if (subgroups.length === 1 && !this.isZoomedOut) {
             xSubgroup.range([0, 100]);
         }
-        else if (this.chartConfiguration.isMultiChartGridLine == undefined) {
-            xSubgroup.range([0, x.bandwidth()]).padding(0.25); // Add padding between bars in zoom-out view
-        }
-        else {
-            // used to make grouped bars with lesser width as we are not using padding for width
-            xSubgroup.range([0, x.bandwidth()]).padding(0.25);
-        }
-        // Enable horizontal scrollbar in zoom-out view on mobile/tablet
-        const isMobile = window.innerWidth < 576;
-        const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
-        if ((isMobile || isTablet) && this.isZoomedOut && subgroups.length > 1) {
-            // Add a class or style to the container to enable horizontal scrolling
-            const chartContainer = this.containerElt.nativeElement;
-            chartContainer.style.overflowX = 'auto';
-            chartContainer.style.webkitOverflowScrolling = 'touch';
+        else if (this.chartConfiguration.isMultiChartGridLine === undefined) {
+            xSubgroup.range([0, x.bandwidth()]);
         }
         else {
-            // Remove horizontal scroll if not needed
-            const chartContainer = this.containerElt.nativeElement;
-            chartContainer.style.overflowX = '';
-            chartContainer.style.webkitOverflowScrolling = '';
+            xSubgroup.range([0, x.bandwidth()]);
         }
         return xSubgroup;
     }