axidio-styleguide-library1-v2 0.2.52 → 0.2.54

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

@@ -6594,10 +6594,38 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (this.chartConfiguration.isDrilldownChart) {
             height = containerHeight - margin.top - margin.bottom - 130;
         }
-        // Responsive bar width: smaller for mobile/tablet
+        // Responsive bar width based on screen size and number of bars
         const isMobileOrTablet = window.innerWidth < 1024;
-        const barWidth = isMobileOrTablet ? this.CONSTANTS.MOBILE_BAR_WIDTH : this.CONSTANTS.DESKTOP_BAR_WIDTH;
-        const barPadding = this.CONSTANTS.BAR_GAP;
+        let barWidth;
+        let barPadding;
+        if (isMobileOrTablet) {
+            // Dynamic sizing for mobile/tablet based on number of bars
+            if (dataLength === 1) {
+                barWidth = 60; // Single bar - very wide
+                barPadding = 0; // No gap needed
+            }
+            else if (dataLength === 2) {
+                barWidth = 50; // 2 bars - wide with gap
+                barPadding = 45; // Significant gap between 2 bars
+            }
+            else if (dataLength === 3) {
+                barWidth = 45; // 3 bars - wide
+                barPadding = 40; // Good spacing
+            }
+            else if (dataLength <= 5) {
+                barWidth = 35; // Medium width for 4-5 bars
+                barPadding = 30; // Medium spacing
+            }
+            else {
+                barWidth = 25; // Narrower for many bars
+                barPadding = 25; // Tighter spacing for many bars
+            }
+        }
+        else {
+            // Desktop: consistent sizing
+            barWidth = this.CONSTANTS.DESKTOP_BAR_WIDTH;
+            barPadding = this.CONSTANTS.BAR_GAP;
+        }
         // Calculate required SVG width: bars + gaps + side spaces
         const totalBarsWidth = barWidth * dataLength;
         const totalGaps = barPadding * (dataLength - 1);