axidio-styleguide-library1-v2 0.0.783 → 0.0.785

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

@@ -8419,7 +8419,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             isDisplayBarDetailsAtBottom: undefined,
             howmanyBarDetailsToDisplay: 0,
             barVauleColor: undefined,
-            defaultBarHeight: 2,
+            defaultBarHeight: 4,
         };
         this.uniqueId = this.getUniqueId();
         this.isZoomedOut = false;
@@ -8453,7 +8453,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         return false;
     }
     get isAlertEnabled() {
-        return this.chartConfiguration?.headerMenuOptions?.some((option) => option.id === 'editAlert');
+        return this.chartConfiguration?.headerMenuOptions?.some(option => option.id === 'editAlert');
     }
     initializegroupChart() {
         var self = this;
@@ -8594,7 +8594,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         var svgYAxisLeft = outerContainer
             .append('svg')
             .attr('width', '100')
-            .attr('height', height + margin.top + margin.bottom + 10)
+            .attr('height', (height + margin.top + margin.bottom) + 10)
             .style('position', 'absolute')
             .style('left', '0')
             .style('z-index', 1)
@@ -8603,7 +8603,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         var svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 10)
+            .attr('height', (height + margin.top + margin.bottom) + 10)
             .style('position', 'absolute')
             .style('right', '12px')
             .style('z-index', 1)
@@ -8618,7 +8618,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .append('svg')
             // .attr('id', self.uniqueId)
             .attr('width', width - rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 30)
+            .attr('height', (height + margin.top + margin.bottom) + 30)
             // .call(ChartHelper.responsivefy)
             .append('g')
             .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
@@ -8676,8 +8676,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .call(d3.axisBottom(x))
                 .call((g) => g.select('.domain').remove());
             svg.selectAll('g.x1.axis1 g.tick line').remove();
-            svg
-                .selectAll('g.x1.axis1 g.tick text')
+            svg.selectAll('g.x1.axis1 g.tick text')
                 .attr('class', 'lib-xaxis-labels-texts-drilldown')
                 .style('fill', 'var(--chart-text-color)');
             // .attr('y', function () {
@@ -8764,16 +8763,17 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 }
                 return d.toLowerCase();
             });
-            svg.selectAll('g.x1.axis1 g.tick').each((d) => {
-                // Only append second <text> for non-date labels
-                if (!/\d{2,4}[-\/]/.test(d) && d.trim().indexOf(' ') > -1) {
-                    d3.select(this)
-                        .append('text')
-                        .attr('class', 'lib-xaxis-labels-texts-drilldown')
-                        .attr('y', long_tick_length_bg)
-                        .attr('fill', 'var(--chart-text-color)')
-                        .text(d.trim().substring(d.indexOf(' '), d.length).toLowerCase());
+            svg
+                .selectAll('g.x1.axis1 g.tick')
+                .append('text')
+                .attr('class', 'lib-xaxis-labels-texts-drilldown')
+                .attr('y', long_tick_length_bg)
+                .attr('fill', 'var(--chart-text-color)')
+                .text(function (d) {
+                if (d.trim().indexOf(' ') > -1) {
+                    return d.trim().substring(d.indexOf(' '), d.length).toLowerCase();
                 }
+                return '';
             });
         }
         /**y scale for left y axis */
@@ -8887,14 +8887,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         var xSubgroup = d3.scaleBand().domain(subgroups);
-        if (this.isZoomedOut) {
-            // Wider bars in zoomed-out view
-            xSubgroup.range([0, x.bandwidth()]).padding(0.1);
-        }
-        else {
-            // Narrower bars in zoomed-in view
-            xSubgroup.range([0, x.bandwidth()]).padding(0.3); // Increased padding makes bars narrower
-        }
         if (this.chartConfiguration.isMultiChartGridLine == undefined) {
             xSubgroup.range([0, x.bandwidth()]);
         }
@@ -8987,10 +8979,14 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             if (d.value == -1) {
                 return y(0);
             }
-            if (d.value >= 0) {
-                const barHeight = height - y(d.value);
-                const minHeight = self.chartConfiguration.defaultBarHeight || 2;
-                return barHeight < minHeight ? y(0) - minHeight : y(d.value);
+            if (d.value) {
+                // For values between 0 and 10, position bar at baseline with default height
+                if (d.value <= 10 && d.value >= 0) {
+                    const defaultHeight = self.chartConfiguration.defaultBarHeight || 8;
+                    return y(0) - defaultHeight;
+                }
+                // For values greater than 10, use normal calculated position
+                return y(d.value);
             }
             return y(0);
         })
@@ -9028,19 +9024,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 });
                 return tempScale.bandwidth();
             }
-            if (!self.isZoomedOut) {
-                return xSubgroup.bandwidth() * 0.8; // Reduce width by 20%
-            }
             return xSubgroup.bandwidth();
         })
             .attr('height', function (d) {
             if (d.value == -1) {
                 return height - y(0);
             }
-            if (d.value >= 0) {
-                const barHeight = height - y(d.value);
-                const minHeight = self.chartConfiguration.defaultBarHeight || 2;
-                return Math.max(barHeight, minHeight);
+            if (d.value) {
+                // For values between 0 and 10 (inclusive), use default height
+                if (d.value <= 10 && d.value >= 0) {
+                    return self.chartConfiguration.defaultBarHeight || 8;
+                }
+                // For values greater than 10, use calculated height
+                return height - y(d.value);
             }
             return height - y(0);
         })
@@ -9369,10 +9365,10 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .tickSize(0)
             .ticks(self.chartConfiguration.numberOfYTicks)
             .tickFormat(function (d) {
-            if (self.chartConfiguration.yAxisLabelFomatter) {
-                return self.chartConfiguration.yAxisLabelFomatter(d);
-            }
-            return d;
+            const formatted = self.chartConfiguration.yAxisLabelFomatter
+                ? self.chartConfiguration.yAxisLabelFomatter(d)
+                : d;
+            return formatted >= 1000 ? formatted / 1000 + 'k' : formatted;
         }))
             .call((g) => {
             // Style the domain line for theme support
@@ -9459,7 +9455,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 text.text(null); // Clear current text
                 // Add each word to a new tspan
                 words.forEach((word, index) => {
-                    text.append('tspan').text(word);
+                    text.append('tspan')
+                        .text(word);
                     // .attr('x', '15')
                     // .attr('dy', index === 0 ? '0em' : '0.9em') // Reduced vertical spacing
                     // .attr('text-anchor', 'end');
@@ -9468,8 +9465,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .style('fill', 'var(--chart-text-color)')
                 .attr('transform', null); // Remove rotate if using line breaks
             // Optional: Adjust bottom margin or chart layout
-            svg
-                .select('.x-axis')
+            svg.select('.x-axis')
                 .attr('transform', `translate(0, ${height - margin.bottom + 10})`);
         }
         /**
@@ -9481,7 +9477,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('class', 'lib-axis-group-label font-size-1')
                 .attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
                 .attr('transform', 'rotate(-90)')
-                .attr('y', 0 - margin.left / 2 - 30)
+                .attr('y', 0 - (margin.left / 2) - 30)
                 .attr('x', 0 - height / 2)
                 .attr('dy', '1em')
                 .style('text-anchor', 'middle')