axidio-styleguide-library1-v2 0.4.14 → 0.4.15

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

@@ -3388,14 +3388,14 @@ class GroupChartComponent extends ComponentUniqueId {
         this.objectKeys = Object.keys;
         this.defaultConfiguration = {
             margin: {
-                top: 30, // Space for top
-                right: 40, // Right space
-                bottom: 80, // FIXED: Increased from 20 to 80 for more space below X-axis label
-                left: 80 // FIXED: Increased from 40 to 80 for Y-axis labels
+                top: 20, // FIXED: Reduced top margin
+                right: 40,
+                bottom: 60, // FIXED: Reduced from 80 to 60 to fit in 300px
+                left: 100 // FIXED: Increased to 100 for Y-axis label + values spacing
             },
             labelFormatter: ChartHelper.defaultFormatter,
             svgHeight: 70,
-            numberOfYTicks: 6, // FIXED: More ticks for better spacing
+            numberOfYTicks: 6,
             legendJustified: true,
             yLineAxisLabelFomatter: ChartHelper.defaultFormatter,
             yAxisLabelFomatter: ChartHelper.defaultFormatter,
@@ -3403,7 +3403,7 @@ class GroupChartComponent extends ComponentUniqueId {
             showLineChartAxis: true,
             showValues: true,
             headerMenuOptions: HeaderConfigHelper.headerConfig.headerMenuOptions,
-            yAxisGrid: true, // FIXED: Changed from false to true to show grid
+            yAxisGrid: true,
             legendVisible: true,
             isYaxisLabelHidden: false,
             backgroundColor: '#FFFFFF',
@@ -3520,26 +3520,29 @@ class GroupChartComponent extends ComponentUniqueId {
         return width;
     }
     calculateHeight(verticalstackedcontainer, margin) {
-        let height = parseInt(verticalstackedcontainer.style('height')) *
+        // FIXED: Remove minimum height constraint to respect container size
+        let containerHeight = parseInt(verticalstackedcontainer.style('height'));
+        let height = containerHeight *
             (this.chartConfiguration.svgHeight / 100) -
             margin.top -
             margin.bottom;
-        // FIXED: Ensure minimum height for proper Y-axis spacing
-        const minHeight = 350; // Minimum height for good spacing
         if (this.chartConfiguration.isFullScreen && this.chartConfiguration.svgHeight !== 70) {
-            height = Math.max(this.chartConfiguration.svgHeight, minHeight);
+            height = this.chartConfiguration.svgHeight - margin.top - margin.bottom;
         }
         else if (this.chartConfiguration.isFullScreen) {
-            height = Math.max(parseInt(verticalstackedcontainer.style('height')), minHeight);
+            height = containerHeight - margin.top - margin.bottom;
         }
         if (this.chartConfiguration.isDrilldownChart && !this.isHeaderVisible) {
-            height = Math.max(parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 130, minHeight);
+            height = containerHeight - margin.top - margin.bottom - 130;
         }
         if (this.chartConfiguration.isHeaderVisible) {
-            height = Math.max(parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 100, minHeight);
+            height = containerHeight - margin.top - margin.bottom - 100;
         }
-        // FIXED: If calculated height is too small, use minimum
-        return Math.max(height, minHeight);
+        // FIXED: For fixed height containers (like 300px), ensure it fits
+        if (!this.chartConfiguration.isFullScreen && !this.chartConfiguration.isDrilldownChart) {
+            height = containerHeight - margin.top - margin.bottom;
+        }
+        return height;
     }
     createScales(chartContext, dimensions) {
         const { data, metaData, lineData, keyList } = chartContext;
@@ -3619,24 +3622,26 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('id', this.uniqueId)
             .attr('class', 'outer-container')
             .style('width', '100%')
-            .style('height', height)
+            .style('height', `${height + margin.top + margin.bottom}px`) // FIXED: Explicit height
             .style('overflow-x', 'hidden')
+            .style('overflow-y', 'hidden') // FIXED: Prevent vertical overflow
             .style('padding-left', `${margin.left}px`)
             .style('padding-right', `${rightSvgWidth}px`)
             .style('margin-left', '15px');
+        // FIXED: Increased width for Y-axis to prevent overlap
         const svgYAxisLeft = outerContainer
             .append('svg')
-            .attr('width', 100)
-            .attr('height', height + margin.top + margin.bottom + 10)
+            .attr('width', 100) // Keep at 100
+            .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
             .style('left', '0')
             .style('z-index', 1)
             .append('g')
-            .attr('transform', `translate(${margin.left + 15},${margin.top})`);
+            .attr('transform', `translate(${margin.left - 5},${margin.top})`); // FIXED: Adjusted transform
         const svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 10)
+            .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
             .style('right', '12px')
             .style('z-index', 1)
@@ -3646,11 +3651,13 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('div')
             .attr('class', 'inner-container')
             .style('width', '100%')
-            .style('overflow-x', 'auto');
+            .style('height', '100%') // FIXED: Full height
+            .style('overflow-x', 'auto')
+            .style('overflow-y', 'hidden'); // FIXED: Prevent vertical scroll
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.width - rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 30)
+            .attr('height', height + margin.top + margin.bottom) // FIXED: Exact height
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
         return { outerContainer, svgYAxisLeft, svgYAxisRight, svg };
@@ -3770,7 +3777,6 @@ class GroupChartComponent extends ComponentUniqueId {
         });
     }
     renderYAxis(svg, svgYAxisLeft, svgYAxisRight, y, dimensions) {
-        // Hide the main Y-axis in the chart area (to avoid overlapping lines)
         svg
             .append('g')
             .attr('class', 'lib-stacked-y-axis-text yaxis-dashed')
@@ -3778,10 +3784,9 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('transform', 'translate(0,0)')
             .call(y)
             .style('display', 'none');
-        // FIXED: Render clean Y-axis on the left without domain line
         const yAxisLeft = d3
             .axisLeft(y)
-            .tickSize(0) // FIXED: No tick lines
+            .tickSize(0)
             .ticks(this.chartConfiguration.numberOfYTicks)
             .tickFormat(this.chartConfiguration.yAxisLabelFomatter);
         svgYAxisLeft
@@ -3791,13 +3796,14 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('style', this.chartConfiguration.yAxisCustomTextStyles)
             .attr('transform', 'translate(0,0)')
             .call(yAxisLeft)
-            .call((g) => g.select('.domain').remove()) // FIXED: Remove Y-axis line
+            .call((g) => g.select('.domain').remove())
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '13px')
+            .style('font-size', '12px')
+            .style('font-weight', '400')
+            .attr('x', -10) // FIXED: Move Y-axis values slightly right to create gap
             .attr('dy', '0.32em');
