axidio-styleguide-library1-v2 0.6.91 → 0.6.93

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

@@ -3527,26 +3527,34 @@ 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;
-        if (this.isZoomedOut) {
-            let widthMultiplier = 1;
-            if (isMobile) {
-                widthMultiplier = 1.4;
-            }
-            else if (isTablet) {
-                widthMultiplier = 1.25;
-            }
-            if (dataLength > 30) {
-                const multiplier = this.chartData.dropdownData1 ? 60 : 40;
-                width = Math.max(width, dataLength * multiplier * widthMultiplier);
+        let widthMultiplier = 1;
+        if (isMobile) {
+            widthMultiplier = 1.20; // 40% more width = more gaps
+        }
+        else if (isTablet) {
+            widthMultiplier = 1.02; // 25% more width = more gaps
+        }
+        if (dataLength > 30 && this.isZoomedOut) {
+            const multiplier = this.chartData.dropdownData1 ? 60 : 40;
+            width = Math.max(width, dataLength * multiplier * widthMultiplier);
+        }
+        if (this.chartData.dropdownData2 && width < dataLength * 120 && this.isZoomedOut) {
+            width = dataLength * 120 * widthMultiplier;
+        }
+        if (dataLength > 8 && !this.isZoomedOut) {
+            if (this.chartData.dropdownData2 && width < dataLength * 250) {
+                width = dataLength * 250 * widthMultiplier;
             }
-            if (this.chartData.dropdownData2 && width < dataLength * 120) {
-                width = dataLength * 120 * widthMultiplier;
+            else {
+                width = dataLength * 160 * widthMultiplier;
             }
         }
-        else {
-            width = baseWidth;
+        else if (!this.isZoomedOut) {
+            // FIXED: Also apply multiplier to default width for smaller screens
+            width = baseWidth * widthMultiplier;
         }
         return width;
     }