axidio-styleguide-library1-v2 0.2.61 → 0.2.63

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

@@ -6488,9 +6488,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             LONG_TICK_LENGTH: 16,
             SHORT_TICK_LENGTH_BG: 5,
             LONG_TICK_LENGTH_BG: 30,
-            DESKTOP_BAR_WIDTH: 40, // Desktop bar width
-            MOBILE_BAR_WIDTH: 25, // Mobile/Tablet bar width (reduced)
-            BAR_GAP: 30, // Gap between bars (increased for better separation)
+            MIN_MOBILE_BAR_WIDTH: 28, // Adjusted for better mobile fit
+            DESKTOP_MIN_BAR_WIDTH: 40,
+            TABLET_MIN_BAR_WIDTH: 35, // Added tablet-specific width
+            MOBILE_BAR_PADDING: 10, // Reduced padding for mobile
+            TABLET_BAR_PADDING: 8, // Added tablet-specific padding
             ZOOM_THRESHOLD: 30,
             ZOOM_IN_THRESHOLD: 8,
         };
@@ -6555,6 +6557,48 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     removeExistingChart() {
         d3.select('#' + this.uniqueId).remove();
     }
+    getDeviceConfig() {
+        const width = window.innerWidth;
+        return {
+            isMobile: width < 768, // Changed from 576 to 768 for better mobile coverage
+            isTablet: width >= 768 && width < 1024, // Changed from 576-992 to 768-1024
+            isDesktop: width >= 1024, // Changed from 992 to 1024
+        };
+    }
+    configureResponsiveSettings(device) {
+        if (device.isMobile) {
+            this.chartConfiguration.margin = { top: 15, right: 5, bottom: 35, left: 25 };
+            this.chartConfiguration.numberOfYTicks = 4;
+            this.chartConfiguration.svgHeight = 55;
+        }
+        else if (device.isTablet) {
+            this.chartConfiguration.margin = { top: 20, right: 15, bottom: 40, left: 35 };
+            this.chartConfiguration.numberOfYTicks = 5;
+            this.chartConfiguration.svgHeight = 65;
+        }
+        else {
+            // Desktop/Large screens
+            const width = window.innerWidth;
+            if (width >= 1920) {
+                // Large monitors
+                this.chartConfiguration.margin = { top: 35, right: 35, bottom: 55, left: 70 };
+                this.chartConfiguration.numberOfYTicks = 8;
+                this.chartConfiguration.svgHeight = 85;
+            }
+            else if (width >= 1366) {
+                // Medium monitors
+                this.chartConfiguration.margin = { top: 30, right: 30, bottom: 50, left: 60 };
+                this.chartConfiguration.numberOfYTicks = 7;
+                this.chartConfiguration.svgHeight = 80;
+            }
+            else {
+                // Small desktops/laptops
+                this.chartConfiguration.margin = { top: 25, right: 25, bottom: 45, left: 50 };
+                this.chartConfiguration.numberOfYTicks = 6;
+                this.chartConfiguration.svgHeight = 75;
+            }
+        }
+    }
     mergeConfigurations() {
         for (const key in this.defaultConfiguration) {
             this.chartConfiguration[key] = ChartHelper.getValueByConfigurationType(key, this.defaultConfiguration, this.customChartConfiguration);
@@ -6573,18 +6617,26 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return metaData;
     }
-    calculateDimensions(chartContainer, verticalContainer, margin, dataLength) {
+    calculateDimensions(chartContainer, verticalContainer, margin, device, dataLength) {
         const containerWidth = chartContainer.node().getBoundingClientRect().width;
         const containerHeight = verticalContainer.node().getBoundingClientRect().height;
         let width = containerWidth - margin.left - margin.right;
         let height = containerHeight * (this.chartConfiguration.svgHeight / 100) - margin.top - margin.bottom;
-        // Fixed zoom handling - same for all resolutions
+        // Responsive zoom handling
         if (dataLength > this.CONSTANTS.ZOOM_THRESHOLD && this.isZoomedOut) {
-            const minWidth = dataLength * 25;
+            const minWidth = device.isMobile
+                ? dataLength * 12
+                : device.isTablet
+                    ? dataLength * 20
+                    : dataLength * 25;
             width = Math.max(width, minWidth);
         }
         if (dataLength > this.CONSTANTS.ZOOM_IN_THRESHOLD && !this.isZoomedOut) {
-            width = dataLength * 130;
+            width = device.isMobile
+                ? dataLength * 50
+                : device.isTablet
+                    ? dataLength * 90
+                    : dataLength * 130;
         }
         if (this.chartConfiguration.isFullScreen) {
             height = this.chartConfiguration.svgHeight !== 80
@@ -6592,44 +6644,28 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 : containerHeight;
         }
         if (this.chartConfiguration.isDrilldownChart) {
-            height = containerHeight - margin.top - margin.bottom - 130;
+            const offset = device.isMobile ? 60 : device.isTablet ? 90 : 130;
+            height = containerHeight - margin.top - margin.bottom - offset;
         }
-        // Responsive bar width based on screen size and number of bars
-        const isMobileOrTablet = window.innerWidth < 1024;
         let barWidth;
         let barPadding;
-        if (isMobileOrTablet) {
-            // Dynamic sizing for mobile/tablet based on number of bars
-            if (dataLength === 1) {
-                barWidth = 60; // Single bar - very wide
-                barPadding = 0; // No gap needed
-            }
-            else if (dataLength === 2) {
-                barWidth = 50; // 2 bars - wide with gap
-                barPadding = 45; // Significant gap between 2 bars
-            }
-            else if (dataLength === 3) {
-                barWidth = 45; // 3 bars - wide
-                barPadding = 40; // Good spacing
-            }
-            else if (dataLength <= 5) {
-                barWidth = 35; // Medium width for 4-5 bars
-                barPadding = 30; // Medium spacing
-            }
-            else {
-                barWidth = 25; // Narrower for many bars
-                barPadding = 25; // Tighter spacing for many bars
-            }
+        let requiredSvgWidth;
+        if (device.isMobile) {
+            barWidth = this.CONSTANTS.MIN_MOBILE_BAR_WIDTH;
+            barPadding = this.CONSTANTS.MOBILE_BAR_PADDING;
+            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 +
+                this.CONSTANTS.RIGHT_SVG_WIDTH - barPadding);
+        }
+        else if (device.isTablet) {
+            barWidth = this.CONSTANTS.TABLET_MIN_BAR_WIDTH;
+            barPadding = this.CONSTANTS.TABLET_BAR_PADDING;
+            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
         }
         else {
-            // Desktop: consistent sizing
-            barWidth = this.CONSTANTS.DESKTOP_BAR_WIDTH;
-            barPadding = this.CONSTANTS.BAR_GAP;
-        }
-        // Calculate required SVG width: bars + gaps + side spaces
-        const totalBarsWidth = barWidth * dataLength;
-        const totalGaps = barPadding * (dataLength - 1);
-        const requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, totalBarsWidth + totalGaps + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2));
+            barWidth = Math.max(this.CONSTANTS.DESKTOP_MIN_BAR_WIDTH, (width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES * 2) / dataLength);
+            barPadding = 0;
+            requiredSvgWidth = width - this.CONSTANTS.RIGHT_SVG_WIDTH;
+        }
         return {
             width,
             height,
@@ -6647,7 +6683,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('class', 'outer-container')
             .style('width', '100%')
             .style('height', dimensions.height)
-            .style('overflow-x', 'auto') // Enable scroll for all resolutions
+            .style('overflow-x', 'hidden')
             .style('padding-left', `${margin.left}px`)
             .style('margin-left', '10px')
             .style('padding-right', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`);
@@ -6673,7 +6709,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .append('div')
             .attr('class', 'inner-container')
             .style('width', '100%')
-            .style('overflow-x', 'visible');
+            .style('overflow-x', 'auto');
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.requiredSvgWidth)
@@ -6682,27 +6718,18 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('transform', `translate(0,${margin.top})`);
         return { svg, svgYAxisLeft, svgYAxisRight, innerContainer };
     }
-    createScales(data, layers, lineData, dimensions) {
+    createScales(data, layers, lineData, dimensions, device) {
         const { width, height, barWidth, barPadding } = dimensions;
-        // Calculate total width needed for all bars with proper spacing
-        const totalBarsWidth = data.length * barWidth;
-        const totalSpacing = (data.length - 1) * barPadding;
-        const requiredWidth = totalBarsWidth + totalSpacing + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
-        // Use the larger of container width or required width for proper spacing
-        const effectiveWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, requiredWidth);
-        // Calculate padding ratio to create exact pixel gaps between bars
-        const totalAvailableSpace = effectiveWidth;
-        const paddingRatio = barPadding / (barWidth + barPadding);
+        // Adjust padding based on device
+        const padding = device.isMobile ? 0.15 : device.isTablet ? 0.3 : 0.5;
         const xScale = d3
             .scaleBand()
             .rangeRound([
             this.CONSTANTS.LEFT_RIGHT_SPACES,
-            effectiveWidth + this.CONSTANTS.LEFT_RIGHT_SPACES - this.CONSTANTS.RIGHT_SVG_WIDTH
+            width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES
         ])
             .domain(data.map(d => d.name).reverse())
-            .paddingInner(paddingRatio)
-            .paddingOuter(0.5)
-            .align(0.5); // Center alignment
+            .padding(padding);
         const xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - this.CONSTANTS.RIGHT_SVG_WIDTH, 0])
@@ -6751,7 +6778,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return { xAxis, yAxis, yLineAxis };
     }
-    renderBars(svg, layers, scales, metaData, dimensions) {
+    renderBars(svg, layers, scales, metaData, dimensions, device) {
         const layer = svg
             .selectAll('.layer')
             .data(layers)
@@ -6763,11 +6790,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .selectAll('rect')
             .data((d) => d)
             .enter();
-        this.appendRectangles(rect, scales, metaData, dimensions);
+        this.appendRectangles(rect, scales, metaData, dimensions, device);
         this.addInteractions(rect, svg, metaData, scales);
         return rect;
     }
-    appendRectangles(rect, scales, metaData, dimensions) {
+    appendRectangles(rect, scales, metaData, dimensions, device) {
         const { barWidth, barPadding } = dimensions;
         const { xScale, yScale } = scales;
         rect
@@ -6786,19 +6813,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
             return 0;
         })
-            .attr('x', (d) => {
-            // Center the bar within its bandwidth with proper spacing
-            const xPosition = xScale(d.data.name);
-            const bandwidth = xScale.bandwidth();
+            .attr('x', (d, i) => {
+            if (device.isMobile) {
+                return this.CONSTANTS.LEFT_RIGHT_SPACES + i * (barWidth + barPadding);
+            }
             if (!this.chartConfiguration.isMultiChartGridLine) {
-                // Center the fixed-width bar in the available space
-                return xPosition + (bandwidth - barWidth) / 2;
+                return xScale(d.data.name);
             }
             if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
-                return xPosition + bandwidth / 2 - 35;
+                return xScale(d.data.name) + xScale.bandwidth() / 2 - 35;
             }
-            const calculatedWidth = bandwidth * 0.8;
-            return xPosition + (bandwidth - calculatedWidth) / 2;
+            return xScale(d.data.name) + xScale.bandwidth() * 0.1;
         })
             .attr('height', (d) => {
             if (!isNaN(d[0]) && !isNaN(d[1])) {
@@ -6808,8 +6833,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return 0;
         })
             .attr('width', (d) => {
-            if (!this.chartConfiguration.isMultiChartGridLine)
+            if (device.isMobile)
                 return barWidth;
+            if (!this.chartConfiguration.isMultiChartGridLine)
+                return xScale.bandwidth();
             if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
                 return 70;
             }
@@ -6865,13 +6892,23 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const value = d[1] - d[0];
         if (isNaN(value))
             return;
+        const device = this.getDeviceConfig();
         const bandwidth = xScale.bandwidth();
-        // Fixed tooltip width for all resolutions
-        const width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
-            ? '250px'
-            : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 > 180
-                ? '180px'
-                : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
+        // Responsive tooltip width
+        let width;
+        if (device.isMobile) {
+            width = Math.min(bandwidth + 40, 150);
+        }
+        else if (device.isTablet) {
+            width = Math.min(bandwidth + 60, 200);
+        }
+        else {
+            width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
+                ? '250px'
+                : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 > 180
+                    ? '180px'
+                    : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
+        }
         svg
             .append('foreignObject')
             .attr('x', this.calculateTooltipX(d, xScale, width))
@@ -6989,10 +7026,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
     }
     initializeStackedChart() {
-        // Use fixed configuration for all resolutions
-        this.chartConfiguration.margin = { top: 20, right: 20, bottom: 40, left: 40 };
-        this.chartConfiguration.numberOfYTicks = 5;
-        this.chartConfiguration.svgHeight = 70;
+        const device = this.getDeviceConfig();
+        this.configureResponsiveSettings(device);
         this.mergeConfigurations();
         this.applyConfigurationFlags();
         const data = this.chartData.data;
@@ -7003,16 +7038,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const chartContainer = d3.select(this.containerElt.nativeElement);
         const verticalstackedcontainer = d3.select(this.verticalstackedcontainerElt.nativeElement);
         const margin = this.chartConfiguration.margin;
-        const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, data.length);
+        const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, device, data.length);
         const { svg, svgYAxisLeft, svgYAxisRight } = this.createSvgContainers(chartContainer, dimensions, margin);
         const stack = d3.stack().keys(keyList).offset(d3.stackOffsetNone);
         const layers = stack(data);
         data.sort((a, b) => b.total - a.total);
-        const scales = this.createScales(data, layers, lineData, dimensions);
+        const scales = this.createScales(data, layers, lineData, dimensions, device);
         const axes = this.createAxes(scales);
         this.renderGrids(svg, scales, dimensions);
-        const rect = this.renderBars(svg, layers, scales, metaData, dimensions);
-        this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data);
+        const rect = this.renderBars(svg, layers, scales, metaData, dimensions, device);
+        this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, device, data);
         this.renderAxisLabels(svg, svgYAxisLeft, metaData, dimensions, margin);
         this.renderTargetLine(svg, svgYAxisRight, scales, dimensions, metaData);
         this.renderDataLabels(rect, scales, metaData, dimensions);
@@ -7053,7 +7088,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
         }
     }
-    renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data) {
+    renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, device, data) {
         if (this.chartConfiguration.showXaxisTop) {
             svg
                 .append('g')
@@ -7063,7 +7098,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             svg.selectAll('.x-axis > g > text').attr('class', 'lib-display-hidden');
         }
         if (!this.chartConfiguration.isMultiChartGridLine) {
-            this.renderStandardAxes(svg, axes, scales, dimensions, data);
+            this.renderStandardAxes(svg, axes, scales, dimensions, device, data);
         }
         else if (this.chartConfiguration.isDrilldownChart) {
             this.renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions);
@@ -7074,29 +7109,24 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.applyAxisStyling(svg, svgYAxisLeft, svgYAxisRight);
         this.applyAxisConfigurations(svg, scales, dimensions, data);
     }
-    renderStandardAxes(svg, axes, scales, dimensions, data) {
-        const isMobileOrTablet = window.innerWidth < 1024;
-        svg
-            .append('g')
-            .attr('transform', `translate(0,${dimensions.height})`)
-            .attr('class', 'lib-stacked-x-axis-text')
-            .call(axes.xAxis)
-            .selectAll('text')
-            .style('fill', 'var(--chart-text-color)')
-            .style('font-size', isMobileOrTablet ? '10px' : '12px')
-            .attr('text-anchor', 'middle')
-            .attr('dx', '0')
-            .attr('dy', '0.71em')
-            .attr('transform', null)
-            .each(function () {
-            // Ensure X-axis labels are centered and don't overlap
-            const textElement = d3.select(this);
-            const text = textElement.text();
-            if (isMobileOrTablet && text.length > 10) {
-                // Truncate long labels on mobile/tablet
-                textElement.text(text.substring(0, 8) + '...');
-            }
-        });
+    renderStandardAxes(svg, axes, scales, dimensions, device, data) {
+        if (device.isMobile) {
+            this.renderMobileXAxis(svg, data, dimensions);
+        }
+        else {
+            svg
+                .append('g')
+                .attr('transform', `translate(0,${dimensions.height})`)
+                .attr('class', 'lib-stacked-x-axis-text')
+                .call(axes.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);
+        }
         svg
             .append('g')
             .attr('class', 'lib-stacked-y-axis-text')
@@ -7105,6 +7135,27 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)');
     }
+    renderMobileXAxis(svg, data, dimensions) {
+        svg.selectAll('.custom-x-label').remove();
+        const maxLength = Math.max(...data.map(d => d.name.length));
+        const fontSize = maxLength > 10 ? '8px' : '10px';
+        data.forEach((d, i) => {
+            const xVal = this.CONSTANTS.LEFT_RIGHT_SPACES +
+                i * (dimensions.barWidth + dimensions.barPadding) +
+                dimensions.barWidth / 2;
+            svg
+                .append('text')
+                .attr('class', 'custom-x-label')
+                .attr('x', 0)
+                .attr('y', dimensions.height + 18)
+                .attr('text-anchor', 'middle')
+                .attr('transform', `translate(${xVal + 20},0)`)
+                .style('font-size', fontSize)
+                .style('fill', 'var(--chart-text-color)')
+                .style('writing-mode', 'sideways-lr')
+                .text(d.name.length > 6 ? d.name.substring(0, 4) + '...' : d.name);
+        });
+    }
     renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions) {
         svg
             .append('g')
@@ -7186,6 +7237,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
     }
     renderCustomXAxis(svg, scales, dimensions, data) {
+        const device = this.getDeviceConfig();
         svg
             .append('g')
             .attr('class', 'x1 axis1')
@@ -7193,12 +7245,12 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('color', '#000')
             .call(d3.axisBottom(scales.xScale).tickSize(0))
             .call((g) => g.select('.domain').attr('fill', 'none'));
-        this.styleCustomXAxisTicks(svg, data);
+        this.styleCustomXAxisTicks(svg, data, device);
         if (this.chartConfiguration.xLabelsOnSameLine) {
-            this.applyXLabelsOnSameLine(svg);
+            this.applyXLabelsOnSameLine(svg, device);
         }
     }
-    styleCustomXAxisTicks(svg, data) {
+    styleCustomXAxisTicks(svg, data, device) {
         let alternateText = false;
         svg.selectAll('.x1.axis1 .tick line').attr('y2', () => {
             if (this.chartConfiguration.hideXaxisTick)
@@ -7230,17 +7282,28 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return this.CONSTANTS.SHORT_TICK_LENGTH_BG;
         });
     }
-    applyXLabelsOnSameLine(svg) {
+    applyXLabelsOnSameLine(svg, device) {
         svg
             .selectAll('g.x1.axis1 g.tick text')
             .attr('class', 'lib-xaxis-labels-texts-drilldown')
             .attr('y', this.CONSTANTS.SHORT_TICK_LENGTH_BG)
             .text((d) => {
+            if (device.isMobile) {
+                return d.split(' ')[0].substring(0, 3);
+            }
             const trimmed = d.trim();
             const spaceIndex = trimmed.indexOf(' ');
             return spaceIndex > -1
                 ? trimmed.substring(0, spaceIndex).toLowerCase()
                 : trimmed.toLowerCase();
+        })
+            .attr('transform', function (d, i) {
+            if (device.isMobile) {
+                const parent = this.parentNode?.parentNode;
+                const totalBars = parent ? d3.select(parent).selectAll('g.tick').size() : 0;
+                return totalBars === 2 ? 'translate(0,0)' : `translate(${i * 30},0)`;
+            }
+            return null;
         });
         svg
             .selectAll('g.x1.axis1 g.tick')
@@ -7249,11 +7312,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('y', this.CONSTANTS.LONG_TICK_LENGTH_BG)
             .attr('fill', 'currentColor')
             .text((d) => {
+            if (device.isMobile)
+                return '';
             const trimmed = d.trim();
             const spaceIndex = trimmed.indexOf(' ');
             return spaceIndex > -1
                 ? trimmed.substring(spaceIndex).toLowerCase()
                 : '';
+        })
+            .attr('transform', (d, i) => {
+            return device.isMobile && i === 0 ? 'translate(20,0)' : null;
         });
     }
     renderDataLabels(rect, scales, metaData, dimensions) {
@@ -8856,6 +8924,32 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         }
         // ==================== SVG CONTAINERS CREATION ====================
         const { outerContainer, svgYAxisLeft, svgYAxisRight, innerContainer, svg } = this.createChartContainers(chartContainer, margin, height, RIGHT_SVG_WIDTH, self, width);
+        // Only enable horizontal scrolling on mobile/tablet when in zoomed-out
+        // mode and there are many groups or multiple subgroups. Otherwise keep
+        // the inner container fixed (no scrollbar).
+        try {
+            const groupsCount = data.length || 0;
+            const subgroupsCount = (keyList && keyList.length) || 0;
+            // On mobile/tablet: always enable horizontal scrolling when there is
+            // more than one subgroup so grouped bars don't get congested.
+            // On desktop: enable scrolling when there are many groups or
+            // multiple subgroups (keeps previous behavior).
+            if ((isMobile || isTablet) && subgroupsCount > 1) {
+                innerContainer.style('overflow-x', 'auto');
+                innerContainer.classed('scroll-enabled', true);
+            }
+            else if (groupsCount > 8 || subgroupsCount > 2) {
+                innerContainer.style('overflow-x', 'auto');
+                innerContainer.classed('scroll-enabled', true);
+            }
+            else {
+                innerContainer.style('overflow-x', 'hidden');
+                innerContainer.classed('scroll-enabled', false);
+            }
+        }
+        catch (e) {
+            // ignore
+        }
         // ==================== SCALES SETUP ====================
         const subgroups = keyList;
         const groups = d3.map(data, (d) => d.name).keys();
@@ -8997,6 +9091,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         // Mobile override - check for single-group date charts first
         if (isMobile) {
             const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
+            const groupsCount = data.length || 0;
             // Check if we have dates in x-axis and single group
             let hasDateValues = false;
             textNodes.each(function (d) {
@@ -9022,6 +9117,15 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 // Default mobile behavior for non-date or multi-group
                 textNodes.classed('mobile-xaxis-override', true);
             }
+            // If there are many groups on mobile, rotate labels to sideways to
+            // avoid overlapping and make them readable. Use a lower threshold
+            // (3) so even small mobile screens get rotated labels when needed.
+            if (groupsCount > 3) {
+                svg.selectAll('g.x1.axis1 g.tick text')
+                    .style('writing-mode', 'sideways-lr')
+                    .style('text-anchor', 'middle')
+                    .attr('y', 0);
+            }
         }
     }
     applyXLabelsOnSameLine(svg, subgroups, data, metaData, self, shortTickLengthBg, isMobile, isria) {
@@ -9283,14 +9387,24 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         return y(0);
     }
     calculateBarWidth(d, data, subgroups, x, xSubgroup, self, tempScale) {
+        // Device detection for responsive sizing
+        const isMobile = window.innerWidth < 576;
+        const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
         // For grouped bar charts in zoom-in view
         if (subgroups.length > 1 && !self.isZoomedOut) {
-            return 50;
+            return isMobile ? 22 : isTablet ? 36 : 50;
         }
         // For single-bar charts in zoom-in view
         if (subgroups.length === 1 && !self.isZoomedOut) {
-            return 80;
+            return isMobile ? 60 : 80;
         }
+        // Minimum bar widths for zoomed-out state
+        const minBarWidth = (() => {
+            if (subgroups.length > 2) {
+                return isMobile ? 18 : isTablet ? 24 : 30;
+            }
+            return isMobile ? 12 : isTablet ? 16 : 20;
+        })();
         // Default logic for drilldown charts
         if (self.chartConfiguration.isDrilldownChart) {
             let calculatedScale = d3.scaleBand().domain([]).range([0, 0]);
@@ -9305,9 +9419,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                     }
                 }
             });
-            return calculatedScale.bandwidth();
+            // Ensure minimum width even in drilldown mode
+            return Math.max(calculatedScale.bandwidth(), minBarWidth);
         }
-        return xSubgroup.bandwidth();
+        // For regular charts, ensure minimum width
+        return Math.max(xSubgroup.bandwidth(), minBarWidth);
     }
     calculateBarHeight(d, y, height, self) {
         if (d.value === -1) {
@@ -9701,30 +9817,34 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
     calculateChartDimensions(chartContainer, verticalstackedcontainer, margin, self) {
         let width = parseInt(chartContainer.style('width')) - margin.left - margin.right;
         const dataLength = this.chartData.data.length;
-        // ---- Width Logic (no change) ----
-        if (dataLength > 30 && this.isZoomedOut) {
-            width =
-                width > dataLength * 40
-                    ? this.chartData.dropdownData1
-                        ? dataLength * 60
-                        : width
-                    : this.chartData.dropdownData1
-                        ? dataLength * 60
-                        : dataLength * 40;
-            width = width > dataLength * 40 ? width : dataLength * 40;
-        }
-        if (this.chartData.dropdownData2 &&
-            width < dataLength * 120 &&
-            this.isZoomedOut) {
-            width = dataLength * 120;
+        const subgroupsCount = (this.chartData.metaData.keyList || []).length;
+        const isMobile = window.innerWidth < 576;
+        const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
+        // Minimum width per bar group based on device and number of subgroups
+        const minWidthPerGroup = (() => {
+            if (subgroupsCount > 2) {
+                return isMobile ? 80 : isTablet ? 100 : 120; // Wider for multiple subgroups
+            }
+            return isMobile ? 40 : isTablet ? 60 : 80; // Normal width for 1-2 subgroups
+        })();
+        // Calculate minimum required width for all groups
+        const minRequiredWidth = dataLength * minWidthPerGroup;
+        // In zoomed-out state, ensure minimum width for readability
+        if (this.isZoomedOut) {
+            // If we have many groups or multiple subgroups, ensure minimum width
+            if (dataLength > 8 || subgroupsCount > 2) {
+                width = Math.max(width, minRequiredWidth);
+            }
         }
+        // In zoomed-in state, always ensure generous spacing
         if (dataLength > 8 && !this.isZoomedOut) {
             if (this.chartData.dropdownData2 &&
                 width < dataLength * 250) {
                 width = dataLength * 250;
             }
             else {
-                width = dataLength * 160;
+                // Increase width for multiple subgroups
+                width = dataLength * (subgroupsCount > 2 ? 200 : 160);
             }
         }
         // ---- Height Logic (no change) ----
@@ -9763,7 +9883,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .attr('class', 'outer-container')
             .style('width', '100%')
             .style('height', height)
-            .style('overflow-x', 'hidden')
+            .style('overflow', 'visible') // Allow overflow to show scrollbars
             .style('padding-left', `${margin.left}px`)
             .style('padding-right', `${rightSvgWidth}px`)
             .style('margin-left', '15px');
@@ -9796,8 +9916,9 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         // Main SVG
         const svg = innerContainer
             .append('svg')
-            .attr('width', width - rightSvgWidth)
+            .attr('width', Math.max(width - rightSvgWidth, window.innerWidth * 0.8)) // Ensure minimum width
             .attr('height', height + margin.top + margin.bottom + 60)
+            .style('min-width', '100%') // Prevent svg from shrinking
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
         return { outerContainer, svgYAxisLeft, svgYAxisRight, innerContainer, svg };
@@ -9821,11 +9942,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         this.clickEvent.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalGroupedBarWithScrollZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalGroupedBarWithScrollZoomComponent, selector: "lib-horizontal-grouped-bar-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["groupchartcontainer"], descendants: true, static: true }, { propertyName: "groupcontainerElt", first: true, predicate: ["groupcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #groupcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n  style=\"background-color: var(--card-bg);\"\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <lib-chart-header-v1\r\n    [title]=\"chartData.metaData.title\"\r\n    [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n    [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n    [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n    [isria]=\"customChartConfiguration.isRia\"\r\n    [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n    (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n    [isAlertEnabled]=\"isAlertEnabled\"\r\n    *ngIf=\"isHeaderVisible\"\r\n  ></lib-chart-header-v1>\r\n  <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"legend-holder-right\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"display-flex\">\r\n      <li\r\n        class=\"legends-positioning-inline\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon-drilldown\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"groupchartcontainer\"\r\n    #groupchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n\r\n\r\n  <!-- <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      !chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"lib-donut-chart-footer\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"lib-donut-justified-label-wrapper\">\r\n      <li\r\n        class=\"lib-donut-justified-label-item\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div> -->\r\n\r\n\r\n  <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n    <div\r\n      class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n      *ngFor=\"\r\n        let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n        let i = index\r\n      \">\r\n      <div\r\n        class=\"bar-name font-size-1\"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ item.key }}\r\n      </div>\r\n      <div\r\n        class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n        [style.color]=\"\r\n          chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n        \"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ chartData.data[0][item.key] }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}.mobile-xaxis-override[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}g.x1.axis1 g.tick text[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV1Component, selector: "lib-chart-header-v1", inputs: ["isAlertEnabled", "title", "menuOptions", "isEditEnabled", "isria", "hasDrillDown", "selectedKpiTooltop"], outputs: ["menuOptionClickEvent"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalGroupedBarWithScrollZoomComponent, selector: "lib-horizontal-grouped-bar-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["groupchartcontainer"], descendants: true, static: true }, { propertyName: "groupcontainerElt", first: true, predicate: ["groupcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #groupcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n  style=\"background-color: var(--card-bg);\"\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <lib-chart-header-v1\r\n    [title]=\"chartData.metaData.title\"\r\n    [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n    [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n    [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n    [isria]=\"customChartConfiguration.isRia\"\r\n    [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n    (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n    [isAlertEnabled]=\"isAlertEnabled\"\r\n    *ngIf=\"isHeaderVisible\"\r\n  ></lib-chart-header-v1>\r\n  <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"legend-holder-right\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"display-flex\">\r\n      <li\r\n        class=\"legends-positioning-inline\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon-drilldown\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"groupchartcontainer\"\r\n    #groupchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n\r\n\r\n  <!-- <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      !chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"lib-donut-chart-footer\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"lib-donut-justified-label-wrapper\">\r\n      <li\r\n        class=\"lib-donut-justified-label-item\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div> -->\r\n\r\n\r\n  <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n    <div\r\n      class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n      *ngFor=\"\r\n        let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n        let i = index\r\n      \">\r\n      <div\r\n        class=\"bar-name font-size-1\"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ item.key }}\r\n      </div>\r\n      <div\r\n        class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n        [style.color]=\"\r\n          chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n        \"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ chartData.data[0][item.key] }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}.outer-container{position:relative;width:100%;overflow:visible}.inner-container{width:100%;overflow-x:hidden;position:relative}.inner-container.scroll-enabled{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to right,#fff 30%,#fff0),linear-gradient(to left,#fff 30%,#fff0) 100% 0,radial-gradient(farthest-side at 0 50%,#0000001f,#0000),radial-gradient(farthest-side at 100% 50%,#0000001f,#0000) 100% 0;background-repeat:no-repeat;background-color:#fff;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}.inner-container.scroll-enabled::-webkit-scrollbar{height:8px}.inner-container.scroll-enabled::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.inner-container.scroll-enabled::-webkit-scrollbar-thumb{background:#888;border-radius:4px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV1Component, selector: "lib-chart-header-v1", inputs: ["isAlertEnabled", "title", "menuOptions", "isEditEnabled", "isria", "hasDrillDown", "selectedKpiTooltop"], outputs: ["menuOptionClickEvent"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalGroupedBarWithScrollZoomComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-horizontal-grouped-bar-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<div\r\n  #groupcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n  style=\"background-color: var(--card-bg);\"\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <lib-chart-header-v1\r\n    [title]=\"chartData.metaData.title\"\r\n    [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n    [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n    [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n    [isria]=\"customChartConfiguration.isRia\"\r\n    [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n    (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n    [isAlertEnabled]=\"isAlertEnabled\"\r\n    *ngIf=\"isHeaderVisible\"\r\n  ></lib-chart-header-v1>\r\n  <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"legend-holder-right\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"display-flex\">\r\n      <li\r\n        class=\"legends-positioning-inline\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon-drilldown\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"groupchartcontainer\"\r\n    #groupchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n\r\n\r\n  <!-- <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      !chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"lib-donut-chart-footer\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"lib-donut-justified-label-wrapper\">\r\n      <li\r\n        class=\"lib-donut-justified-label-item\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div> -->\r\n\r\n\r\n  <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n    <div\r\n      class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n      *ngFor=\"\r\n        let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n        let i = index\r\n      \">\r\n      <div\r\n        class=\"bar-name font-size-1\"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ item.key }}\r\n      </div>\r\n      <div\r\n        class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n        [style.color]=\"\r\n          chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n        \"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ chartData.data[0][item.key] }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}.mobile-xaxis-override[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}g.x1.axis1 g.tick text[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
+            args: [{ selector: 'lib-horizontal-grouped-bar-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<div\r\n  #groupcontainer\r\n  class=\"lib-chart-wrapper\"\r\n  [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n  style=\"background-color: var(--card-bg);\"\r\n  (resized)=\"onResized($event)\"\r\n>\r\n  <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n    <lib-chart-header-v2\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (clickEvent)=\"handleClick($event)\"\r\n    ></lib-chart-header-v2>\r\n    <lib-chart-header-v3\r\n      [chartData]=\"chartData\"\r\n      [chartConfiguration]=\"chartConfiguration\"\r\n      (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n      (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n    ></lib-chart-header-v3>\r\n  </div>\r\n  <lib-chart-header-v1\r\n    [title]=\"chartData.metaData.title\"\r\n    [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n    [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n    [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n    [isria]=\"customChartConfiguration.isRia\"\r\n    [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n    (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n    [isAlertEnabled]=\"isAlertEnabled\"\r\n    *ngIf=\"isHeaderVisible\"\r\n  ></lib-chart-header-v1>\r\n  <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"legend-holder-right\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"display-flex\">\r\n      <li\r\n        class=\"legends-positioning-inline\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon-drilldown\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div\r\n    [style.height]=\"chartConfiguration.svgHeight\"\r\n    id=\"groupchartcontainer\"\r\n    #groupchartcontainer\r\n    class=\"lib-chart-svg\"\r\n  ></div>\r\n\r\n\r\n  <!-- <div\r\n    *ngIf=\"\r\n      chartData &&\r\n      chartData.metaData &&\r\n      chartConfiguration.legendJustified &&\r\n      legendVisible &&\r\n      !chartConfiguration.legendAtTopRight\r\n    \"\r\n    class=\"lib-donut-chart-footer\"\r\n    [style.height]=\"chartConfiguration.footerHeight\"\r\n  >\r\n    <ul class=\"lib-donut-justified-label-wrapper\">\r\n      <li\r\n        class=\"lib-donut-justified-label-item\"\r\n        *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n      >\r\n        <span\r\n          class=\"lib-donut-justified-label-icon\"\r\n          [style.background-color]=\"item.value\"\r\n        ></span\r\n        ><span>{{ item.key }}</span>\r\n      </li>\r\n    </ul>\r\n  </div> -->\r\n\r\n\r\n  <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n    <div\r\n      class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n      *ngFor=\"\r\n        let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n        let i = index\r\n      \">\r\n      <div\r\n        class=\"bar-name font-size-1\"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ item.key }}\r\n      </div>\r\n      <div\r\n        class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n        [style.color]=\"\r\n          chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n        \"\r\n        *ngIf=\"\r\n          chartData.data[0][item.key] &&\r\n          i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n        \"\r\n      >\r\n        {{ chartData.data[0][item.key] }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}.outer-container{position:relative;width:100%;overflow:visible}.inner-container{width:100%;overflow-x:hidden;position:relative}.inner-container.scroll-enabled{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to right,#fff 30%,#fff0),linear-gradient(to left,#fff 30%,#fff0) 100% 0,radial-gradient(farthest-side at 0 50%,#0000001f,#0000),radial-gradient(farthest-side at 100% 50%,#0000001f,#0000) 100% 0;background-repeat:no-repeat;background-color:#fff;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}.inner-container.scroll-enabled::-webkit-scrollbar{height:8px}.inner-container.scroll-enabled::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.inner-container.scroll-enabled::-webkit-scrollbar-thumb{background:#888;border-radius:4px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerElt: [{
                 type: ViewChild,
                 args: ['groupchartcontainer', { static: true }]