axidio-styleguide-library1-v2 0.2.46 → 0.2.47

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

@@ -6625,17 +6625,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         // Responsive zoom handling
         if (dataLength > this.CONSTANTS.ZOOM_THRESHOLD && this.isZoomedOut) {
             const minWidth = device.isMobile
-                ? dataLength * 12
+                ? dataLength * 15 // Increased from 12
                 : device.isTablet
-                    ? dataLength * 20
+                    ? dataLength * 25 // Increased from 20
                     : dataLength * 25;
             width = Math.max(width, minWidth);
         }
         if (dataLength > this.CONSTANTS.ZOOM_IN_THRESHOLD && !this.isZoomedOut) {
             width = device.isMobile
-                ? dataLength * 50
+                ? dataLength * 60 // Increased from 50
                 : device.isTablet
-                    ? dataLength * 90
+                    ? dataLength * 100 // Increased from 90
                     : dataLength * 130;
         }
         if (this.chartConfiguration.isFullScreen) {
@@ -6653,13 +6653,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         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);
+            // FIX: Calculate total width needed for all bars + spacing
+            const totalBarsWidth = (barWidth + barPadding) * dataLength;
+            const sidePadding = this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
+            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, totalBarsWidth + sidePadding);
         }
         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);
+            const totalBarsWidth = (barWidth + barPadding) * dataLength;
+            const sidePadding = this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
+            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, totalBarsWidth + sidePadding);
         }
         else {
             barWidth = Math.max(this.CONSTANTS.DESKTOP_MIN_BAR_WIDTH, (width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES * 2) / dataLength);
@@ -6720,16 +6724,30 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     }
     createScales(data, layers, lineData, dimensions, device) {
         const { width, height, barWidth, barPadding } = dimensions;
-        // 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,
-            width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES
-        ])
-            .domain(data.map(d => d.name).reverse())
-            .padding(padding);
+        // For mobile and tablet, create a custom scale that matches bar positioning
+        let xScale;
+        if (device.isMobile || device.isTablet) {
+            // Create a point scale for mobile/tablet that aligns with manual positioning
+            xScale = d3
+                .scalePoint()
+                .domain(data.map(d => d.name).reverse())
+                .range([
+                this.CONSTANTS.LEFT_RIGHT_SPACES + barWidth / 2,
+                width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES - barWidth / 2
+            ])
+                .padding(0);
+        }
+        else {
+            // Desktop uses band scale
+            xScale = d3
+                .scaleBand()
+                .rangeRound([
+                this.CONSTANTS.LEFT_RIGHT_SPACES,
+                width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES
+            ])
+                .domain(data.map(d => d.name).reverse())
+                .padding(0.5);
+        }
         const xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - this.CONSTANTS.RIGHT_SVG_WIDTH, 0])
@@ -6814,9 +6832,12 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return 0;
         })
             .attr('x', (d, i) => {
-            if (device.isMobile) {
+            // FIX: Consistent positioning logic
+            if (device.isMobile || device.isTablet) {
+                // For mobile/tablet, calculate position based on index
                 return this.CONSTANTS.LEFT_RIGHT_SPACES + i * (barWidth + barPadding);
             }
+            // Desktop positioning
             if (!this.chartConfiguration.isMultiChartGridLine) {
                 return xScale(d.data.name);
             }
@@ -6833,7 +6854,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return 0;
         })
             .attr('width', (d) => {
-            if (device.isMobile)
+            // FIX: Consistent width logic
+            if (device.isMobile || device.isTablet)
                 return barWidth;
             if (!this.chartConfiguration.isMultiChartGridLine)
                 return xScale.bandwidth();
@@ -6893,25 +6915,36 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (isNaN(value))
             return;
         const device = this.getDeviceConfig();
-        const bandwidth = xScale.bandwidth();
-        // Responsive tooltip width
+        // Get the bar's actual index to calculate position for mobile/tablet
+        const dataIndex = this.chartData.data.findIndex((item) => item.name === d.data.name);
+        const dimensions = this.currentDimensions; // Store dimensions as class property
+        let tooltipX;
         let width;
         if (device.isMobile) {
-            width = Math.min(bandwidth + 40, 150);
+            width = Math.min(dimensions.barWidth + 20, 120);
+            // FIX: Calculate tooltip x to match bar position
+            tooltipX = this.CONSTANTS.LEFT_RIGHT_SPACES +
+                dataIndex * (dimensions.barWidth + dimensions.barPadding) +
+                dimensions.barWidth / 2 - (typeof width === 'number' ? width : 120) / 2;
         }
         else if (device.isTablet) {
-            width = Math.min(bandwidth + 60, 200);
+            width = Math.min(dimensions.barWidth + 40, 180);
+            tooltipX = this.CONSTANTS.LEFT_RIGHT_SPACES +
+                dataIndex * (dimensions.barWidth + dimensions.barPadding) +
+                dimensions.barWidth / 2 - (typeof width === 'number' ? width : 180) / 2;
         }
         else {
+            const bandwidth = xScale.bandwidth();
             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;
+            tooltipX = this.calculateTooltipX(d, xScale, width);
         }
         svg
             .append('foreignObject')
-            .attr('x', this.calculateTooltipX(d, xScale, width))
+            .attr('x', tooltipX)
             .attr('class', 'lib-verticalstack-title-ontop')
             .attr('y', yScale(d[1]) - 51)
             .attr('width', width)
@@ -7039,6 +7072,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const verticalstackedcontainer = d3.select(this.verticalstackedcontainerElt.nativeElement);
         const margin = this.chartConfiguration.margin;
         const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, device, data.length);
+        this.currentDimensions = dimensions;
         const { svg, svgYAxisLeft, svgYAxisRight } = this.createSvgContainers(chartContainer, dimensions, margin);
         const stack = d3.stack().keys(keyList).offset(d3.stackOffsetNone);
         const layers = stack(data);
@@ -7140,20 +7174,20 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const maxLength = Math.max(...data.map(d => d.name.length));
         const fontSize = maxLength > 10 ? '8px' : '10px';
         data.forEach((d, i) => {
+            // FIX: Calculate x position to match bar center
             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('x', xVal)
+                .attr('y', dimensions.height + 15) // Adjusted from 18
                 .attr('text-anchor', 'middle')
-                .attr('transform', `translate(${xVal + 20},0)`)
+                .attr('transform', `translate(0,0) rotate(-90, ${xVal}, ${dimensions.height + 15})`)
                 .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);
+                .text(d.name.length > 8 ? d.name.substring(0, 6) + '...' : d.name);
         });
     }
     renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions) {