axidio-styleguide-library1-v2 0.3.7 → 0.3.9

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

@@ -6639,7 +6639,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             requiredSvgWidth,
         };
     }
-    createSvgContainers(chartContainer, dimensions, margin) {
+    createSvgContainers(chartContainer, dimensions, margin, hasXLabel // Add this parameter
+    ) {
+        // Calculate total height including space for X-axis label if present
+        const xLabelSpace = hasXLabel ? 30 : 0;
+        const totalHeight = dimensions.height + margin.top + margin.bottom + xLabelSpace;
         // Main wrapper
         const chartWrapper = chartContainer
             .append('div')
@@ -6647,7 +6651,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('class', 'chart-wrapper-main')
             .style('position', 'relative')
             .style('width', '100%')
-            .style('height', `${dimensions.height + margin.top + margin.bottom}px`);
+            .style('height', `${totalHeight}px`); // Include X-label space
         // Left Y-axis - Fixed
         const leftAxisContainer = chartWrapper
             .append('div')
@@ -6656,7 +6660,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('left', '0')
             .style('top', '0')
             .style('width', '80px')
-            .style('height', `${dimensions.height + margin.top + margin.bottom}px`)
+            .style('height', `${dimensions.height + margin.top + margin.bottom}px`) // Exclude X-label space
             .style('background-color', 'var(--card-bg)')
             .style('z-index', '10');
         const svgYAxisLeft = leftAxisContainer
@@ -6673,7 +6677,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('right', '0')
             .style('top', '0')
             .style('width', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`)
-            .style('height', `${dimensions.height + margin.top + margin.bottom}px`)
+            .style('height', `${dimensions.height + margin.top + margin.bottom}px`) // Exclude X-label space
             .style('background-color', 'var(--card-bg)')
             .style('z-index', '10');
         const svgYAxisRight = rightAxisContainer
@@ -6691,7 +6695,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('right', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`)
             .style('top', '0')
             .style('width', 'auto')
-            .style('height', `${dimensions.height + margin.top + margin.bottom}px`)
+            .style('height', `${dimensions.height + margin.top + margin.bottom}px`) // Exclude X-label space
             .style('overflow-x', 'auto')
             .style('overflow-y', 'hidden');
         const innerContainer = scrollableContainer
@@ -6704,7 +6708,21 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('height', dimensions.height + margin.top + margin.bottom + 30)
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
-        return { svg, svgYAxisLeft, svgYAxisRight, innerContainer };
+        // Fixed bottom container for X-axis label
+        const bottomLabelContainer = chartWrapper
+            .append('div')
+            .attr('class', 'bottom-label-container')
+            .style('position', 'absolute')
+            .style('left', '80px')
+            .style('right', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`)
+            .style('bottom', '0')
+            .style('height', `${xLabelSpace}px`)
+            .style('display', 'flex')
+            .style('justify-content', 'center')
+            .style('align-items', 'center')
+            .style('background-color', 'var(--card-bg)')
+            .style('z-index', '10');
+        return { svg, svgYAxisLeft, svgYAxisRight, innerContainer, bottomLabelContainer };
     }
     createScales(data, layers, lineData, dimensions) {
         const { width, height, barWidth, barPadding } = dimensions;
@@ -6714,9 +6732,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const requiredWidth = totalBarsWidth + totalSpacing + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
         const effectiveWidth = Math.max(width, requiredWidth);
         const paddingRatio = barPadding / (barWidth + barPadding);
+        // X-scale starts from 0 (no left spacing for grid alignment)
         const xScale = d3
             .scaleBand()
-            .rangeRound([0, dimensions.requiredSvgWidth])
+            .rangeRound([0, dimensions.requiredSvgWidth]) // Full width from 0
             .domain(data.map(d => d.name).reverse())
             .paddingInner(paddingRatio)
             .paddingOuter(0.5)
@@ -6926,12 +6945,12 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('fill', (d) => this.getBarColor(d, metaData));
         svg.selectAll('.lib-verticalstack-title-ontop').remove();
     }
-    renderAxisLabels(svg, svgYAxisLeft, metaData, dimensions, margin) {
+    renderAxisLabels(svg, svgYAxisLeft, bottomLabelContainer, metaData, dimensions, margin) {
         if (metaData.yLabel) {
             this.addYAxisLabel(svgYAxisLeft, metaData.yLabel, dimensions.height, margin);
         }
         if (metaData.xLabel) {
-            this.addXAxisLabel(svg, metaData.xLabel, dimensions.width, dimensions.height, margin);
+            this.addXAxisLabel(bottomLabelContainer, metaData.xLabel);
         }
     }
     addYAxisLabel(svgYAxisLeft, label, height, margin) {
@@ -6952,21 +6971,18 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .text(isAcronym ? label.toUpperCase() : label.toLowerCase())
             .style('text-transform', isAcronym ? 'none' : 'capitalize');
     }
-    addXAxisLabel(svg, label, width, height, margin) {
-        const isria = this.customChartConfiguration?.isRia;
+    addXAxisLabel(bottomLabelContainer, label) {
         const isAcronym = this.isAcronymLabel(label);
-        const xPosition = isria
-            ? height + margin.top + margin.bottom
-            : height + margin.top + margin.bottom + 10;
-        svg
-            .append('text')
-            .attr('class', this.getXAxisLabelClass())
-            .attr('style', this.chartConfiguration.xAxisCustomlabelStyles)
-            .attr('transform', `translate(${width / 2},${xPosition})`)
-            .style('text-anchor', 'middle')
-            .style('fill', 'var(--chart-text-color)')
-            .text(isAcronym ? label.toUpperCase() : label.toLowerCase())
-            .style('text-transform', isAcronym ? 'none' : 'capitalize');
+        bottomLabelContainer
+            .append('div')
+            .style('width', '100%')
+            .style('text-align', 'center')
+            .style('font-size', '12px')
+            .style('font-weight', '600')
+            .style('font-family', 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto')
+            .style('color', 'var(--chart-text-color)')
+            .style('text-transform', isAcronym ? 'none' : 'capitalize')
+            .text(isAcronym ? label.toUpperCase() : label.toLowerCase());
     }
     isAcronymLabel(label) {
         const cleanLabel = label.replace(/[^A-Za-z]/g, '');
@@ -7020,7 +7036,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const verticalstackedcontainer = d3.select(this.verticalstackedcontainerElt.nativeElement);
         const margin = this.chartConfiguration.margin;
         const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, data.length);
-        const { svg, svgYAxisLeft, svgYAxisRight } = this.createSvgContainers(chartContainer, dimensions, margin);
+        const hasXLabel = !!metaData.xLabel;
+        const { svg, svgYAxisLeft, svgYAxisRight, bottomLabelContainer } = this.createSvgContainers(chartContainer, dimensions, margin, hasXLabel);
         const stack = d3.stack().keys(keyList).offset(d3.stackOffsetNone);
         const layers = stack(data);
         data.sort((a, b) => b.total - a.total);
@@ -7029,7 +7046,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.renderGrids(svg, scales, dimensions);
         const rect = this.renderBars(svg, layers, scales, metaData, dimensions);
         this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data);
-        this.renderAxisLabels(svg, svgYAxisLeft, metaData, dimensions, margin);
+        this.renderAxisLabels(svg, svgYAxisLeft, bottomLabelContainer, metaData, dimensions, margin);
         this.renderTargetLine(svg, svgYAxisRight, scales, dimensions, metaData);
         this.renderDataLabels(rect, scales, metaData, dimensions);
         this.renderLineChart(svg, lineData, scales, colors, metaData);
@@ -7098,20 +7115,19 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     }
     renderStandardAxes(svg, axes, scales, dimensions, data) {
         const isMobileOrTablet = window.innerWidth < 1024;
-        // X-axis with labels - positioned at the bottom
+        // X-axis with labels
         const xAxisGroup = svg
             .append('g')
             .attr('transform', `translate(0,${dimensions.height})`)
             .attr('class', 'lib-stacked-x-axis-text')
             .call(axes.xAxis);
-        // Style X-axis labels - make them visible
+        // Style X-axis labels
         xAxisGroup
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)')
             .style('font-size', isMobileOrTablet ? '10px' : '12px')
             .attr('text-anchor', 'middle')
             .attr('dy', '1em')
-            .style('display', 'block') // Ensure labels are visible
             .each(function (d) {
             const textElement = d3.select(this);
             const text = textElement.text();
@@ -7119,16 +7135,19 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 textElement.text(text.substring(0, 10) + '...');
             }
         });
-        // Ensure X-axis line (domain) is visible
+        // Ensure X-axis line is visible
         xAxisGroup
             .select('.domain')
             .style('stroke', 'var(--chart-axis-color)')
-            .style('stroke-width', '1px')
-            .style('display', 'block');
-        // Remove any hiding of tick marks
-        xAxisGroup
-            .selectAll('.tick line')
-            .style('display', 'block');
+            .style('stroke-width', '1px');
+        // Y-axis
+        svg
+            .append('g')
+            .attr('class', 'lib-stacked-y-axis-text')
+            .attr('style', this.chartConfiguration.yAxisCustomTextStyles)
+            .call(axes.yAxis)
+            .selectAll('text')
+            .style('fill', 'var(--chart-text-color)');
     }
     renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions) {
         svg
@@ -7186,22 +7205,13 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
     }
     applyAxisConfigurations(svg, scales, dimensions, data) {
-        // Only hide labels if explicitly configured
-        if (this.chartConfiguration.isMultiChartGridLine !== undefined &&
-            this.chartConfiguration.isXaxisLabelHidden !== false) {
+        if (this.chartConfiguration.isMultiChartGridLine !== undefined) {
             d3.selectAll('.multichart > g > text').attr('class', 'lib-display-hidden');
         }
-        if (this.chartConfiguration.isXaxisLabelHidden === true) {
-            svg.selectAll('.lib-stacked-x-axis-text > g > text').attr('class', 'lib-display-hidden');
-        }
-        else if (this.chartConfiguration.isXaxisLabelHidden === false) {
-            // Explicitly show X-axis labels
-            svg.selectAll('.lib-stacked-x-axis-text > g > text')
-                .style('display', 'block')
-                .attr('class', '');
+        if (this.chartConfiguration.isXaxisLabelHidden) {
+            d3.selectAll('.multichart > g > text').attr('class', 'lib-display-hidden');
         }
-        else if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            // For standard charts, render custom X-axis if needed
+        else if (this.chartConfiguration.isXaxisLabelHidden !== undefined) {
             this.renderCustomXAxis(svg, scales, dimensions, data);
         }
         if (this.chartConfiguration.isYaxisLabelHidden) {