axidio-styleguide-library1-v2 0.2.43 → 0.2.45

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

@@ -6488,17 +6488,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             LONG_TICK_LENGTH: 16,
             SHORT_TICK_LENGTH_BG: 5,
             LONG_TICK_LENGTH_BG: 30,
-            // Mobile settings - larger bars with good spacing
-            MIN_MOBILE_BAR_WIDTH: 35,
-            MOBILE_BAR_PADDING: 15,
-            MOBILE_BAR_SPACING: 0.4, // 40% spacing between bars
-            // Tablet settings - balanced approach
-            TABLET_MIN_BAR_WIDTH: 45,
-            TABLET_BAR_PADDING: 18,
-            TABLET_BAR_SPACING: 0.35, // 35% spacing between bars
-            // Desktop settings
-            DESKTOP_MIN_BAR_WIDTH: 50,
-            DESKTOP_BAR_SPACING: 0.3, // 30% spacing between bars
+            MIN_MOBILE_BAR_WIDTH: 35, // Increased from 28
+            DESKTOP_MIN_BAR_WIDTH: 40,
+            TABLET_MIN_BAR_WIDTH: 30, // Reduced from 35
+            MOBILE_BAR_PADDING: 8, // Reduced from 10
+            TABLET_BAR_PADDING: 6, // Reduced from 8
             ZOOM_THRESHOLD: 30,
             ZOOM_IN_THRESHOLD: 8,
         };
@@ -6566,36 +6560,37 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     getDeviceConfig() {
         const width = window.innerWidth;
         return {
-            isMobile: width < 768,
-            isTablet: width >= 768 && width < 1024,
-            isDesktop: width >= 1024,
+            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: 20, right: 10, bottom: 50, left: 30 };
+            this.chartConfiguration.margin = { top: 15, right: 5, bottom: 45, left: 25 }; // Increased bottom
             this.chartConfiguration.numberOfYTicks = 4;
-            this.chartConfiguration.svgHeight = 60;
+            this.chartConfiguration.svgHeight = 55;
         }
         else if (device.isTablet) {
-            this.chartConfiguration.margin = { top: 25, right: 20, bottom: 55, left: 45 };
+            this.chartConfiguration.margin = { top: 20, right: 15, bottom: 50, left: 35 }; // Increased bottom
             this.chartConfiguration.numberOfYTicks = 5;
-            this.chartConfiguration.svgHeight = 70;
+            this.chartConfiguration.svgHeight = 65;
         }
         else {
+            // Desktop/Large screens
             const width = window.innerWidth;
             if (width >= 1920) {
-                this.chartConfiguration.margin = { top: 35, right: 35, bottom: 60, left: 70 };
+                this.chartConfiguration.margin = { top: 35, right: 35, bottom: 55, left: 70 };
                 this.chartConfiguration.numberOfYTicks = 8;
                 this.chartConfiguration.svgHeight = 85;
             }
             else if (width >= 1366) {
-                this.chartConfiguration.margin = { top: 30, right: 30, bottom: 55, left: 60 };
+                this.chartConfiguration.margin = { top: 30, right: 30, bottom: 50, left: 60 };
                 this.chartConfiguration.numberOfYTicks = 7;
                 this.chartConfiguration.svgHeight = 80;
             }
             else {
-                this.chartConfiguration.margin = { top: 25, right: 25, bottom: 50, left: 50 };
+                this.chartConfiguration.margin = { top: 25, right: 25, bottom: 45, left: 50 };
                 this.chartConfiguration.numberOfYTicks = 6;
                 this.chartConfiguration.svgHeight = 75;
             }
@@ -6624,33 +6619,20 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const containerHeight = verticalContainer.node().getBoundingClientRect().height;
         let width = containerWidth - margin.left - margin.right;
         let height = containerHeight * (this.chartConfiguration.svgHeight / 100) - margin.top - margin.bottom;
-        // Calculate minimum width based on device and data length
-        if (device.isMobile) {
-            const minBarWidth = this.CONSTANTS.MIN_MOBILE_BAR_WIDTH;
-            const minPadding = this.CONSTANTS.MOBILE_BAR_PADDING;
-            const minWidthNeeded = (minBarWidth + minPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
-            width = Math.max(width, minWidthNeeded);
-        }
-        else if (device.isTablet) {
-            const minBarWidth = this.CONSTANTS.TABLET_MIN_BAR_WIDTH;
-            const minPadding = this.CONSTANTS.TABLET_BAR_PADDING;
-            const minWidthNeeded = (minBarWidth + minPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
-            width = Math.max(width, minWidthNeeded);
-        }
-        // Zoom handling with proper spacing
+        // Responsive zoom handling
         if (dataLength > this.CONSTANTS.ZOOM_THRESHOLD && this.isZoomedOut) {
             const minWidth = device.isMobile
-                ? dataLength * 15
+                ? dataLength * 15 // Increased from 12
                 : device.isTablet
-                    ? dataLength * 25
-                    : dataLength * 30;
+                    ? dataLength * 22 // Increased from 20
+                    : dataLength * 25;
             width = Math.max(width, minWidth);
         }
         if (dataLength > this.CONSTANTS.ZOOM_IN_THRESHOLD && !this.isZoomedOut) {
             width = device.isMobile
-                ? dataLength * 60
+                ? dataLength * 55 // Increased from 50
                 : device.isTablet
-                    ? dataLength * 100
+                    ? dataLength * 80 // Reduced from 90
                     : dataLength * 130;
         }
         if (this.chartConfiguration.isFullScreen) {
@@ -6659,7 +6641,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 : containerHeight;
         }
         if (this.chartConfiguration.isDrilldownChart) {
-            const offset = device.isMobile ? 70 : device.isTablet ? 100 : 130;
+            const offset = device.isMobile ? 70 : device.isTablet ? 80 : 130;
             height = containerHeight - margin.top - margin.bottom - offset;
         }
         let barWidth;
@@ -6668,21 +6650,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (device.isMobile) {
             barWidth = this.CONSTANTS.MIN_MOBILE_BAR_WIDTH;
             barPadding = this.CONSTANTS.MOBILE_BAR_PADDING;
-            // Calculate total width with proper spacing
-            const totalBarSpace = (barWidth + barPadding) * dataLength;
-            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, totalBarSpace + this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
+            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;
-            const totalBarSpace = (barWidth + barPadding) * dataLength;
-            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, totalBarSpace + this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
+            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 +
+                this.CONSTANTS.RIGHT_SVG_WIDTH);
         }
         else {
-            // Desktop: calculate dynamically but ensure minimum width
-            const availableWidth = width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
-            barWidth = Math.max(this.CONSTANTS.DESKTOP_MIN_BAR_WIDTH, availableWidth / (dataLength * 1.3) // 1.3 factor accounts for spacing
-            );
+            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;
         }
@@ -6739,18 +6717,9 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         return { svg, svgYAxisLeft, svgYAxisRight, innerContainer };
     }
     createScales(data, layers, lineData, dimensions, device) {
-        const { width, height } = dimensions;
-        // Device-specific padding for proper spacing
-        let padding;
-        if (device.isMobile) {
-            padding = this.CONSTANTS.MOBILE_BAR_SPACING;
-        }
-        else if (device.isTablet) {
-            padding = this.CONSTANTS.TABLET_BAR_SPACING;
-        }
-        else {
-            padding = this.CONSTANTS.DESKTOP_BAR_SPACING;
-        }
+        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([
@@ -6758,8 +6727,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES
         ])
             .domain(data.map(d => d.name).reverse())
-            .padding(padding)
-            .paddingOuter(0.2); // Extra padding on the outer edges
+            .padding(padding);
         const xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - this.CONSTANTS.RIGHT_SVG_WIDTH, 0])
