axidio-styleguide-library1-v2 0.4.12 → 0.4.14

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

@@ -3387,10 +3387,15 @@ class GroupChartComponent extends ComponentUniqueId {
         this.chartConfiguration = {};
         this.objectKeys = Object.keys;
         this.defaultConfiguration = {
-            margin: { top: 20, right: 20, bottom: 20, left: 70 },
+            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
+            },
             labelFormatter: ChartHelper.defaultFormatter,
             svgHeight: 70,
-            numberOfYTicks: 6,
+            numberOfYTicks: 6, // FIXED: More ticks for better spacing
             legendJustified: true,
             yLineAxisLabelFomatter: ChartHelper.defaultFormatter,
             yAxisLabelFomatter: ChartHelper.defaultFormatter,
@@ -3398,7 +3403,7 @@ class GroupChartComponent extends ComponentUniqueId {
             showLineChartAxis: true,
             showValues: true,
             headerMenuOptions: HeaderConfigHelper.headerConfig.headerMenuOptions,
-            yAxisGrid: false,
+            yAxisGrid: true, // FIXED: Changed from false to true to show grid
             legendVisible: true,
             isYaxisLabelHidden: false,
             backgroundColor: '#FFFFFF',
@@ -3519,23 +3524,27 @@ class GroupChartComponent extends ComponentUniqueId {
             (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 = this.chartConfiguration.svgHeight;
+            height = Math.max(this.chartConfiguration.svgHeight, minHeight);
         }
         else if (this.chartConfiguration.isFullScreen) {
-            height = parseInt(verticalstackedcontainer.style('height'));
+            height = Math.max(parseInt(verticalstackedcontainer.style('height')), minHeight);
         }
         if (this.chartConfiguration.isDrilldownChart && !this.isHeaderVisible) {
-            height = parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 130;
+            height = Math.max(parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 130, minHeight);
         }
         if (this.chartConfiguration.isHeaderVisible) {
-            height = parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 100;
+            height = Math.max(parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 100, minHeight);
         }
-        return height;
+        // FIXED: If calculated height is too small, use minimum
+        return Math.max(height, minHeight);
     }
     createScales(chartContext, dimensions) {
         const { data, metaData, lineData, keyList } = chartContext;
         const { width, height, margin } = dimensions;
+        // FIXED: Reduce spaces for better bar distribution
         const dataLength = data.length;
         const leftAndRightSpaces = dataLength <= 5 ? 20 : (dataLength <= 10 ? 35 : 50);
         const rightSvgWidth = 60;
@@ -3554,7 +3563,7 @@ class GroupChartComponent extends ComponentUniqueId {
                 .scaleBand()
                 .domain(groups)
                 .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
-                .padding(dataLength <= 5 ? 0.4 : 0.3);
+                .padding(dataLength <= 5 ? 0.4 : 0.3); // FIXED: Better padding for fewer bars
         }
         const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
         const xSubgroup = d3.scaleBand().domain(keyList).range([0, x.bandwidth()]);
@@ -3761,6 +3770,7 @@ 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')
@@ -3768,9 +3778,10 @@ 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)
+            .tickSize(0) // FIXED: No tick lines
             .ticks(this.chartConfiguration.numberOfYTicks)
             .tickFormat(this.chartConfiguration.yAxisLabelFomatter);
         svgYAxisLeft
@@ -3780,12 +3791,13 @@ 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
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '12px')
+            .style('font-size', '13px')
             .attr('dy', '0.32em');
-        svgYAxisLeft.selectAll('.tick line')
-            .attr('x2', -6);
+        // Remove tick lines from left axis
+        svgYAxisLeft.selectAll('.tick line').remove(); // FIXED: Remove all tick lines
         svgYAxisRight
             .append('g')
             .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
@@ -3810,12 +3822,21 @@ class GroupChartComponent extends ComponentUniqueId {
         }
     }
     renderYAxisGrid(svg, y, width) {
+        // FIXED: Improved grid styling
         svg
             .append('g')
-            .call(d3.axisLeft(y).ticks(this.chartConfiguration.numberOfYTicks).tickSize(-width))
-            .style('color', 'var(--chart-axis-color, #B9B9B9)')
-            .style('opacity', '0.5')
-            .call((g) => g.select('.domain').remove());
+            .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
+            .selectAll('line')
+            .style('stroke-width', '1px'); // FIXED: Thin lines
     }
     renderXAxisGrid(svg, x, height) {
         svg
@@ -4091,13 +4112,15 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('class', 'lib-axis-group-label font-size-1')
             .attr('style', this.chartConfiguration.yAxisCustomlabelStyles)
             .attr('transform', 'rotate(-90)')
-            .attr('y', 0 - margin.left / 2 - 30)
+            // FIXED: Better positioning for Y-axis label
+            .attr('y', 0 - margin.left + 10) // Adjusted for new margin
             .attr('x', 0 - height / 2)
             .attr('dy', '1em')
             .style('text-anchor', 'middle')
+            .style('font-size', '14px') // FIXED: Explicit font size
             .attr('fill', 'var(--chart-text-color)');
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            svgYAxisLeft.selectAll('.lib-axis-group-label').style('font-size', 'smaller').text(yLabel);
+            svgYAxisLeft.selectAll('.lib-axis-group-label').text(yLabel);
         }
         else {
             svgYAxisLeft
@@ -4122,9 +4145,11 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('text')
             .attr('class', baseClass)
             .attr('style', this.chartConfiguration.xAxisCustomlabelStyles)
-            .attr('transform', `translate(${width / 2},${height + margin.top + 20})`)
+            // FIXED: Increased spacing below chart (was margin.top + 20, now margin.top + 45)
+            .attr('transform', `translate(${width / 2},${height + margin.top + 45})`)
             .style('text-anchor', 'middle')
             .style('fill', 'var(--chart-text-color)')
+            .style('font-size', '14px') // FIXED: Explicit font size
             .text(isAcronym ? xLabel.toUpperCase() : xLabel.toLowerCase())
             .style('text-transform', isAcronym ? 'none' : 'capitalize');
     }