axidio-styleguide-library1-v2 0.0.802 → 0.0.803

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

@@ -8150,11 +8150,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .style('stroke-width', '1px');
         }
         styleAxisDomain();
-        // Always render y-axis label after axis/grid so it is visible
         if (metaData.yLabel) {
-            // Remove any previous y-axis label to avoid duplicates
             svgYAxisLeft.selectAll('.lib-axis-group-label, .lib-ylabel-drilldowncharts, .lib-ylabel-weeklyCharts').remove();
-            // Helper to check if label is an acronym (all uppercase or <=4 chars and all letters)
             function isAcronym(label) {
                 return (label.length <= 4 && /^[A-Z]+$/.test(label)) || (label === label.toUpperCase() && /[A-Z]/.test(label));
             }
@@ -8240,9 +8237,27 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .text(metaData.lineyLabel);
         }
         if (metaData.xLabel) {
+            function isAcronym(label) {
+                return (label.length <= 4 && /^[A-Z]+$/.test(label)) || (label === label.toUpperCase() && /[A-Z]/.test(label));
+            }
+            const xLabelText = metaData.xLabel;
+            const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
             svg
                 .append('text')
-                .attr('class', 'lib-axis-waterfall-label');
+                .attr('class', function () {
+                if (self.chartConfiguration.isDrilldownChart)
+                    return 'lib-xlabel-drilldowncharts';
+                if (self.chartConfiguration.isMultiChartGridLine != undefined)
+                    return 'lib-xlabel-weeklyCharts';
+                return 'lib-axis-waterfall-label lib-axis-group-label font-size-1';
+            })
+                .attr('style', self.chartConfiguration.xAxisCustomlabelStyles)
+                .attr('transform', 'translate(' + width / 2 + ' ,' + (height + margin.top + 40) + ')')
+                .style('text-anchor', 'middle')
+                .style('fill', 'var(--chart-text-color)')
+                .style('color', 'var(--chart-text-color)')
+                .text(isAcr ? xLabelText.toUpperCase() : xLabelText.toLowerCase())
+                .style('text-transform', isAcr ? 'none' : 'capitalize');
         }
         if (lineData && colors) {
             var dataGroup = d3
@@ -9028,7 +9043,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 });
                 return tempScale.bandwidth();
             }
-            return self.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth() * 0.5;
+            return xSubgroup.bandwidth();
         })
             .attr('height', function (d) {
             if (d.value == -1) {
@@ -9307,7 +9322,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .on('mouseout', function (d) {
                 state.selectAll('.barstext').remove();
             })
-                .on('mouseover', function (d1) {
+                .on('mouseover', (d1) => {
                 state
                     .selectAll('text')
                     .data(function (d) {
@@ -9337,7 +9352,10 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     .style('fill', function (d) {
                     return metaData.colors[d.key];
                 })
-                    .attr('width', self.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth() * 0.5)
+                    // .attr('width', xSubgroup.bandwidth())
+                    // .attr('width', this.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth() * 0.6)
+                    .attr('x', (d) => xSubgroup(d.key) +
+                    (this.isZoomedOut ? 0 : (xSubgroup.bandwidth() * 0.4) / 2))
                     .text(function (d) {
                     return d.value;
                 });
@@ -9569,6 +9587,29 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .style('font-size', 'smaller')
                 .text(metaData.lineyLabel);
         }
+        if (metaData.xLabel) {
+            function isAcronym(label) {
+                return (label.length <= 4 && /^[A-Z]+$/.test(label)) || (label === label.toUpperCase() && /[A-Z]/.test(label));
+            }
+            const xLabelText = metaData.xLabel;
+            const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
+            svg
+                .append('text')
+                .attr('class', function () {
+                if (self.chartConfiguration.isDrilldownChart)
+                    return 'lib-xlabel-drilldowncharts';
+                if (self.chartConfiguration.isMultiChartGridLine != undefined)
+                    return 'lib-xlabel-weeklyCharts';
+                return 'lib-axis-waterfall-label lib-axis-group-label font-size-1';
+            })
+                .attr('style', self.chartConfiguration.xAxisCustomlabelStyles)
+                .attr('transform', 'translate(' + width / 2 + ' ,' + (height + margin.top + 40) + ')')
+                .style('text-anchor', 'middle')
+                .style('fill', 'var(--chart-text-color)')
+                .style('color', 'var(--chart-text-color)')
+                .text(isAcr ? xLabelText.toUpperCase() : xLabelText.toLowerCase())
+                .style('text-transform', isAcr ? 'none' : 'capitalize');
+        }
         if (lineData) {
             svg
                 .append('path')