axidio-styleguide-library1-v2 0.1.26 → 0.1.28

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

@@ -3939,8 +3939,8 @@ class GroupChartComponent extends ComponentUniqueId {
         else {
             x = d3
                 .scaleBand()
+                .domain(groups)
                 .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
-                .domain(groups).reverse()
                 .padding([0.3]);
         }
         // x.bandwidth(96);
@@ -4557,30 +4557,29 @@ class GroupChartComponent extends ComponentUniqueId {
                 .attr('class', 'title')
                 .style('z-index', 99)
                 .html(function () {
-                if (!isNaN(d[1] - d[0])) {
-                    if (d[1] - d[0] === 0) {
-                        return '<span class="title-top-text">0</span>';
-                    }
-                    var dataType = metaData.dataType ? metaData.dataType : '';
-                    var desiredText = '';
-                    desiredText =
-                        '<span class="title-bar-name">' +
-                            (d.data.name ? d.data.name : '') +
-                            '</span>';
-                    desiredText += metaData.unit
-                        ? '<span class="title-top-text">' +
-                            metaData.unit +
-                            (d[1] - d[0]) +
-                            dataType +
-                            '</span>'
-                        : '<span class="title-top-text">' +
-                            (d[1] - d[0]) +
+                let dataType = metaData.dataType ? metaData.dataType : '';
+                if (!self.isZoomedOut) {
+                    let desiredText = '<span class="title-bar-name">' + d.name + '</span>';
+                    desiredText +=
+                        '<span class="title-bar-value"><span>' +
+                            d.Value +
+                            '</span>' +
                             dataType +
                             '</span>';
                     return desiredText;
                 }
-                else
-                    return;
+                else {
+                    let tempKey = d.name.length <= 8 ? d.name : d.name.substring(0, 5) + '...';
+                    let desiredText = '<span class="title-bar-name">' +
+                        tempKey +
+                        ':' +
+                        d.Value +
+                        dataType +
+                        '</span>';
+                    desiredText +=
+                        '<span class="title-bar-value">' + d.name + '</span>';
+                    return desiredText;
+                }
             });
         }
         function handleMouseOut(d, i) {
@@ -7120,10 +7119,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.uniqueId = this.getUniqueId();
         this.isTransparentBackground = false;
         this.defaultConfiguration = {
-            margin: { top: 30, right: 30, bottom: 50, left: 60 },
-            svgHeight: 80,
+            margin: { top: 20, right: 20, bottom: 20, left: 40 },
+            svgHeight: 70,
             legendHeight: '10%',
-            numberOfYTicks: 7,
+            numberOfYTicks: 5,
             labelFormatter: ChartHelper.defaultFormatter,
             xAxisLabelFomatter: ChartHelper.defaultFormatter,
             yAxisLabelFomatter: ChartHelper.defaultFormatter,
@@ -7199,6 +7198,27 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         var tempObjectHolder = {};
         var rightSvgWidth = 60;
         var leftAndRightSpaces = 50;
+        let isria = this.customChartConfiguration.isRia;
+        // Responsive breakpoints
+        const isMobile = window.innerWidth < 576;
+        const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
+        const isDesktop = window.innerWidth >= 992;
+        // Adjust margins and font sizes based on device
+        if (isMobile) {
+            this.chartConfiguration.margin = { top: 20, right: 10, bottom: 40, left: 30 };
+            this.chartConfiguration.numberOfYTicks = 4;
+            this.chartConfiguration.svgHeight = 60;
+        }
+        else if (isTablet) {
+            this.chartConfiguration.margin = { top: 25, right: 20, bottom: 45, left: 40 };
+            this.chartConfiguration.numberOfYTicks = 6;
+            this.chartConfiguration.svgHeight = 70;
+        }
+        else {
+            this.chartConfiguration.margin = { top: 30, right: 30, bottom: 50, left: 60 };
+            this.chartConfiguration.numberOfYTicks = 7;
+            this.chartConfiguration.svgHeight = 80;
+        }
         for (var i in this.defaultConfiguration) {
             this.chartConfiguration[i] = ChartHelper.getValueByConfigurationType(i, this.defaultConfiguration, this.customChartConfiguration);
         }
@@ -7230,40 +7250,30 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
         }
         var margin = this.chartConfiguration.margin;
-        var width = parseInt(chartContainer.style('width')) - margin.left - margin.right;
-        // if (this.chartData.data.length > 8 && this.isZoomedOut) {
-        //   width = this.chartData.data.length * 175;
-        // }
+        // Responsive width and height
+        var containerWidth = chartContainer.node().getBoundingClientRect().width;
+        var containerHeight = verticalstackedcontainer.node().getBoundingClientRect().height;
+        var width = containerWidth - margin.left - margin.right;
+        var height = containerHeight * (self.chartConfiguration.svgHeight / 100) - margin.top - margin.bottom;
+        // Adjust width for large datasets and zoom
         if (this.chartData.data.length > 30 && this.isZoomedOut) {
-            width =
-                width > this.chartData.data.length * 25
-                    ? width
-                    : this.chartData.data.length * 25;
+            width = width > this.chartData.data.length * (isMobile ? 15 : 25)
+                ? width
+                : this.chartData.data.length * (isMobile ? 15 : 25);
         }
         if (this.chartData.data.length > 8 && !this.isZoomedOut) {
-            width = this.chartData.data.length * 130;
+            width = this.chartData.data.length * (isMobile ? 60 : 130);
         }
-        var height = parseInt(verticalstackedcontainer.style('height')) *
-            (self.chartConfiguration.svgHeight / 100) -
-            margin.top -
-            margin.bottom;
-        /**
-         * entire height used in weekly charts as x axis needed to be displayed at the bottom of the chart
-         */
-        if (this.chartConfiguration.isFullScreen != undefined &&
-            this.chartConfiguration.isFullScreen) {
-            height =
-                this.chartConfiguration.svgHeight != 80
-                    ? this.chartConfiguration.svgHeight
-                    : parseInt(verticalstackedcontainer.style('height'));
+        // Fullscreen and drilldown adjustments
+        if (this.chartConfiguration.isFullScreen != undefined && this.chartConfiguration.isFullScreen) {
+            height = this.chartConfiguration.svgHeight != 80
+                ? this.chartConfiguration.svgHeight
+                : containerHeight;
         }
         if (this.chartConfiguration.isDrilldownChart) {
-            height =
-                parseInt(verticalstackedcontainer.style('height')) -
-                    margin.top -
-                    margin.bottom -
-                    130;
+            height = containerHeight - margin.top - margin.bottom - (isMobile ? 60 : 130);
         }
+        // ...existing code...
         /**
          * for hiding header
          * used by weekly charts
@@ -7302,16 +7312,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('height', height)
             .style('overflow-x', 'hidden')
             .style('padding-left', `${margin.left}px`)
+            .style('margin-left', '10px')
             .style('padding-right', `${rightSvgWidth}px`);
         var svgYAxisLeft = outerContainer
             .append('svg')
-            .attr('width', '75')
+            .attr('width', '80')
             .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
             .style('left', '0')
             .style('z-index', 1)
             .append('g')
-            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+            .attr('transform', 'translate(' + (margin.left + 10) + ',' + margin.top + ')');
         var svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', rightSvgWidth)
@@ -7326,12 +7337,27 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('class', 'inner-container')
             .style('width', '100%')
             .style('overflow-x', 'auto');
+        // Calculate bar width and padding for mobile to avoid overlap and add space between bars
+        let barWidth;
+        let barPadding = 12; // px, space between bars on mobile
+        let requiredSvgWidth;
+        if (isMobile) {
+            // Use a minimum width per bar and add padding between bars
+            const minBarWidth = 32; // px, can adjust as needed
+            barWidth = minBarWidth;
+            requiredSvgWidth = Math.max(width - rightSvgWidth, (barWidth + barPadding) * data.length + leftAndRightSpaces * 2 + rightSvgWidth - barPadding // no padding after last bar
+            );
+            innerContainer.style('overflow-x', 'auto');
+        }
+        else {
+            barWidth = Math.max(40, (width - rightSvgWidth - leftAndRightSpaces * 2) / data.length);
+            barPadding = 0;
+            requiredSvgWidth = width - rightSvgWidth;
+        }
         var svg = innerContainer
             .append('svg')
-            // .attr('width', 150 * data.length + margin.left + margin.right)
-            .attr('width', width - rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom)
-            // .call(ChartHelper.responsivefy)
+            .attr('width', requiredSvgWidth)
+            .attr('height', height + margin.top + margin.bottom + 30)
             .append('g')
             .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
         let stackKey = keyList;
@@ -7356,31 +7382,25 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             ])
                 .range([height, 0]);
         }
+        // Calculate bar width for mobile to avoid overlap
+        // ...barWidth is now calculated above, remove duplicate...
         var xScale = d3
             .scaleBand()
             .rangeRound([
-            width - rightSvgWidth - leftAndRightSpaces,
             leftAndRightSpaces,
+            width - rightSvgWidth - leftAndRightSpaces
         ])
             .domain(data.map(function (d) {
             return d.name;
-        }));
-        // xScale.bandwidth(192);
+        }))
+            .padding(isMobile ? 0.2 : 0.5);
         var xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - rightSvgWidth, 0])
             .domain(data.map(function (d) {
             return d.name;
         }));
-        /**
-         * xScale for weekly charts does not need padding as this padding affects spacing between the dot and y axis
-         */
-        if (this.chartConfiguration.isMultiChartGridLine == undefined) {
-            xScale.padding(0.5);
-        }
-        else {
-            xScale.align(0.5);
-        }
+        // ...existing code...
         /**
          * draw second x axis on top
          */
@@ -7408,9 +7428,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 svg
                     .append('g')
                     .attr('class', `x${j + 2} axis${j + 2}`)
-                    .style('color', '#999999')
+                    .style('color', 'var(--chart-grid-color)') // Use CSS variable instead of hardcoded
                     .attr('transform', 'translate(0,' + height * this.chartConfiguration.xAxisGrid[j] + ')')
-                    .call(d3.axisBottom(xScale).tickSize(0).ticks(5).tickFormat(''));
+                    .call(d3.axisBottom(xScale).tickSize(0).ticks(5).tickFormat(''))
+                    .style('fill', 'var(--chart-text-color)');
             }
         }
         let yScale = d3.scaleLinear().rangeRound([height, 0]);
@@ -7482,8 +7503,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .ticks(self.chartConfiguration.numberOfYTicks)
                 .tickSize(-width)
                 .tickFormat(''))
-                // .style('stroke-dasharray', '5 5')
-                .style('color', '#B9B9B9')
+                // Remove hardcoded colors and use CSS variables
+                .style('color', 'var(--chart-grid-color)')
                 .style('opacity', '0.5')
                 .call((g) => g.select('.domain').remove());
         }
