axidio-styleguide-library1-v2 0.3.33 → 0.3.34
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.
|
@@ -7877,6 +7877,35 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7877
7877
|
uniqueLabels.add(d);
|
|
7878
7878
|
});
|
|
7879
7879
|
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
|
+
}
|
|
7880
7909
|
if (hasDateValues && labelCount <= 3) {
|
|
7881
7910
|
// For 3 or fewer labels, keep horizontal display
|
|
7882
7911
|
textNodes
|
|
@@ -7902,30 +7931,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7902
7931
|
textNodes.classed('mobile-xaxis-override', true);
|
|
7903
7932
|
}
|
|
7904
7933
|
}
|
|
7905
|
-
// 💻 TABLET VIEW HANDLING
|
|
7906
|
-
if (isTablet) {
|
|
7907
|
-
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
7908
|
-
textNodes.each((d) => {
|
|
7909
|
-
const textElement = d3.select(this);
|
|
7910
|
-
const words = d.split(/\s+/);
|
|
7911
|
-
// Clear existing text
|
|
7912
|
-
textElement.text(null);
|
|
7913
|
-
// If more than 2 words, break into multiple lines using tspans
|
|
7914
|
-
if (words.length >= 3) {
|
|
7915
|
-
words.forEach((word, i) => {
|
|
7916
|
-
textElement
|
|
7917
|
-
.append('tspan')
|
|
7918
|
-
.text(word)
|
|
7919
|
-
.attr('x', 0)
|
|
7920
|
-
.attr('dy', i === 0 ? 0 : 12); // line spacing between words
|
|
7921
|
-
});
|
|
7922
|
-
}
|
|
7923
|
-
else {
|
|
7924
|
-
// Keep normal text
|
|
7925
|
-
textElement.text(d);
|
|
7926
|
-
}
|
|
7927
|
-
});
|
|
7928
|
-
}
|
|
7929
7934
|
}
|
|
7930
7935
|
applyXLabelsOnSameLine(svg, subgroups, data, metaData, self, shortTickLengthBg, isMobile, isria) {
|
|
7931
7936
|
const xAxisLabels = svg.selectAll('g.x1.axis1 g.tick text')
|