@@ -6845,10 +6813,9 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         })
             .attr('x', (d, i) => {
             if (device.isMobile || device.isTablet) {
-                // For mobile and tablet: use manual positioning with exact spacing
+                // Use consistent positioning for mobile and tablet
                 return this.CONSTANTS.LEFT_RIGHT_SPACES + i * (barWidth + barPadding);
             }
-            // For desktop: use D3's scaleBand positioning
             if (!this.chartConfiguration.isMultiChartGridLine) {
                 return xScale(d.data.name);
             }
@@ -6865,14 +6832,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return 0;
         })
             .attr('width', (d) => {
-            if (device.isMobile || device.isTablet) {
-                // Fixed width for mobile/tablet
+            if (device.isMobile || device.isTablet)
                 return barWidth;
-            }
-            // Dynamic width for desktop
-            if (!this.chartConfiguration.isMultiChartGridLine) {
+            if (!this.chartConfiguration.isMultiChartGridLine)
                 return xScale.bandwidth();
-            }
             if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
                 return 70;
             }
@@ -6929,16 +6892,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (isNaN(value))
             return;
         const device = this.getDeviceConfig();
-        const bandwidth = device.isMobile || device.isTablet
-            ? this.CONSTANTS.MIN_MOBILE_BAR_WIDTH
-            : xScale.bandwidth();
-        // Responsive tooltip width with better sizing
+        const bandwidth = xScale.bandwidth();
+        // Responsive tooltip width
         let width;
         if (device.isMobile) {
-            width = Math.min(120, bandwidth * 2);
+            width = Math.min(bandwidth + 40, 150);
         }
         else if (device.isTablet) {
-            width = Math.min(160, bandwidth * 1.8);
+            width = Math.min(bandwidth + 60, 200);
         }
         else {
             width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
@@ -6947,16 +6908,9 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                     ? '180px'
                     : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
         }
-        const xPosition = device.isMobile || device.isTablet
-            ? this.CONSTANTS.LEFT_RIGHT_SPACES +
-                scales.xScale.domain().reverse().indexOf(d.data.name) *
-                    (this.CONSTANTS.MIN_MOBILE_BAR_WIDTH + this.CONSTANTS.MOBILE_BAR_PADDING) +
-                this.CONSTANTS.MIN_MOBILE_BAR_WIDTH / 2 -
-                (typeof width === 'number' ? width : parseInt(width)) / 2
-            : this.calculateTooltipX(d, xScale, width);
         svg
             .append('foreignObject')
-            .attr('x', xPosition)
+            .attr('x', this.calculateTooltipX(d, xScale, width))
             .attr('class', 'lib-verticalstack-title-ontop')
             .attr('y', yScale(d[1]) - 51)
             .attr('width', width)
@@ -7155,12 +7109,30 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.applyAxisConfigurations(svg, scales, dimensions, data);
     }
     renderStandardAxes(svg, axes, scales, dimensions, device, data) {
-        if (device.isMobile || device.isTablet) {
-            // Use custom rendering for mobile and tablet
-            this.renderMobileXAxis(svg, data, dimensions, device);
+        if (device.isMobile) {
+            this.renderMobileXAxis(svg, data, dimensions);
+        }
+        else if (device.isTablet) {
+            // Tablet: Render with rotation
+            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', '10px')
+                .attr('text-anchor', 'end')
+                .attr('dx', '-.8em')
+                .attr('dy', '.15em')
+                .attr('transform', 'rotate(-45)')
+                .text((d) => {
+                // Truncate long labels for tablet
+                return d.length > 12 ? d.substring(0, 10) + '...' : d;
+            });
         }
         else {
-            // Standard desktop rendering
+            // Desktop: Standard horizontal labels
             svg
                 .append('g')
                 .attr('transform', `translate(0,${dimensions.height})`)
@@ -7174,7 +7146,6 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('dy', '0.71em')
                 .attr('transform', null);
         }
-        // Y-axis remains the same for all devices
         svg
             .append('g')
             .attr('class', 'lib-stacked-y-axis-text')
@@ -7183,48 +7154,44 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)');
     }
