axidio-styleguide-library1-v2 0.4.15 → 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: 20, // FIXED: Reduced top margin
+                top: 10, // FIXED: Further reduced for tighter fit
                 right: 40,
-                bottom: 60, // FIXED: Reduced from 80 to 60 to fit in 300px
-                left: 100 // FIXED: Increased to 100 for Y-axis label + values spacing
+                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`) // FIXED: Explicit height
-            .style('overflow-x', 'hidden')
-            .style('overflow-y', 'hidden') // FIXED: Prevent vertical overflow
+            .style('height', `${height + margin.top + margin.bottom}px`)
+            .style('overflow', 'hidden') // FIXED: Prevent all overflow
             .style('padding-left', `${margin.left}px`)
             .style('padding-right', `${rightSvgWidth}px`)
-            .style('margin-left', '15px');
-        // FIXED: Increased width for Y-axis to prevent overlap
+            .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', 100) // Keep at 100
+            .attr('width', leftSvgWidth)
             .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
             .style('left', '0')
+            .style('top', '0')
             .style('z-index', 1)
             .append('g')
-            .attr('transform', `translate(${margin.left - 5},${margin.top})`); // FIXED: Adjusted 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})`);
@@ -3651,13 +3641,13 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('div')
             .attr('class', 'inner-container')
             .style('width', '100%')
-            .style('height', '100%') // FIXED: Full height
+            .style('height', '100%')
             .style('overflow-x', 'auto')
-            .style('overflow-y', 'hidden'); // FIXED: Prevent vertical scroll
+            .style('overflow-y', 'hidden');
         const svg = innerContainer
             .append('svg')
             .attr('width', dimensions.width - rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom) // FIXED: Exact height
+            .attr('height', height + margin.top + margin.bottom)
             .append('g')
             .attr('transform', `translate(0,${margin.top})`);
         return { outerContainer, svgYAxisLeft, svgYAxisRight, svg };
@@ -3682,17 +3672,26 @@ class GroupChartComponent extends ComponentUniqueId {
     renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList) {
         const { data, metaData } = chartContext;
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            svg
+            const xAxis = svg
                 .append('g')
                 .attr('class', 'x1 axis1')
                 .attr('transform', `translate(0,${height})`)
-                .call(d3.axisBottom(x))
-                .call((g) => g.select('.domain').remove());
-            svg.selectAll('g.x1.axis1 g.tick line').remove();
+                .call(d3.axisBottom(x).tickSize(0));
+            // FIXED: Show X-axis line
+            xAxis
+                .select('.domain')
+                .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 = svg.selectAll('g.x1.axis1 g.tick text').attr('class', textClass).style('fill', 'var(--chart-text-color)');
+            const textSelection = xAxis
+                .selectAll('g.tick text')
+                .attr('class', textClass)
+                .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 {
@@ -3701,14 +3700,18 @@ class GroupChartComponent extends ComponentUniqueId {
         if (this.chartConfiguration.xLabelsOnSameLine) {
             this.renderXLabelsOnSameLine(svg, data, metaData);
         }
-        // Render bottom x-axis
-        svg
+        // 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))
-            .call((g) => g.select('.domain').attr('fill', 'none'));
+            .call(d3.axisBottom(xScaleFromOrigin).tickSize(0));
+        xAxis2
+            .select('.domain')
+            .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');
         if (this.isZoomedOut) {
             svg.selectAll('.lib-xaxis-labels-texts-drilldown').attr('class', 'lib-display-hidden');
@@ -3777,6 +3780,7 @@ class GroupChartComponent extends ComponentUniqueId {
         });
     }
     renderYAxis(svg, svgYAxisLeft, svgYAxisRight, y, dimensions) {
+        // Main Y-axis in chart area (hidden)
         svg
             .append('g')
             .attr('class', 'lib-stacked-y-axis-text yaxis-dashed')
@@ -3784,26 +3788,34 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('transform', 'translate(0,0)')
             .call(y)
             .style('display', 'none');
+        // FIXED: Left Y-axis with visible line
         const yAxisLeft = d3
             .axisLeft(y)
             .tickSize(0)
             .ticks(this.chartConfiguration.numberOfYTicks)
             .tickFormat(this.chartConfiguration.yAxisLabelFomatter);
-        svgYAxisLeft
-            .append('g')
+        const yAxisGroup = svgYAxisLeft
             .append('g')
             .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
             .attr('style', this.chartConfiguration.yAxisCustomTextStyles)
             .attr('transform', 'translate(0,0)')
-            .call(yAxisLeft)
-            .call((g) => g.select('.domain').remove())
+            .call(yAxisLeft);
+        // FIXED: Show Y-axis vertical line
+        yAxisGroup
+            .select('.domain')
+            .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', -10) // FIXED: Move Y-axis values slightly right to create gap
+            .attr('x', -6) // FIXED: Small gap from axis line
+            .attr('text-anchor', 'end')
             .attr('dy', '0.32em');
-        svgYAxisLeft.selectAll('.tick line').remove();
+        // Right Y-axis (hidden)
         svgYAxisRight
             .append('g')
             .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
@@ -3819,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) {
@@ -3835,12 +3851,12 @@ class GroupChartComponent extends ComponentUniqueId {
             .ticks(this.chartConfiguration.numberOfYTicks)
             .tickSize(-width)
             .tickFormat(''))
-            .style('color', '#E8E8E8') // FIXED: Very light gray
-            .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')
-            .style('stroke-width', '0.5px'); // FIXED: Thinner lines
+            .style('stroke-width', '0.5px');
     }
     renderXAxisGrid(svg, x, height) {
         svg
@@ -4111,25 +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 with adequate spacing from Y-axis values
-            .attr('y', -65) // FIXED: Moved further left to avoid overlap (was: -margin.left + 10)
+            .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', '13px')
-            .attr('fill', 'var(--chart-text-color)');
+            .style('font-size', '11px')
+            .style('font-weight', '400')
+            .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());
         }
     }
@@ -4149,11 +4166,11 @@ class GroupChartComponent extends ComponentUniqueId {
             .append('text')
             .attr('class', baseClass)
             .attr('style', this.chartConfiguration.xAxisCustomlabelStyles)
-            // FIXED: Adjusted for smaller bottom margin
-            .attr('transform', `translate(${width / 2},${height + 40})`)
+            // 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', '13px')
+            .style('fill', 'var(--chart-text-color, #666666)')
+            .style('font-size', '11px')
             .text(isAcronym ? xLabel.toUpperCase() : xLabel.toLowerCase())
             .style('text-transform', isAcronym ? 'none' : 'capitalize');
     }