axidio-styleguide-library1-v2 0.1.24 → 0.1.26

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,29 +4557,30 @@ class GroupChartComponent extends ComponentUniqueId {
                 .attr('class', 'title')
                 .style('z-index', 99)
                 .html(function () {
-                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>' +
+                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]) +
                             dataType +
                             '</span>';
                     return desiredText;
                 }
-                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;
-                }
+                else
+                    return;
             });
         }
         function handleMouseOut(d, i) {
@@ -7119,10 +7120,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.uniqueId = this.getUniqueId();
         this.isTransparentBackground = false;
         this.defaultConfiguration = {
-            margin: { top: 20, right: 20, bottom: 20, left: 40 },
-            svgHeight: 70,
+            margin: { top: 30, right: 30, bottom: 50, left: 60 },
+            svgHeight: 80,
             legendHeight: '10%',
-            numberOfYTicks: 5,
+            numberOfYTicks: 7,
             labelFormatter: ChartHelper.defaultFormatter,
             xAxisLabelFomatter: ChartHelper.defaultFormatter,
             yAxisLabelFomatter: ChartHelper.defaultFormatter,
@@ -7198,27 +7199,6 @@ 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);
         }
@@ -7250,30 +7230,40 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
         }
         var margin = this.chartConfiguration.margin;
-        // 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
+        var width = parseInt(chartContainer.style('width')) - margin.left - margin.right;
+        // if (this.chartData.data.length > 8 && this.isZoomedOut) {
+        //   width = this.chartData.data.length * 175;
+        // }
         if (this.chartData.data.length > 30 && this.isZoomedOut) {
-            width = width > this.chartData.data.length * (isMobile ? 15 : 25)
-                ? width
-                : this.chartData.data.length * (isMobile ? 15 : 25);
+            width =
+                width > this.chartData.data.length * 25
+                    ? width
+                    : this.chartData.data.length * 25;
         }
         if (this.chartData.data.length > 8 && !this.isZoomedOut) {
-            width = this.chartData.data.length * (isMobile ? 60 : 130);
+            width = this.chartData.data.length * 130;
         }
-        // Fullscreen and drilldown adjustments
-        if (this.chartConfiguration.isFullScreen != undefined && this.chartConfiguration.isFullScreen) {
-            height = this.chartConfiguration.svgHeight != 80
-                ? this.chartConfiguration.svgHeight
-                : containerHeight;
+        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'));
         }
         if (this.chartConfiguration.isDrilldownChart) {
-            height = containerHeight - margin.top - margin.bottom - (isMobile ? 60 : 130);
+            height =
+                parseInt(verticalstackedcontainer.style('height')) -
+                    margin.top -
+                    margin.bottom -
+                    130;
         }
-        // ...existing code...
         /**
          * for hiding header
          * used by weekly charts
@@ -7312,17 +7302,16 @@ 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', '80')
+            .attr('width', '75')
             .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
             .style('left', '0')
             .style('z-index', 1)
             .append('g')
-            .attr('transform', 'translate(' + (margin.left + 10) + ',' + margin.top + ')');
+            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
         var svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', rightSvgWidth)
@@ -7337,27 +7326,12 @@ 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', requiredSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 30)
+            // .attr('width', 150 * data.length + margin.left + margin.right)
+            .attr('width', width - rightSvgWidth)
+            .attr('height', height + margin.top + margin.bottom)
+            // .call(ChartHelper.responsivefy)
             .append('g')
             .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
         let stackKey = keyList;
@@ -7382,25 +7356,31 @@ 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;
-        }))
-            .padding(isMobile ? 0.2 : 0.5);
+        }));
+        // xScale.bandwidth(192);
         var xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - rightSvgWidth, 0])
             .domain(data.map(function (d) {
             return d.name;
         }));
-        // ...existing code...
+        /**
+         * 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);
+        }
         /**
          * draw second x axis on top
          */
@@ -7428,10 +7408,9 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 svg
                     .append('g')
                     .attr('class', `x${j + 2} axis${j + 2}`)
-                    .style('color', 'var(--chart-grid-color)') // Use CSS variable instead of hardcoded
+                    .style('color', '#999999')
                     .attr('transform', 'translate(0,' + height * this.chartConfiguration.xAxisGrid[j] + ')')
-                    .call(d3.axisBottom(xScale).tickSize(0).ticks(5).tickFormat(''))
-                    .style('fill', 'var(--chart-text-color)');
+                    .call(d3.axisBottom(xScale).tickSize(0).ticks(5).tickFormat(''));
             }
         }
         let yScale = d3.scaleLinear().rangeRound([height, 0]);
@@ -7503,8 +7482,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .ticks(self.chartConfiguration.numberOfYTicks)
                 .tickSize(-width)
                 .tickFormat(''))
-                // Remove hardcoded colors and use CSS variables
-                .style('color', 'var(--chart-grid-color)')
+                // .style('stroke-dasharray', '5 5')
+                .style('color', '#B9B9B9')
                 .style('opacity', '0.5')
                 .call((g) => g.select('.domain').remove());
         }
