axidio-styleguide-library1-v2 0.3.14 → 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,10 +6734,10 @@ 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)
+            .paddingOuter(0.1) // Small padding for visual spacing
             .align(0.5);
         const xScaleFromOrigin = d3
             .scaleBand()
@@ -7063,12 +7062,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .call((g) => g.select('.domain').remove());
         }
         if (this.chartConfiguration.yAxisGrid) {
-            // Grid lines start from x=0 (no gap with Y-axis)
             const gridWidth = dimensions.requiredSvgWidth;
             svg
                 .append('g')
                 .attr('class', 'grid horizontal-grid')
-                .attr('transform', 'translate(0,0)') // Start from x=0
+                .attr('transform', 'translate(0,0)')
                 .call(d3
                 .axisLeft(scales.yScale)
                 .ticks(this.chartConfiguration.numberOfYTicks)
@@ -7078,9 +7076,6 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .style('opacity', '1')
                 .call((g) => {
                 g.select('.domain').remove();
-                g.selectAll('line')
-                    .attr('x1', 0)
-                    .attr('x2', -gridWidth);
             });
         }
         if (this.chartConfiguration.xAxisGrid) {
@@ -7138,12 +7133,12 @@ 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)')
             .style('stroke-width', '1px')
-            .attr('d', `M0,0H${dimensions.requiredSvgWidth}`);
+            .attr('d', `M0,0.5H${dimensions.requiredSvgWidth}`);
         // Y-axis
         svg
             .append('g')