-    renderMobileXAxis(svg, data, dimensions, device) {
+    renderMobileXAxis(svg, data, dimensions) {
         svg.selectAll('.custom-x-label').remove();
-        const { barWidth, barPadding } = dimensions;
-        const maxLabelLength = Math.max(...data.map(d => d.name.length));
-        // Determine if we need to rotate labels
-        const shouldRotate = data.length > 6 || maxLabelLength > 8;
+        // Adaptive font size based on label length
+        const maxLength = Math.max(...data.map(d => d.name.length));
+        let fontSize = '9px';
+        if (maxLength > 15)
+            fontSize = '7px';
+        else if (maxLength > 10)
+            fontSize = '8px';
         data.forEach((d, i) => {
-            const xPosition = this.CONSTANTS.LEFT_RIGHT_SPACES +
-                i * (barWidth + barPadding) +
-                barWidth / 2;
-            const label = svg
+            const xVal = this.CONSTANTS.LEFT_RIGHT_SPACES +
+                i * (dimensions.barWidth + dimensions.barPadding) +
+                dimensions.barWidth / 2;
+            // Truncate labels intelligently for mobile
+            let labelText = d.name;
+            if (labelText.length > 8) {
+                // Try to truncate at word boundary
+                const words = labelText.split(' ');
+                if (words.length > 1) {
+                    labelText = words[0].substring(0, 4) + '...';
+                }
+                else {
+                    labelText = labelText.substring(0, 6) + '...';
+                }
+            }
+            svg
                 .append('text')
                 .attr('class', 'custom-x-label')
-                .attr('x', xPosition)
-                .attr('y', dimensions.height + (shouldRotate ? 12 : 20))
-                .attr('text-anchor', shouldRotate ? 'end' : 'middle')
-                .style('font-size', device.isMobile ? '9px' : '10px')
+                .attr('x', 0)
+                .attr('y', dimensions.height + 15) // Adjusted positioning
+                .attr('text-anchor', 'middle')
+                .attr('transform', `translate(${xVal + 15},0)`)
+                .style('font-size', fontSize)
                 .style('fill', 'var(--chart-text-color)')
-                .text(this.formatXAxisLabel(d.name, device));
-            if (shouldRotate) {
-                label
-                    .attr('transform', `rotate(-45, ${xPosition}, ${dimensions.height + 12})`)
-                    .attr('dx', '-0.5em');
-            }
+                .style('writing-mode', 'sideways-lr')
+                .text(labelText);
         });
     }
-    formatXAxisLabel(label, device) {
-        if (device.isMobile) {
-            // Mobile: truncate longer labels
-            if (label.length > 8) {
-                return label.substring(0, 6) + '...';
-            }
-            return label;
-        }
-        else {
-            // Tablet: slightly longer labels allowed
-            if (label.length > 12) {
-                return label.substring(0, 10) + '...';
-            }
-            return label;
-        }
-    }
     renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions) {
         svg
             .append('g')