axidio-styleguide-library1-v2 0.4.16 → 0.4.17

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

@@ -3388,10 +3388,10 @@ class GroupChartComponent extends ComponentUniqueId {
         this.objectKeys = Object.keys;
         this.defaultConfiguration = {
             margin: {
-                top: 15, // FIXED: Reduced for 250px height
+                top: 10, // FIXED: Further reduced for tighter fit
                 right: 40,
-                bottom: 50, // FIXED: Reduced for 250px height
-                left: 95 // FIXED: Enough space for label + values
+                bottom: 45, // FIXED: Reduced for chart to fit inside box
+                left: 110 // FIXED: Increased to accommodate label + gap + values
             },
             labelFormatter: ChartHelper.defaultFormatter,
             svgHeight: 70,
@@ -3458,12 +3458,6 @@ class GroupChartComponent extends ComponentUniqueId {
         for (const key in this.defaultConfiguration) {
             this.chartConfiguration[key] = ChartHelper.getValueByConfigurationType(key, this.defaultConfiguration, this.customChartConfiguration);
         }
-        if (this.customChartConfiguration?.margin) {
-            this.chartConfiguration.margin = {
-                ...this.defaultConfiguration.margin,
-                ...this.customChartConfiguration.margin
-            };
-        }
         if (this.chartConfiguration.isHeaderVisible !== undefined) {
             this.isHeaderVisible = this.chartConfiguration.isHeaderVisible;
         }
@@ -3520,36 +3514,28 @@ class GroupChartComponent extends ComponentUniqueId {
         return width;
     }
     calculateHeight(verticalstackedcontainer, margin) {
-        // FIXED: Remove minimum height constraint to respect container size
-        let containerHeight = parseInt(verticalstackedcontainer.style('height'));
-        let height = containerHeight *
+        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 - margin.top - margin.bottom;
+            height = this.chartConfiguration.svgHeight;
         }
         else if (this.chartConfiguration.isFullScreen) {
-            height = containerHeight - margin.top - margin.bottom;
+            height = parseInt(verticalstackedcontainer.style('height'));
         }
         if (this.chartConfiguration.isDrilldownChart && !this.isHeaderVisible) {
-            height = containerHeight - margin.top - margin.bottom - 130;
+            height = parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 130;
         }
         if (this.chartConfiguration.isHeaderVisible) {
-            height = containerHeight - margin.top - margin.bottom - 100;
-        }
-        // FIXED: For fixed height containers (like 300px), ensure it fits
-        if (!this.chartConfiguration.isFullScreen && !this.chartConfiguration.isDrilldownChart) {
-            height = containerHeight - margin.top - margin.bottom;
+            height = parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 100;
         }
         return height;
     }
     createScales(chartContext, dimensions) {
         const { data, metaData, lineData, keyList } = chartContext;
         const { width, height, margin } = dimensions;
-        // FIXED: Reduce spaces for better bar distribution
-        const dataLength = data.length;
-        const leftAndRightSpaces = dataLength <= 5 ? 20 : (dataLength <= 10 ? 35 : 50);
+        const leftAndRightSpaces = 50;
         const rightSvgWidth = 60;
         const groups = d3.map(data, (d) => d.name).keys();
         let x;
@@ -3566,7 +3552,7 @@ class GroupChartComponent extends ComponentUniqueId {
                 .scaleBand()
                 .domain(groups)
                 .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
-                .padding(dataLength <= 5 ? 0.4 : 0.3); // FIXED: Better padding for fewer bars
+                .padding(0.3);
         }
         const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
         const xSubgroup = d3.scaleBand().domain(keyList).range([0, x.bandwidth()]);
@@ -3617,33 +3603,37 @@ 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;
         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-x', 'hidden')
-            .style('overflow-y', 'hidden')
+            .style('overflow', 'hidden') // FIXED: Prevent all overflow
             .style('padding-left', `${margin.left}px`)
             .style('padding-right', `${rightSvgWidth}px`)
-            .style('margin-left', '15px');
-        // FIXED: Position Y-axis to show label properly
+            .style('margin-left', '15px')
+            .style('position', 'relative'); // FIXED: For absolute positioning
+        // FIXED: Create proper Y-axis SVG with enough space for label
         const svgYAxisLeft = outerContainer
             .append('svg')
-            .attr('width', margin.left + 15) // FIXED: Width matches left margin
+            .attr('width', leftSvgWidth)
             .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
-            .style('left', '-15px') // FIXED: Position to include label
+            .style('left', '0')
+            .style('top', '0')
             .style('z-index', 1)
             .append('g')
-            .attr('transform', `translate(${margin.left},${margin.top})`); // FIXED: Proper transform
+            .attr('transform', `translate(${margin.left + 5},${margin.top})`);
         const svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', rightSvgWidth)
             .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
             .style('right', '12px')
+            .style('top', '0')
             .style('z-index', 1)
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
@@ -3682,26 +3672,26 @@ class GroupChartComponent extends ComponentUniqueId {
     renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList) {
         const { data, metaData } = chartContext;
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            // FIXED: X-axis with bottom line
             const xAxis = svg
                 .append('g')
                 .attr('class', 'x1 axis1')
                 .attr('transform', `translate(0,${height})`)
                 .call(d3.axisBottom(x).tickSize(0));
-            // FIXED: Keep X-axis line visible
+            // FIXED: Show X-axis line
             xAxis
                 .select('.domain')
-                .style('stroke', 'var(--chart-axis-color, #999999)')
-                .style('stroke-width', '1px');
+                .style('stroke', 'var(--chart-axis-color, #CCCCCC)')
+                .style('stroke-width', '1px')
+                .style('display', 'block');
             xAxis.selectAll('g.tick line').remove();
             const textClass = 'lib-xaxis-labels-texts-drilldown';
             const textSelection = xAxis
                 .selectAll('g.tick text')
                 .attr('class', textClass)
-                .style('fill', 'var(--chart-text-color)')
-                .style('font-size', '12px');
+                .style('fill', 'var(--chart-text-color, #666666)')
+                .style('font-size', '11px');
             if (keyList.length > 1 && !metaData.xLabel) {
-                textSelection.attr('y', 32);
+                textSelection.attr('y', 28);
             }
         }
         else {
@@ -3710,17 +3700,16 @@ class GroupChartComponent extends ComponentUniqueId {
         if (this.chartConfiguration.xLabelsOnSameLine) {
             this.renderXLabelsOnSameLine(svg, data, metaData);
         }
-        // Bottom x-axis with line
+        // Bottom x-axis
         const xAxis2 = svg
             .append('g')
             .attr('class', 'x2 axis2')
             .attr('transform', `translate(0,${height})`)
             .style('color', '#000')
             .call(d3.axisBottom(xScaleFromOrigin).tickSize(0));
-        // FIXED: Show X-axis line
         xAxis2
             .select('.domain')
-            .style('stroke', 'var(--chart-axis-color, #999999)')
+            .style('stroke', 'var(--chart-axis-color, #CCCCCC)')
             .style('stroke-width', '1px')
             .attr('fill', 'none');
         svg.selectAll('g.x2.axis2 g.tick text').style('display', 'none');
@@ -3799,7 +3788,7 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('transform', 'translate(0,0)')
             .call(y)
             .style('display', 'none');
-        // FIXED: Left Y-axis with proper positioning
+        // FIXED: Left Y-axis with visible line
         const yAxisLeft = d3
             .axisLeft(y)
             .tickSize(0)
@@ -3811,18 +3800,20 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('style', this.chartConfiguration.yAxisCustomTextStyles)
             .attr('transform', 'translate(0,0)')
             .call(yAxisLeft);
-        // FIXED: Add Y-axis vertical line
+        // FIXED: Show Y-axis vertical line
         yAxisGroup
             .select('.domain')
-            .style('stroke', 'var(--chart-axis-color, #999999)')
-            .style('stroke-width', '1px');
-        // FIXED: Style Y-axis text with proper positioning
+            .style('stroke', 'var(--chart-axis-color, #CCCCCC)')
+            .style('stroke-width', '1px')
+            .style('display', 'block');
+        // FIXED: Position Y-axis values with proper spacing
         yAxisGroup
             .selectAll('text')
-            .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '12px')
+            .style('fill', 'var(--chart-text-color, #666666)')
+            .style('font-size', '11px')
             .style('font-weight', '400')
-            .attr('x', -8) // FIXED: Slight offset from axis line
+            .attr('x', -6) // FIXED: Small gap from axis line
+            .attr('text-anchor', 'end')
             .attr('dy', '0.32em');
         // Right Y-axis (hidden)
         svgYAxisRight
@@ -3840,12 +3831,16 @@ class GroupChartComponent extends ComponentUniqueId {
         }
         if (this.chartConfiguration.isYaxisLabelHidden) {
             d3.selectAll('.yaxis-dashed > g > text').attr('class', 'lib-display-hidden');
+            // FIXED: Don't hide the Y-axis label element
+            d3.selectAll('.lib-ylabel-visible').style('display', 'block');
         }
         if (this.chartConfiguration.isYaxisHidden) {
             d3.selectAll('.yaxis-dashed').attr('class', 'lib-display-hidden');
+            // FIXED: Keep Y-axis label visible
+            d3.selectAll('.lib-ylabel-visible').style('display', 'block');
         }
         if (this.chartConfiguration.isYaxisDashed) {
-            d3.selectAll('.yaxis-dashed').style('stroke-dasharray', '5 5').style('color', '#999999');
+            d3.selectAll('.yaxis-dashed .domain').style('stroke-dasharray', '5 5').style('color', '#999999');
         }
     }
     renderYAxisGrid(svg, y, width) {
@@ -3856,8 +3851,8 @@ class GroupChartComponent extends ComponentUniqueId {
             .ticks(this.chartConfiguration.numberOfYTicks)
             .tickSize(-width)
             .tickFormat(''))
-            .style('color', '#E8E8E8')
-            .style('opacity', '0.8')
+            .style('color', '#EEEEEE') // FIXED: Lighter grid
+            .style('opacity', '0.7')
             .style('stroke-dasharray', 'none')
             .call((g) => g.select('.domain').remove())
             .selectAll('line')
@@ -4132,26 +4127,26 @@ class GroupChartComponent extends ComponentUniqueId {
         }
     }
     renderYAxisLabel(svgYAxisLeft, yLabel, height, margin) {
+        // FIXED: Proper Y-axis label with correct positioning
         svgYAxisLeft
             .append('text')
-            .attr('class', 'lib-axis-group-label font-size-1')
+            .attr('class', 'lib-axis-group-label lib-ylabel-visible')
             .attr('style', this.chartConfiguration.yAxisCustomlabelStyles)
             .attr('transform', 'rotate(-90)')
-            // FIXED: Proper positioning for label
-            .attr('y', -70) // FIXED: Distance from Y-axis
+            .attr('y', -margin.left + 15) // FIXED: Position relative to left margin
             .attr('x', 0 - height / 2)
             .attr('dy', '1em')
             .style('text-anchor', 'middle')
-            .style('font-size', '12px')
+            .style('font-size', '11px')
             .style('font-weight', '400')
-            .attr('fill', 'var(--chart-text-color)');
+            .style('fill', 'var(--chart-text-color, #666666)');
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
             svgYAxisLeft.selectAll('.lib-axis-group-label').text(yLabel);
         }
         else {
             svgYAxisLeft
                 .selectAll('.lib-axis-group-label')
-                .attr('class', 'lib-ylabel-weeklyCharts')
+                .attr('class', 'lib-ylabel-weeklyCharts lib-ylabel-visible')
                 .text(yLabel.toLowerCase());
         }
     }
@@ -4171,11 +4166,11 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('text')
             .attr('class', baseClass)
             .attr('style', this.chartConfiguration.xAxisCustomlabelStyles)
-            // FIXED: Adjusted for 250px height
-            .attr('transform', `translate(${width / 2},${height + 35})`)
+            // FIXED: Adjusted for reduced bottom margin
+            .attr('transform', `translate(${width / 2},${height + 32})`)
             .style('text-anchor', 'middle')
-            .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '12px')
+            .style('fill', 'var(--chart-text-color, #666666)')
+            .style('font-size', '11px')
             .text(isAcronym ? xLabel.toUpperCase() : xLabel.toLowerCase())
             .style('text-transform', isAcronym ? 'none' : 'capitalize');
     }