axidio-styleguide-library1-v2 0.3.69 → 0.3.70

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

@@ -6667,7 +6667,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('width', '80')
             .attr('height', dimensions.height + margin.top + margin.bottom)
             .append('g')
-            .attr('transform', `translate(70,${margin.top})`);
+            .attr('transform', `translate(79,${margin.top})`);
         // Right Y-axis - Fixed
         const rightAxisContainer = chartWrapper
             .append('div')
@@ -7008,29 +7008,30 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return `${baseClass} lib-axis-waterfall-label`;
     }
-    renderGridsFromLeftAxis(svgYAxisLeft, scales, dimensions) {
-        if (this.chartConfiguration.yAxisGrid) {
-            // Calculate how far the grid lines need to extend
-            // They start from the left Y-axis (at x=80) and go to the full width
-            const gridWidth = dimensions.requiredSvgWidth + 80 + this.CONSTANTS.RIGHT_SVG_WIDTH;
-            svgYAxisLeft
-                .append('g')
-                .attr('class', 'grid horizontal-grid-from-left')
-                .attr('transform', 'translate(0,0)')
-                .call(d3
-                .axisLeft(scales.yScale)
-                .ticks(this.chartConfiguration.numberOfYTicks)
-                .tickSize(-gridWidth) // Negative to extend right
-                .tickFormat(''))
-                .style('color', 'var(--chart-grid-color)')
-                .style('opacity', '1')
-                .call((g) => {
-                g.select('.domain').remove();
-                g.selectAll('.tick line')
-                    .style('stroke', 'var(--chart-grid-color)')
-                    .style('stroke-width', '1px');
-            });
-        }
+    renderGridsFromLeftAxis(svgMain, svgYAxisLeft, scales, dimensions) {
+        if (!this.chartConfiguration.yAxisGrid)
+            return;
+        // We want horizontal grid lines to span the full visible width:
+        // the inner SVG (requiredSvgWidth) plus the right axis width.
+        const gridSpan = dimensions.requiredSvgWidth + this.CONSTANTS.RIGHT_SVG_WIDTH;
+        // Append the grid to the main (inner) SVG so lines are rendered across the scrollable area.
+        svgMain
+            .append('g')
+            .attr('class', 'grid horizontal-grid-from-left')
+            .attr('transform', 'translate(0,0)')
+            .call(d3
+            .axisLeft(scales.yScale)
+            .ticks(this.chartConfiguration.numberOfYTicks)
+            .tickSize(-gridSpan)
+            .tickFormat(''))
+            .style('color', 'var(--chart-grid-color)')
+            .style('opacity', '1')
+            .call((g) => {
+            g.select('.domain').remove();
+            g.selectAll('.tick line')
+                .style('stroke', 'var(--chart-grid-color)')
+                .style('stroke-width', '1px');
+        });
     }
     applyConfigurationFlags() {
         if (this.chartConfiguration.isHeaderVisible !== undefined) {
@@ -7066,7 +7067,7 @@ 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.renderGridsFromLeftAxis(svgYAxisLeft, scales, dimensions);
+        this.renderGridsFromLeftAxis(svg, svgYAxisLeft, scales, dimensions);
         this.renderGrids(svg, scales, dimensions);
         const rect = this.renderBars(svg, layers, scales, metaData, dimensions);
         this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data);