axidio-styleguide-library1-v2 0.3.61 → 0.3.63

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(79,${margin.top})`);
+            .attr('transform', `translate(70,${margin.top})`);
         // Right Y-axis - Fixed
         const rightAxisContainer = chartWrapper
             .append('div')
@@ -7008,30 +7008,29 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return `${baseClass} lib-axis-waterfall-label`;
     }
-    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');
-        });
+    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) {
@@ -7067,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(svg, 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);
@@ -7777,7 +7776,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             // Dynamically adjust Y translation for mobile
             let translateY = height;
             if (isMobile) {
-                translateY = height + 5; // Add extra space at the top for mobile
+                translateY = height + 15; // Add extra space at the top for mobile
             }
             svg.append('g')
                 .attr('class', 'x1 axis1')
@@ -7877,7 +7876,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 uniqueLabels.add(d);
             });
             const labelCount = uniqueLabels.size;
-            if (hasDateValues && labelCount <= 3) {
+            if (hasDateValues && labelCount < 3) {
                 // For 3 or fewer labels, keep horizontal display
                 textNodes
                     .style('writing-mode', 'horizontal-tb') // Explicitly set horizontal
@@ -7888,7 +7887,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     .attr('dx', '0') // Reset any x offset
                     .attr('dy', '0'); // Reset any y offset
             }
-            else if (labelCount > 3) {
+            else if (labelCount >= 3) {
                 // For more than 3 labels, use vertical alignment
                 textNodes
                     .style('writing-mode', 'sideways-lr') // Vertical text