axidio-styleguide-library1-v2 0.3.15 → 0.3.16

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

@@ -6579,7 +6579,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const leftAxisWidth = 80;
         const rightAxisWidth = this.CONSTANTS.RIGHT_SVG_WIDTH;
         const availableWidth = containerWidth - leftAxisWidth - rightAxisWidth;
-        let width = availableWidth - margin.left - margin.right;
+        let width = availableWidth;
         let height = containerHeight * (this.chartConfiguration.svgHeight / 100) - margin.top - margin.bottom;
         if (dataLength > this.CONSTANTS.ZOOM_THRESHOLD && this.isZoomedOut) {
             const minWidth = dataLength * 25;
@@ -6652,7 +6652,6 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('position', 'relative')
             .style('width', '100%')
             .style('height', `${totalHeight}px`); // Include X-label space
-        // Left Y-axis - Fixed
         const leftAxisContainer = chartWrapper
             .append('div')
             .attr('class', 'left-axis-container')
@@ -6660,7 +6659,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('left', '0')
             .style('top', '0')
             .style('width', '80px')
-            .style('height', `${dimensions.height + margin.top + margin.bottom}px`) // Exclude X-label space
+            .style('height', `${dimensions.height + margin.top + margin.bottom}px`)
             .style('background-color', 'var(--card-bg)')
             .style('z-index', '10');
         const svgYAxisLeft = leftAxisContainer
@@ -6668,7 +6667,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('width', '80')
             .attr('height', dimensions.height + margin.top + margin.bottom)
             .append('g')
-            .attr('transform', `translate(${margin.left + 10},${margin.top})`);
+            .attr('transform', `translate(70,${margin.top})`);
         // Right Y-axis - Fixed
         const rightAxisContainer = chartWrapper
             .append('div')
@@ -6691,11 +6690,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .append('div')
             .attr('class', 'scrollable-chart-container')
             .style('position', 'absolute')
-            .style('left', '80px')
+            .style('left', '80px') // Exactly where left container ends
             .style('right', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`)
             .style('top', '0')
             .style('width', 'auto')
-            .style('height', `${dimensions.height + margin.top + margin.bottom}px`) // Exclude X-label space
+            .style('height', `${dimensions.height + margin.top + margin.bottom}px`)
             .style('overflow-x', 'auto')
             .style('overflow-y', 'hidden');
         const innerContainer = scrollableContainer
@@ -6735,11 +6734,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         // X-scale starts from 0 (no left spacing for grid alignment)
         const xScale = d3
             .scaleBand()
-            .rangeRound([0, dimensions.requiredSvgWidth]) // Full width from 0
+            .rangeRound([0, dimensions.requiredSvgWidth])
             .domain(data.map(d => d.name).reverse())
             .paddingInner(paddingRatio)
-            .paddingOuter(0.05)
-            .align(0);
+            .paddingOuter(0.1) // Small padding for visual spacing
+            .align(0.5);
         const xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width, 0])
@@ -7134,7 +7133,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 textElement.text(text.substring(0, 10) + '...');
             }
         });
-        // Ensure X-axis line is visible
+        // Ensure X-axis line starts exactly at x=0
         xAxisGroup
             .select('.domain')
             .style('stroke', 'var(--chart-axis-color)')