axidio-styleguide-library1-v2 0.0.880 → 0.0.882
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.
- package/esm2022/lib/group-chart/group-chart.component.mjs +27 -2
- package/esm2022/lib/horizontal-bars-with-scroll-zoom/horizontal-bars-with-scroll-zoom.component.mjs +7 -4
- package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +7 -7
- package/fesm2022/axidio-styleguide-library1-v2.mjs +38 -10
- package/fesm2022/axidio-styleguide-library1-v2.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -4707,7 +4707,7 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
4707
4707
|
.attr('class', 'lib-axis-group-label font-size-1')
|
|
4708
4708
|
.attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
|
|
4709
4709
|
.attr('transform', 'rotate(-90)')
|
|
4710
|
-
.attr('y', 0 - margin.left / 2 -
|
|
4710
|
+
.attr('y', 0 - margin.left / 2 - 30)
|
|
4711
4711
|
.attr('x', 0 - height / 2)
|
|
4712
4712
|
.attr('dy', '1em')
|
|
4713
4713
|
.style('text-anchor', 'middle');
|
|
@@ -4727,6 +4727,31 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
4727
4727
|
.text(metaData.yLabel.toLowerCase());
|
|
4728
4728
|
}
|
|
4729
4729
|
}
|
|
4730
|
+
if (metaData.xLabel) {
|
|
4731
|
+
function isAcronym(label) {
|
|
4732
|
+
return ((label.length <= 4 && /^[A-Z]+$/.test(label)) ||
|
|
4733
|
+
(label === label.toUpperCase() && /[A-Z]/.test(label)));
|
|
4734
|
+
}
|
|
4735
|
+
const xLabelText = metaData.xLabel;
|
|
4736
|
+
const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
|
|
4737
|
+
svg
|
|
4738
|
+
.append('text')
|
|
4739
|
+
.attr('class', function () {
|
|
4740
|
+
let baseClass = 'lib-axis-group-label font-size-1';
|
|
4741
|
+
if (self.chartConfiguration.isDrilldownChart)
|
|
4742
|
+
return baseClass + ' lib-xlabel-drilldowncharts';
|
|
4743
|
+
if (self.chartConfiguration.isMultiChartGridLine != undefined)
|
|
4744
|
+
return baseClass + ' lib-xlabel-weeklyCharts';
|
|
4745
|
+
return baseClass + ' lib-axis-waterfall-label';
|
|
4746
|
+
})
|
|
4747
|
+
.attr('style', self.chartConfiguration.xAxisCustomlabelStyles)
|
|
4748
|
+
.attr('transform', 'translate(' + width / 2 + ' ,' + (height + margin.top + margin.bottom + 10) + ')')
|
|
4749
|
+
.style('text-anchor', 'middle')
|
|
4750
|
+
.style('fill', 'var(--chart-text-color)')
|
|
4751
|
+
.style('color', 'var(--chart-text-color)')
|
|
4752
|
+
.text(isAcr ? xLabelText.toUpperCase() : xLabelText.toLowerCase())
|
|
4753
|
+
.style('text-transform', isAcr ? 'none' : 'capitalize');
|
|
4754
|
+
}
|
|
4730
4755
|
if (this.chartData.targetLineData) {
|
|
4731
4756
|
const yZero = y(this.chartData.targetLineData.target);
|
|
4732
4757
|
svg
|
|
@@ -7198,6 +7223,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7198
7223
|
var tempObjectHolder = {};
|
|
7199
7224
|
var rightSvgWidth = 60;
|
|
7200
7225
|
var leftAndRightSpaces = 50;
|
|
7226
|
+
let isria = this.customChartConfiguration.isRia;
|
|
7201
7227
|
// Responsive breakpoints
|
|
7202
7228
|
const isMobile = window.innerWidth < 576;
|
|
7203
7229
|
const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
|
|
@@ -7550,7 +7576,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7550
7576
|
else {
|
|
7551
7577
|
if (self.chartConfiguration.isDrilldownChart &&
|
|
7552
7578
|
self.chartData.data.length <= 3) {
|
|
7553
|
-
return xScale(d.data.name) + xScale.bandwidth() / 2 -
|
|
7579
|
+
return xScale(d.data.name) + xScale.bandwidth() / 2 - 35;
|
|
7554
7580
|
}
|
|
7555
7581
|
return xScale(d.data.name) + xScale.bandwidth() * 0.1;
|
|
7556
7582
|
}
|
|
@@ -8157,6 +8183,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8157
8183
|
}
|
|
8158
8184
|
const yLabelText = metaData.yLabel;
|
|
8159
8185
|
const isAcr = isAcronym(yLabelText.replace(/[^A-Za-z]/g, ''));
|
|
8186
|
+
const yPosition = isria ? 0 - margin.left / 2 - 30 : 0 - margin.left / 2 - 40;
|
|
8160
8187
|
svgYAxisLeft
|
|
8161
8188
|
.append('text')
|
|
8162
8189
|
.attr('class', function () {
|
|
@@ -8169,7 +8196,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8169
8196
|
})
|
|
8170
8197
|
.attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
|
|
8171
8198
|
.attr('transform', 'rotate(-90)')
|
|
8172
|
-
.attr('y',
|
|
8199
|
+
.attr('y', yPosition)
|
|
8173
8200
|
.attr('x', 0 - height / 2)
|
|
8174
8201
|
.attr('dy', '1em')
|
|
8175
8202
|
.style('text-anchor', 'middle')
|
|
@@ -8244,6 +8271,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8244
8271
|
}
|
|
8245
8272
|
const xLabelText = metaData.xLabel;
|
|
8246
8273
|
const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
|
|
8274
|
+
const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
|
|
8247
8275
|
svg
|
|
8248
8276
|
.append('text')
|
|
8249
8277
|
.attr('class', function () {
|
|
@@ -8255,7 +8283,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8255
8283
|
return baseClass + ' lib-axis-waterfall-label';
|
|
8256
8284
|
})
|
|
8257
8285
|
.attr('style', self.chartConfiguration.xAxisCustomlabelStyles)
|
|
8258
|
-
.attr('transform', 'translate(' + width / 2 + ' ,' +
|
|
8286
|
+
.attr('transform', 'translate(' + width / 2 + ' ,' + xPosition + ')')
|
|
8259
8287
|
.style('text-anchor', 'middle')
|
|
8260
8288
|
.style('fill', 'var(--chart-text-color)')
|
|
8261
8289
|
.style('color', 'var(--chart-text-color)')
|
|
@@ -8485,6 +8513,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8485
8513
|
const isMobile = window.innerWidth < 576;
|
|
8486
8514
|
const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
|
|
8487
8515
|
const isDesktop = window.innerWidth >= 992;
|
|
8516
|
+
let isria = this.customChartConfiguration.isRia;
|
|
8488
8517
|
var x;
|
|
8489
8518
|
var alternate_text = false;
|
|
8490
8519
|
var short_tick_length = 4;
|
|
@@ -9524,26 +9553,24 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9524
9553
|
* used to write y labels based on configuration
|
|
9525
9554
|
*/
|
|
9526
9555
|
if (metaData.yLabel) {
|
|
9556
|
+
const yPosition = isria ? 0 - margin.left / 2 - 30 : 0 - margin.left / 2 - 40;
|
|
9527
9557
|
svgYAxisLeft
|
|
9528
9558
|
.append('text')
|
|
9529
9559
|
.attr('class', 'lib-axis-group-label font-size-1')
|
|
9530
9560
|
.attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
|
|
9531
9561
|
.attr('transform', 'rotate(-90)')
|
|
9532
|
-
.attr('y',
|
|
9562
|
+
.attr('y', yPosition)
|
|
9533
9563
|
.attr('x', 0 - height / 2)
|
|
9534
9564
|
.attr('dy', '1em')
|
|
9535
9565
|
.style('text-anchor', 'middle')
|
|
9536
9566
|
.attr('fill', 'var(--chart-text-color)');
|
|
9537
|
-
if (this.chartConfiguration.isMultiChartGridLine
|
|
9567
|
+
if (this.chartConfiguration.isMultiChartGridLine === undefined) {
|
|
9538
9568
|
svgYAxisLeft
|
|
9539
9569
|
.selectAll('.lib-axis-group-label')
|
|
9540
9570
|
.style('font-size', 'smaller')
|
|
9541
9571
|
.text(metaData.yLabel);
|
|
9542
9572
|
}
|
|
9543
9573
|
else {
|
|
9544
|
-
/**
|
|
9545
|
-
* used by weekly charts
|
|
9546
|
-
*/
|
|
9547
9574
|
svg
|
|
9548
9575
|
.selectAll('.lib-axis-group-label')
|
|
9549
9576
|
.attr('class', 'lib-ylabel-weeklyCharts')
|
|
@@ -9610,6 +9637,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9610
9637
|
}
|
|
9611
9638
|
const xLabelText = metaData.xLabel;
|
|
9612
9639
|
const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
|
|
9640
|
+
const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
|
|
9613
9641
|
svg
|
|
9614
9642
|
.append('text')
|
|
9615
9643
|
.attr('class', function () {
|
|
@@ -9621,7 +9649,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9621
9649
|
return baseClass + ' lib-axis-waterfall-label';
|
|
9622
9650
|
})
|
|
9623
9651
|
.attr('style', self.chartConfiguration.xAxisCustomlabelStyles)
|
|
9624
|
-
.attr('transform', 'translate(' + width / 2 + ' ,' +
|
|
9652
|
+
.attr('transform', 'translate(' + width / 2 + ' ,' + xPosition + ')')
|
|
9625
9653
|
.style('text-anchor', 'middle')
|
|
9626
9654
|
.style('fill', 'var(--chart-text-color)')
|
|
9627
9655
|
.style('color', 'var(--chart-text-color)')
|