@@ -7534,47 +7513,35 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
         })
             .attr('y', function (d) {
-            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;
+            return yScale(d[1]);
         })
-            .attr('x', function (d, i) {
-            if (isMobile) {
-                // On mobile, position bars with padding
-                return leftAndRightSpaces + i * (barWidth + barPadding);
-            }
+            .attr('x', function (d) {
             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 - 35;
+                    return xScale(d.data.name) + xScale.bandwidth() / 2 - 70;
                 }
                 return xScale(d.data.name) + xScale.bandwidth() * 0.1;
             }
         })
             .attr('height', function (d) {
-            if (!isNaN(d[0]) && !isNaN(d[1])) {
-                const actualHeight = yScale(d[0]) - yScale(d[1]);
-                return actualHeight < 3 ? 3 : actualHeight;
-            }
+            if (!isNaN(d[0]) && !isNaN(d[1]))
+                return yScale(d[0]) - yScale(d[1]);
             return 0;
         })
-            .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;
-        })
+            /**
+             * 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)
             // .style('cursor', 'pointer');
             .style('cursor', function (d) {
             if (metaData.hasDrillDown) {
@@ -7688,56 +7655,98 @@ 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 () {
-                // Increase the gap between the bar and the tooltip (was -1 - 40)
-                return yScale(d[1]) - 1 - 50; // 10px more gap
+                return yScale(d[1]) - 1 - 40;
             })
                 .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 '<span class="title-top-text">0</span>';
+                    if (d[1] - d[0] == 0) {
+                        return;
                     }
                     var dataType = metaData.dataType ? metaData.dataType : '';
                     var 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;
+                    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;
+                        }
+                    }
                 }
                 else
                     return;
@@ -7865,54 +7874,25 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         if (this.chartConfiguration.isMultiChartGridLine == undefined) {
-            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('transform', 'translate(0,' + height + ')')
+                .attr('class', 'lib-stacked-x-axis-text')
+                .attr('transform', 'translate(0,' + height + ')')
+                .call(xAxis);
             svg
                 .append('g')
                 .attr('class', 'lib-stacked-y-axis-text')
                 .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
                 .attr('transform', 'translate(0,0)')
-                .call(yAxis)
-                .selectAll('text')
-                .style('fill', 'var(--chart-text-color)');
+                .call(yAxis);
         }
         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
@@ -7920,9 +7900,7 @@ 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)
-                .selectAll('text')
-                .style('fill', 'var(--chart-text-color)');
+                .call(yAxis);
             svgYAxisRight
                 .append('g')
                 .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
@@ -7937,17 +7915,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('transform', 'translate(0,' + height + ')')
                 .attr('class', 'lib-stacked-x-axis-text multichart')
                 .attr('transform', 'translate(0,' + height + ')')
-                .call(xAxis)
-                .selectAll('text')
-                .style('fill', 'var(--chart-text-color)');
+                .call(xAxis);
+            // .call(g => g.select(".domain").remove());
             svg
                 .append('g')
                 .attr('class', 'lib-stacked-y-axis-text yaxis-dashed')
                 .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
                 .attr('transform', 'translate(0,0)')
-                .call(yAxis)
-                .selectAll('text')
-                .style('fill', 'var(--chart-text-color)');
+                .call(yAxis);
         }
         /**
          * for existing charts, place xaxis labels nearer to xaxis
@@ -8045,31 +8020,11 @@ 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, 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);
-                }
+                .text(function (d) {
                 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')
@@ -8078,20 +8033,10 @@ 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;
             });
         }
         /**
@@ -8119,14 +8064,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             this.chartConfiguration.isYaxisDashed) {
             d3.selectAll('.yaxis-dashed')
                 .style('stroke-dasharray', '5 5')
-                .style('color', 'var(--chart-grid-color)'); // Use CSS variable
+                .style('color', '#999999');
         }
         /**
          * x axis color
          * used by weekly charts
          */
         if (this.chartConfiguration.isXaxisColor != undefined) {
-            d3.selectAll('.multichart').style('color', this.chartConfiguration.isXaxisColor || 'var(--chart-text-color)');
+            d3.selectAll('.multichart').style('color', this.chartConfiguration.isXaxisColor);
         }
         /**
          * used to display y label
@@ -8134,51 +8079,30 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (this.isZoomedOut) {
             svg
                 .selectAll('.lib-xaxis-labels-texts-drilldown')
-                .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');
+                .attr('class', 'lib-display-hidden');
         }
-        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', 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('class', 'lib-axis-group-label font-size-1')
                 .attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
                 .attr('transform', 'rotate(-90)')
-                .attr('y', yPosition)
+                .attr('y', 0 - margin.left / 2 - 20 - 15)
                 .attr('x', 0 - height / 2)
                 .attr('dy', '1em')
                 .style('text-anchor', 'middle')
-                .style('fill', 'var(--chart-text-color)')
-                .style('color', 'var(--chart-text-color)')
-                .text(isAcr ? yLabelText.toUpperCase() : yLabelText.toLowerCase())
-                .style('text-transform', isAcr ? 'none' : 'capitalize');
+                .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');
+            }
         }
         if (this.chartData.targetLineData) {
             const yZero = yScale(parsedNum);
@@ -8204,7 +8128,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('height', 50)
                 .append('xhtml:div')
                 .attr('class', 'target-display')
-                .style('color', 'var(--chart-text-color)')
+                .style('color', this.chartData.targetLineData.color)
                 .html(function (d, i) {
                 let dataTypeTemp = '';
                 let targetLineName = 'target';
@@ -8240,29 +8164,23 @@ 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', 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 + ')')
+                .attr('class', 'lib-axis-waterfall-label')
+                .attr('transform', 'translate(' + width / 2 + ' ,' + (height + margin.top + 20) + ')')
                 .style('text-anchor', 'middle')
-                .style('fill', 'var(--chart-text-color)')
-                .text(isAcr ? xLabelText.toUpperCase() : xLabelText.toLowerCase())
-                .style('text-transform', isAcr ? 'none' : 'capitalize');
+                .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);
+            }
         }
         if (lineData && colors) {
             var dataGroup = d3
@@ -8551,7 +8469,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         var height = parseInt(verticalstackedcontainer.style('height')) *
             (self.chartConfiguration.svgHeight / 100) -
             margin.top -
-            margin.bottom;
+            margin.bottom + 30;
         /**
          * entire height used in weekly charts as x axis needed to be displayed at the bottom of the chart
          */
