axidio-styleguide-library1-v2 0.0.982 → 0.0.984

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

@@ -7392,14 +7392,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         ])
             .domain(data.map(function (d) {
             return d.name;
-        }).reverse())
+        }))
             .padding(isMobile ? 0.2 : 0.5);
         var xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - rightSvgWidth, 0])
             .domain(data.map(function (d) {
             return d.name;
-        }).reverse());
+        }));
         // ...existing code...
         /**
          * draw second x axis on top
@@ -8642,7 +8642,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 + 60)
             // .call(ChartHelper.responsivefy)
             .append('g')
             .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
@@ -8778,7 +8778,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         if (self.chartConfiguration.xLabelsOnSameLine) {
-            svg
+            const xAxisLabels = svg
                 .selectAll('g.x1.axis1 g.tick text')
                 .attr('class', 'lib-xaxis-labels-texts-drilldown')
                 .style('font-size', this.isHeaderVisible ? '18px' : '14px')
@@ -8856,6 +8856,13 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 }
                 return d.toLowerCase();
             });
+            // Now apply writing-mode: sideways-lr for grouped charts with date labels in zoomed-out view and many bars
+            xAxisLabels.each(function (d) {
+                const isDateLabel = /\d{2,4}[-\/]/.test(d);
+                if (subgroups.length > 1 && self.isZoomedOut && data.length > 8 && isDateLabel) {
+                    d3.select(this).style('writing-mode', 'sideways-lr');
+                }
+            });
             if (!isMobile) {
                 svg
                     .selectAll('g.x1.axis1 g.tick')
@@ -9010,7 +9017,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         var xSubgroup = d3.scaleBand().domain(subgroups);
         if (subgroups.length > 1 && !this.isZoomedOut) {
             // For grouped bar charts in zoom-in view, reduce padding between bars
-            xSubgroup.range([0, x.bandwidth()]).padding(0.05);
+            xSubgroup.range([0, x.bandwidth()]);
+        }
+        else if (subgroups.length === 1 && !this.isZoomedOut) {
+            // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
+            xSubgroup.range([0, 80]);
         }
         else if (this.chartConfiguration.isMultiChartGridLine == undefined) {
             xSubgroup.range([0, x.bandwidth()]);
@@ -9156,13 +9167,13 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 return self.isZoomedOut
                     ? tempScale.bandwidth()
                     : self.chartData.data.length && self.chartData.data.length > 8
-                        ? tempScale.bandwidth() * 0.5
+                        ? tempScale.bandwidth()
                         : tempScale.bandwidth();
             }
             return self.isZoomedOut
                 ? tempScale.bandwidth()
                 : self.chartData.data.length && self.chartData.data.length > 8
-                    ? tempScale.bandwidth() * 0.5
+                    ? tempScale.bandwidth()
                     : tempScale.bandwidth();
         })
             .attr('height', function (d) {
@@ -9651,7 +9662,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             }
             const xLabelText = metaData.xLabel;
             const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
-            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
+            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 30);
             svg
                 .append('text')
                 .attr('class', function () {