axidio-styleguide-library1-v2 0.2.41 → 0.2.43

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

@@ -6488,11 +6488,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             LONG_TICK_LENGTH: 16,
             SHORT_TICK_LENGTH_BG: 5,
             LONG_TICK_LENGTH_BG: 30,
-            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
+            // 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
             ZOOM_THRESHOLD: 30,
             ZOOM_IN_THRESHOLD: 8,
         };
@@ -6560,40 +6566,36 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     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
+            isMobile: width < 768,
+            isTablet: width >= 768 && width < 1024,
+            isDesktop: width >= 1024,
         };
     }
     configureResponsiveSettings(device) {
         if (device.isMobile) {
-            this.chartConfiguration.margin = { top: 15, right: 5, bottom: 35, left: 25 };
+            this.chartConfiguration.margin = { top: 20, right: 10, bottom: 50, left: 30 };
             this.chartConfiguration.numberOfYTicks = 4;
-            this.chartConfiguration.svgHeight = 55;
+            this.chartConfiguration.svgHeight = 60;
         }
         else if (device.isTablet) {
-            this.chartConfiguration.margin = { top: 20, right: 15, bottom: 40, left: 35 };
+            this.chartConfiguration.margin = { top: 25, right: 20, bottom: 55, left: 45 };
             this.chartConfiguration.numberOfYTicks = 5;
-            this.chartConfiguration.svgHeight = 65;
+            this.chartConfiguration.svgHeight = 70;
         }
         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.margin = { top: 35, right: 35, bottom: 60, 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.margin = { top: 30, right: 30, bottom: 55, 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.margin = { top: 25, right: 25, bottom: 50, left: 50 };
                 this.chartConfiguration.numberOfYTicks = 6;
                 this.chartConfiguration.svgHeight = 75;
             }
@@ -6622,20 +6624,33 @@ 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;
-        // Responsive zoom handling
+        // 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
         if (dataLength > this.CONSTANTS.ZOOM_THRESHOLD && this.isZoomedOut) {
             const minWidth = device.isMobile
-                ? dataLength * 12
+                ? dataLength * 15
                 : device.isTablet
-                    ? dataLength * 20
-                    : dataLength * 25;
+                    ? dataLength * 25
+                    : dataLength * 30;
             width = Math.max(width, minWidth);
         }
         if (dataLength > this.CONSTANTS.ZOOM_IN_THRESHOLD && !this.isZoomedOut) {
             width = device.isMobile
-                ? dataLength * 50
+                ? dataLength * 60
                 : device.isTablet
-                    ? dataLength * 90
+                    ? dataLength * 100
                     : dataLength * 130;
         }
         if (this.chartConfiguration.isFullScreen) {
@@ -6644,7 +6659,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 : containerHeight;
         }
         if (this.chartConfiguration.isDrilldownChart) {
-            const offset = device.isMobile ? 60 : device.isTablet ? 90 : 130;
+            const offset = device.isMobile ? 70 : device.isTablet ? 100 : 130;
             height = containerHeight - margin.top - margin.bottom - offset;
         }
         let barWidth;
@@ -6653,16 +6668,21 @@ 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);
+            // 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);
         }
         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 totalBarSpace = (barWidth + barPadding) * dataLength;
+            requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, totalBarSpace + this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
         }
         else {
-            barWidth = Math.max(this.CONSTANTS.DESKTOP_MIN_BAR_WIDTH, (width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES * 2) / dataLength);
+            // 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
+            );
             barPadding = 0;
             requiredSvgWidth = width - this.CONSTANTS.RIGHT_SVG_WIDTH;
         }
@@ -6719,9 +6739,18 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         return { svg, svgYAxisLeft, svgYAxisRight, innerContainer };
     }
     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 { 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 xScale = d3
             .scaleBand()
             .rangeRound([
@@ -6729,7 +6758,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES
         ])
             .domain(data.map(d => d.name).reverse())
-            .padding(padding);
+            .padding(padding)
+            .paddingOuter(0.2); // Extra padding on the outer edges
         const xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - this.CONSTANTS.RIGHT_SVG_WIDTH, 0])
