axidio-styleguide-library1-v2 0.2.67 → 0.2.68

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

@@ -9103,7 +9103,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 }
             });
             if (hasDateValues && subgroups && subgroups.length < 3) {
-                // For single chart with dates, ensure horizontal display
+                // For single-series charts on mobile, ensure horizontal display
                 textNodes
                     .style('writing-mode', 'horizontal-tb') // Explicitly set horizontal
                     .classed('mobile-xaxis-override', false) // Remove vertical class
@@ -9299,16 +9299,32 @@ 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()]);
+            xSubgroup.range([0, x.bandwidth()]).padding(0.25); // Add padding between bars
         }
         else if (subgroups.length === 1 && !this.isZoomedOut) {
             xSubgroup.range([0, 100]);
         }
-        else if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            xSubgroup.range([0, x.bandwidth()]);
+        else if (this.chartConfiguration.isMultiChartGridLine == undefined) {
+            xSubgroup.range([0, x.bandwidth()]).padding(0.25); // Add padding between bars in zoom-out view
         }
         else {
-            xSubgroup.range([0, x.bandwidth()]);
+            // 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 {
+            // Remove horizontal scroll if not needed
+            const chartContainer = this.containerElt.nativeElement;
+            chartContainer.style.overflowX = '';
+            chartContainer.style.webkitOverflowScrolling = '';
         }
         return xSubgroup;
     }