axidio-styleguide-library1-v2 0.6.22 → 0.6.24

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

@@ -6716,7 +6716,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const isMobileOrTablet = window.innerWidth < 1024;
         let barWidth;
         let barPadding;
-        if (isMobileOrTablet) {
+        if (!this.isZoomedOut && dataLength > this.CONSTANTS.ZOOM_IN_THRESHOLD) {
+            barWidth = 60;
+            barPadding = 50;
+        }
+        else if (isMobileOrTablet) {
             if (dataLength === 1) {
                 barWidth = 60;
                 barPadding = 0;
@@ -6756,6 +6760,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             requiredSvgWidth,
         };
     }
+    scrollToCenter(scrollableContainer, svgWidth) {
+        const containerWidth = scrollableContainer.node().getBoundingClientRect().width;
+        const scrollPosition = (svgWidth - containerWidth) / 2;
+        scrollableContainer.node().scrollLeft = Math.max(0, scrollPosition);
+    }
     createSvgContainers(chartContainer, dimensions, margin, hasXLabel // Add this parameter
     ) {
         // Calculate total height including space for X-axis label if present
@@ -6838,7 +6847,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('align-items', 'center')
             .style('background-color', 'var(--card-bg)')
             .style('z-index', '10');
-        return { svg, svgYAxisLeft, svgYAxisRight, innerContainer, bottomLabelContainer };
+        return { svg, svgYAxisLeft, svgYAxisRight, innerContainer, bottomLabelContainer, scrollableContainer };
     }
     createScales(data, layers, lineData, dimensions) {
         const { width, height, barWidth, barPadding } = dimensions;
@@ -7178,7 +7187,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const margin = this.chartConfiguration.margin;
         const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, data.length);
         const hasXLabel = !!metaData.xLabel;
-        const { svg, svgYAxisLeft, svgYAxisRight, bottomLabelContainer } = this.createSvgContainers(chartContainer, dimensions, margin, hasXLabel);
+        const { svg, svgYAxisLeft, svgYAxisRight, bottomLabelContainer, scrollableContainer } = this.createSvgContainers(chartContainer, dimensions, margin, hasXLabel);
         const stack = d3.stack().keys(keyList).offset(d3.stackOffsetNone);
         const layers = stack(data);
         data.sort((a, b) => b.total - a.total);
@@ -7192,6 +7201,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.renderTargetLine(svg, svgYAxisRight, scales, dimensions, metaData);
         this.renderDataLabels(rect, scales, metaData, dimensions);
         this.renderLineChart(svg, lineData, scales, colors, metaData);
+        if (!this.isZoomedOut && data.length > this.CONSTANTS.ZOOM_IN_THRESHOLD) {
+            setTimeout(() => {
+                this.scrollToCenter(scrollableContainer, dimensions.requiredSvgWidth);
+            }, 0);
+        }
     }
     renderGrids(svg, scales, dimensions) {
         if (this.chartConfiguration.isXgridBetweenLabels) {
@@ -7345,14 +7359,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (this.chartConfiguration.isYaxisHidden) {
             d3.selectAll('.yaxis-dashed').attr('class', 'lib-display-hidden');
         }
-        if (this.isZoomedOut && data.length > 9) {
-            svg
-                .selectAll('.lib-xaxis-labels-texts-drilldown')
-                .attr('transform', 'rotate(-90)')
-                .attr('text-anchor', 'end')
-                .attr('x', '-5')
-                .attr('dy', null);
-        }
+        // if (this.isZoomedOut && data.length > 9) {
+        //   svg
+        //     .selectAll('.lib-xaxis-labels-texts-drilldown')
+        //     .attr('transform', 'rotate(-90)')
+        //     .attr('text-anchor', 'end')
+        //     .attr('x', '-5')
+        //     .attr('dy', null);
+        // }
     }
     renderCustomXAxis(svg, scales, dimensions, data) {
         svg