axidio-styleguide-library1-v2 0.0.801 → 0.0.802

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

@@ -8150,8 +8150,11 @@ 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));
             }
@@ -8237,27 +8240,9 @@ 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', function () {
-                if (self.chartConfiguration.isDrilldownChart)
-                    return 'lib-xlabel-drilldowncharts';
-                if (self.chartConfiguration.isMultiChartGridLine != undefined)
-                    return 'lib-xlabel-weeklyCharts';
-                return 'lib-axis-waterfall-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');
+                .attr('class', 'lib-axis-waterfall-label');
         }
         if (lineData && colors) {
             var dataGroup = d3
@@ -9043,7 +9028,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 });
                 return tempScale.bandwidth();
             }
-            return xSubgroup.bandwidth();
+            return self.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth() * 0.5;
         })
             .attr('height', function (d) {
             if (d.value == -1) {
@@ -9322,7 +9307,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .on('mouseout', function (d) {
                 state.selectAll('.barstext').remove();
             })
-                .on('mouseover', (d1) => {
+                .on('mouseover', function (d1) {
                 state
                     .selectAll('text')
                     .data(function (d) {
@@ -9352,10 +9337,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     .style('fill', function (d) {
                     return metaData.colors[d.key];
                 })
-                    // .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))
+                    .attr('width', self.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth() * 0.5)
                     .text(function (d) {
                     return d.value;
                 });
@@ -9587,29 +9569,6 @@ 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 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')