-        // Remove tick lines from left axis
-        svgYAxisLeft.selectAll('.tick line').remove(); // FIXED: Remove all tick lines
+        svgYAxisLeft.selectAll('.tick line').remove();
         svgYAxisRight
             .append('g')
             .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
@@ -3822,21 +3828,19 @@ class GroupChartComponent extends ComponentUniqueId {
         }
     }
     renderYAxisGrid(svg, y, width) {
-        // FIXED: Improved grid styling
         svg
             .append('g')
             .attr('class', 'y-axis-grid')
             .call(d3.axisLeft(y)
             .ticks(this.chartConfiguration.numberOfYTicks)
-            .tickSize(-width) // Full width grid lines
-            .tickFormat('') // No labels on grid
-        )
-            .style('color', 'var(--chart-axis-color, #E0E0E0)') // FIXED: Lighter grid color
-            .style('opacity', '0.7') // FIXED: Semi-transparent
-            .style('stroke-dasharray', 'none') // FIXED: Solid lines instead of dashed
-            .call((g) => g.select('.domain').remove()) // FIXED: Remove domain line
+            .tickSize(-width)
+            .tickFormat(''))
+            .style('color', '#E8E8E8') // FIXED: Very light gray
+            .style('opacity', '0.8')
+            .style('stroke-dasharray', 'none')
+            .call((g) => g.select('.domain').remove())
             .selectAll('line')
-            .style('stroke-width', '1px'); // FIXED: Thin lines
+            .style('stroke-width', '0.5px'); // FIXED: Thinner lines
     }
     renderXAxisGrid(svg, x, height) {
         svg
@@ -4112,12 +4116,12 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('class', 'lib-axis-group-label font-size-1')
             .attr('style', this.chartConfiguration.yAxisCustomlabelStyles)
             .attr('transform', 'rotate(-90)')
-            // FIXED: Better positioning for Y-axis label
-            .attr('y', 0 - margin.left + 10) // Adjusted for new margin
+            // FIXED: Proper positioning with adequate spacing from Y-axis values
+            .attr('y', -65) // FIXED: Moved further left to avoid overlap (was: -margin.left + 10)
             .attr('x', 0 - height / 2)
             .attr('dy', '1em')
             .style('text-anchor', 'middle')
-            .style('font-size', '14px') // FIXED: Explicit font size
+            .style('font-size', '13px')
             .attr('fill', 'var(--chart-text-color)');
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
             svgYAxisLeft.selectAll('.lib-axis-group-label').text(yLabel);
@@ -4145,11 +4149,11 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('text')
             .attr('class', baseClass)
             .attr('style', this.chartConfiguration.xAxisCustomlabelStyles)
-            // FIXED: Increased spacing below chart (was margin.top + 20, now margin.top + 45)
-            .attr('transform', `translate(${width / 2},${height + margin.top + 45})`)
+            // FIXED: Adjusted for smaller bottom margin
+            .attr('transform', `translate(${width / 2},${height + 40})`)
             .style('text-anchor', 'middle')
             .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '14px') // FIXED: Explicit font size
+            .style('font-size', '13px')
             .text(isAcronym ? xLabel.toUpperCase() : xLabel.toLowerCase())
             .style('text-transform', isAcronym ? 'none' : 'capitalize');
     }