axidio-styleguide-library1-v2 0.4.36 → 0.4.37

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

@@ -3617,6 +3617,7 @@ class GroupChartComponent extends ComponentUniqueId {
     createSVGStructure(dimensions) {
         const { chartContainer, height, margin } = dimensions;
         const rightSvgWidth = 60;
+        // FIXED: Calculate total height including margins and extra space
         const totalHeight = height + margin.top + margin.bottom;
         const outerContainer = chartContainer
             .append('div')
@@ -3624,13 +3625,13 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('class', 'outer-container')
             .style('width', '100%')
             .style('height', `${totalHeight}px`)
-            .style('overflow', 'hidden')
+            .style('overflow', 'hidden') // FIXED: Keep outer container hidden
             .style('padding-left', `${margin.left}px`)
             .style('padding-right', `${rightSvgWidth}px`)
-            .style('margin-left', '0px') // FIXED: Remove left margin that might cause offset
+            .style('margin-left', '15px')
             .style('position', 'relative');
         const leftSvgWidth = margin.left + 20;
-        // FIXED: Y-axis SVG with proper height
+        // FIXED: Y-axis SVG with proper height and z-index
         const svgYAxisLeft = outerContainer
             .append('svg')
             .attr('width', leftSvgWidth)
@@ -3638,7 +3639,8 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('left', '0')
             .style('top', '0')
-            .style('z-index', 1)
+            .style('z-index', 3) // FIXED: Higher z-index for axes
+            .style('background', this.isTransparentBackground ? 'transparent' : '#FFFFFF') // FIXED: Background to prevent bleed-through
             .append('g')
             .attr('transform', `translate(${margin.left + 5},${margin.top})`);
         const svgYAxisRight = outerContainer
@@ -3648,37 +3650,54 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('right', '40px')
             .style('top', '0')
-            .style('z-index', 1)
+            .style('z-index', 3) // FIXED: Higher z-index for axes
+            .style('background', this.isTransparentBackground ? 'transparent' : '#FFFFFF') // FIXED: Background to prevent bleed-through
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
         const innerContainer = outerContainer
             .append('div')
             .attr('class', 'inner-container')
             .style('width', '100%')
-            .style('height', `${totalHeight}px`) // Match outer container height
+            .style('height', `${totalHeight}px`)
             .style('overflow-x', 'auto')
-            .style('overflow-y', 'hidden');
-        // FIXED: Main SVG with increased height
+            .style('overflow-y', 'hidden')
+            .style('position', 'relative');
+        // FIXED: Create a clipping path for the main SVG
+        const defs = innerContainer
+            .append('svg')
+            .attr('width', dimensions.width - rightSvgWidth)
+            .attr('height', totalHeight)
+            .append('defs');
+        defs
+            .append('clipPath')
+            .attr('id', `clip-${this.uniqueId}`)
+            .append('rect')
+            .attr('width', dimensions.width - rightSvgWidth)
+            .attr('height', totalHeight)
+            .attr('x', 0)
+            .attr('y', 0);
+        // FIXED: Main SVG with clipping and proper z-index
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.width - rightSvgWidth)
-            .attr('height', totalHeight) // Use total height
+            .attr('height', totalHeight)
+            .style('position', 'relative')
+            .style('z-index', 1) // FIXED: Lower z-index than axes
             .append('g')
-            .attr('transform', `translate(0,${margin.top})`);
-        return { outerContainer, svgYAxisLeft, svgYAxisRight, svg, totalHeight };
+            .attr('transform', `translate(0,${margin.top})`)
+            .attr('clip-path', `url(#clip-${this.uniqueId})`); // FIXED: Apply clipping
+        return { outerContainer, svgYAxisLeft, svgYAxisRight, svg, totalHeight, innerContainer };
     }
     renderAxes(svgElements, scales, chartContext, dimensions) {
         const { svg, svgYAxisLeft, svgYAxisRight } = svgElements;
         const { x, xScaleFromOrigin, y, lineYscale } = scales;
         const { height } = dimensions;
         const { metaData, lineData, keyList } = chartContext;
-        // Render Y-axis first to establish the reference point
+        this.renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList);
         this.renderYAxis(svg, svgYAxisLeft, svgYAxisRight, y, dimensions);
-        // Then render grid lines that align with Y-axis
         if (this.chartConfiguration.yAxisGrid) {
             this.renderYAxisGrid(svg, y, dimensions.width);
         }
-        this.renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList);
         if (this.chartConfiguration.isXgridBetweenLabels) {
             this.renderXAxisGrid(svg, x, height);
         }
@@ -3861,22 +3880,19 @@ class GroupChartComponent extends ComponentUniqueId {
         }
     }
     renderYAxisGrid(svg, y, width) {
-        // Alternative: Manually create grid lines for precise control
-        const ticks = y.ticks(this.chartConfiguration.numberOfYTicks);
         svg
-            .selectAll('.y-grid-line')
-            .data(ticks)
-            .enter()
-            .append('line')
-            .attr('class', 'y-grid-line')
-            .attr('x1', 0) // Start from Y-axis (x=0)
-            .attr('x2', width) // Extend to full width
-            .attr('y1', (d) => y(d))
-            .attr('y2', (d) => y(d))
-            .style('stroke', '#E0E0E0')
-            .style('stroke-width', '0.5px')
+            .append('g')
+            .attr('class', 'y-axis-grid')
+            .call(d3.axisLeft(y)
+            .ticks(this.chartConfiguration.numberOfYTicks)
+            .tickSize(-width)
+            .tickFormat(''))
+            .style('color', '#535353ff') // FIXED: Lighter grid
             .style('opacity', '0.7')
-            .style('stroke-dasharray', 'none');
+            .style('stroke-dasharray', 'none')
+            .call((g) => g.select('.domain').remove())
+            .selectAll('line')
+            .style('stroke-width', '0.5px');
     }
     renderXAxisGrid(svg, x, height) {
         svg