@@ -6814,9 +6844,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return 0;
         })
             .attr('x', (d, i) => {
-            if (device.isMobile) {
+            if (device.isMobile || device.isTablet) {
+                // For mobile and tablet: use manual positioning with exact spacing
                 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);
             }
@@ -6833,10 +6865,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             return 0;
         })
             .attr('width', (d) => {
-            if (device.isMobile)
+            if (device.isMobile || device.isTablet) {
+                // Fixed width for mobile/tablet
                 return barWidth;
-            if (!this.chartConfiguration.isMultiChartGridLine)
+            }
+            // Dynamic width for desktop
+            if (!this.chartConfiguration.isMultiChartGridLine) {
                 return xScale.bandwidth();
+            }
             if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
                 return 70;
             }
@@ -6893,14 +6929,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (isNaN(value))
             return;
         const device = this.getDeviceConfig();
-        const bandwidth = xScale.bandwidth();
-        // Responsive tooltip width
+        const bandwidth = device.isMobile || device.isTablet
+            ? this.CONSTANTS.MIN_MOBILE_BAR_WIDTH
+            : xScale.bandwidth();
+        // Responsive tooltip width with better sizing
         let width;
         if (device.isMobile) {
-            width = Math.min(bandwidth + 40, 150);
+            width = Math.min(120, bandwidth * 2);
         }
         else if (device.isTablet) {
-            width = Math.min(bandwidth + 60, 200);
+            width = Math.min(160, bandwidth * 1.8);
         }
         else {
             width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
@@ -6909,9 +6947,16 @@ 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', this.calculateTooltipX(d, xScale, width))
+            .attr('x', xPosition)
             .attr('class', 'lib-verticalstack-title-ontop')
             .attr('y', yScale(d[1]) - 51)
             .attr('width', width)
@@ -7110,10 +7155,12 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.applyAxisConfigurations(svg, scales, dimensions, data);
     }
     renderStandardAxes(svg, axes, scales, dimensions, device, data) {
-        if (device.isMobile) {
-            this.renderMobileXAxis(svg, data, dimensions);
+        if (device.isMobile || device.isTablet) {
+            // Use custom rendering for mobile and tablet
+            this.renderMobileXAxis(svg, data, dimensions, device);
         }
         else {
+            // Standard desktop rendering
             svg
                 .append('g')
                 .attr('transform', `translate(0,${dimensions.height})`)
@@ -7127,6 +7174,7 @@ 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')
@@ -7135,27 +7183,48 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)');
     }
-    renderMobileXAxis(svg, data, dimensions) {
+    renderMobileXAxis(svg, data, dimensions, device) {
         svg.selectAll('.custom-x-label').remove();
-        const maxLength = Math.max(...data.map(d => d.name.length));
-        const fontSize = maxLength > 10 ? '8px' : '10px';
+        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;
         data.forEach((d, i) => {
-            const xVal = this.CONSTANTS.LEFT_RIGHT_SPACES +
-                i * (dimensions.barWidth + dimensions.barPadding) +
-                dimensions.barWidth / 2;
-            svg
+            const xPosition = this.CONSTANTS.LEFT_RIGHT_SPACES +
+                i * (barWidth + barPadding) +
+                barWidth / 2;
+            const label = 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)
+                .attr('x', xPosition)
+                .attr('y', dimensions.height + (shouldRotate ? 12 : 20))
+                .attr('text-anchor', shouldRotate ? 'end' : 'middle')
+                .style('font-size', device.isMobile ? '9px' : '10px')
                 .style('fill', 'var(--chart-text-color)')
-                .style('writing-mode', 'sideways-lr')
-                .text(d.name.length > 6 ? d.name.substring(0, 4) + '...' : d.name);
+                .text(this.formatXAxisLabel(d.name, device));
+            if (shouldRotate) {
+                label
+                    .attr('transform', `rotate(-45, ${xPosition}, ${dimensions.height + 12})`)
+                    .attr('dx', '-0.5em');
+            }
         });
     }
+    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')