axidio-styleguide-library1-v2 0.4.82 → 0.4.84

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

@@ -7917,7 +7917,18 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 }
             });
             svg.selectAll('g.x1.axis1 g.tick line').remove();
-            const yOffset = subgroups.length > 1 && !metaData.xLabel ? 32 : 0;
+            // const yOffset = subgroups.length > 1 && !metaData.xLabel ? 32 : 0;
+            const yOffset = (() => {
+                // Single bar in zoom-in view
+                if (subgroups.length === 1 && !self.isZoomedOut) {
+                    return 15;
+                }
+                // Multiple bars without xLabel
+                if (subgroups.length > 1 && !metaData.xLabel) {
+                    return 32;
+                }
+                return 0;
+            })();
             svg.selectAll('g.x1.axis1 g.tick text')
                 // .attr('class', 'lib-xaxis-labels-texts-drilldown')
                 .attr('class', isria
@@ -8316,19 +8327,35 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         }
         return xSubgroup(d.key);
     }
+    // private calculateDrilldownBarX(d, data, x, self, tempScale) {
+    //   data.forEach((indiv: any) => {
+    //     if (indiv.name === d.name) {
+    //       const keys = Object.keys(indiv).filter((temp, i) => i !== 0);
+    //       tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
+    //       if (x.bandwidth() > 100) {
+    //         const reducedBarWidth = self.isZoomedOut ? 60 : 30;
+    //         const offset = (x.bandwidth() - reducedBarWidth) / 2;
+    //         tempScale.range([offset, x.bandwidth() - offset]);
+    //       }
+    //     }
+    //   });
+    //   return tempScale(d.key) || 0;
+    // }
     calculateDrilldownBarX(d, data, x, self, tempScale) {
+        let calculatedScale = tempScale;
         data.forEach((indiv) => {
             if (indiv.name === d.name) {
                 const keys = Object.keys(indiv).filter((temp, i) => i !== 0);
-                tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
+                calculatedScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
                 if (x.bandwidth() > 100) {
-                    const reducedBarWidth = self.isZoomedOut ? 60 : 30;
+                    const reducedBarWidth = self.isZoomedOut ? 60 : 100;
                     const offset = (x.bandwidth() - reducedBarWidth) / 2;
-                    tempScale.range([offset, x.bandwidth() - offset]);
+                    calculatedScale.range([offset, x.bandwidth() - offset]);
                 }
             }
         });
-        return tempScale(d.key);
+        // Return position relative to the group (since bars are inside a translated group element)
+        return calculatedScale(d.key) || 0;
     }
     calculateBarY(d, y, height, self) {
         if (d.value === -1) {