axidio-styleguide-library1-v2 0.2.84 → 0.2.86
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.
|
@@ -7735,7 +7735,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7735
7735
|
.domain(groups)
|
|
7736
7736
|
.range([0, width - RIGHT_SVG_WIDTH]);
|
|
7737
7737
|
// ==================== X-AXIS RENDERING ====================
|
|
7738
|
-
this.renderXAxis(svg, x, height, metaData, subgroups, data, SHORT_TICK_LENGTH_BG, LONG_TICK_LENGTH_BG, self, isria, isMobile);
|
|
7738
|
+
this.renderXAxis(svg, x, height, metaData, subgroups, data, SHORT_TICK_LENGTH_BG, LONG_TICK_LENGTH_BG, self, isria, isMobile, isTablet);
|
|
7739
7739
|
// ==================== Y-AXIS SETUP ====================
|
|
7740
7740
|
const y = d3.scaleLinear().rangeRound([height, 0]);
|
|
7741
7741
|
let maxValue = this.calculateMaxValue(data, keyList);
|
|
@@ -7786,7 +7786,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7786
7786
|
}
|
|
7787
7787
|
}
|
|
7788
7788
|
// ==================== HELPER METHODS ====================
|
|
7789
|
-
renderXAxis(svg, x, height, metaData, subgroups, data, shortTickLengthBg, longTickLengthBg, self, isria, isMobile) {
|
|
7789
|
+
renderXAxis(svg, x, height, metaData, subgroups, data, shortTickLengthBg, longTickLengthBg, self, isria, isMobile, isTablet) {
|
|
7790
7790
|
let alternate_text = false;
|
|
7791
7791
|
if (this.chartConfiguration.isMultiChartGridLine === undefined) {
|
|
7792
7792
|
// Normal ticks for dashboard charts
|
|
@@ -7857,8 +7857,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7857
7857
|
.attr('x', 5)
|
|
7858
7858
|
.style('text-anchor', 'middle');
|
|
7859
7859
|
}
|
|
7860
|
-
// Mobile override - check for single-group date charts first
|
|
7861
|
-
if (isMobile) {
|
|
7860
|
+
// Mobile/tablet override - check for single-group date charts first
|
|
7861
|
+
if (isMobile || isTablet) {
|
|
7862
7862
|
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
7863
7863
|
const groupsCount = data.length || 0;
|
|
7864
7864
|
// Check if we have dates in x-axis and single group
|
|
@@ -7886,9 +7886,9 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7886
7886
|
// Default mobile behavior for non-date or multi-group
|
|
7887
7887
|
textNodes.classed('mobile-xaxis-override', true);
|
|
7888
7888
|
}
|
|
7889
|
-
// If there are many groups on mobile, rotate labels to sideways to
|
|
7889
|
+
// If there are many groups on mobile/tablet, rotate labels to sideways to
|
|
7890
7890
|
// avoid overlapping and make them readable. Use a lower threshold
|
|
7891
|
-
// (3) so
|
|
7891
|
+
// (3) so small screens get rotated labels when needed.
|
|
7892
7892
|
if (groupsCount > 3) {
|
|
7893
7893
|
svg.selectAll('g.x1.axis1 g.tick text')
|
|
7894
7894
|
.style('writing-mode', 'sideways-lr')
|