axidio-styleguide-library1-v2 0.3.49 → 0.3.51

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

@@ -7010,20 +7010,26 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     }
     renderGridsFromLeftAxis(svgYAxisLeft, scales, dimensions) {
         if (this.chartConfiguration.yAxisGrid) {
-            // Ensure full grid length by not subtracting the left axis width
-            const gridWidth = dimensions.containerWidth; // This uses the real chart width
+            // 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)
+                .attr('transform', 'translate(0,0)')
+                .call(d3
+                .axisLeft(scales.yScale)
                 .ticks(this.chartConfiguration.numberOfYTicks)
-                .tickSize(-gridWidth)
-                .tickFormat(() => ''))
+                .tickSize(-gridWidth) // Negative to extend right
+                .tickFormat(''))
                 .style('color', 'var(--chart-grid-color)')
-                .style('opacity', 1)
-                .call(g => g.select('.domain').remove())
-                .call(g => g.selectAll('.tick line').style('stroke', 'var(--chart-grid-color)').style('stroke-width', '1px'));
+                .style('opacity', '1')
+                .call((g) => {
+                g.select('.domain').remove();
+                g.selectAll('.tick line')
+                    .style('stroke', 'var(--chart-grid-color)')
+                    .style('stroke-width', '1px');
+            });
         }
     }
     applyConfigurationFlags() {
@@ -7060,7 +7066,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(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);
@@ -7070,6 +7076,27 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.renderLineChart(svg, lineData, scales, colors, metaData);
     }
     renderGrids(svg, scales, dimensions) {
+        // Add horizontal grid lines from the main SVG
+        if (this.chartConfiguration.yAxisGrid) {
+            svg
+                .insert('g', ':first-child') // Insert at beginning so grids are behind bars
+                .attr('class', 'grid horizontal-grid')
+                .call(d3
+                .axisLeft(scales.yScale)
+                .ticks(this.chartConfiguration.numberOfYTicks)
+                .tickSize(-dimensions.requiredSvgWidth) // Full width of scrollable area
+                .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')
+                    .style('shape-rendering', 'crispEdges');
+            });
+        }
+        // Vertical grids (existing code)
         if (this.chartConfiguration.isXgridBetweenLabels) {
             svg
                 .append('g')
@@ -7135,13 +7162,18 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 textElement.text(text.substring(0, 10) + '...');
             }
         });
-        // 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,0.5H${dimensions.requiredSvgWidth}`);
-        // Y-axis
+        // Hide X-axis domain if yAxisGrid is enabled, otherwise show it
+        if (this.chartConfiguration.yAxisGrid) {
+            xAxisGroup.select('.domain').remove();
+        }
+        else {
+            xAxisGroup
+                .select('.domain')
+                .style('stroke', 'var(--chart-axis-color)')
+                .style('stroke-width', '1px')
+                .attr('d', `M0,0.5H${dimensions.requiredSvgWidth}`);
+        }
+        // Y-axis (no changes needed)
         svg
             .append('g')
             .attr('class', 'lib-stacked-y-axis-text')