axidio-styleguide-library1-v2 0.4.25 → 0.4.26

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

@@ -3490,6 +3490,8 @@ class GroupChartComponent extends ComponentUniqueId {
         const margin = this.chartConfiguration.margin;
         let width = this.calculateWidth(chartContainer, margin);
         let height = this.calculateHeight(verticalstackedcontainer, margin);
+        const minHeight = 300;
+        height = Math.max(height, minHeight);
         return { width, height, margin, chartContainer, verticalstackedcontainer };
     }
     calculateWidth(chartContainer, margin) {
@@ -3514,23 +3516,28 @@ class GroupChartComponent extends ComponentUniqueId {
         return width;
     }
     calculateHeight(verticalstackedcontainer, margin) {
-        let height = parseInt(verticalstackedcontainer.style('height')) *
-            (this.chartConfiguration.svgHeight / 100) -
-            margin.top -
-            margin.bottom;
-        if (this.chartConfiguration.isFullScreen && this.chartConfiguration.svgHeight !== 70) {
-            height = this.chartConfiguration.svgHeight;
+        const containerHeight = parseInt(verticalstackedcontainer.style('height')) || 400;
+        let height;
+        if (this.chartConfiguration.isFullScreen) {
+            height = this.chartConfiguration.svgHeight || containerHeight;
         }
-        else if (this.chartConfiguration.isFullScreen) {
-            height = parseInt(verticalstackedcontainer.style('height'));
+        else {
+            // FIXED: Use percentage of container height more reliably
+            const svgHeightPercentage = this.chartConfiguration.svgHeight || 70;
+            height = (containerHeight * svgHeightPercentage) / 100;
         }
+        // FIXED: Apply margin adjustments consistently
+        height = height - margin.top - margin.bottom;
+        // FIXED: Additional adjustments for headers
         if (this.chartConfiguration.isDrilldownChart && !this.isHeaderVisible) {
-            height = parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 130;
+            height -= 130;
         }
-        if (this.chartConfiguration.isHeaderVisible) {
-            height = parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 100;
+        else if (this.isHeaderVisible) {
+            height -= 100;
         }
-        return height;
+        // FIXED: Add the extra 50px you wanted
+        height += 50;
+        return Math.max(height, 150); // Ensure minimum height
     }
     createScales(chartContext, dimensions) {
         const { data, metaData, lineData, keyList } = chartContext;
@@ -3556,7 +3563,8 @@ class GroupChartComponent extends ComponentUniqueId {
         }
         const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
         const xSubgroup = d3.scaleBand().domain(keyList).range([0, x.bandwidth()]);
-        const maxValue = this.calculateMaxValue(data, keyList);
+        // FIXED: Improved max value calculation that considers height
+        const maxValue = this.calculateMaxValue(data, keyList, height);
         const y = d3.scaleLinear().domain([0, maxValue]).nice().rangeRound([height, 0]);
         let lineYscale = null;
         if (lineData) {
@@ -3574,19 +3582,25 @@ class GroupChartComponent extends ComponentUniqueId {
             rightSvgWidth,
         };
     }
-    calculateMaxValue(data, keyList) {
+    calculateMaxValue(data, keyList, height) {
         let maxValue = d3.max(data, (d) => d3.max(keyList, (key) => +d[key])) || 0;
+        // FIXED: Better handling for zero values
         if (maxValue === 0) {
             maxValue = this.chartData.targetLineData
                 ? this.chartData.targetLineData.target + 20
                 : 100;
         }
+        // FIXED: Scale based on available height
         if (this.chartConfiguration.customYscale) {
             maxValue *= this.chartConfiguration.customYscale;
         }
+        else if (height > 400) {
+            // Auto-scale for larger heights
+            maxValue *= 1.2;
+        }
         if (this.chartData.targetLineData && maxValue < this.chartData.targetLineData.target) {
             const target = this.chartData.targetLineData.target;
-            maxValue = maxValue < 10 && target < 10 ? target + 3 : target + 20;
+            maxValue = maxValue < 10 && target < 10 ? target + 3 : target + (target * 0.2); // 20% buffer
         }
         return maxValue;
     }
@@ -3603,24 +3617,25 @@ class GroupChartComponent extends ComponentUniqueId {
     createSVGStructure(dimensions) {
         const { chartContainer, height, margin } = dimensions;
         const rightSvgWidth = 60;
-        // Calculate proper left SVG width to include label
-        const leftSvgWidth = margin.left + 20;
+        // FIXED: Calculate total height including margins and extra space
+        const totalHeight = height + margin.top + margin.bottom + 60; // Added extra 60px
         const outerContainer = chartContainer
             .append('div')
             .attr('id', this.uniqueId)
             .attr('class', 'outer-container')
             .style('width', '100%')
-            .style('height', `${height + margin.top + margin.bottom}px`)
-            .style('overflow', 'hidden') // FIXED: Prevent all overflow
+            .style('height', `${totalHeight}px`) // Use calculated total height
+            .style('overflow', 'hidden')
             .style('padding-left', `${margin.left}px`)
             .style('padding-right', `${rightSvgWidth}px`)
             .style('margin-left', '15px')
-            .style('position', 'relative'); // FIXED: For absolute positioning
-        // FIXED: Create proper Y-axis SVG with enough space for label
+            .style('position', 'relative');
+        const leftSvgWidth = margin.left + 20;
+        // FIXED: Y-axis SVG with proper height
         const svgYAxisLeft = outerContainer
             .append('svg')
             .attr('width', leftSvgWidth)
-            .attr('height', height + margin.top + margin.bottom)
+            .attr('height', totalHeight)
             .style('position', 'absolute')
             .style('left', '0')
             .style('top', '0')
@@ -3630,7 +3645,7 @@ class GroupChartComponent extends ComponentUniqueId {
         const svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom)
+            .attr('height', totalHeight)
             .style('position', 'absolute')
             .style('right', '12px')
             .style('top', '0')
@@ -3641,16 +3656,17 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('div')
             .attr('class', 'inner-container')
             .style('width', '100%')
-            .style('height', '100%')
+            .style('height', `${totalHeight}px`) // Match outer container height
             .style('overflow-x', 'auto')
             .style('overflow-y', 'hidden');
+        // FIXED: Main SVG with increased height
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.width - rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 60)
+            .attr('height', totalHeight) // Use total height
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
-        return { outerContainer, svgYAxisLeft, svgYAxisRight, svg };
+        return { outerContainer, svgYAxisLeft, svgYAxisRight, svg, totalHeight };
     }
     renderAxes(svgElements, scales, chartContext, dimensions) {
         const { svg, svgYAxisLeft, svgYAxisRight } = svgElements;
@@ -3900,9 +3916,17 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('class', 'bars')
             .on('click', (d) => this.handleBarClick(d, metaData))
             .attr('x', (d) => this.getBarX(d, data, x, xSubgroup))
-            .attr('y', (d) => y(d.value))
+            .attr('y', (d) => {
+            // FIXED: Ensure bars start from correct Y position
+            const value = d.value === -1 ? 0 : d.value;
+            return y(value);
+        })
             .attr('width', (d) => this.getBarWidth(d, data, x, xSubgroup))
-            .attr('height', (d) => this.getBarHeight(d, y, height))
+            .attr('height', (d) => {
+            // FIXED: Improved height calculation
+            const value = d.value === -1 ? 0 : d.value;
+            return height - y(value);
+        })
             .style('cursor', (d) => (metaData.hasDrillDown && !isRia ? 'pointer' : 'default'))
             .attr('fill', (d) => this.getBarColor(d, metaData));
         if (!isRia && (this.chartConfiguration.displayTitleOnTop || (!this.chartConfiguration.textsOnBar && !this.chartConfiguration.displayTitleOnTop))) {