axidio-styleguide-library1-v2 0.4.41 → 0.4.42

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

@@ -3498,7 +3498,6 @@ class GroupChartComponent extends ComponentUniqueId {
         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;
@@ -3546,16 +3545,18 @@ class GroupChartComponent extends ComponentUniqueId {
     createScales(chartContext, dimensions) {
         const { data, metaData, lineData, keyList } = chartContext;
         const { width, height, margin } = dimensions;
-        const leftAndRightSpaces = 50;
+        // FIXED: Better calculation of available space
+        const leftAndRightSpaces = 60; // Increased for better label spacing
         const rightSvgWidth = 60;
         const groups = d3.map(data, (d) => d.name).keys();
+        // FIXED: Improved X-scale calculation for centered bars
         let x;
         if (this.chartConfiguration.isMultiChartGridLine !== undefined) {
             x = d3
                 .scaleBand()
-                .rangeRound([width, 0])
+                .rangeRound([0, width - rightSvgWidth]) // FIXED: Start from 0 for proper alignment
                 .align(0.5)
-                .padding(0.5)
+                .padding(0.3) // FIXED: Consistent padding
                 .domain(data.map((d) => d.name.toLowerCase()));
         }
         else {
@@ -3563,11 +3564,22 @@ class GroupChartComponent extends ComponentUniqueId {
                 .scaleBand()
                 .domain(groups)
                 .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
-                .padding(0.3);
+                .padding(0.3) // FIXED: Consistent padding
+                .align(0.5); // FIXED: Center alignment
         }
-        const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
-        const xSubgroup = d3.scaleBand().domain(keyList).range([0, x.bandwidth()]);
-        // FIXED: Improved max value calculation that considers height
+        // FIXED: X scale for proper label positioning
+        const xScaleFromOrigin = d3
+            .scaleBand()
+            .domain(groups)
+            .range([0, width - rightSvgWidth])
+            .padding(0.3)
+            .align(0.5);
+        const xSubgroup = d3
+            .scaleBand()
+            .domain(keyList)
+            .range([0, x.bandwidth()])
+            .padding(0.1); // FIXED: Add padding between grouped bars
+        // FIXED: Improved max value calculation
         const maxValue = this.calculateMaxValue(data, keyList, height);
         const y = d3.scaleLinear().domain([0, maxValue]).nice().rangeRound([height, 0]);
         let lineYscale = null;
@@ -3621,8 +3633,8 @@ 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; // Added extra 60px
+        // FIXED: Calculate total height including margins
+        const totalHeight = height + margin.top + margin.bottom + 20; // Added extra space for labels
         const outerContainer = chartContainer
             .append('div')
             .attr('id', this.uniqueId)
@@ -3630,12 +3642,10 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('width', '100%')
             .style('height', `${totalHeight}px`)
             .style('overflow', 'hidden')
-            .style('padding-left', '0') // Remove left padding from outer container
             .style('padding-right', `${rightSvgWidth}px`)
-            .style('margin-left', '0') // Remove left margin
             .style('position', 'relative');
         const leftSvgWidth = margin.left + 20;
-        // FIXED: Y-axis SVG with proper height
+        // FIXED: Y-axis SVG
         const svgYAxisLeft = outerContainer
             .append('svg')
             .attr('width', leftSvgWidth)
@@ -3643,7 +3653,7 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('left', '0')
             .style('top', '0')
-            .style('z-index', 2) // Increased z-index to ensure it stays above
+            .style('z-index', 2)
             .append('g')
             .attr('transform', `translate(${margin.left + 5},${margin.top})`);
         const svgYAxisRight = outerContainer
@@ -3653,20 +3663,20 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('right', '40px')
             .style('top', '0')
-            .style('z-index', 2) // Increased z-index
+            .style('z-index', 2)
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
-        // FIXED: Inner container starts AFTER the y-axis labels
+        // FIXED: Inner container with proper overflow handling
         const innerContainer = outerContainer
             .append('div')
             .attr('class', 'inner-container')
             .style('width', `calc(100% - ${leftSvgWidth}px)`)
             .style('height', `${totalHeight}px`)
-            .style('margin-left', `${leftSvgWidth - 15}px`) // Good adjustment for the 15px offset
+            .style('margin-left', `${leftSvgWidth - 15}px`)
             .style('overflow-x', 'auto')
             .style('overflow-y', 'hidden')
-            .style('position', 'relative'); // Add this for better positioning context
-        // FIXED: Main SVG with increased height and proper positioning
+            .style('position', 'relative');
+        // FIXED: Main SVG with proper dimensions for labels
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.width - rightSvgWidth)
@@ -3694,36 +3704,51 @@ class GroupChartComponent extends ComponentUniqueId {
     }
     renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList) {
         const { data, metaData } = chartContext;
-        if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            const xAxis = svg
-                .append('g')
-                .attr('class', 'x1 axis1')
-                .attr('transform', `translate(0,${height})`)
-                .call(d3.axisBottom(x).tickSize(0));
-            // FIXED: Show X-axis line
-            xAxis
-                .select('.domain')
-                .style('stroke', 'var(--chart-axis-color, #000000)')
-                .style('stroke-width', '1px')
-                .style('display', 'block');
-            xAxis.selectAll('g.tick line').remove();
-            const textClass = 'lib-xaxis-labels-texts-drilldown';
-            const textSelection = xAxis
-                .selectAll('g.tick text')
-                .attr('class', textClass)
-                .style('fill', 'var(--chart-text-color, #666666)')
-                .style('font-size', '11px');
-            if (keyList.length > 1 && !metaData.xLabel) {
-                textSelection.attr('y', 28);
+        // FIXED: Always show X-axis labels regardless of scroll
+        const xAxis = svg
+            .append('g')
+            .attr('class', 'x1 axis1')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x).tickSize(0));
+        // FIXED: Ensure X-axis line is visible
+        xAxis
+            .select('.domain')
+            .style('stroke', 'var(--chart-axis-color, #000000)')
+            .style('stroke-width', '1px')
+            .style('display', 'block');
+        xAxis.selectAll('g.tick line').remove();
+        // FIXED: Center align X-axis labels properly
+        const textSelection = xAxis
+            .selectAll('g.tick text')
+            .attr('class', 'lib-xaxis-labels-texts-drilldown')
+            .style('fill', 'var(--chart-text-color, #666666)')
+            .style('font-size', '11px')
+            .style('text-anchor', 'middle') // FIXED: Center alignment
+            .attr('dx', '0') // FIXED: Remove any horizontal offset
+            .attr('dy', '15px') // FIXED: Consistent vertical position
+            .text(d => {
+            // FIXED: Handle label formatting consistently
+            if (typeof d === 'string') {
+                return d.toLowerCase();
             }
+            return d;
+        });
+        // FIXED: Apply consistent positioning for multi-key charts
+        if (keyList.length > 1 && !metaData.xLabel) {
+            textSelection.attr('y', 28);
         }
-        else {
-            this.renderMultiChartXAxis(svg, x, height, data, metaData);
+        // FIXED: Don't hide labels when zoomed out, just adjust styling
+        if (this.isZoomedOut) {
+            svg.selectAll('.lib-xaxis-labels-texts-drilldown')
+                .style('font-size', '9px')
+                .style('opacity', '0.8');
         }
-        if (this.chartConfiguration.xLabelsOnSameLine) {
-            this.renderXLabelsOnSameLine(svg, data, metaData);
+        else {
+            svg.selectAll('.lib-xaxis-labels-texts-drilldown')
+                .style('font-size', '11px')
+                .style('opacity', '1');
         }
-        // Bottom x-axis
+        // FIXED: Render bottom X-axis with proper positioning
         const xAxis2 = svg
             .append('g')
             .attr('class', 'x2 axis2')
@@ -3735,10 +3760,10 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('stroke', 'var(--chart-axis-color, #000000)')
             .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');
-        }
+        // FIXED: Keep X-axis labels visible but style them appropriately
+        svg.selectAll('g.x2.axis2 g.tick text')
+            .style('opacity', '0.6')
+            .style('font-size', '10px');
     }
     renderMultiChartXAxis(svg, x, height, data, metaData) {
         let alternate_text = false;