axidio-styleguide-library1-v2 0.4.42 → 0.4.43

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

@@ -3545,41 +3545,39 @@ class GroupChartComponent extends ComponentUniqueId {
     createScales(chartContext, dimensions) {
         const { data, metaData, lineData, keyList } = chartContext;
         const { width, height, margin } = dimensions;
-        // FIXED: Better calculation of available space
-        const leftAndRightSpaces = 60; // Increased for better label spacing
+        const leftAndRightSpaces = 50;
         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([0, width - rightSvgWidth]) // FIXED: Start from 0 for proper alignment
+                .rangeRound([0, width]) // FIXED: Changed range to start from 0
                 .align(0.5)
-                .padding(0.3) // FIXED: Consistent padding
+                .padding(0.5)
                 .domain(data.map((d) => d.name.toLowerCase()));
         }
         else {
             x = d3
                 .scaleBand()
                 .domain(groups)
-                .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
-                .padding(0.3) // FIXED: Consistent padding
-                .align(0.5); // FIXED: Center alignment
+                .range([0, width - rightSvgWidth]) // FIXED: Start from 0 for better centering
+                .padding(0.3)
+                .align(0.5); // FIXED: Center the bands
+        }
+        if (data.length === 1 && !this.chartConfiguration.isMultiChartGridLine) {
+            const singleBarWidth = Math.min(80, (width - rightSvgWidth) * 0.6); // Max 60% of available width
+            x.range([
+                ((width - rightSvgWidth) - singleBarWidth) / 2,
+                ((width - rightSvgWidth) - singleBarWidth) / 2 + singleBarWidth
+            ]);
         }
-        // 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()
+        const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
+        const xSubgroup = d3.scaleBand()
             .domain(keyList)
             .range([0, x.bandwidth()])
-            .padding(0.1); // FIXED: Add padding between grouped bars
-        // FIXED: Improved max value calculation
+            .padding(0.1);
+        // FIXED: Improved max value calculation that considers height
         const maxValue = this.calculateMaxValue(data, keyList, height);
         const y = d3.scaleLinear().domain([0, maxValue]).nice().rangeRound([height, 0]);
         let lineYscale = null;
@@ -3633,8 +3631,8 @@ class GroupChartComponent extends ComponentUniqueId {
     createSVGStructure(dimensions) {
         const { chartContainer, height, margin } = dimensions;
         const rightSvgWidth = 60;
-        // FIXED: Calculate total height including margins
-        const totalHeight = height + margin.top + margin.bottom + 20; // Added extra space for labels
+        // FIXED: Calculate total height including margins and extra space
+        const totalHeight = height + margin.top + margin.bottom; // Added extra 60px
         const outerContainer = chartContainer
             .append('div')
             .attr('id', this.uniqueId)
@@ -3642,10 +3640,12 @@ 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
+        // FIXED: Y-axis SVG with proper height
         const svgYAxisLeft = outerContainer
             .append('svg')
             .attr('width', leftSvgWidth)
@@ -3653,7 +3653,7 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('left', '0')
             .style('top', '0')
-            .style('z-index', 2)
+            .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
@@ -3663,20 +3663,20 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('right', '40px')
             .style('top', '0')
-            .style('z-index', 2)
+            .style('z-index', 2) // Increased z-index
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
-        // FIXED: Inner container with proper overflow handling
+        // FIXED: Inner container starts AFTER the y-axis labels
         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`)
+            .style('margin-left', `${leftSvgWidth - 15}px`) // Good adjustment for the 15px offset
             .style('overflow-x', 'auto')
             .style('overflow-y', 'hidden')
-            .style('position', 'relative');
-        // FIXED: Main SVG with proper dimensions for labels
+            .style('position', 'relative'); // Add this for better positioning context
+        // FIXED: Main SVG with increased height and proper positioning
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.width - rightSvgWidth)
@@ -3704,51 +3704,27 @@ class GroupChartComponent extends ComponentUniqueId {
     }
     renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList) {
         const { data, metaData } = chartContext;
-        // 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);
-        }
-        // 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.isMultiChartGridLine === undefined) {
+            const xAxis = svg
+                .append('g')
+                .attr('class', 'x1 axis1')
+                .attr('transform', `translate(0,${height})`)
+                .call(d3.axisBottom(x).tickSize(0));
+            xAxis
+                .selectAll('g.tick text')
+                .attr('class', 'lib-xaxis-labels-texts-drilldown')
+                .style('fill', 'var(--chart-text-color, #666666)')
+                .style('font-size', '11px')
+                .attr('text-anchor', 'middle')
+                .attr('dx', x.bandwidth() / 2);
         }
         else {
-            svg.selectAll('.lib-xaxis-labels-texts-drilldown')
-                .style('font-size', '11px')
-                .style('opacity', '1');
+            this.renderMultiChartXAxis(svg, x, height, data, metaData);
+        }
+        if (this.chartConfiguration.xLabelsOnSameLine) {
+            this.renderXLabelsOnSameLine(svg, data, metaData);
         }
-        // FIXED: Render bottom X-axis with proper positioning
+        // Bottom x-axis
         const xAxis2 = svg
             .append('g')
             .attr('class', 'x2 axis2')
@@ -3760,10 +3736,10 @@ class GroupChartComponent extends ComponentUniqueId {
             .style('stroke', 'var(--chart-axis-color, #000000)')
             .style('stroke-width', '1px')
             .attr('fill', 'none');
-        // 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');
+        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');
+        }
     }
     renderMultiChartXAxis(svg, x, height, data, metaData) {
         let alternate_text = false;
@@ -3933,6 +3909,7 @@ class GroupChartComponent extends ComponentUniqueId {
         const { data, metaData, keyList, isRia } = chartContext;
         const { x, xSubgroup, y } = scales;
         const { height } = dimensions;
+        // FIXED: Improved bar group positioning
         const state = svg
             .append('g')
             .selectAll('.state')
@@ -3947,15 +3924,19 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('rect')
             .attr('class', 'bars')
             .on('click', (d) => this.handleBarClick(d, metaData))
-            .attr('x', (d) => this.getBarX(d, data, x, xSubgroup))
+            .attr('x', (d) => {
+            // FIXED: Improved X positioning for centering
+            if (this.chartConfiguration.isDrilldownChart) {
+                return this.calculateDrilldownBarX(d, data, x) - (this.getBarWidth(d, data, x, xSubgroup) / 2);
+            }
+            return xSubgroup(d.key);
+        })
             .attr('y', (d) => {
-            // FIXED: Ensure bars start from correct Y position
             const value = d.value === -1 ? 0 : d.value;
             return y(value);
         })
             .attr('width', (d) => this.getBarWidth(d, data, x, xSubgroup))
             .attr('height', (d) => {
-            // FIXED: Improved height calculation
             const value = d.value === -1 ? 0 : d.value;
             return height - y(value);
         })
@@ -3986,7 +3967,10 @@ class GroupChartComponent extends ComponentUniqueId {
         if (this.chartConfiguration.isDrilldownChart) {
             return this.calculateDrilldownBarX(d, data, x);
         }
-        return xSubgroup(d.key);
+        // FIXED: For non-drilldown charts, ensure proper positioning
+        const basePosition = xSubgroup(d.key);
+        const barWidth = xSubgroup.bandwidth();
+        return basePosition + (barWidth / 2); // Center of the bar
     }
     calculateDrilldownBarX(d, data, x) {
         let tempScale;
@@ -3994,27 +3978,38 @@ class GroupChartComponent extends ComponentUniqueId {
             if (indiv.name === d.name) {
                 const keys = Object.keys(indiv).filter((temp, i) => i !== 0);
                 tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
+                // FIXED: Better centering for single bar and multiple bars
                 if (x.bandwidth() > 100) {
                     tempScale = this.adjustDrilldownScale(tempScale, data, x);
                 }
             }
         });
-        return tempScale ? tempScale(d.key) : 0;
+        // FIXED: Ensure proper centering
+        if (tempScale) {
+            const barPosition = tempScale(d.key);
+            const barWidth = tempScale.bandwidth();
+            return barPosition + (barWidth / 2); // Center of the bar
+        }
+        return 0;
     }
     adjustDrilldownScale(tempScale, data, x) {
+        // FIXED: Improved centering logic
         if (this.chartData.data.length === 1) {
-            const keysLength = Object.keys(this.chartData.data[0]).length;
-            const offset = keysLength === 2 ? 200 : 300;
+            // Single bar - center it properly
+            const keysLength = Object.keys(this.chartData.data[0]).length - 1; // Exclude 'name'
+            const totalBarWidth = Math.min(keysLength * 40, x.bandwidth() * 0.8); // Max 80% of available width
             tempScale.range([
-                0 + (x.bandwidth() - offset) / 2,
-                x.bandwidth() - (x.bandwidth() - offset) / 2,
-            ]);
+                (x.bandwidth() - totalBarWidth) / 2,
+                x.bandwidth() - (x.bandwidth() - totalBarWidth) / 2
+            ]).padding(0.2);
         }
         else {
+            // Multiple bars - distribute evenly with proper padding
+            const totalBarWidth = Math.min(125, x.bandwidth() * 0.8);
             tempScale.range([
-                0 + (x.bandwidth() - 125) / 2,
-                x.bandwidth() - (x.bandwidth() - 125) / 2,
-            ]);
+                (x.bandwidth() - totalBarWidth) / 2,
+                x.bandwidth() - (x.bandwidth() - totalBarWidth) / 2
+            ]).padding(0.3);
         }
         return tempScale;
     }