axidio-styleguide-library1-v2 0.7.46 → 0.7.47

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

@@ -8088,7 +8088,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         if (this.chartConfiguration.isMultiChartGridLine !== undefined) {
             const paddingValue = (isria && subgroups.length === 1) ? 0.1 : 0.5;
             x = d3.scaleBand()
-                .rangeRound([0, width])
+                .rangeRound([width, 0])
                 .align(0.5)
                 .padding([paddingValue])
                 .domain(data.map((d) => d.name));
@@ -8644,21 +8644,43 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
     //   });
     //   return tempScale(d.key) || 0;
     // }
+    // private calculateDrilldownBarX(d, data, x, self, tempScale) {
+    //     let calculatedScale = tempScale;
+    //     data.forEach((indiv: any) => {
+    //       if (indiv.name === d.name) {
+    //         const keys = Object.keys(indiv).filter((temp, i) => i !== 0);
+    //         calculatedScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
+    //         if (x.bandwidth() > 100) {
+    //           const reducedBarWidth = self.isZoomedOut ? 60 : 100;
+    //           const offset = (x.bandwidth() - reducedBarWidth) / 2;
+    //           calculatedScale.range([offset, x.bandwidth() - offset]);
+    //         }
+    //       }
+    //     });
+    //     // Return position relative to the group (since bars are inside a translated group element)
+    //     return calculatedScale(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);
-                calculatedScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
-                if (x.bandwidth() > 100) {
-                    const reducedBarWidth = self.isZoomedOut ? 60 : 100;
-                    const offset = (x.bandwidth() - reducedBarWidth) / 2;
-                    calculatedScale.range([offset, x.bandwidth() - offset]);
-                }
-            }
-        });
-        // Return position relative to the group (since bars are inside a translated group element)
-        return calculatedScale(d.key) || 0;
+        // ✅ FIX: Use the actual subgroups from metaData, not Object.keys
+        const subgroups = self.chartData.metaData.keyList;
+        // Create scale using the full subgroups list
+        const calculatedScale = d3.scaleBand()
+            .domain(subgroups) // ✅ Use consistent domain across all groups
+            .range([0, x.bandwidth()]);
+        if (x.bandwidth() > 100) {
+            const reducedBarWidth = self.isZoomedOut ? 60 : 100;
+            const offset = (x.bandwidth() - reducedBarWidth) / 2;
+            calculatedScale.range([offset, x.bandwidth() - offset]);
+        }
+        const position = calculatedScale(d.key);
+        // ✅ Debug logging
+        if (position === undefined) {
+            console.error(`❌ Position undefined for key "${d.key}" in group "${d.name}"`);
+            console.error('Available subgroups:', subgroups);
+            console.error('Scale domain:', calculatedScale.domain());
+            return 0;
+        }
+        return position;
     }
     calculateBarY(d, y, height, self) {
         if (d.value === -1) {