axidio-styleguide-library1-v2 0.2.48 → 0.2.50

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

@@ -6595,9 +6595,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         // Fixed bar width and padding for all resolutions
         const barWidth = this.CONSTANTS.FIXED_BAR_WIDTH;
-        const barPadding = this.CONSTANTS.FIXED_BAR_PADDING;
-        // Calculate required SVG width based on fixed bar dimensions
-        const requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
+        const barPadding = 20; // 20px gap between bars
+        // Calculate required SVG width: bars + gaps + side spaces
+        const totalBarsWidth = barWidth * dataLength;
+        const totalGaps = barPadding * (dataLength - 1);
+        const requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, totalBarsWidth + totalGaps + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2));
         return {
             width,
             height,
@@ -6652,16 +6654,22 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     }
     createScales(data, layers, lineData, dimensions) {
         const { width, height, barWidth, barPadding } = dimensions;
-        // Fixed padding of 0.5 for all resolutions
-        const padding = 0.5;
+        // Calculate total width needed for all bars with proper spacing
+        const totalBarsWidth = data.length * barWidth;
+        const totalSpacing = (data.length - 1) * 20; // 20px gap between bars
+        const requiredWidth = totalBarsWidth + totalSpacing + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
+        // Use the larger of container width or required width for proper spacing
+        const effectiveWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, requiredWidth);
         const xScale = d3
             .scaleBand()
             .rangeRound([
             this.CONSTANTS.LEFT_RIGHT_SPACES,
-            width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES
+            effectiveWidth + this.CONSTANTS.LEFT_RIGHT_SPACES - this.CONSTANTS.RIGHT_SVG_WIDTH
         ])
             .domain(data.map(d => d.name).reverse())
-            .padding(padding);
+            .paddingInner(20 / (barWidth + 20)) // Convert 20px gap to padding ratio
+            .paddingOuter(0.5)
+            .align(0.5); // Center alignment
         const xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - this.CONSTANTS.RIGHT_SVG_WIDTH, 0])
@@ -6746,17 +6754,18 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return 0;
         })
             .attr('x', (d) => {
-            // Center the bar within its bandwidth
+            // Center the bar within its bandwidth with proper spacing
+            const xPosition = xScale(d.data.name);
+            const bandwidth = xScale.bandwidth();
             if (!this.chartConfiguration.isMultiChartGridLine) {
-                const bandwidth = xScale.bandwidth();
-                return xScale(d.data.name) + (bandwidth - barWidth) / 2;
+                // Center the fixed-width bar in the available space
+                return xPosition + (bandwidth - barWidth) / 2;
             }
             if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
-                return xScale(d.data.name) + xScale.bandwidth() / 2 - 35;
+                return xPosition + bandwidth / 2 - 35;
             }
-            const bandwidth = xScale.bandwidth();
             const calculatedWidth = bandwidth * 0.8;
-            return xScale(d.data.name) + (bandwidth - calculatedWidth) / 2;
+            return xPosition + (bandwidth - calculatedWidth) / 2;
         })
             .attr('height', (d) => {
             if (!isNaN(d[0]) && !isNaN(d[1])) {