axidio-styleguide-library1-v2 0.6.90 → 0.6.92

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

@@ -3527,14 +3527,15 @@ class GroupChartComponent extends ComponentUniqueId {
         const baseWidth = containerWidth - leftSvgWidth - rightSvgWidth;
         const dataLength = this.chartData.data.length;
         let width = baseWidth;
+        // FIXED: Increase width for tablet and mobile to create more spacing
         const isTablet = window.innerWidth <= 1024 && window.innerWidth > 768;
         const isMobile = window.innerWidth <= 768;
         let widthMultiplier = 1;
         if (isMobile) {
-            widthMultiplier = 1.4;
+            widthMultiplier = 1.20; // 40% more width = more gaps
         }
         else if (isTablet) {
-            widthMultiplier = 1.25;
+            widthMultiplier = 1.10; // 25% more width = more gaps
         }
         if (dataLength > 30 && this.isZoomedOut) {
             const multiplier = this.chartData.dropdownData1 ? 60 : 40;
@@ -3552,6 +3553,7 @@ class GroupChartComponent extends ComponentUniqueId {
             }
         }
         else if (!this.isZoomedOut) {
+            // FIXED: Also apply multiplier to default width for smaller screens
             width = baseWidth * widthMultiplier;
         }
         return width;
@@ -3585,7 +3587,6 @@ class GroupChartComponent extends ComponentUniqueId {
         const { width, height, margin } = dimensions;
         const leftAndRightSpaces = 50;
         const rightSvgWidth = 60;
-        const barPadding = 0.3;
         const groups = d3.map(data, (d) => d.name).keys();
         let x;
         if (this.chartConfiguration.isMultiChartGridLine !== undefined) {
@@ -3593,7 +3594,7 @@ class GroupChartComponent extends ComponentUniqueId {
                 .scaleBand()
                 .rangeRound([0, width])
                 .align(0.5)
-                .padding(barPadding)
+                .padding(0.5)
                 .domain(data.map((d) => d.name.toLowerCase()).reverse());
         }
         else {
@@ -3601,7 +3602,7 @@ class GroupChartComponent extends ComponentUniqueId {
                 .scaleBand()
                 .domain(groups.reverse())
                 .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
-                .padding(barPadding);
+                .padding(0.3);
         }
         const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
         const xSubgroup = d3.scaleBand().domain(keyList).range([0, x.bandwidth()]);