axidio-styleguide-library1-v2 0.4.15 → 0.4.16

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: 15, // FIXED: Reduced for 250px height
                 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: 50, // FIXED: Reduced for 250px height
+                left: 95 // FIXED: Enough space for label + values
             },
             labelFormatter: ChartHelper.defaultFormatter,
             svgHeight: 70,
@@ -3622,22 +3622,22 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('id', this.uniqueId)
             .attr('class', 'outer-container')
             .style('width', '100%')
-            .style('height', `${height + margin.top + margin.bottom}px`) // FIXED: Explicit height
+            .style('height', `${height + margin.top + margin.bottom}px`)
             .style('overflow-x', 'hidden')
-            .style('overflow-y', 'hidden') // FIXED: Prevent vertical overflow
+            .style('overflow-y', 'hidden')
             .style('padding-left', `${margin.left}px`)
             .style('padding-right', `${rightSvgWidth}px`)
             .style('margin-left', '15px');
-        // FIXED: Increased width for Y-axis to prevent overlap
+        // FIXED: Position Y-axis to show label properly
         const svgYAxisLeft = outerContainer
             .append('svg')
-            .attr('width', 100) // Keep at 100
+            .attr('width', margin.left + 15) // FIXED: Width matches left margin
             .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
-            .style('left', '0')
+            .style('left', '-15px') // FIXED: Position to include label
             .style('z-index', 1)
             .append('g')
-            .attr('transform', `translate(${margin.left - 5},${margin.top})`); // FIXED: Adjusted transform
+            .attr('transform', `translate(${margin.left},${margin.top})`); // FIXED: Proper transform
         const svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', rightSvgWidth)
@@ -3651,13 +3651,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,15 +3682,24 @@ class GroupChartComponent extends ComponentUniqueId {
     renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList) {
         const { data, metaData } = chartContext;
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
-            svg
+            // FIXED: X-axis with bottom line
+            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: Keep X-axis line visible
+            xAxis
+                .select('.domain')
+                .style('stroke', 'var(--chart-axis-color, #999999)')
+                .style('stroke-width', '1px');
+            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)')
+                .style('font-size', '12px');
             if (keyList.length > 1 && !metaData.xLabel) {
                 textSelection.attr('y', 32);
             }
@@ -3701,14 +3710,19 @@ class GroupChartComponent extends ComponentUniqueId {
         if (this.chartConfiguration.xLabelsOnSameLine) {
             this.renderXLabelsOnSameLine(svg, data, metaData);
         }
-        // Render bottom x-axis
-        svg
+        // Bottom x-axis with line
+        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));
+        // FIXED: Show X-axis line
+        xAxis2
+            .select('.domain')
+            .style('stroke', 'var(--chart-axis-color, #999999)')
+            .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 +3791,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 +3799,32 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('transform', 'translate(0,0)')
             .call(y)
             .style('display', 'none');
+        // FIXED: Left Y-axis with proper positioning
         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: Add 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
+        yAxisGroup
             .selectAll('text')
             .style('fill', 'var(--chart-text-color)')
             .style('font-size', '12px')
             .style('font-weight', '400')
-            .attr('x', -10) // FIXED: Move Y-axis values slightly right to create gap
+            .attr('x', -8) // FIXED: Slight offset from axis line
             .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')
@@ -3835,12 +3856,12 @@ class GroupChartComponent extends ComponentUniqueId {
             .ticks(this.chartConfiguration.numberOfYTicks)
             .tickSize(-width)
             .tickFormat(''))
-            .style('color', '#E8E8E8') // FIXED: Very light gray
+            .style('color', '#E8E8E8')
             .style('opacity', '0.8')
             .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
@@ -4116,12 +4137,13 @@ class GroupChartComponent extends ComponentUniqueId {
             .attr('class', 'lib-axis-group-label font-size-1')
             .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)
+            // FIXED: Proper positioning for label
+            .attr('y', -70) // FIXED: Distance from Y-axis
             .attr('x', 0 - height / 2)
             .attr('dy', '1em')
             .style('text-anchor', 'middle')
-            .style('font-size', '13px')
+            .style('font-size', '12px')
+            .style('font-weight', '400')
             .attr('fill', 'var(--chart-text-color)');
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
             svgYAxisLeft.selectAll('.lib-axis-group-label').text(yLabel);
@@ -4149,11 +4171,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 250px height
+            .attr('transform', `translate(${width / 2},${height + 35})`)
             .style('text-anchor', 'middle')
             .style('fill', 'var(--chart-text-color)')
-            .style('font-size', '13px')
+            .style('font-size', '12px')
             .text(isAcronym ? xLabel.toUpperCase() : xLabel.toLowerCase())
             .style('text-transform', isAcronym ? 'none' : 'capitalize');
     }