axidio-styleguide-library1-v2 0.6.89 → 0.6.91

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

@@ -3527,20 +3527,26 @@ class GroupChartComponent extends ComponentUniqueId {
         const baseWidth = containerWidth - leftSvgWidth - rightSvgWidth;
         const dataLength = this.chartData.data.length;
         let width = baseWidth;
-        if (dataLength > 30 && this.isZoomedOut) {
-            const multiplier = this.chartData.dropdownData1 ? 60 : 40;
-            width = Math.max(width, dataLength * multiplier);
-        }
-        if (this.chartData.dropdownData2 && width < dataLength * 120 && this.isZoomedOut) {
-            width = dataLength * 120;
-        }
-        if (dataLength > 8 && !this.isZoomedOut) {
-            if (this.chartData.dropdownData2 && width < dataLength * 250) {
-                width = dataLength * 250;
+        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 {
-                width = dataLength * 160;
+            else if (isTablet) {
+                widthMultiplier = 1.25;
             }
+            if (dataLength > 30) {
+                const multiplier = this.chartData.dropdownData1 ? 60 : 40;
+                width = Math.max(width, dataLength * multiplier * widthMultiplier);
+            }
+            if (this.chartData.dropdownData2 && width < dataLength * 120) {
+                width = dataLength * 120 * widthMultiplier;
+            }
+        }
+        else {
+            width = baseWidth;
         }
         return width;
     }
@@ -3574,20 +3580,13 @@ class GroupChartComponent extends ComponentUniqueId {
         const leftAndRightSpaces = 50;
         const rightSvgWidth = 60;
         const groups = d3.map(data, (d) => d.name).keys();
-        let barPadding = 0.3;
-        if (window.innerWidth <= 1024) {
-            barPadding = 0.6;
-        }
-        if (window.innerWidth <= 768) {
-            barPadding = 0.7;
-        }
         let x;
         if (this.chartConfiguration.isMultiChartGridLine !== undefined) {
             x = d3
                 .scaleBand()
                 .rangeRound([0, width])
                 .align(0.5)
-                .padding(barPadding)
+                .padding(0.5)
                 .domain(data.map((d) => d.name.toLowerCase()).reverse());
         }
         else {
@@ -3595,7 +3594,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()]);