axidio-styleguide-library1-v2 0.3.48 → 0.3.50

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

@@ -7008,24 +7008,36 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return `${baseClass} lib-axis-waterfall-label`;
     }
-    renderGridsFromLeftAxis(svgYAxisLeft, scales, dimensions) {
-        if (this.chartConfiguration.yAxisGrid) {
-            // Ensure full grid length by not subtracting the left axis width
-            const gridWidth = dimensions.requiredSvgWidth; // This uses the real chart 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)
-                .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'));
-        }
-    }
+    //   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');
+    //       });
+    //   }
+    // }
     applyConfigurationFlags() {
         if (this.chartConfiguration.isHeaderVisible !== undefined) {
             this.isHeaderVisible = this.chartConfiguration.isHeaderVisible;
@@ -7060,7 +7072,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 +7082,25 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.renderLineChart(svg, lineData, scales, colors, metaData);
     }
     renderGrids(svg, scales, dimensions) {
+        if (this.chartConfiguration.yAxisGrid) {
+            svg
+                .insert('g', ':first-child')
+                .attr('class', 'grid horizontal-grid')
+                .call(d3
+                .axisLeft(scales.yScale)
+                .ticks(this.chartConfiguration.numberOfYTicks)
+                .tickSize(-dimensions.requiredSvgWidth)
+                .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');
+            });
+        }
         if (this.chartConfiguration.isXgridBetweenLabels) {
             svg
                 .append('g')