axidio-styleguide-library1-v2 0.0.913 → 0.0.914

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

@@ -8694,11 +8694,17 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             }));
         }
         else {
+            // For normal drill down chart, increase padding to reduce bar width
+            let barPadding = 0.5; // Increased padding for thinner bars
+            if (this.isZoomedOut || (this.chartData.data.length > 8 && !this.isZoomedOut) || this.chartConfiguration.isMultiChartGridLine !== undefined) {
+                // Use default padding for zoomed in/out and other chart types
+                barPadding = 0.3;
+            }
             x = d3
                 .scaleBand()
                 .domain(groups)
                 .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
-                .padding([0.3]);
+                .padding([barPadding]);
         }
         // x.bandwidth(96);
         var xScaleFromOrigin = d3
@@ -8798,7 +8804,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .style('font-size', this.isHeaderVisible ? '18px' : '14px')
                 .attr('y', this.isHeaderVisible
                 ? short_tick_length_bg + 25
-                : short_tick_length_bg + 25)
+                : short_tick_length_bg + 30)
                 .attr('x', function (d) {
                 if (self.chartData.data.length > 8 && !self.isZoomedOut) {
                     return -25; // Move first line text slightly to the left too
@@ -9070,28 +9076,47 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         })
             .attr('width', function (d) {
             if (self.chartConfiguration.isDrilldownChart) {
-                let isSingleBar = false;
+                // var tempScale;
                 data.map((indiv) => {
                     if (indiv.name == d.name) {
                         let keys = Object.keys(indiv).filter((temp, i) => i != 0);
+                        var temp;
                         tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
-                        if (keys.length === 1) {
-                            isSingleBar = true;
+                        if (x.bandwidth() > 100) {
+                            if (self.chartData.data.length == 1) {
+                                if (Object.keys(self.chartData.data[0]).length == 2) {
+                                    tempScale.range([
+                                        0 + (x.bandwidth() - 125) / 2,
+                                        x.bandwidth() - (x.bandwidth() - 125) / 2,
+                                    ]);
+                                    // .padding(0.05);
+                                }
+                                else
+                                    tempScale.range([
+                                        0 + (x.bandwidth() - 125) / 2,
+                                        x.bandwidth() - (x.bandwidth() - 125) / 2,
+                                    ]);
+                                // .padding(0.05);
+                            }
+                            else
+                                tempScale.range([
+                                    0 + (x.bandwidth() - 125) / 2,
+                                    x.bandwidth() - (x.bandwidth() - 125) / 2,
+                                ]);
                         }
                     }
                 });
-                if (isSingleBar) {
-                    if (self.isZoomedOut) {
-                        // Reduce width to 60% or min 25px in zoomed out view
-                        return Math.max(tempScale.bandwidth() * 0.6, 25);
-                    }
-                    return tempScale.bandwidth();
-                }
-                // Grouped bars: keep as is
-                return tempScale.bandwidth();
-            }
-            // Non-drilldown: keep as is
-            return tempScale.bandwidth();
+                return self.isZoomedOut
+                    ? tempScale.bandwidth()
+                    : self.chartData.data.length && self.chartData.data.length > 8
+                        ? tempScale.bandwidth() * 0.5
+                        : tempScale.bandwidth();
+            }
+            return self.isZoomedOut
+                ? tempScale.bandwidth()
+                : self.chartData.data.length && self.chartData.data.length > 8
+                    ? tempScale.bandwidth() * 0.5
+                    : tempScale.bandwidth();
         })
             .attr('height', function (d) {
             if (d.value == -1) {