axidio-styleguide-library1-v2 0.2.72 → 0.2.74

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

@@ -7726,11 +7726,13 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .domain(data.map((d) => d.name.toLowerCase()));
         }
         else {
-            // Increase padding for mobile view to add space after every bar group
-            const barGroupPadding = isMobile ? 1 : 0.3;
+            // Use consistent padding but adjust spacing for mobile
+            const barGroupPadding = 0.3;
+            const mobileSpacing = isMobile ? LEFT_AND_RIGHT_SPACES * 1.5 : LEFT_AND_RIGHT_SPACES;
+            // Adjust the range to create more space between bars on mobile
             x = d3.scaleBand()
                 .domain(groups)
-                .range([LEFT_AND_RIGHT_SPACES, width - RIGHT_SVG_WIDTH - LEFT_AND_RIGHT_SPACES])
+                .range([mobileSpacing, width - RIGHT_SVG_WIDTH - mobileSpacing])
                 .padding([barGroupPadding]);
         }
         const xScaleFromOrigin = d3.scaleBand()
@@ -8064,17 +8066,21 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
     }
     setupXSubgroupScale(subgroups, x, self) {
         const xSubgroup = d3.scaleBand().domain(subgroups);
+        const isMobile = window.innerWidth < 576;
+        // Add more spacing between bars within groups on mobile
+        const subgroupPadding = isMobile ? 0.3 : 0.1;
         if (subgroups.length > 1 && !this.isZoomedOut) {
-            xSubgroup.range([0, x.bandwidth()]);
+            // For multiple bars, add padding between them
+            xSubgroup.range([0, x.bandwidth()]).padding(subgroupPadding);
         }
         else if (subgroups.length === 1 && !this.isZoomedOut) {
             xSubgroup.range([0, 100]);
         }
         else if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            xSubgroup.range([0, x.bandwidth()]);
+            xSubgroup.range([0, x.bandwidth()]).padding(subgroupPadding);
         }
         else {
-            xSubgroup.range([0, x.bandwidth()]);
+            xSubgroup.range([0, x.bandwidth()]).padding(subgroupPadding);
         }
         return xSubgroup;
     }