@@ -7513,35 +7534,47 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
         })
             .attr('y', function (d) {
-            return yScale(d[1]);
+            if (!isNaN(d[0]) && !isNaN(d[1])) {
+                const actualHeight = yScale(d[0]) - yScale(d[1]);
+                return actualHeight < 3 ? yScale(d[0]) - 3 : yScale(d[1]);
+            }
+            return 0;
         })
-            .attr('x', function (d) {
+            .attr('x', function (d, i) {
+            if (isMobile) {
+                // On mobile, position bars with padding
+                return leftAndRightSpaces + i * (barWidth + barPadding);
+            }
             if (self.chartConfiguration.isMultiChartGridLine == undefined) {
                 return xScale(d.data.name);
             }
             else {
                 if (self.chartConfiguration.isDrilldownChart &&
                     self.chartData.data.length <= 3) {
-                    return xScale(d.data.name) + xScale.bandwidth() / 2 - 70;
+                    return xScale(d.data.name) + xScale.bandwidth() / 2 - 35;
                 }
                 return xScale(d.data.name) + xScale.bandwidth() * 0.1;
             }
         })
             .attr('height', function (d) {
-            if (!isNaN(d[0]) && !isNaN(d[1]))
-                return yScale(d[0]) - yScale(d[1]);
+            if (!isNaN(d[0]) && !isNaN(d[1])) {
+                const actualHeight = yScale(d[0]) - yScale(d[1]);
+                return actualHeight < 3 ? 3 : actualHeight;
+            }
             return 0;
         })
-            /**
-             * width of the rect
-             * for weekly charts, there is no paddings; hence we use hald of bandwidth as width of the bars
-             */
-            .attr('width', self.chartConfiguration.isMultiChartGridLine == undefined
-            ? xScale.bandwidth()
-            : self.chartConfiguration.isDrilldownChart &&
-                self.chartData.data.length <= 3
-                ? 140
-                : xScale.bandwidth() * 0.8)
+            .attr('width', function (d) {
+            // Use calculated barWidth for mobile, otherwise scale
+            if (isMobile) {
+                return barWidth;
+            }
+            return self.chartConfiguration.isMultiChartGridLine == undefined
+                ? xScale.bandwidth()
+                : self.chartConfiguration.isDrilldownChart &&
+                    self.chartData.data.length <= 3
+                    ? 70
+                    : xScale.bandwidth() * 0.8;
+        })
             // .style('cursor', 'pointer');
             .style('cursor', function (d) {
             if (metaData.hasDrillDown) {
@@ -7655,98 +7688,56 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             svg
                 .append('foreignObject')
                 .attr('x', function () {
-                // if (metaData.hasDrillDown) {
                 if (xScale.bandwidth() + leftAndRightSpaces * 2 > 180) {
                     return (xScale(d.data.name) -
                         leftAndRightSpaces +
                         (xScale.bandwidth() + leftAndRightSpaces * 2 - 180) / 2);
                 }
                 return xScale(d.data.name) - leftAndRightSpaces;
-                // } else return xScale(d.data.name) - leftAndRightSpaces;
             })
                 .attr('class', 'lib-verticalstack-title-ontop')
                 .attr('y', function () {
-                return yScale(d[1]) - 1 - 40;
+                // Increase the gap between the bar and the tooltip (was -1 - 40)
+                return yScale(d[1]) - 1 - 50; // 10px more gap
             })
                 .attr('dy', function () {
                 return d.class;
             })
                 .attr('width', function () {
-                // if (metaData.hasDrillDown) {
                 if (xScale.bandwidth() + leftAndRightSpaces * 2 > 180) {
                     return '180px';
                 }
                 return xScale.bandwidth() + leftAndRightSpaces * 2;
-                // } else return xScale.bandwidth() + leftAndRightSpaces * 2;
             })
                 .attr('height', 40)
                 .append('xhtml:div')
                 .attr('class', 'title')
                 .style('z-index', 99)
                 .html(function () {
+                // Tooltip content without any arrow mark
                 if (!isNaN(d[1] - d[0])) {
-                    if (d[1] - d[0] == 0) {
-                        return;
+                    if (d[1] - d[0] === 0) {
+                        return '<span class="title-top-text">0</span>';
                     }
                     var dataType = metaData.dataType ? metaData.dataType : '';
                     var desiredText = '';
-                    if (self.isZoomedOut) {
-                        desiredText =
-                            '<span class="title-bar-name">' +
-                                (d.data.name && d.data.name.length > 12
-                                    ? d.data.name.substring(0, 9) + '...'
-                                    : d.data.name) +
-                                '</span>';
-                    }
-                    if (d[1] - d[0] <= 999 ||
-                        self.chartConfiguration.backendFormatterHasPriority) {
-                        desiredText += metaData.unit
-                            ? '<span class="title-top-text">' +
-                                metaData.unit +
-                                formatFromBackend(d[1] - d[0]) +
-                                dataType +
-                                '</span>'
-                            : '<span class="title-top-text">' +
-                                formatFromBackend(d[1] - d[0]) +
-                                dataType +
-                                '</span>';
-                        if (metaData.hasDrillDown &&
-                            !self.isZoomedOut &&
-                            (!metaData.barWithoutClick ||
-                                !metaData.barWithoutClick.length ||
-                                !metaData.barWithoutClick.includes(d.data.name.toLowerCase()))) {
-                            desiredText +=
-                                '<span class="title-bottom-text">Click for more details</span>';
-                            return desiredText;
-                        }
-                        else {
-                            return desiredText;
-                        }
-                    }
-                    else {
-                        desiredText += metaData.unit
-                            ? '<span class="title-top-text">' +
-                                metaData.unit +
-                                formatForHugeNumbers(d[1] - d[0]) +
-                                dataType +
-                                '</span>'
-                            : '<span class="title-top-text">' +
-                                formatForHugeNumbers(d[1] - d[0]) +
-                                dataType +
-                                '</span>';
-                        if (metaData.hasDrillDown &&
-                            !self.isZoomedOut &&
-                            (!metaData.barWithoutClick ||
-                                !metaData.barWithoutClick.length ||
-                                !metaData.barWithoutClick.includes(d.data.name.toLowerCase()))) {
-                            desiredText +=
-                                '<span class="title-bottom-text">Click for more details</span>';
-                            return desiredText;
-                        }
-                        else {
-                            return desiredText;
-                        }
-                    }
+                    // Always show the full x-axis label (category name) in the tooltip
+                    desiredText =
+                        '<span class="title-bar-name">' +
+                            (d.data.name ? d.data.name : '') +
+                            '</span>';
+                    desiredText += metaData.unit
+                        ? '<span class="title-top-text">' +
+                            metaData.unit +
+                            (d[1] - d[0]) +
+                            dataType +
+                            '</span>'
+                        : '<span class="title-top-text">' +
+                            (d[1] - d[0]) +
+                            dataType +
+                            '</span>';
+                    // No arrow mark or arrow HTML/CSS in tooltip
+                    return desiredText;
                 }
                 else
                     return;
@@ -7874,25 +7865,54 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         if (this.chartConfiguration.isMultiChartGridLine == undefined) {
-            svg
-                .append('g')
-                .attr('transform', 'translate(0,' + height + ')')
-                .attr('class', 'lib-stacked-x-axis-text')
-                .attr('transform', 'translate(0,' + height + ')')
-                .call(xAxis);
+            if (isMobile) {
+                // Custom x-axis label rendering for mobile: evenly distribute under each bar
+                svg.selectAll('.custom-x-label').remove();
+                data.forEach(function (d, i) {
+                    const xVal = leftAndRightSpaces + i * (barWidth + barPadding) + barWidth / 2;
+                    svg.append('text')
+                        .attr('class', 'custom-x-label')
+                        .attr('x', 0)
+                        .attr('y', height + 18)
+                        .attr('text-anchor', 'middle')
+                        .attr('transform', 'translate(' + (xVal + 20) + ',0)') // current value + 20
+                        .style('font-size', '10px')
+                        .style('fill', 'var(--chart-text-color)')
+                        .style('writing-mode', 'sideways-lr') // writing mode for mobile
+                        .text(d.name.substring(0, 3));
+                });
+            }
+            else {
+                svg
+                    .append('g')
+                    .attr('transform', 'translate(0,' + height + ')')
+                    .attr('class', 'lib-stacked-x-axis-text')
+                    .call(xAxis)
+                    .selectAll('text')
+                    .style('fill', 'var(--chart-text-color)')
+                    .style('font-size', '12px')
+                    .attr('text-anchor', 'middle')
+                    .attr('dx', '0')
+                    .attr('dy', '0.71em')
+                    .attr('transform', null)
+                    .text(function (d) {
+                    return d;
+                });
+            }
             svg
                 .append('g')
                 .attr('class', 'lib-stacked-y-axis-text')
                 .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
                 .attr('transform', 'translate(0,0)')
-                .call(yAxis);
+                .call(yAxis)
+                .selectAll('text')
+                .style('fill', 'var(--chart-text-color)');
         }
         else if (this.chartConfiguration.isDrilldownChart) {
             svg
                 .append('g')
                 .attr('transform', 'translate(0,' + height + ')')
                 .attr('class', 'lib-stacked-x-axis-text multichart1')
-                // .attr('transform', 'translate(0,' + height + ')')
                 .call(xAxis)
                 .style('display', 'none');
             svgYAxisLeft
@@ -7900,7 +7920,9 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
                 .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
                 .attr('transform', 'translate(0,0)')
-                .call(yAxis);
+                .call(yAxis)
+                .selectAll('text')
+                .style('fill', 'var(--chart-text-color)');
             svgYAxisRight
                 .append('g')
                 .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
@@ -7915,14 +7937,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('transform', 'translate(0,' + height + ')')
                 .attr('class', 'lib-stacked-x-axis-text multichart')
                 .attr('transform', 'translate(0,' + height + ')')
-                .call(xAxis);
-            // .call(g => g.select(".domain").remove());
+                .call(xAxis)
+                .selectAll('text')
+                .style('fill', 'var(--chart-text-color)');
             svg
                 .append('g')
                 .attr('class', 'lib-stacked-y-axis-text yaxis-dashed')
                 .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
                 .attr('transform', 'translate(0,0)')
-                .call(yAxis);
+                .call(yAxis)
+                .selectAll('text')
+                .style('fill', 'var(--chart-text-color)');
         }
         /**
          * for existing charts, place xaxis labels nearer to xaxis
@@ -8020,11 +8045,31 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .selectAll('g.x1.axis1 g.tick text')
                 .attr('class', 'lib-xaxis-labels-texts-drilldown')
                 .attr('y', short_tick_length_bg)
-                .text(function (d) {
+                .text(function (d, i) {
+                if (isMobile) {
+                    // If label has more than one word, show only first 3 letters of first word
+                    var firstWord = d.split(' ')[0];
+                    return firstWord.substring(0, 3);
+                }
                 if (d.trim().indexOf(' ') > -1) {
                     return d.trim().substring(0, d.indexOf(' ')).toLowerCase();
                 }
                 return d.toLowerCase();
+            })
+                .attr('transform', function (d, i) {
+                if (isMobile) {
+                    var totalBars = 0;
+                    if (this.parentNode && this.parentNode.parentNode) {
+                        totalBars = d3.select(this.parentNode.parentNode).selectAll('g.tick').size();
+                    }
+                    if (totalBars === 2) {
+                        return 'translate(0,0)';
+                    }
+                    else {
+                        return 'translate(' + (i * 30) + ',0)';
+                    }
+                }
+                return null;
             });
             svg
                 .selectAll('g.x1.axis1 g.tick')
@@ -8033,10 +8078,20 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('y', long_tick_length_bg)
                 .attr('fill', 'currentColor')
                 .text(function (d) {
+                // For mobile, do not print the second word at all
+                if (isMobile) {
+                    return '';
+                }
                 if (d.trim().indexOf(' ') > -1) {
                     return d.trim().substring(d.indexOf(' '), d.length).toLowerCase();
                 }
                 return '';
+            })
+                .attr('transform', function (d, i) {
+                if (isMobile && i === 0) {
+                    return 'translate(20,0)';
+                }
+                return null;
             });
         }
         /**
@@ -8064,14 +8119,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             this.chartConfiguration.isYaxisDashed) {
             d3.selectAll('.yaxis-dashed')
                 .style('stroke-dasharray', '5 5')
-                .style('color', '#999999');
+                .style('color', 'var(--chart-grid-color)'); // Use CSS variable
         }
         /**
          * x axis color
          * used by weekly charts
          */
         if (this.chartConfiguration.isXaxisColor != undefined) {
-            d3.selectAll('.multichart').style('color', this.chartConfiguration.isXaxisColor);
+            d3.selectAll('.multichart').style('color', this.chartConfiguration.isXaxisColor || 'var(--chart-text-color)');
         }
         /**
          * used to display y label
@@ -8079,30 +8134,51 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (this.isZoomedOut) {
             svg
                 .selectAll('.lib-xaxis-labels-texts-drilldown')
-                .attr('class', 'lib-display-hidden');
+                .attr('transform', 'rotate(-90)')
+                .attr('text-anchor', 'end')
+                .attr('x', '-5')
+                .attr('dy', null);
+        }
+        function styleAxisDomain() {
+            svg.selectAll('.domain')
+                .style('stroke', 'var(--chart-axis-color)')
+                .style('stroke-width', '1px');
+            svgYAxisLeft.selectAll('.domain')
+                .style('stroke', 'var(--chart-axis-color)')
+                .style('stroke-width', '1px');
+            svgYAxisRight.selectAll('.domain')
+                .style('stroke', 'var(--chart-axis-color)')
+                .style('stroke-width', '1px');
         }
+        styleAxisDomain();
         if (metaData.yLabel) {
+            svgYAxisLeft.selectAll('.lib-axis-group-label, .lib-ylabel-drilldowncharts, .lib-ylabel-weeklyCharts').remove();
+            function isAcronym(label) {
+                return (label.length <= 4 && /^[A-Z]+$/.test(label)) || (label === label.toUpperCase() && /[A-Z]/.test(label));
+            }
+            const yLabelText = metaData.yLabel;
+            const isAcr = isAcronym(yLabelText.replace(/[^A-Za-z]/g, ''));
+            const yPosition = isria ? 0 - margin.left / 2 - 30 : 0 - margin.left / 2 - 40;
             svgYAxisLeft
                 .append('text')
-                .attr('class', 'lib-axis-group-label font-size-1')
+                .attr('class', function () {
+                let baseClass = 'lib-axis-group-label font-size-1';
+                if (self.chartConfiguration.isDrilldownChart)
+                    return baseClass + ' lib-ylabel-drilldowncharts';
+                if (self.chartConfiguration.isMultiChartGridLine != undefined)
+                    return baseClass + ' lib-ylabel-weeklyCharts';
+                return baseClass + ' lib-axis-waterfall-label';
+            })
                 .attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
                 .attr('transform', 'rotate(-90)')
-                .attr('y', 0 - margin.left / 2 - 20 - 15)
+                .attr('y', yPosition)
                 .attr('x', 0 - height / 2)
                 .attr('dy', '1em')
                 .style('text-anchor', 'middle')
-                .text(metaData.yLabel.toLowerCase())
-                .style('text-transform', 'capitalize');
-            if (this.chartConfiguration.isDrilldownChart) {
-                svg
-                    .selectAll('.lib-axis-group-label')
-                    .attr('class', 'lib-ylabel-drilldowncharts');
-            }
-            else if (this.chartConfiguration.isMultiChartGridLine != undefined) {
-                svg
-                    .selectAll('.lib-axis-group-label')
-                    .attr('class', 'lib-ylabel-weeklyCharts');
-            }
+                .style('fill', 'var(--chart-text-color)')
+                .style('color', 'var(--chart-text-color)')
+                .text(isAcr ? yLabelText.toUpperCase() : yLabelText.toLowerCase())
+                .style('text-transform', isAcr ? 'none' : 'capitalize');
         }
         if (this.chartData.targetLineData) {
             const yZero = yScale(parsedNum);
@@ -8128,7 +8204,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('height', 50)
                 .append('xhtml:div')
                 .attr('class', 'target-display')
-                .style('color', this.chartData.targetLineData.color)
+                .style('color', 'var(--chart-text-color)')
                 .html(function (d, i) {
                 let dataTypeTemp = '';
                 let targetLineName = 'target';
@@ -8164,23 +8240,29 @@ 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, ''));
+            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
             svg
                 .append('text')
-                .attr('class', 'lib-axis-waterfall-label')
-                .attr('transform', 'translate(' + width / 2 + ' ,' + (height + margin.top + 20) + ')')
+                .attr('class', function () {
+                let baseClass = 'lib-axis-group-label font-size-1';
+                if (self.chartConfiguration.isDrilldownChart)
+                    return baseClass + ' lib-xlabel-drilldowncharts';
+                if (self.chartConfiguration.isMultiChartGridLine != undefined)
+                    return baseClass + ' lib-xlabel-weeklyCharts';
+                return baseClass + ' lib-axis-waterfall-label';
+            })
+                .attr('style', self.chartConfiguration.xAxisCustomlabelStyles)
+                .attr('transform', 'translate(' + width / 2 + ' ,' + xPosition + ')')
                 .style('text-anchor', 'middle')
-                .text(metaData.xLabel.toLowerCase())
-                .style('text-transform', 'capitalize');
-        }
-        if (yLineAxis != null) {
-            if (lineData && self.chartConfiguration.showLineChartAxis) {
-                svg
-                    .append('g')
-                    .attr('class', 'lib-stacked-y-axis-text')
-                    .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
-                    .attr('transform', 'translate(' + width + ',0)')
-                    .call(yLineAxis);
-            }
+                .style('fill', 'var(--chart-text-color)')
+                .text(isAcr ? xLabelText.toUpperCase() : xLabelText.toLowerCase())
+                .style('text-transform', isAcr ? 'none' : 'capitalize');
         }
         if (lineData && colors) {
             var dataGroup = d3
@@ -8469,7 +8551,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         var height = parseInt(verticalstackedcontainer.style('height')) *
             (self.chartConfiguration.svgHeight / 100) -
             margin.top -
-            margin.bottom + 30;
+            margin.bottom;
         /**
          * entire height used in weekly charts as x axis needed to be displayed at the bottom of the chart
          */
@@ -8560,7 +8642,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .append('svg')
             // .attr('id', self.uniqueId)
             .attr('width', width - rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 30)
+            .attr('height', height + margin.top + margin.bottom + 60)
             // .call(ChartHelper.responsivefy)
             .append('g')
             .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
@@ -8696,18 +8778,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         if (self.chartConfiguration.xLabelsOnSameLine) {
-            svg
+            const xAxisLabels = svg
                 .selectAll('g.x1.axis1 g.tick text')
                 .attr('class', 'lib-xaxis-labels-texts-drilldown')
                 .style('font-size', this.isHeaderVisible ? '18px' : '14px')
+                .attr('text-anchor', 'middle')
                 .attr('y', function (d) {
-                // For grouped bar charts with many bars and xLabel present, do NOT add extra space (avoid overlap)
+                // For grouped bar charts with many bars and xLabel present, only add 5 if the label is a date
                 if (subgroups.length > 1 && data.length > 8 && metaData.xLabel) {
-                    // In maximized (fullscreen) view, keep the gap minimal
+                    const isDateLabel = /\d{2,4}[-\/]/.test(d);
                     if (self.chartConfiguration.isFullScreen) {
-                        return short_tick_length_bg;
+                        return isDateLabel ? short_tick_length_bg + 14 : short_tick_length_bg;
                     }
-                    return short_tick_length_bg;
+                    return isDateLabel ? short_tick_length_bg + 14 : short_tick_length_bg;
                 }
                 // For grouped bar charts with many bars and NO xLabel, add space as before, but reduce in fullscreen
                 if (subgroups.length > 1 && data.length > 8 && !metaData.xLabel) {
@@ -8756,8 +8839,37 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 if (isValueToBeIgnored) {
                     return '';
                 }
-                // If label looks like a date (contains digits and - or /)
+                // Always add space before and after hyphen for date range labels, even when header is visible and label is single line
+                // Apply for grouped bar charts and single bar charts, header visible, single line
+                const dateRangeRegex = /(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})\s*-\s*(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})/;
+                if (dateRangeRegex.test(d.trim())) {
+                    return d.trim().replace(dateRangeRegex, (m, d1, d2) => `${d1} - ${d2}`);
+                }
+                // Split date and week labels into two lines in grouped bar zoom-in view (and minimized view)
                 const isDateLabel = /\d{2,4}[-\/]/.test(d);
+                const isWeekLabel = /week|wk|w\d+/i.test(d);
+                if (subgroups.length > 1 && !self.isZoomedOut && data.length > 8 && d.indexOf(' ') > -1 && (isDateLabel || isWeekLabel)) {
+                    var first = d.substring(0, d.indexOf(' '));
+                    var second = d.substring(d.indexOf(' ') + 1).trim();
+                    return first + '\n' + second;
+                }
+                // Also keep previous logic for minimized view
+                if (isDateLabel) {
+                    if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
+                        var first = d.substring(0, d.indexOf(' '));
+                        var second = d.substring(d.indexOf(' ') + 1).trim();
+                        return first + '\n' + second;
+                    }
+                    else {
+                        return d;
+                    }
+                }
+                if (d.trim().indexOf(' ') > -1) {
+                    return d.trim().substring(0, d.indexOf(' ')).toLowerCase();
+                }
+                return d.toLowerCase();
+                // If label looks like a date (contains digits and - or /)
+                const isDateLabel2 = /\d{2,4}[-\/]/.test(d);
                 // Only split date/week labels if there are many grouped bars and header is not visible
                 if (isDateLabel) {
                     if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
@@ -8774,6 +8886,15 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 }
                 return d.toLowerCase();
             });
+            // Now apply writing-mode: sideways-lr for grouped charts with date labels in zoomed-out view and many bars
+            xAxisLabels.each(function (d) {
+                // Only apply writing-mode for exact date labels, not those containing 'week' or similar
+                const isDateLabel = /^(\d{2,4}[-\/])?\d{2,4}[-\/]\d{2,4}$/.test(d.trim());
+                const isWeekLabel = /week|wk|w\d+/i.test(d);
+                if (subgroups.length > 1 && self.isZoomedOut && data.length > 8 && isDateLabel && !isWeekLabel) {
+                    d3.select(this).style('writing-mode', 'sideways-lr');
+                }
+            });
             if (!isMobile) {
                 svg
                     .selectAll('g.x1.axis1 g.tick')
@@ -8926,20 +9047,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         var xSubgroup = d3.scaleBand().domain(subgroups);
-        // Weekly shipped/planned daily grouped chart: increase bar width for both zoom-in and zoom-out views
-        if (subgroups.length > 1 && this.chartConfiguration.isMultiChartGridLine) {
-            xSubgroup.range([0, x.bandwidth() * 1.2]).padding(0.05);
-        }
-        else if (subgroups.length > 1 && !this.isZoomedOut) {
+        if (subgroups.length > 1 && !this.isZoomedOut) {
             // For grouped bar charts in zoom-in view, reduce padding between bars
-            xSubgroup.range([0, x.bandwidth()]).padding(0.05);
+            xSubgroup.range([0, x.bandwidth()]);
         }
         else if (subgroups.length === 1 && !this.isZoomedOut) {
-            // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
-            xSubgroup.range([0, 80]);
+            // For single-bar (non-grouped) charts in zoom-in view, set bar width to 100 (increased from 80)
+            xSubgroup.range([0, 100]);
+        }
+        else if (this.chartConfiguration.isMultiChartGridLine == undefined) {
+            xSubgroup.range([0, x.bandwidth()]);
         }
         else {
-            // All other cases (including zoomed-out), use full bandwidth
+            // used to make grouped bars with lesser width as we are not using padding for width
             xSubgroup.range([0, x.bandwidth()]);
         }
         // if (this.chartConfiguration.isDrilldownChart) {
@@ -8996,7 +9116,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                             // Increase bar width a bit in zoom-in view
                             let reducedBarWidth = 60;
                             if (!self.isZoomedOut) {
-                                reducedBarWidth = 80;
+                                reducedBarWidth = 30;
                             }
                             if (self.chartData.data.length == 1) {
                                 if (Object.keys(self.chartData.data[0]).length == 2) {
@@ -9037,7 +9157,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .attr('width', function (d) {
             // For grouped bar charts in zoom-in view, slightly increase bar width for both bars (shipped and planned)
             if (subgroups.length > 1 && !self.isZoomedOut) {
-                return xSubgroup.bandwidth() * 0.5;
+                return xSubgroup.bandwidth() * 0.25;
             }
             // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
             if (subgroups.length === 1 && !self.isZoomedOut) {
@@ -9053,7 +9173,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                             // Increase bar width a bit in zoom-in view
                             let reducedBarWidth = 60;
                             if (!self.isZoomedOut) {
-                                reducedBarWidth = 80;
+                                reducedBarWidth = 100;
                             }
                             if (self.chartData.data.length == 1) {
                                 if (Object.keys(self.chartData.data[0]).length == 2) {
@@ -9574,7 +9694,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             }
             const xLabelText = metaData.xLabel;
             const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
-            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
+            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 40);
             svg
                 .append('text')
                 .attr('class', function () {