axidio-styleguide-library1-v2 0.3.50 → 0.3.51

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

@@ -7008,36 +7008,30 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return `${baseClass} lib-axis-waterfall-label`;
     }
-    //   private renderGridsFromLeftAxis(
-    //   svgYAxisLeft: any,
-    //   scales: any,
-    //   dimensions: 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: any) => {
-    //         g.select('.domain').remove();
-    //         g.selectAll('.tick line')
-    //           .style('stroke', 'var(--chart-grid-color)')
-    //           .style('stroke-width', '1px');
-    //       });
-    //   }
-    // }
+    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');
+            });
+        }
+    }
     applyConfigurationFlags() {
         if (this.chartConfiguration.isHeaderVisible !== undefined) {
             this.isHeaderVisible = this.chartConfiguration.isHeaderVisible;
@@ -7082,14 +7076,15 @@ 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('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)
+                .tickSize(-dimensions.requiredSvgWidth) // Full width of scrollable area
                 .tickFormat(''))
                 .style('color', 'var(--chart-grid-color)')
                 .style('opacity', '1')
@@ -7101,6 +7096,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                     .style('shape-rendering', 'crispEdges');
             });
         }
+        // Vertical grids (existing code)
         if (this.chartConfiguration.isXgridBetweenLabels) {
             svg
                 .append('g')
@@ -7166,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')