axidio-styleguide-library1-v2 0.2.50 → 0.2.52

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

@@ -6488,8 +6488,9 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             LONG_TICK_LENGTH: 16,
             SHORT_TICK_LENGTH_BG: 5,
             LONG_TICK_LENGTH_BG: 30,
-            FIXED_BAR_WIDTH: 40, // Fixed bar width for all resolutions
-            FIXED_BAR_PADDING: 0, // Fixed padding
+            DESKTOP_BAR_WIDTH: 40, // Desktop bar width
+            MOBILE_BAR_WIDTH: 25, // Mobile/Tablet bar width (reduced)
+            BAR_GAP: 30, // Gap between bars (increased for better separation)
             ZOOM_THRESHOLD: 30,
             ZOOM_IN_THRESHOLD: 8,
         };
@@ -6593,9 +6594,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (this.chartConfiguration.isDrilldownChart) {
             height = containerHeight - margin.top - margin.bottom - 130;
         }
-        // Fixed bar width and padding for all resolutions
-        const barWidth = this.CONSTANTS.FIXED_BAR_WIDTH;
-        const barPadding = 20; // 20px gap between bars
+        // Responsive bar width: smaller for mobile/tablet
+        const isMobileOrTablet = window.innerWidth < 1024;
+        const barWidth = isMobileOrTablet ? this.CONSTANTS.MOBILE_BAR_WIDTH : this.CONSTANTS.DESKTOP_BAR_WIDTH;
+        const barPadding = this.CONSTANTS.BAR_GAP;
         // Calculate required SVG width: bars + gaps + side spaces
         const totalBarsWidth = barWidth * dataLength;
         const totalGaps = barPadding * (dataLength - 1);
@@ -6656,10 +6658,13 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const { width, height, barWidth, barPadding } = dimensions;
         // 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 totalSpacing = (data.length - 1) * barPadding;
         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);
+        // Calculate padding ratio to create exact pixel gaps between bars
+        const totalAvailableSpace = effectiveWidth;
+        const paddingRatio = barPadding / (barWidth + barPadding);
         const xScale = d3
             .scaleBand()
             .rangeRound([
@@ -6667,7 +6672,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             effectiveWidth + this.CONSTANTS.LEFT_RIGHT_SPACES - this.CONSTANTS.RIGHT_SVG_WIDTH
         ])
             .domain(data.map(d => d.name).reverse())
-            .paddingInner(20 / (barWidth + 20)) // Convert 20px gap to padding ratio
+            .paddingInner(paddingRatio)
             .paddingOuter(0.5)
             .align(0.5); // Center alignment
         const xScaleFromOrigin = d3
@@ -7042,6 +7047,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.applyAxisConfigurations(svg, scales, dimensions, data);
     }
     renderStandardAxes(svg, axes, scales, dimensions, data) {
+        const isMobileOrTablet = window.innerWidth < 1024;
         svg
             .append('g')
             .attr('transform', `translate(0,${dimensions.height})`)
@@ -7049,11 +7055,20 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .call(axes.xAxis)
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '12px')
+            .style('font-size', isMobileOrTablet ? '10px' : '12px')
             .attr('text-anchor', 'middle')
             .attr('dx', '0')
             .attr('dy', '0.71em')
-            .attr('transform', null);
+            .attr('transform', null)
+            .each(function () {
+            // Ensure X-axis labels are centered and don't overlap
+            const textElement = d3.select(this);
+            const text = textElement.text();
+            if (isMobileOrTablet && text.length > 10) {
+                // Truncate long labels on mobile/tablet
+                textElement.text(text.substring(0, 8) + '...');
+            }
+        });
         svg
             .append('g')
             .attr('class', 'lib-stacked-y-axis-text')