axidio-styleguide-library1-v2 0.4.43 → 0.4.45

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

@@ -3552,7 +3552,7 @@ class GroupChartComponent extends ComponentUniqueId {
         if (this.chartConfiguration.isMultiChartGridLine !== undefined) {
             x = d3
                 .scaleBand()
-                .rangeRound([0, width]) // FIXED: Changed range to start from 0
+                .rangeRound([width, 0])
                 .align(0.5)
                 .padding(0.5)
                 .domain(data.map((d) => d.name.toLowerCase()));
@@ -3561,22 +3561,11 @@ class GroupChartComponent extends ComponentUniqueId {
             x = d3
                 .scaleBand()
                 .domain(groups)
-                .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
-            ]);
+                .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
+                .padding(0.3);
         }
         const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
-        const xSubgroup = d3.scaleBand()
-            .domain(keyList)
-            .range([0, x.bandwidth()])
-            .padding(0.1);
+        const xSubgroup = d3.scaleBand().domain(keyList).range([0, x.bandwidth()]);
         // 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]);
@@ -3710,13 +3699,19 @@ 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', 'lib-xaxis-labels-texts-drilldown')
+                .attr('class', textClass)
                 .style('fill', 'var(--chart-text-color, #666666)')
-                .style('font-size', '11px')
-                .attr('text-anchor', 'middle')
-                .attr('dx', x.bandwidth() / 2);
+                .style('font-size', '11px');
         }
         else {
             this.renderMultiChartXAxis(svg, x, height, data, metaData);
@@ -3909,7 +3904,6 @@ 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')
@@ -3924,19 +3918,15 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('rect')
             .attr('class', 'bars')
             .on('click', (d) => this.handleBarClick(d, metaData))
-            .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('x', (d) => this.getBarX(d, data, x, xSubgroup))
             .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);
         })
@@ -3967,10 +3957,7 @@ class GroupChartComponent extends ComponentUniqueId {
         if (this.chartConfiguration.isDrilldownChart) {
             return this.calculateDrilldownBarX(d, data, x);
         }
-        // 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
+        return xSubgroup(d.key);
     }
     calculateDrilldownBarX(d, data, x) {
         let tempScale;
@@ -3978,38 +3965,27 @@ 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);
                 }
             }
         });
-        // 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;
+        return tempScale ? tempScale(d.key) : 0;
     }
     adjustDrilldownScale(tempScale, data, x) {
-        // FIXED: Improved centering logic
         if (this.chartData.data.length === 1) {
-            // 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
+            const keysLength = Object.keys(this.chartData.data[0]).length;
+            const offset = keysLength === 2 ? 200 : 300;
             tempScale.range([
-                (x.bandwidth() - totalBarWidth) / 2,
-                x.bandwidth() - (x.bandwidth() - totalBarWidth) / 2
-            ]).padding(0.2);
+                0 + (x.bandwidth() - offset) / 2,
+                x.bandwidth() - (x.bandwidth() - offset) / 2,
+            ]);
         }
         else {
-            // Multiple bars - distribute evenly with proper padding
-            const totalBarWidth = Math.min(125, x.bandwidth() * 0.8);
             tempScale.range([
-                (x.bandwidth() - totalBarWidth) / 2,
-                x.bandwidth() - (x.bandwidth() - totalBarWidth) / 2
-            ]).padding(0.3);
+                0 + (x.bandwidth() - 125) / 2,
+                x.bandwidth() - (x.bandwidth() - 125) / 2,
+            ]);
         }
         return tempScale;
     }