axidio-styleguide-library1-v2 0.0.955 → 0.0.957
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.
|
@@ -8791,6 +8791,10 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8791
8791
|
.selectAll('g.x1.axis1 g.tick text')
|
|
8792
8792
|
.attr('class', 'lib-xaxis-labels-texts-weeklycharts')
|
|
8793
8793
|
.attr('y', function () {
|
|
8794
|
+
// Minimize gap in maximized (fullscreen) view for weekly charts
|
|
8795
|
+
if (self.chartConfiguration.isFullScreen) {
|
|
8796
|
+
return short_tick_length_bg;
|
|
8797
|
+
}
|
|
8794
8798
|
if (alternate_text) {
|
|
8795
8799
|
alternate_text = false;
|
|
8796
8800
|
return long_tick_length_bg;
|
|
@@ -8809,11 +8813,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8809
8813
|
.attr('y', function (d) {
|
|
8810
8814
|
// For grouped bar charts with many bars and xLabel present, do NOT add extra space (avoid overlap)
|
|
8811
8815
|
if (subgroups.length > 1 && data.length > 8 && metaData.xLabel) {
|
|
8816
|
+
// In maximized (fullscreen) view, keep the gap minimal
|
|
8817
|
+
if (self.chartConfiguration.isFullScreen) {
|
|
8818
|
+
return short_tick_length_bg;
|
|
8819
|
+
}
|
|
8812
8820
|
return short_tick_length_bg;
|
|
8813
8821
|
}
|
|
8814
|
-
// For grouped bar charts with many bars and NO xLabel, add space as before
|
|
8822
|
+
// For grouped bar charts with many bars and NO xLabel, add space as before, but reduce in fullscreen
|
|
8815
8823
|
if (subgroups.length > 1 && data.length > 8 && !metaData.xLabel) {
|
|
8816
8824
|
const chartHasExtraBottom = (self.chartConfiguration.margin && self.chartConfiguration.margin.bottom >= 40);
|
|
8825
|
+
if (self.chartConfiguration.isFullScreen) {
|
|
8826
|
+
// Reduce extra gap in maximized view
|
|
8827
|
+
return short_tick_length_bg + 2;
|
|
8828
|
+
}
|
|
8817
8829
|
return chartHasExtraBottom ? short_tick_length_bg : short_tick_length_bg + 10;
|
|
8818
8830
|
}
|
|
8819
8831
|
// Default/fallback logic for other cases
|
|
@@ -8826,6 +8838,10 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8826
8838
|
if (/\d{2,4}[-\/]\d{2,4}/.test(d) && d.indexOf(' ') > -1) {
|
|
8827
8839
|
baseY += 4;
|
|
8828
8840
|
}
|
|
8841
|
+
// In maximized view, reduce baseY slightly for grouped bars
|
|
8842
|
+
if (self.chartConfiguration.isFullScreen && subgroups.length > 1) {
|
|
8843
|
+
baseY = Math.max(short_tick_length_bg, baseY - 10);
|
|
8844
|
+
}
|
|
8829
8845
|
return baseY;
|
|
8830
8846
|
})
|
|
8831
8847
|
.attr('x', function (d) {
|
|
@@ -8892,11 +8908,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8892
8908
|
});
|
|
8893
8909
|
}
|
|
8894
8910
|
}
|
|
8895
|
-
if (isMobile && !this.isHeaderVisible) {
|
|
8896
|
-
svg
|
|
8897
|
-
.selectAll('g.x1.axis1 g.tick text')
|
|
8898
|
-
.classed('mobile-xaxis-override', true);
|
|
8899
|
-
}
|
|
8900
8911
|
if (isria && self.chartData.data.length > 8) {
|
|
8901
8912
|
svg
|
|
8902
8913
|
.selectAll('g.x1.axis1 g.tick text')
|
|
@@ -8909,6 +8920,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8909
8920
|
.attr('x', 5)
|
|
8910
8921
|
.style('text-anchor', 'middle');
|
|
8911
8922
|
}
|
|
8923
|
+
if (isMobile && !this.isHeaderVisible) {
|
|
8924
|
+
svg
|
|
8925
|
+
.selectAll('g.x1.axis1 g.tick text')
|
|
8926
|
+
.classed('mobile-xaxis-override', true);
|
|
8927
|
+
}
|
|
8912
8928
|
/**y scale for left y axis */
|
|
8913
8929
|
var y = d3.scaleLinear().rangeRound([height, 0]);
|
|
8914
8930
|
var maxValue = d3.max(data, (d) => d3.max(keyList, (key) => +d[key]));
|
|
@@ -9309,7 +9325,9 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9309
9325
|
.on('mouseout', handleMouseOut)
|
|
9310
9326
|
.on('mouseover', handleMouseOver);
|
|
9311
9327
|
}
|
|
9312
|
-
if (this.chartConfiguration.displayTitleOnTop
|
|
9328
|
+
if (this.chartConfiguration.displayTitleOnTop ||
|
|
9329
|
+
(this.chartConfiguration.textsOnBar == undefined &&
|
|
9330
|
+
this.chartConfiguration.displayTitleOnTop == undefined)) {
|
|
9313
9331
|
state
|
|
9314
9332
|
.selectAll('rect')
|
|
9315
9333
|
.on('mouseout', handleMouseOut)
|
|
@@ -9427,53 +9445,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9427
9445
|
}
|
|
9428
9446
|
svg.selectAll('.lib-verticalstack-title-ontop').remove();
|
|
9429
9447
|
}
|
|
9430
|
-
/**
|
|
9431
|
-
* display data values on mouse over
|
|
9432
|
-
* used by dashboard charts
|
|
9433
|
-
*/
|
|
9434
|
-
if (this.chartConfiguration.textsOnBar == undefined &&
|
|
9435
|
-
this.chartConfiguration.displayTitleOnTop == undefined) {
|
|
9436
|
-
state
|
|
9437
|
-
.selectAll('rect')
|
|
9438
|
-
.on('mouseout', function (d) {
|
|
9439
|
-
state.selectAll('.barstext').remove();
|
|
9440
|
-
})
|
|
9441
|
-
.on('mouseover', function (d1) {
|
|
9442
|
-
state
|
|
9443
|
-
.selectAll('text')
|
|
9444
|
-
.data(function (d) {
|
|
9445
|
-
let newList = [];
|
|
9446
|
-
subgroups.map(function (key) {
|
|
9447
|
-
if (key !== 'name' &&
|
|
9448
|
-
d1.key == key &&
|
|
9449
|
-
d1.value == d[key] &&
|
|
9450
|
-
d1.name == d.name) {
|
|
9451
|
-
let obj = { key: key, value: d[key], name: d.name };
|
|
9452
|
-
newList.push(obj);
|
|
9453
|
-
}
|
|
9454
|
-
});
|
|
9455
|
-
return newList;
|
|
9456
|
-
})
|
|
9457
|
-
.enter()
|
|
9458
|
-
.append('text')
|
|
9459
|
-
.attr('fill', 'var(--chart-text-color)')
|
|
9460
|
-
.attr('class', 'barstext')
|
|
9461
|
-
.attr('x', function (d) {
|
|
9462
|
-
return xSubgroup(d.key);
|
|
9463
|
-
})
|
|
9464
|
-
.attr('y', function (d) {
|
|
9465
|
-
return y(d.value);
|
|
9466
|
-
})
|
|
9467
|
-
.attr('style', 'font-size: ' + '.85em' + ';' + ' font-weight:' + 'bold' + ';')
|
|
9468
|
-
.style('fill', function (d) {
|
|
9469
|
-
return metaData.colors[d.key];
|
|
9470
|
-
})
|
|
9471
|
-
.attr('width', self.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth())
|
|
9472
|
-
.text(function (d) {
|
|
9473
|
-
return d.value;
|
|
9474
|
-
});
|
|
9475
|
-
});
|
|
9476
|
-
}
|
|
9477
9448
|
svg
|
|
9478
9449
|
.append('g')
|
|
9479
9450
|
.attr('class', 'x2 axis2')
|