axidio-styleguide-library1-v2 0.4.41 → 0.4.43

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;
@@ -3553,7 +3552,7 @@ class GroupChartComponent extends ComponentUniqueId {
         if (this.chartConfiguration.isMultiChartGridLine !== undefined) {
             x = d3
                 .scaleBand()
-                .rangeRound([width, 0])
+                .rangeRound([0, width]) // FIXED: Changed range to start from 0
                 .align(0.5)
                 .padding(0.5)
                 .domain(data.map((d) => d.name.toLowerCase()));
@@ -3562,11 +3561,22 @@ class GroupChartComponent extends ComponentUniqueId {
             x = d3
                 .scaleBand()
                 .domain(groups)
-                .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
-                .padding(0.3);
+                .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
+            ]);
         }
         const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
-        const xSubgroup = d3.scaleBand().domain(keyList).range([0, x.bandwidth()]);
+        const xSubgroup = d3.scaleBand()
+            .domain(keyList)
+            .range([0, x.bandwidth()])
+            .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]);
@@ -3700,22 +3710,13 @@ class GroupChartComponent extends ComponentUniqueId {
                 .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)
+                .attr('class', 'lib-xaxis-labels-texts-drilldown')
                 .style('fill', 'var(--chart-text-color, #666666)')
-                .style('font-size', '11px');
-            if (keyList.length > 1 && !metaData.xLabel) {
-                textSelection.attr('y', 28);
-            }
+                .style('font-size', '11px')
+                .attr('text-anchor', 'middle')
+                .attr('dx', x.bandwidth() / 2);
         }
         else {
             this.renderMultiChartXAxis(svg, x, height, data, metaData);
@@ -3908,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')
@@ -3922,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);
         })
@@ -3961,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;
@@ -3969,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;
     }