axidio-styleguide-library1-v2 0.3.34 → 0.3.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7857,6 +7857,20 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7857
7857
|
.attr('x', 5)
|
|
7858
7858
|
.style('text-anchor', 'middle');
|
|
7859
7859
|
}
|
|
7860
|
+
// ✅ Tablet View — Rotate if text > 10 characters
|
|
7861
|
+
if (isTablet) {
|
|
7862
|
+
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
7863
|
+
textNodes.each(function (d) {
|
|
7864
|
+
const text = d ? d.toString() : '';
|
|
7865
|
+
if (text.length > 10) {
|
|
7866
|
+
textNodes
|
|
7867
|
+
.style('writing-mode', 'sideways-lr') // Vertical text
|
|
7868
|
+
.attr('text-anchor', 'middle')
|
|
7869
|
+
.attr('y', 25)
|
|
7870
|
+
.attr('x', 0);
|
|
7871
|
+
}
|
|
7872
|
+
});
|
|
7873
|
+
}
|
|
7860
7874
|
// Mobile/tablet override - check for single-group date charts first
|
|
7861
7875
|
if (isMobile) {
|
|
7862
7876
|
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
@@ -7877,35 +7891,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7877
7891
|
uniqueLabels.add(d);
|
|
7878
7892
|
});
|
|
7879
7893
|
const labelCount = uniqueLabels.size;
|
|
7880
|
-
if (isTablet) {
|
|
7881
|
-
// Check if any label has more than 10 characters
|
|
7882
|
-
let hasLongLabels = false;
|
|
7883
|
-
textNodes.each(function (d) {
|
|
7884
|
-
if (d && d.toString().length > 10) {
|
|
7885
|
-
hasLongLabels = true;
|
|
7886
|
-
}
|
|
7887
|
-
});
|
|
7888
|
-
if (hasLongLabels) {
|
|
7889
|
-
// Apply vertical text for labels with more than 10 characters
|
|
7890
|
-
textNodes
|
|
7891
|
-
.style('writing-mode', 'sideways-lr')
|
|
7892
|
-
.classed('tablet-xaxis-override', true)
|
|
7893
|
-
.attr('text-anchor', 'middle')
|
|
7894
|
-
.attr('y', 30)
|
|
7895
|
-
.attr('x', 0);
|
|
7896
|
-
}
|
|
7897
|
-
else {
|
|
7898
|
-
// Keep horizontal for shorter labels
|
|
7899
|
-
textNodes
|
|
7900
|
-
.style('writing-mode', 'horizontal-tb')
|
|
7901
|
-
.classed('tablet-xaxis-override', false)
|
|
7902
|
-
.attr('transform', 'rotate(0)')
|
|
7903
|
-
.attr('text-anchor', 'middle')
|
|
7904
|
-
.attr('y', 20)
|
|
7905
|
-
.attr('dx', '0')
|
|
7906
|
-
.attr('dy', '0');
|
|
7907
|
-
}
|
|
7908
|
-
}
|
|
7909
7894
|
if (hasDateValues && labelCount <= 3) {
|
|
7910
7895
|
// For 3 or fewer labels, keep horizontal display
|
|
7911
7896
|
textNodes
|