axidio-styleguide-library1-v2 0.4.38 → 0.4.39

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

@@ -3495,7 +3495,11 @@ class GroupChartComponent extends ComponentUniqueId {
         return { width, height, margin, chartContainer, verticalstackedcontainer };
     }
     calculateWidth(chartContainer, margin) {
-        const baseWidth = parseInt(chartContainer.style('width')) - margin.left - margin.right;
+        const containerWidth = parseInt(chartContainer.style('width'));
+        const leftSvgWidth = margin.left + 20;
+        const rightSvgWidth = 60;
+        // Calculate available width excluding fixed y-axis elements
+        const baseWidth = containerWidth - leftSvgWidth - rightSvgWidth;
         const dataLength = this.chartData.data.length;
         let width = baseWidth;
         if (dataLength > 30 && this.isZoomedOut) {
@@ -3618,17 +3622,17 @@ class GroupChartComponent extends ComponentUniqueId {
         const { chartContainer, height, margin } = dimensions;
         const rightSvgWidth = 60;
         // FIXED: Calculate total height including margins and extra space
-        const totalHeight = height + margin.top + margin.bottom; // Added extra 60px
+        const totalHeight = height + margin.top + margin.bottom + 60; // Added extra 60px
         const outerContainer = chartContainer
             .append('div')
             .attr('id', this.uniqueId)
             .attr('class', 'outer-container')
             .style('width', '100%')
-            .style('height', `${totalHeight}px`) // Use calculated total height
+            .style('height', `${totalHeight}px`)
             .style('overflow', 'hidden')
-            .style('padding-left', `${margin.left}px`)
+            .style('padding-left', '0') // Remove left padding from outer container
             .style('padding-right', `${rightSvgWidth}px`)
-            .style('margin-left', '15px')
+            .style('margin-left', '0') // Remove left margin
             .style('position', 'relative');
         const leftSvgWidth = margin.left + 20;
         // FIXED: Y-axis SVG with proper height
@@ -3639,7 +3643,7 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('left', '0')
             .style('top', '0')
-            .style('z-index', 1)
+            .style('z-index', 2) // Increased z-index to ensure it stays above
             .append('g')
             .attr('transform', `translate(${margin.left + 5},${margin.top})`);
         const svgYAxisRight = outerContainer
@@ -3649,21 +3653,23 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('right', '40px')
             .style('top', '0')
-            .style('z-index', 1)
+            .style('z-index', 2) // Increased z-index
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
+        // FIXED: Inner container starts AFTER the y-axis labels
         const innerContainer = outerContainer
             .append('div')
             .attr('class', 'inner-container')
-            .style('width', '100%')
-            .style('height', `${totalHeight}px`) // Match outer container height
+            .style('width', `calc(100% - ${leftSvgWidth}px)`) // Account for y-axis width
+            .style('height', `${totalHeight}px`)
+            .style('margin-left', `${leftSvgWidth}px`) // Push container to start after y-axis
             .style('overflow-x', 'auto')
             .style('overflow-y', 'hidden');
-        // FIXED: Main SVG with increased height
+        // FIXED: Main SVG with increased height and proper positioning
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.width - rightSvgWidth)
-            .attr('height', totalHeight) // Use total height
+            .attr('height', totalHeight)
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
         return { outerContainer, svgYAxisLeft, svgYAxisRight, svg, totalHeight };