@@ -8642,7 +8560,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .append('svg')
             // .attr('id', self.uniqueId)
             .attr('width', width - rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 60)
+            .attr('height', height + margin.top + margin.bottom + 30)
             // .call(ChartHelper.responsivefy)
             .append('g')
             .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
@@ -8778,19 +8696,18 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         if (self.chartConfiguration.xLabelsOnSameLine) {
-            const xAxisLabels = svg
+            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, only add 5 if the label is a date
+                // For grouped bar charts with many bars and xLabel present, do NOT add extra space (avoid overlap)
                 if (subgroups.length > 1 && data.length > 8 && metaData.xLabel) {
-                    const isDateLabel = /\d{2,4}[-\/]/.test(d);
+                    // In maximized (fullscreen) view, keep the gap minimal
                     if (self.chartConfiguration.isFullScreen) {
-                        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;
+                    return 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) {
@@ -8839,37 +8756,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 if (isValueToBeIgnored) {
                     return '';
                 }
-                // 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);
+                const isDateLabel = /\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) {
@@ -8886,15 +8774,6 @@ 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')
@@ -9047,19 +8926,20 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         var xSubgroup = d3.scaleBand().domain(subgroups);
-        if (subgroups.length > 1 && !this.isZoomedOut) {
+        // 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) {
             // For grouped bar charts in zoom-in view, reduce padding between bars
-            xSubgroup.range([0, x.bandwidth()]);
+            xSubgroup.range([0, x.bandwidth()]).padding(0.05);
         }
         else if (subgroups.length === 1 && !this.isZoomedOut) {
-            // 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()]);
+            // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
+            xSubgroup.range([0, 80]);
         }
         else {
-            // used to make grouped bars with lesser width as we are not using padding for width
+            // All other cases (including zoomed-out), use full bandwidth
             xSubgroup.range([0, x.bandwidth()]);
         }
         // if (this.chartConfiguration.isDrilldownChart) {
@@ -9116,7 +8996,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                             // Increase bar width a bit in zoom-in view
                             let reducedBarWidth = 60;
                             if (!self.isZoomedOut) {
-                                reducedBarWidth = 30;
+                                reducedBarWidth = 80;
                             }
                             if (self.chartData.data.length == 1) {
                                 if (Object.keys(self.chartData.data[0]).length == 2) {
@@ -9141,14 +9021,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 });
                 return tempScale(d.key);
             }
-            // For grouped bar charts in zoom-in view, increase x value for the first bar only
-            if (subgroups.length > 1 && !self.isZoomedOut) {
-                // Find index of this bar in the data array
-                const barIndex = data.findIndex((indiv) => indiv.name === d.name);
-                if (barIndex === 0) {
-                    return xSubgroup(d.key) - 10;
-                }
-            }
             return xSubgroup(d.key);
         })
             .attr('y', function (d) {
@@ -9165,7 +9037,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.3;
+                return xSubgroup.bandwidth() * 0.5;
             }
             // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
             if (subgroups.length === 1 && !self.isZoomedOut) {
@@ -9181,7 +9053,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                             // Increase bar width a bit in zoom-in view
                             let reducedBarWidth = 60;
                             if (!self.isZoomedOut) {
-                                reducedBarWidth = 100;
+                                reducedBarWidth = 80;
                             }
                             if (self.chartData.data.length == 1) {
                                 if (Object.keys(self.chartData.data[0]).length == 2) {
@@ -9702,7 +9574,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 + 40);
+            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
             svg
                 .append('text')
                 .attr('class', function () {