axidio-styleguide-library1-v2 0.1.45 → 0.1.47

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

@@ -6929,7 +6929,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             isTitleHidden: undefined,
         };
         this.isCC = false;
-        this.isZoomedOut = false;
+        this.isZoomedOut = true;
     }
     isZoomOutSelected(isZoomOut) {
         this.isZoomedOut = isZoomOut;
@@ -7902,13 +7902,53 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         /**
          * used to display y label
          */
+        // if (!this.isZoomedOut) {
+        //   svg
+        //     .selectAll('.lib-xaxis-labels-texts-drilldown')
+        //     .attr('transform', 'rotate(-90)')
+        //     .attr('text-anchor', 'end')
+        //     .attr('x', '-5')
+        //     .attr('dy', null);
+        // }
         if (this.isZoomedOut) {
+            // svg
+            //   .selectAll('.lib-xaxis-labels-texts-drilldown')
+            //   .attr('transform', 'rotate(-30)')
+            //   .attr('text-anchor', 'end')
+            //   .attr('x', '-5')
+            //   .attr('dy', null)
+            //   .style('fill', 'var(--chart-text-color)');
             svg
                 .selectAll('.lib-xaxis-labels-texts-drilldown')
-                .attr('transform', 'rotate(-90)')
-                .attr('text-anchor', 'end')
-                .attr('x', '-5')
-                .attr('dy', null);
+                .each((d, i, nodes) => {
+                const text = d3.select(nodes[i]);
+                const label = text.text();
+                // If label contains \n, split and use tspan for each line
+                if (label.indexOf('\n') > -1) {
+                    const lines = label.split('\n');
+                    text.text(null);
+                    lines.forEach((line, idx) => {
+                        text.append('tspan')
+                            .text(line)
+                            .attr('x', 0)
+                            .attr('dy', idx === 0 ? '1em' : '1.1em');
+                    });
+                }
+                else {
+                    // Fallback: split by space for other labels
+                    const words = label.split(' ');
+                    text.text(null);
+                    words.forEach((word, index) => {
+                        text.append('tspan').text(word);
+                    });
+                }
+            })
+                .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')
+                .attr('transform', `translate(0, ${height - margin.bottom + 10})`);
         }
         function styleAxisDomain() {
             svg.selectAll('.domain')