axidio-styleguide-library1-v2 0.4.14 → 0.4.16

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: 15, // FIXED: Reduced for 250px height
+                right: 40,
+                bottom: 50, // FIXED: Reduced for 250px height
+                left: 95 // FIXED: Enough space for label + values
             },
             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`)
             .style('overflow-x', 'hidden')
+            .style('overflow-y', 'hidden')
             .style('padding-left', `${margin.left}px`)
             .style('padding-right', `${rightSvgWidth}px`)
             .style('margin-left', '15px');
+        // FIXED: Position Y-axis to show label properly
         const svgYAxisLeft = outerContainer
             .append('svg')
-            .attr('width', 100)
-            .attr('height', height + margin.top + margin.bottom + 10)
+            .attr('width', margin.left + 15) // FIXED: Width matches left margin
+            .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
-            .style('left', '0')
+            .style('left', '-15px') // FIXED: Position to include label
             .style('z-index', 1)
             .append('g')
-            .attr('transform', `translate(${margin.left + 15},${margin.top})`);
+            .attr('transform', `translate(${margin.left},${margin.top})`); // FIXED: Proper 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%')
+            .style('overflow-x', 'auto')
+            .style('overflow-y', 'hidden');
         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)
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
         return { outerContainer, svgYAxisLeft, svgYAxisRight, svg };
@@ -3675,15 +3682,24 @@ class GroupChartComponent extends ComponentUniqueId {
     renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList) {
         const { data, metaData } = chartContext;
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            svg
+            // FIXED: X-axis with bottom line
+            const xAxis = svg
                 .append('g')
                 .attr('class', 'x1 axis1')
                 .attr('transform', `translate(0,${height})`)
-                .call(d3.axisBottom(x))
-                .call((g) => g.select('.domain').remove());
-            svg.selectAll('g.x1.axis1 g.tick line').remove();
+                .call(d3.axisBottom(x).tickSize(0));
+            // FIXED: Keep X-axis line visible
+            xAxis
+                .select('.domain')
+                .style('stroke', 'var(--chart-axis-color, #999999)')
+                .style('stroke-width', '1px');
+            xAxis.selectAll('g.tick line').remove();
             const textClass = 'lib-xaxis-labels-texts-drilldown';
-            const textSelection = svg.selectAll('g.x1.axis1 g.tick text').attr('class', textClass).style('fill', 'var(--chart-text-color)');
+            const textSelection = xAxis
+                .selectAll('g.tick text')
+                .attr('class', textClass)
+                .style('fill', 'var(--chart-text-color)')
+                .style('font-size', '12px');
             if (keyList.length > 1 && !metaData.xLabel) {
                 textSelection.attr('y', 32);
             }
@@ -3694,14 +3710,19 @@ class GroupChartComponent extends ComponentUniqueId {
         if (this.chartConfiguration.xLabelsOnSameLine) {
             this.renderXLabelsOnSameLine(svg, data, metaData);
         }
-        // Render bottom x-axis
-        svg
+        // Bottom x-axis with line
+        const xAxis2 = svg
             .append('g')
             .attr('class', 'x2 axis2')
             .attr('transform', `translate(0,${height})`)
             .style('color', '#000')
-            .call(d3.axisBottom(xScaleFromOrigin).tickSize(0))
-            .call((g) => g.select('.domain').attr('fill', 'none'));
+            .call(d3.axisBottom(xScaleFromOrigin).tickSize(0));
+        // FIXED: Show X-axis line
+        xAxis2
+            .select('.domain')
+            .style('stroke', 'var(--chart-axis-color, #999999)')
+            .style('stroke-width', '1px')
+            .attr('fill', 'none');
         svg.selectAll('g.x2.axis2 g.tick text').style('display', 'none');
         if (this.isZoomedOut) {
             svg.selectAll('.lib-xaxis-labels-texts-drilldown').attr('class', 'lib-display-hidden');
@@ -3770,7 +3791,7 @@ class GroupChartComponent extends ComponentUniqueId {
         });
     }
     renderYAxis(svg, svgYAxisLeft, svgYAxisRight, y, dimensions) {
-        // Hide the main Y-axis in the chart area (to avoid overlapping lines)
+        // Main Y-axis in chart area (hidden)
         svg
             .append('g')
             .attr('class', 'lib-stacked-y-axis-text yaxis-dashed')
@@ -3778,26 +3799,32 @@ 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
+        // FIXED: Left Y-axis with proper positioning
         const yAxisLeft = d3
             .axisLeft(y)
-            .tickSize(0) // FIXED: No tick lines
+            .tickSize(0)
             .ticks(this.chartConfiguration.numberOfYTicks)
             .tickFormat(this.chartConfiguration.yAxisLabelFomatter);
-        svgYAxisLeft
-            .append('g')
+        const yAxisGroup = svgYAxisLeft
             .append('g')
             .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
             .attr('style', this.chartConfiguration.yAxisCustomTextStyles)
             .attr('transform', 'translate(0,0)')
-            .call(yAxisLeft)
-            .call((g) => g.select('.domain').remove()) // FIXED: Remove Y-axis line
+            .call(yAxisLeft);
+        // FIXED: Add Y-axis vertical line
+        yAxisGroup
+            .select('.domain')
+            .style('stroke', 'var(--chart-axis-color, #999999)')
+            .style('stroke-width', '1px');
+        // FIXED: Style Y-axis text with proper positioning
+        yAxisGroup
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '13px')
+            .style('font-size', '12px')
+            .style('font-weight', '400')
+            .attr('x', -8) // FIXED: Slight offset from axis line
             .attr('dy', '0.32em');
-        // Remove tick lines from left axis
-        svgYAxisLeft.selectAll('.tick line').remove(); // FIXED: Remove all tick lines
+        // Right Y-axis (hidden)
         svgYAxisRight
             .append('g')
             .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
@@ -3822,21 +3849,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')
+            .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');
     }
     renderXAxisGrid(svg, x, height) {
         svg
@@ -4112,12 +4137,13 @@ 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 for label
+            .attr('y', -70) // FIXED: Distance from Y-axis
             .attr('x', 0 - height / 2)
             .attr('dy', '1em')
             .style('text-anchor', 'middle')
-            .style('font-size', '14px') // FIXED: Explicit font size
+            .style('font-size', '12px')
+            .style('font-weight', '400')
             .attr('fill', 'var(--chart-text-color)');
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
             svgYAxisLeft.selectAll('.lib-axis-group-label').text(yLabel);
@@ -4145,11 +4171,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 250px height
+            .attr('transform', `translate(${width / 2},${height + 35})`)
             .style('text-anchor', 'middle')
             .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '14px') // FIXED: Explicit font size
+            .style('font-size', '12px')
             .text(isAcronym ? xLabel.toUpperCase() : xLabel.toLowerCase())
             .style('text-transform', isAcronym ? 'none' : 'capitalize');
     }