axidio-styleguide-library1-v2 0.3.2 → 0.3.4

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

@@ -6576,10 +6576,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     calculateDimensions(chartContainer, verticalContainer, margin, dataLength) {
         const containerWidth = chartContainer.node().getBoundingClientRect().width;
         const containerHeight = verticalContainer.node().getBoundingClientRect().height;
-        const leftAxisWidth = margin.left;
+        const leftAxisWidth = 80;
         const rightAxisWidth = this.CONSTANTS.RIGHT_SVG_WIDTH;
         const availableWidth = containerWidth - leftAxisWidth - rightAxisWidth;
-        let width = availableWidth;
+        let width = availableWidth - margin.left - margin.right;
         let height = containerHeight * (this.chartConfiguration.svgHeight / 100) - margin.top - margin.bottom;
         if (dataLength > this.CONSTANTS.ZOOM_THRESHOLD && this.isZoomedOut) {
             const minWidth = dataLength * 25;
@@ -6627,7 +6627,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         const totalBarsWidth = barWidth * dataLength;
         const totalGaps = barPadding * (dataLength - 1);
-        const minRequiredWidth = totalBarsWidth + totalGaps;
+        const minRequiredWidth = totalBarsWidth + totalGaps + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
         const requiredSvgWidth = Math.max(availableWidth, minRequiredWidth);
         return {
             width,
@@ -6640,6 +6640,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         };
     }
     createSvgContainers(chartContainer, dimensions, margin) {
+        // Main wrapper
         const chartWrapper = chartContainer
             .append('div')
             .attr('id', this.uniqueId)
@@ -6654,16 +6655,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('position', 'absolute')
             .style('left', '0')
             .style('top', '0')
-            .style('width', `${margin.left}px`)
+            .style('width', '80px')
             .style('height', `${dimensions.height + margin.top + margin.bottom}px`)
             .style('background-color', 'var(--card-bg)')
             .style('z-index', '10');
         const svgYAxisLeft = leftAxisContainer
             .append('svg')
-            .attr('width', margin.left)
+            .attr('width', '80')
             .attr('height', dimensions.height + margin.top + margin.bottom)
             .append('g')
-            .attr('transform', `translate(${margin.left - 5},${margin.top})`);
+            .attr('transform', `translate(${margin.left + 10},${margin.top})`);
         // Right Y-axis - Fixed
         const rightAxisContainer = chartWrapper
             .append('div')
@@ -6686,7 +6687,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .append('div')
             .attr('class', 'scrollable-chart-container')
             .style('position', 'absolute')
-            .style('left', `${margin.left}px`)
+            .style('left', '80px')
             .style('right', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`)
             .style('top', '0')
             .style('width', 'auto')
@@ -6707,18 +6708,19 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     }
     createScales(data, layers, lineData, dimensions) {
         const { width, height, barWidth, barPadding } = dimensions;
+        // Calculate bar positioning
         const totalBarsWidth = data.length * barWidth;
         const totalSpacing = (data.length - 1) * barPadding;
-        const requiredWidth = totalBarsWidth + totalSpacing;
+        const requiredWidth = totalBarsWidth + totalSpacing + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
         const effectiveWidth = Math.max(width, requiredWidth);
         const paddingRatio = barPadding / (barWidth + barPadding);
-        // X-scale starts from 0, no gaps
+        // X-scale starts from 0 (no left spacing for grid alignment)
         const xScale = d3
             .scaleBand()
-            .rangeRound([0, dimensions.requiredSvgWidth])
+            .rangeRound([0, dimensions.requiredSvgWidth]) // Full width from 0
             .domain(data.map(d => d.name).reverse())
             .paddingInner(paddingRatio)
-            .paddingOuter(0.1)
+            .paddingOuter(0.5)
             .align(0.5);
         const xScaleFromOrigin = d3
             .scaleBand()
@@ -6930,8 +6932,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             this.addYAxisLabel(svgYAxisLeft, metaData.yLabel, dimensions.height, margin);
         }
         if (metaData.xLabel) {
-            // Add X-axis label to the scrollable SVG
-            this.addXAxisLabel(svg, metaData.xLabel, dimensions.requiredSvgWidth, dimensions.height, margin);
+            this.addXAxisLabel(svg, metaData.xLabel, dimensions.width, dimensions.height, margin);
         }
     }
     addYAxisLabel(svgYAxisLeft, label, height, margin) {
@@ -6956,8 +6957,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         const isria = this.customChartConfiguration?.isRia;
         const isAcronym = this.isAcronymLabel(label);
         const xPosition = isria
-            ? height + margin.top + margin.bottom - 5
-            : height + margin.top + margin.bottom + 5;
+            ? height + margin.top + margin.bottom
+            : height + margin.top + margin.bottom + 10;
         svg
             .append('text')
             .attr('class', this.getXAxisLabelClass())
@@ -6965,8 +6966,6 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('transform', `translate(${width / 2},${xPosition})`)
             .style('text-anchor', 'middle')
             .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '12px')
-            .style('font-weight', '600')
             .text(isAcronym ? label.toUpperCase() : label.toLowerCase())
             .style('text-transform', isAcronym ? 'none' : 'capitalize');
     }
@@ -7048,15 +7047,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .call((g) => g.select('.domain').remove());
         }
         if (this.chartConfiguration.yAxisGrid) {
-            // Grid lines start exactly at x=0 to align with Y-axis
+            // Grid lines start from x=0 (no gap with Y-axis)
+            const gridWidth = dimensions.requiredSvgWidth;
             svg
                 .append('g')
                 .attr('class', 'grid horizontal-grid')
-                .attr('transform', 'translate(0,0)')
+                .attr('transform', 'translate(0,0)') // Start from x=0
                 .call(d3
                 .axisLeft(scales.yScale)
                 .ticks(this.chartConfiguration.numberOfYTicks)
-                .tickSize(-dimensions.requiredSvgWidth)
+                .tickSize(-gridWidth)
                 .tickFormat(''))
                 .style('color', 'var(--chart-grid-color)')
                 .style('opacity', '1')
@@ -7099,18 +7099,13 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     }
     renderStandardAxes(svg, axes, scales, dimensions, data) {
         const isMobileOrTablet = window.innerWidth < 1024;
-        // X-axis at the bottom
+        // X-axis with labels
         const xAxisGroup = svg
             .append('g')
             .attr('transform', `translate(0,${dimensions.height})`)
             .attr('class', 'lib-stacked-x-axis-text')
             .call(axes.xAxis);
-        // X-axis line (domain)
-        xAxisGroup
-            .select('.domain')
-            .style('stroke', 'var(--chart-axis-color)')
-            .style('stroke-width', '1px');
-        // X-axis labels
+        // Style X-axis labels
         xAxisGroup
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)')
@@ -7124,13 +7119,19 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 textElement.text(text.substring(0, 10) + '...');
             }
         });
-        // Y-axis (hidden in scrollable area, shown in fixed left container)
+        // Ensure X-axis line is visible
+        xAxisGroup
+            .select('.domain')
+            .style('stroke', 'var(--chart-axis-color)')
+            .style('stroke-width', '1px');
+        // Y-axis
         svg
             .append('g')
-            .attr('class', 'lib-stacked-y-axis-text lib-y-axis-hidden')
+            .attr('class', 'lib-stacked-y-axis-text')
             .attr('style', this.chartConfiguration.yAxisCustomTextStyles)
             .call(axes.yAxis)
-            .style('opacity', '0');
+            .selectAll('text')
+            .style('fill', 'var(--chart-text-color)');
     }
     renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions) {
         svg