axidio-styleguide-library1-v2 0.3.35 → 0.3.37
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,25 @@ 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().trim() : '';
|
|
7865
|
+
// Detect date formats (to skip them)
|
|
7866
|
+
const isDateString = /^\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4}$/.test(text) || // e.g. 2025-10-29 or 10/29/2025
|
|
7867
|
+
/^(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})\s*[-–]\s*(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})$/.test(text);
|
|
7868
|
+
if (!isDateString && text.length > 10) {
|
|
7869
|
+
const trimmed = text.slice(0, 10) + '…';
|
|
7870
|
+
textNodes
|
|
7871
|
+
.style('writing-mode', 'sideways-lr') // Vertical text
|
|
7872
|
+
.attr('text-anchor', 'middle')
|
|
7873
|
+
.attr('y', 25)
|
|
7874
|
+
.attr('x', 0)
|
|
7875
|
+
.text(trimmed);
|
|
7876
|
+
}
|
|
7877
|
+
});
|
|
7878
|
+
}
|
|
7860
7879
|
// Mobile/tablet override - check for single-group date charts first
|
|
7861
7880
|
if (isMobile) {
|
|
7862
7881
|
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
@@ -7902,19 +7921,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7902
7921
|
textNodes.classed('mobile-xaxis-override', true);
|
|
7903
7922
|
}
|
|
7904
7923
|
}
|
|
7905
|
-
if (isTablet) {
|
|
7906
|
-
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
7907
|
-
textNodes.each((d) => {
|
|
7908
|
-
const text = d.toString();
|
|
7909
|
-
if (text.length > 10) {
|
|
7910
|
-
d3.select(this)
|
|
7911
|
-
.style('writing-mode', 'sideways-lr') // Vertical layout
|
|
7912
|
-
.attr('text-anchor', 'middle')
|
|
7913
|
-
.attr('y', 25)
|
|
7914
|
-
.attr('x', 0);
|
|
7915
|
-
}
|
|
7916
|
-
});
|
|
7917
|
-
}
|
|
7918
7924
|
}
|
|
7919
7925
|
applyXLabelsOnSameLine(svg, subgroups, data, metaData, self, shortTickLengthBg, isMobile, isria) {
|
|
7920
7926
|
const xAxisLabels = svg.selectAll('g.x1.axis1 g.tick text')
|