axidio-styleguide-library1-v2 0.2.81 → 0.2.82

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

@@ -6652,6 +6652,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('padding-left', `${margin.left}px`)
             .style('margin-left', '10px')
             .style('padding-right', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`);
+        // Fixed left Y-axis
         const svgYAxisLeft = outerContainer
             .append('svg')
             .attr('width', '80')
@@ -6663,6 +6664,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('pointer-events', 'none')
             .append('g')
             .attr('transform', `translate(${margin.left + 10},${margin.top})`);
+        // Fixed right Y-axis (for target line labels)
         const svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', this.CONSTANTS.RIGHT_SVG_WIDTH)
@@ -6674,17 +6676,20 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('pointer-events', 'none')
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
+        // Fixed grid overlay (non-scrolling)
+        // This SVG needs to start where the chart content starts (after left padding/margin)
         const svgGridOverlay = outerContainer
             .append('svg')
-            .attr('width', `calc(100% - ${margin.left + this.CONSTANTS.RIGHT_SVG_WIDTH}px)`)
+            .attr('width', `calc(100% - ${margin.left + this.CONSTANTS.RIGHT_SVG_WIDTH + 10}px)`)
             .attr('height', dimensions.height + margin.top + margin.bottom)
             .style('position', 'absolute')
-            .style('left', `${margin.left}px`)
+            .style('left', `${margin.left + 10}px`) // Match the outerContainer's margin-left
             .style('top', '0')
             .style('z-index', 1)
             .style('pointer-events', 'none')
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
+        // Scrollable container for bars and X-axis
         const innerContainer = outerContainer
             .append('div')
             .attr('class', 'inner-container')
@@ -7029,15 +7034,18 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         data.sort((a, b) => b.total - a.total);
         const scales = this.createScales(data, layers, lineData, dimensions);
         const axes = this.createAxes(scales);
-        this.renderGrids(svg, svgGridOverlay, scales, dimensions);
+        // Pass svgGridOverlay and margin to renderGrids
+        this.renderGrids(svg, svgGridOverlay, scales, dimensions, margin);
         const rect = this.renderBars(svg, layers, scales, metaData, dimensions);
         this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data);
         this.renderAxisLabels(svg, svgYAxisLeft, metaData, dimensions, margin);
+        // Render target line on fixed overlay
         this.renderTargetLine(svgGridOverlay, svgYAxisRight, scales, dimensions, metaData);
         this.renderDataLabels(rect, scales, metaData, dimensions);
         this.renderLineChart(svg, lineData, scales, colors, metaData);
     }
-    renderGrids(svg, svgGridOverlay, scales, dimensions) {
+    renderGrids(svg, svgGridOverlay, scales, dimensions, margin) {
+        // X-axis grid (between bars) - render on scrollable svg if needed
         if (this.chartConfiguration.isXgridBetweenLabels) {
             svg
                 .append('g')
@@ -7048,8 +7056,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .style('color', '#999999')
                 .call((g) => g.select('.domain').remove());
         }
+        // Y-axis grid (horizontal lines) - render on FIXED overlay
         if (this.chartConfiguration.yAxisGrid) {
-            const containerWidth = dimensions.width - this.CONSTANTS.RIGHT_SVG_WIDTH - 80;
+            // Calculate the actual visible width for grid lines
+            // Account for the padding and margins already applied to outerContainer
+            const containerWidth = dimensions.width - this.CONSTANTS.RIGHT_SVG_WIDTH - margin.left - 10;
             svgGridOverlay
                 .append('g')
                 .attr('class', 'grid grid-fixed')
@@ -7059,10 +7070,12 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .tickSize(-containerWidth)
                 .tickFormat(''))
                 .style('color', 'var(--chart-grid-color)')
-                .style('opacity', '1');
+                .style('opacity', '1')
+                .call((g) => g.select('.domain').remove());
         }
+        // Custom X-axis grid lines
         if (this.chartConfiguration.xAxisGrid) {
-            const containerWidth = dimensions.width - this.CONSTANTS.RIGHT_SVG_WIDTH - 80;
+            const containerWidth = dimensions.width - this.CONSTANTS.RIGHT_SVG_WIDTH - margin.left - 10;
             for (let j = 0; j < this.chartConfiguration.xAxisGrid.length; j++) {
                 svgGridOverlay
                     .append('line')
@@ -7364,7 +7377,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return;
         const parsedTarget = this.parseTargetValue(this.chartData.targetLineData.target);
         const yZero = scales.yScale(parsedTarget);
-        const containerWidth = dimensions.width - this.CONSTANTS.RIGHT_SVG_WIDTH - 80;
+        const containerWidth = dimensions.width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.chartConfiguration.margin.left - 10;
+        // Render line on fixed overlay
         svgGridOverlay
             .append('line')
             .attr('x1', 0)