axidio-styleguide-library1-v2 0.4.60 → 0.4.61
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 +79 -159
- package/esm2022/lib/horizontal-bars-with-scroll-zoom/horizontal-bars-with-scroll-zoom.component.mjs +2 -2
- package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +29 -19
- package/fesm2022/axidio-styleguide-library1-v2.mjs +107 -177
- package/fesm2022/axidio-styleguide-library1-v2.mjs.map +1 -1
- package/lib/group-chart/group-chart.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3387,12 +3387,7 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3387
3387
|
this.chartConfiguration = {};
|
|
3388
3388
|
this.objectKeys = Object.keys;
|
|
3389
3389
|
this.defaultConfiguration = {
|
|
3390
|
-
|
|
3391
|
-
"top": 30,
|
|
3392
|
-
"left": 110,
|
|
3393
|
-
"right": 40,
|
|
3394
|
-
"bottom": 50
|
|
3395
|
-
},
|
|
3390
|
+
margin: { top: 20, right: 20, bottom: 20, left: 40 },
|
|
3396
3391
|
labelFormatter: ChartHelper.defaultFormatter,
|
|
3397
3392
|
svgHeight: 70,
|
|
3398
3393
|
numberOfYTicks: 5,
|
|
@@ -3403,7 +3398,7 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3403
3398
|
showLineChartAxis: true,
|
|
3404
3399
|
showValues: true,
|
|
3405
3400
|
headerMenuOptions: HeaderConfigHelper.headerConfig.headerMenuOptions,
|
|
3406
|
-
yAxisGrid:
|
|
3401
|
+
yAxisGrid: false,
|
|
3407
3402
|
legendVisible: true,
|
|
3408
3403
|
isYaxisLabelHidden: false,
|
|
3409
3404
|
backgroundColor: '#FFFFFF',
|
|
@@ -3490,15 +3485,10 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3490
3485
|
const margin = this.chartConfiguration.margin;
|
|
3491
3486
|
let width = this.calculateWidth(chartContainer, margin);
|
|
3492
3487
|
let height = this.calculateHeight(verticalstackedcontainer, margin);
|
|
3493
|
-
const minHeight = 155;
|
|
3494
|
-
height = Math.max(height, minHeight);
|
|
3495
3488
|
return { width, height, margin, chartContainer, verticalstackedcontainer };
|
|
3496
3489
|
}
|
|
3497
3490
|
calculateWidth(chartContainer, margin) {
|
|
3498
|
-
const
|
|
3499
|
-
const leftSvgWidth = margin.left + 20;
|
|
3500
|
-
const rightSvgWidth = 60;
|
|
3501
|
-
const baseWidth = containerWidth - leftSvgWidth - rightSvgWidth;
|
|
3491
|
+
const baseWidth = parseInt(chartContainer.style('width')) - margin.left - margin.right;
|
|
3502
3492
|
const dataLength = this.chartData.data.length;
|
|
3503
3493
|
let width = baseWidth;
|
|
3504
3494
|
if (dataLength > 30 && this.isZoomedOut) {
|
|
@@ -3519,28 +3509,23 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3519
3509
|
return width;
|
|
3520
3510
|
}
|
|
3521
3511
|
calculateHeight(verticalstackedcontainer, margin) {
|
|
3522
|
-
|
|
3523
|
-
|
|
3524
|
-
|
|
3525
|
-
|
|
3512
|
+
let height = parseInt(verticalstackedcontainer.style('height')) *
|
|
3513
|
+
(this.chartConfiguration.svgHeight / 100) -
|
|
3514
|
+
margin.top -
|
|
3515
|
+
margin.bottom;
|
|
3516
|
+
if (this.chartConfiguration.isFullScreen && this.chartConfiguration.svgHeight !== 70) {
|
|
3517
|
+
height = this.chartConfiguration.svgHeight;
|
|
3526
3518
|
}
|
|
3527
|
-
else {
|
|
3528
|
-
|
|
3529
|
-
const svgHeightPercentage = this.chartConfiguration.svgHeight || 70;
|
|
3530
|
-
height = (containerHeight * svgHeightPercentage) / 100;
|
|
3519
|
+
else if (this.chartConfiguration.isFullScreen) {
|
|
3520
|
+
height = parseInt(verticalstackedcontainer.style('height'));
|
|
3531
3521
|
}
|
|
3532
|
-
// FIXED: Apply margin adjustments consistently
|
|
3533
|
-
height = height - margin.top - margin.bottom;
|
|
3534
|
-
// FIXED: Additional adjustments for headers
|
|
3535
3522
|
if (this.chartConfiguration.isDrilldownChart && !this.isHeaderVisible) {
|
|
3536
|
-
height
|
|
3523
|
+
height = parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 130;
|
|
3537
3524
|
}
|
|
3538
|
-
|
|
3539
|
-
height
|
|
3525
|
+
if (this.chartConfiguration.isHeaderVisible) {
|
|
3526
|
+
height = parseInt(verticalstackedcontainer.style('height')) - margin.top - margin.bottom - 100;
|
|
3540
3527
|
}
|
|
3541
|
-
|
|
3542
|
-
height += 50;
|
|
3543
|
-
return Math.max(height, 150); // Ensure minimum height
|
|
3528
|
+
return height;
|
|
3544
3529
|
}
|
|
3545
3530
|
createScales(chartContext, dimensions) {
|
|
3546
3531
|
const { data, metaData, lineData, keyList } = chartContext;
|
|
@@ -3566,8 +3551,7 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3566
3551
|
}
|
|
3567
3552
|
const xScaleFromOrigin = d3.scaleBand().domain(groups).range([0, width - rightSvgWidth]);
|
|
3568
3553
|
const xSubgroup = d3.scaleBand().domain(keyList).range([0, x.bandwidth()]);
|
|
3569
|
-
|
|
3570
|
-
const maxValue = this.calculateMaxValue(data, keyList, height);
|
|
3554
|
+
const maxValue = this.calculateMaxValue(data, keyList);
|
|
3571
3555
|
const y = d3.scaleLinear().domain([0, maxValue]).nice().rangeRound([height, 0]);
|
|
3572
3556
|
let lineYscale = null;
|
|
3573
3557
|
if (lineData) {
|
|
@@ -3585,25 +3569,19 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3585
3569
|
rightSvgWidth,
|
|
3586
3570
|
};
|
|
3587
3571
|
}
|
|
3588
|
-
calculateMaxValue(data, keyList
|
|
3572
|
+
calculateMaxValue(data, keyList) {
|
|
3589
3573
|
let maxValue = d3.max(data, (d) => d3.max(keyList, (key) => +d[key])) || 0;
|
|
3590
|
-
// FIXED: Better handling for zero values
|
|
3591
3574
|
if (maxValue === 0) {
|
|
3592
3575
|
maxValue = this.chartData.targetLineData
|
|
3593
3576
|
? this.chartData.targetLineData.target + 20
|
|
3594
3577
|
: 100;
|
|
3595
3578
|
}
|
|
3596
|
-
// FIXED: Scale based on available height
|
|
3597
3579
|
if (this.chartConfiguration.customYscale) {
|
|
3598
3580
|
maxValue *= this.chartConfiguration.customYscale;
|
|
3599
3581
|
}
|
|
3600
|
-
else if (height > 400) {
|
|
3601
|
-
// Auto-scale for larger heights
|
|
3602
|
-
maxValue *= 1.2;
|
|
3603
|
-
}
|
|
3604
3582
|
if (this.chartData.targetLineData && maxValue < this.chartData.targetLineData.target) {
|
|
3605
3583
|
const target = this.chartData.targetLineData.target;
|
|
3606
|
-
maxValue = maxValue < 10 && target < 10 ? target + 3 : target +
|
|
3584
|
+
maxValue = maxValue < 10 && target < 10 ? target + 3 : target + 20;
|
|
3607
3585
|
}
|
|
3608
3586
|
return maxValue;
|
|
3609
3587
|
}
|
|
@@ -3620,59 +3598,46 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3620
3598
|
createSVGStructure(dimensions) {
|
|
3621
3599
|
const { chartContainer, height, margin } = dimensions;
|
|
3622
3600
|
const rightSvgWidth = 60;
|
|
3623
|
-
// FIXED: Calculate total height including margins and extra space
|
|
3624
|
-
const totalHeight = height + margin.top + margin.bottom; // Added extra 60px
|
|
3625
3601
|
const outerContainer = chartContainer
|
|
3626
3602
|
.append('div')
|
|
3627
3603
|
.attr('id', this.uniqueId)
|
|
3628
3604
|
.attr('class', 'outer-container')
|
|
3629
3605
|
.style('width', '100%')
|
|
3630
|
-
.style('height',
|
|
3631
|
-
.style('overflow', 'hidden')
|
|
3632
|
-
.style('padding-left',
|
|
3606
|
+
.style('height', height)
|
|
3607
|
+
.style('overflow-x', 'hidden')
|
|
3608
|
+
.style('padding-left', `${margin.left}px`)
|
|
3633
3609
|
.style('padding-right', `${rightSvgWidth}px`)
|
|
3634
|
-
.style('margin-left', '
|
|
3635
|
-
.style('position', 'relative');
|
|
3636
|
-
const leftSvgWidth = margin.left + 20;
|
|
3637
|
-
// FIXED: Y-axis SVG with proper height
|
|
3610
|
+
.style('margin-left', '15px');
|
|
3638
3611
|
const svgYAxisLeft = outerContainer
|
|
3639
3612
|
.append('svg')
|
|
3640
|
-
.attr('width',
|
|
3641
|
-
.attr('height',
|
|
3613
|
+
.attr('width', 100)
|
|
3614
|
+
.attr('height', height + margin.top + margin.bottom + 10)
|
|
3642
3615
|
.style('position', 'absolute')
|
|
3643
3616
|
.style('left', '0')
|
|
3644
|
-
.style('
|
|
3645
|
-
.style('z-index', 2) // Increased z-index to ensure it stays above
|
|
3617
|
+
.style('z-index', 1)
|
|
3646
3618
|
.append('g')
|
|
3647
|
-
.attr('transform', `translate(${margin.left +
|
|
3619
|
+
.attr('transform', `translate(${margin.left + 15},${margin.top})`);
|
|
3648
3620
|
const svgYAxisRight = outerContainer
|
|
3649
3621
|
.append('svg')
|
|
3650
3622
|
.attr('width', rightSvgWidth)
|
|
3651
|
-
.attr('height',
|
|
3623
|
+
.attr('height', height + margin.top + margin.bottom + 10)
|
|
3652
3624
|
.style('position', 'absolute')
|
|
3653
|
-
.style('right', '
|
|
3654
|
-
.style('
|
|
3655
|
-
.style('z-index', 2) // Increased z-index
|
|
3625
|
+
.style('right', '12px')
|
|
3626
|
+
.style('z-index', 1)
|
|
3656
3627
|
.append('g')
|
|
3657
3628
|
.attr('transform', `translate(0,${margin.top})`);
|
|
3658
|
-
// FIXED: Inner container starts AFTER the y-axis labels
|
|
3659
3629
|
const innerContainer = outerContainer
|
|
3660
3630
|
.append('div')
|
|
3661
3631
|
.attr('class', 'inner-container')
|
|
3662
|
-
.style('width',
|
|
3663
|
-
.style('
|
|
3664
|
-
.style('margin-left', `${leftSvgWidth - 15}px`) // Good adjustment for the 15px offset
|
|
3665
|
-
.style('overflow-x', 'auto')
|
|
3666
|
-
.style('overflow-y', 'hidden')
|
|
3667
|
-
.style('position', 'relative'); // Add this for better positioning context
|
|
3668
|
-
// FIXED: Main SVG with increased height and proper positioning
|
|
3632
|
+
.style('width', '100%')
|
|
3633
|
+
.style('overflow-x', 'auto');
|
|
3669
3634
|
const svg = innerContainer
|
|
3670
3635
|
.append('svg')
|
|
3671
|
-
.attr('width', dimensions.width)
|
|
3672
|
-
.attr('height',
|
|
3636
|
+
.attr('width', dimensions.width - rightSvgWidth)
|
|
3637
|
+
.attr('height', height + margin.top + margin.bottom + 30)
|
|
3673
3638
|
.append('g')
|
|
3674
3639
|
.attr('transform', `translate(0,${margin.top})`);
|
|
3675
|
-
return { outerContainer, svgYAxisLeft, svgYAxisRight, svg
|
|
3640
|
+
return { outerContainer, svgYAxisLeft, svgYAxisRight, svg };
|
|
3676
3641
|
}
|
|
3677
3642
|
renderAxes(svgElements, scales, chartContext, dimensions) {
|
|
3678
3643
|
const { svg, svgYAxisLeft, svgYAxisRight } = svgElements;
|
|
@@ -3694,24 +3659,18 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3694
3659
|
renderXAxis(svg, x, xScaleFromOrigin, height, chartContext, keyList) {
|
|
3695
3660
|
const { data, metaData } = chartContext;
|
|
3696
3661
|
if (this.chartConfiguration.isMultiChartGridLine === undefined) {
|
|
3697
|
-
|
|
3662
|
+
svg
|
|
3698
3663
|
.append('g')
|
|
3699
3664
|
.attr('class', 'x1 axis1')
|
|
3700
3665
|
.attr('transform', `translate(0,${height})`)
|
|
3701
|
-
.call(d3.axisBottom(x)
|
|
3702
|
-
|
|
3703
|
-
|
|
3704
|
-
.select('.domain')
|
|
3705
|
-
.style('stroke', 'var(--chart-axis-color, #000000)')
|
|
3706
|
-
.style('stroke-width', '1px')
|
|
3707
|
-
.style('display', 'block');
|
|
3708
|
-
xAxis.selectAll('g.tick line').remove();
|
|
3666
|
+
.call(d3.axisBottom(x))
|
|
3667
|
+
.call((g) => g.select('.domain').remove());
|
|
3668
|
+
svg.selectAll('g.x1.axis1 g.tick line').remove();
|
|
3709
3669
|
const textClass = 'lib-xaxis-labels-texts-drilldown';
|
|
3710
|
-
const textSelection =
|
|
3711
|
-
|
|
3712
|
-
.attr('
|
|
3713
|
-
|
|
3714
|
-
.style('font-size', '11px');
|
|
3670
|
+
const textSelection = svg.selectAll('g.x1.axis1 g.tick text').attr('class', textClass).style('fill', 'var(--chart-text-color)');
|
|
3671
|
+
if (keyList.length > 1 && !metaData.xLabel) {
|
|
3672
|
+
textSelection.attr('y', 32);
|
|
3673
|
+
}
|
|
3715
3674
|
}
|
|
3716
3675
|
else {
|
|
3717
3676
|
this.renderMultiChartXAxis(svg, x, height, data, metaData);
|
|
@@ -3719,18 +3678,14 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3719
3678
|
if (this.chartConfiguration.xLabelsOnSameLine) {
|
|
3720
3679
|
this.renderXLabelsOnSameLine(svg, data, metaData);
|
|
3721
3680
|
}
|
|
3722
|
-
//
|
|
3723
|
-
|
|
3681
|
+
// Render bottom x-axis
|
|
3682
|
+
svg
|
|
3724
3683
|
.append('g')
|
|
3725
3684
|
.attr('class', 'x2 axis2')
|
|
3726
3685
|
.attr('transform', `translate(0,${height})`)
|
|
3727
3686
|
.style('color', '#000')
|
|
3728
|
-
.call(d3.axisBottom(xScaleFromOrigin).tickSize(0))
|
|
3729
|
-
|
|
3730
|
-
.select('.domain')
|
|
3731
|
-
.style('stroke', 'var(--chart-axis-color, #000000)')
|
|
3732
|
-
.style('stroke-width', '1px')
|
|
3733
|
-
.attr('fill', 'none');
|
|
3687
|
+
.call(d3.axisBottom(xScaleFromOrigin).tickSize(0))
|
|
3688
|
+
.call((g) => g.select('.domain').attr('fill', 'none'));
|
|
3734
3689
|
svg.selectAll('g.x2.axis2 g.tick text').style('display', 'none');
|
|
3735
3690
|
if (this.isZoomedOut) {
|
|
3736
3691
|
svg.selectAll('.lib-xaxis-labels-texts-drilldown').attr('class', 'lib-display-hidden');
|
|
@@ -3799,7 +3754,6 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3799
3754
|
});
|
|
3800
3755
|
}
|
|
3801
3756
|
renderYAxis(svg, svgYAxisLeft, svgYAxisRight, y, dimensions) {
|
|
3802
|
-
// Main Y-axis in chart area (hidden)
|
|
3803
3757
|
svg
|
|
3804
3758
|
.append('g')
|
|
3805
3759
|
.attr('class', 'lib-stacked-y-axis-text yaxis-dashed')
|
|
@@ -3807,34 +3761,19 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3807
3761
|
.attr('transform', 'translate(0,0)')
|
|
3808
3762
|
.call(y)
|
|
3809
3763
|
.style('display', 'none');
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
.axisLeft(y)
|
|
3813
|
-
.tickSize(0)
|
|
3814
|
-
.ticks(this.chartConfiguration.numberOfYTicks)
|
|
3815
|
-
.tickFormat(this.chartConfiguration.yAxisLabelFomatter);
|
|
3816
|
-
const yAxisGroup = svgYAxisLeft
|
|
3764
|
+
svgYAxisLeft
|
|
3765
|
+
.append('g')
|
|
3817
3766
|
.append('g')
|
|
3818
3767
|
.attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
|
|
3819
3768
|
.attr('style', this.chartConfiguration.yAxisCustomTextStyles)
|
|
3820
3769
|
.attr('transform', 'translate(0,0)')
|
|
3821
|
-
.call(
|
|
3822
|
-
|
|
3823
|
-
|
|
3824
|
-
.
|
|
3825
|
-
.
|
|
3826
|
-
.style('stroke-width', '1px')
|
|
3827
|
-
.style('display', 'block');
|
|
3828
|
-
// FIXED: Position Y-axis values with proper spacing
|
|
3829
|
-
yAxisGroup
|
|
3770
|
+
.call(d3
|
|
3771
|
+
.axisLeft(y)
|
|
3772
|
+
.tickSize(0)
|
|
3773
|
+
.ticks(this.chartConfiguration.numberOfYTicks)
|
|
3774
|
+
.tickFormat(this.chartConfiguration.yAxisLabelFomatter))
|
|
3830
3775
|
.selectAll('text')
|
|
3831
|
-
.style('fill', 'var(--chart-text-color
|
|
3832
|
-
.style('font-size', '11px')
|
|
3833
|
-
.style('font-weight', '400')
|
|
3834
|
-
.attr('x', -6) // FIXED: Small gap from axis line
|
|
3835
|
-
.attr('text-anchor', 'end')
|
|
3836
|
-
.attr('dy', '0.32em');
|
|
3837
|
-
// Right Y-axis (hidden)
|
|
3776
|
+
.style('fill', 'var(--chart-text-color)');
|
|
3838
3777
|
svgYAxisRight
|
|
3839
3778
|
.append('g')
|
|
3840
3779
|
.attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
|
|
@@ -3850,32 +3789,21 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3850
3789
|
}
|
|
3851
3790
|
if (this.chartConfiguration.isYaxisLabelHidden) {
|
|
3852
3791
|
d3.selectAll('.yaxis-dashed > g > text').attr('class', 'lib-display-hidden');
|
|
3853
|
-
// FIXED: Don't hide the Y-axis label element
|
|
3854
|
-
d3.selectAll('.lib-ylabel-visible').style('display', 'block');
|
|
3855
3792
|
}
|
|
3856
3793
|
if (this.chartConfiguration.isYaxisHidden) {
|
|
3857
3794
|
d3.selectAll('.yaxis-dashed').attr('class', 'lib-display-hidden');
|
|
3858
|
-
// FIXED: Keep Y-axis label visible
|
|
3859
|
-
d3.selectAll('.lib-ylabel-visible').style('display', 'block');
|
|
3860
3795
|
}
|
|
3861
3796
|
if (this.chartConfiguration.isYaxisDashed) {
|
|
3862
|
-
d3.selectAll('.yaxis-dashed
|
|
3797
|
+
d3.selectAll('.yaxis-dashed').style('stroke-dasharray', '5 5').style('color', '#999999');
|
|
3863
3798
|
}
|
|
3864
3799
|
}
|
|
3865
3800
|
renderYAxisGrid(svg, y, width) {
|
|
3866
3801
|
svg
|
|
3867
3802
|
.append('g')
|
|
3868
|
-
.
|
|
3869
|
-
.
|
|
3870
|
-
.
|
|
3871
|
-
.
|
|
3872
|
-
.tickFormat(''))
|
|
3873
|
-
.style('color', '#535353ff') // FIXED: Lighter grid
|
|
3874
|
-
.style('opacity', '0.7')
|
|
3875
|
-
.style('stroke-dasharray', 'none')
|
|
3876
|
-
.call((g) => g.select('.domain').remove())
|
|
3877
|
-
.selectAll('line')
|
|
3878
|
-
.style('stroke-width', '0.5px');
|
|
3803
|
+
.call(d3.axisLeft(y).ticks(this.chartConfiguration.numberOfYTicks).tickSize(-width))
|
|
3804
|
+
.style('color', 'var(--chart-axis-color, #B9B9B9)')
|
|
3805
|
+
.style('opacity', '0.5')
|
|
3806
|
+
.call((g) => g.select('.domain').remove());
|
|
3879
3807
|
}
|
|
3880
3808
|
renderXAxisGrid(svg, x, height) {
|
|
3881
3809
|
svg
|
|
@@ -3918,20 +3846,10 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3918
3846
|
.append('rect')
|
|
3919
3847
|
.attr('class', 'bars')
|
|
3920
3848
|
.on('click', (d) => this.handleBarClick(d, metaData))
|
|
3921
|
-
.attr('x', (d) =>
|
|
3922
|
-
|
|
3923
|
-
const bandWidth = x.bandwidth();
|
|
3924
|
-
return (bandWidth - barWidth) / 2;
|
|
3925
|
-
})
|
|
3926
|
-
.attr('y', (d) => {
|
|
3927
|
-
const value = d.value === -1 ? 0 : d.value;
|
|
3928
|
-
return y(value);
|
|
3929
|
-
})
|
|
3849
|
+
.attr('x', (d) => this.getBarX(d, data, x, xSubgroup))
|
|
3850
|
+
.attr('y', (d) => y(d.value))
|
|
3930
3851
|
.attr('width', (d) => this.getBarWidth(d, data, x, xSubgroup))
|
|
3931
|
-
.attr('height', (d) =>
|
|
3932
|
-
const value = d.value === -1 ? 0 : d.value;
|
|
3933
|
-
return height - y(value);
|
|
3934
|
-
})
|
|
3852
|
+
.attr('height', (d) => this.getBarHeight(d, y, height))
|
|
3935
3853
|
.style('cursor', (d) => (metaData.hasDrillDown && !isRia ? 'pointer' : 'default'))
|
|
3936
3854
|
.attr('fill', (d) => this.getBarColor(d, metaData));
|
|
3937
3855
|
if (!isRia && (this.chartConfiguration.displayTitleOnTop || (!this.chartConfiguration.textsOnBar && !this.chartConfiguration.displayTitleOnTop))) {
|
|
@@ -3955,6 +3873,12 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3955
3873
|
this.handleClick(d);
|
|
3956
3874
|
}
|
|
3957
3875
|
}
|
|
3876
|
+
getBarX(d, data, x, xSubgroup) {
|
|
3877
|
+
if (this.chartConfiguration.isDrilldownChart) {
|
|
3878
|
+
return this.calculateDrilldownBarX(d, data, x);
|
|
3879
|
+
}
|
|
3880
|
+
return xSubgroup(d.key);
|
|
3881
|
+
}
|
|
3958
3882
|
calculateDrilldownBarX(d, data, x) {
|
|
3959
3883
|
let tempScale;
|
|
3960
3884
|
data.forEach((indiv) => {
|
|
@@ -4150,31 +4074,29 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
4150
4074
|
}
|
|
4151
4075
|
}
|
|
4152
4076
|
renderYAxisLabel(svgYAxisLeft, yLabel, height, margin) {
|
|
4153
|
-
// FIXED: Proper Y-axis label with correct positioning
|
|
4154
4077
|
svgYAxisLeft
|
|
4155
4078
|
.append('text')
|
|
4156
|
-
.attr('class', 'lib-axis-group-label
|
|
4079
|
+
.attr('class', 'lib-axis-group-label font-size-1')
|
|
4157
4080
|
.attr('style', this.chartConfiguration.yAxisCustomlabelStyles)
|
|
4158
4081
|
.attr('transform', 'rotate(-90)')
|
|
4159
|
-
.attr('y', -margin.left)
|
|
4082
|
+
.attr('y', 0 - margin.left / 2 - 30)
|
|
4160
4083
|
.attr('x', 0 - height / 2)
|
|
4161
4084
|
.attr('dy', '1em')
|
|
4162
4085
|
.style('text-anchor', 'middle')
|
|
4163
|
-
.
|
|
4164
|
-
.style('fill', 'var(--chart-text-color, #666666)');
|
|
4086
|
+
.attr('fill', 'var(--chart-text-color)');
|
|
4165
4087
|
if (this.chartConfiguration.isMultiChartGridLine === undefined) {
|
|
4166
|
-
svgYAxisLeft.selectAll('.lib-axis-group-label').text(yLabel);
|
|
4088
|
+
svgYAxisLeft.selectAll('.lib-axis-group-label').style('font-size', 'smaller').text(yLabel);
|
|
4167
4089
|
}
|
|
4168
4090
|
else {
|
|
4169
4091
|
svgYAxisLeft
|
|
4170
4092
|
.selectAll('.lib-axis-group-label')
|
|
4171
|
-
.attr('class', 'lib-ylabel-weeklyCharts
|
|
4093
|
+
.attr('class', 'lib-ylabel-weeklyCharts')
|
|
4172
4094
|
.text(yLabel.toLowerCase());
|
|
4173
4095
|
}
|
|
4174
4096
|
}
|
|
4175
4097
|
renderXAxisLabel(svg, xLabel, width, height, margin) {
|
|
4176
4098
|
const isAcronym = this.isAcronym(xLabel.replace(/[^A-Za-z]/g, ''));
|
|
4177
|
-
let baseClass = 'lib-axis-group-label';
|
|
4099
|
+
let baseClass = 'lib-axis-group-label font-size-1';
|
|
4178
4100
|
if (this.chartConfiguration.isDrilldownChart) {
|
|
4179
4101
|
baseClass += ' lib-xlabel-drilldowncharts';
|
|
4180
4102
|
}
|
|
@@ -4188,11 +4110,9 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
4188
4110
|
.append('text')
|
|
4189
4111
|
.attr('class', baseClass)
|
|
4190
4112
|
.attr('style', this.chartConfiguration.xAxisCustomlabelStyles)
|
|
4191
|
-
|
|
4192
|
-
.attr('transform', `translate(${width / 2},${height + 32})`)
|
|
4113
|
+
.attr('transform', `translate(${width / 2},${height + margin.top + 20})`)
|
|
4193
4114
|
.style('text-anchor', 'middle')
|
|
4194
|
-
.style('fill', 'var(--chart-text-color
|
|
4195
|
-
.style('font-size', '13px')
|
|
4115
|
+
.style('fill', 'var(--chart-text-color)')
|
|
4196
4116
|
.text(isAcronym ? xLabel.toUpperCase() : xLabel.toLowerCase())
|
|
4197
4117
|
.style('text-transform', isAcronym ? 'none' : 'capitalize');
|
|
4198
4118
|
}
|
|
@@ -4306,11 +4226,11 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
4306
4226
|
this.clickEvent.emit(event);
|
|
4307
4227
|
}
|
|
4308
4228
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4309
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GroupChartComponent, selector: "lib-group-chart", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["groupchartcontainer"], descendants: true, static: true }, { propertyName: "groupcontainerElt", first: true, predicate: ["groupcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n #groupcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n (resized)=\"onResized($event)\"\r\n>\r\n\r\n<div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n ></lib-chart-header-v2>\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n</div>\r\n\r\n <lib-chart-header-v1\r\n [title]=\"chartData.metaData.title\"\r\n [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n [isria]=\"customChartConfiguration.isRia\"\r\n [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n [isAlertEnabled]=\"isAlertEnabled\"\r\n *ngIf=\"isHeaderVisible\"\r\n></lib-chart-header-v1>\r\n\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"groupchartcontainer\"\r\n #groupchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:1.2em}.lib-axis-group-label{font-size:.85em;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:10px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:35px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1}.title:after{content:\"\";position:absolute;bottom:0;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-top-text{color:#000;font-size:14px;font-weight:600}.title-bar-name{color:#000;font-size:12px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:#4f4f4f;font-size:12px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV1Component, selector: "lib-chart-header-v1", inputs: ["isAlertEnabled", "title", "menuOptions", "isEditEnabled", "isria", "hasDrillDown", "selectedKpiTooltop"], outputs: ["menuOptionClickEvent"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GroupChartComponent, selector: "lib-group-chart", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["groupchartcontainer"], descendants: true, static: true }, { propertyName: "groupcontainerElt", first: true, predicate: ["groupcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n #groupcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n (resized)=\"onResized($event)\"\r\n>\r\n\r\n<div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n ></lib-chart-header-v2>\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n</div>\r\n\r\n <lib-chart-header-v1\r\n [title]=\"chartData.metaData.title\"\r\n [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n [isria]=\"customChartConfiguration.isRia\"\r\n [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n [isAlertEnabled]=\"isAlertEnabled\"\r\n *ngIf=\"isHeaderVisible\"\r\n></lib-chart-header-v1>\r\n\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"groupchartcontainer\"\r\n #groupchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:1.2em}.lib-axis-group-label{font-size:.85em;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:35px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1}.title:after{content:\"\";position:absolute;bottom:0;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-top-text{color:#000;font-size:14px;font-weight:600}.title-bar-name{color:#000;font-size:12px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:#4f4f4f;font-size:12px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}@media screen and (min-width: 1024px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1024px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1024px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1366px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1366px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1366px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1920px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 1920px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 1920px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 2560px) and (min-height: 500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.dots{font-size:16px!important}}@media screen and (min-width: 2560px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.dots{font-size:16px!important}}@media screen and (min-width: 2560px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV1Component, selector: "lib-chart-header-v1", inputs: ["isAlertEnabled", "title", "menuOptions", "isEditEnabled", "isria", "hasDrillDown", "selectedKpiTooltop"], outputs: ["menuOptionClickEvent"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4310
4230
|
}
|
|
4311
4231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupChartComponent, decorators: [{
|
|
4312
4232
|
type: Component,
|
|
4313
|
-
args: [{ selector: 'lib-group-chart', encapsulation: ViewEncapsulation.None, template: "<div\r\n #groupcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n (resized)=\"onResized($event)\"\r\n>\r\n\r\n<div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n ></lib-chart-header-v2>\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n</div>\r\n\r\n <lib-chart-header-v1\r\n [title]=\"chartData.metaData.title\"\r\n [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n [isria]=\"customChartConfiguration.isRia\"\r\n [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n [isAlertEnabled]=\"isAlertEnabled\"\r\n *ngIf=\"isHeaderVisible\"\r\n></lib-chart-header-v1>\r\n\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"groupchartcontainer\"\r\n #groupchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:1.2em}.lib-axis-group-label{font-size:.85em;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:10px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:35px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1}.title:after{content:\"\";position:absolute;bottom:0;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-top-text{color:#000;font-size:14px;font-weight:600}.title-bar-name{color:#000;font-size:12px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:#4f4f4f;font-size:12px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
|
|
4233
|
+
args: [{ selector: 'lib-group-chart', encapsulation: ViewEncapsulation.None, template: "<div\r\n #groupcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n (resized)=\"onResized($event)\"\r\n>\r\n\r\n<div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n ></lib-chart-header-v2>\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n</div>\r\n\r\n <lib-chart-header-v1\r\n [title]=\"chartData.metaData.title\"\r\n [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n [isria]=\"customChartConfiguration.isRia\"\r\n [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n [isAlertEnabled]=\"isAlertEnabled\"\r\n *ngIf=\"isHeaderVisible\"\r\n></lib-chart-header-v1>\r\n\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"groupchartcontainer\"\r\n #groupchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:1.2em}.lib-axis-group-label{font-size:.85em;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:35px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1}.title:after{content:\"\";position:absolute;bottom:0;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-top-text{color:#000;font-size:14px;font-weight:600}.title-bar-name{color:#000;font-size:12px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:#4f4f4f;font-size:12px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}@media screen and (min-width: 1024px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1024px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1024px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1366px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1366px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1366px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1920px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 1920px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 1920px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 2560px) and (min-height: 500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.dots{font-size:16px!important}}@media screen and (min-width: 2560px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.dots{font-size:16px!important}}@media screen and (min-width: 2560px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
|
|
4314
4234
|
}], ctorParameters: () => [], propDecorators: { containerElt: [{
|
|
4315
4235
|
type: ViewChild,
|
|
4316
4236
|
args: ['groupchartcontainer', { static: true }]
|
|
@@ -7056,7 +6976,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7056
6976
|
.append('div')
|
|
7057
6977
|
.style('width', '100%')
|
|
7058
6978
|
.style('text-align', 'center')
|
|
7059
|
-
.style('font-size', '
|
|
6979
|
+
.style('font-size', '12px')
|
|
7060
6980
|
.style('font-weight', '600')
|
|
7061
6981
|
.style('font-family', 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto')
|
|
7062
6982
|
.style('color', 'var(--chart-text-color)')
|
|
@@ -7838,7 +7758,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7838
7758
|
this.renderAxisLabels(svg, svgYAxisLeft, svgYAxisRight, metaData, width, height, margin, self, isria, RIGHT_SVG_WIDTH);
|
|
7839
7759
|
// ==================== TARGET LINE ====================
|
|
7840
7760
|
if (this.chartData.targetLineData) {
|
|
7841
|
-
this.renderTargetLine(svg, svgYAxisRight, y, width, RIGHT_SVG_WIDTH, metaData, self);
|
|
7761
|
+
this.renderTargetLine(svg, svgYAxisRight, y, width, RIGHT_SVG_WIDTH, metaData, self, isria);
|
|
7842
7762
|
}
|
|
7843
7763
|
// ==================== LINE CHART ====================
|
|
7844
7764
|
if (lineData) {
|
|
@@ -7863,12 +7783,13 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7863
7783
|
.attr('class', 'x1 axis1')
|
|
7864
7784
|
.attr('transform', `translate(0,${translateY})`)
|
|
7865
7785
|
// .attr('transform', `translate(-35,${translateY})`)
|
|
7866
|
-
.call(d3.axisBottom(x))
|
|
7786
|
+
// .call(d3.axisBottom(x))
|
|
7787
|
+
.call(isria ? d3.axisBottom(x).tickSize(0) : d3.axisBottom(x))
|
|
7867
7788
|
// .call((g) => g.select('.domain').remove());
|
|
7868
7789
|
// .call((g) => { if (!isria) g.select('.domain').remove(); })
|
|
7869
7790
|
.call(g => {
|
|
7870
7791
|
// RIA + single subgroup → remove domain
|
|
7871
|
-
if (isria && subgroups.length === 1) {
|
|
7792
|
+
if (isria && (subgroups.length > 1 && self.chartData.data.length === 1)) {
|
|
7872
7793
|
g.select('.domain').remove();
|
|
7873
7794
|
return;
|
|
7874
7795
|
}
|
|
@@ -7879,11 +7800,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7879
7800
|
})
|
|
7880
7801
|
.call((g) => {
|
|
7881
7802
|
// Move only the axis line (domain) to the left
|
|
7882
|
-
g.select('.domain').attr('transform', 'translate(-
|
|
7803
|
+
g.select('.domain').attr('transform', 'translate(-60,0)');
|
|
7883
7804
|
})
|
|
7884
7805
|
.call((g) => {
|
|
7885
7806
|
// Increase spacing between axis and labels
|
|
7886
|
-
if (isria && subgroups.length === 1) {
|
|
7807
|
+
if (isria && (subgroups.length === 1 || self.chartData.data.length > 1)) {
|
|
7887
7808
|
g.selectAll('.tick text')
|
|
7888
7809
|
.attr('dy', '1em'); // Default is '0.71em', increase for more space
|
|
7889
7810
|
}
|
|
@@ -7946,11 +7867,14 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7946
7867
|
this.applyXLabelsOnSameLine(svg, subgroups, data, metaData, self, shortTickLengthBg, isMobile, isria);
|
|
7947
7868
|
}
|
|
7948
7869
|
// Mobile override for RIA
|
|
7949
|
-
if (isria && self.chartData.data.length
|
|
7870
|
+
if (isria && self.chartData.data.length >= 3) {
|
|
7950
7871
|
svg.selectAll('g.x1.axis1 g.tick text')
|
|
7951
|
-
.classed('mobile-xaxis-override',
|
|
7952
|
-
.text((d) => d.substring(0, 3))
|
|
7953
|
-
.
|
|
7872
|
+
.classed('mobile-xaxis-override', false)
|
|
7873
|
+
// // .text((d: string) => d.substring(0, 3))
|
|
7874
|
+
// .text((d: string) => d.substring(0, 4).toLowerCase())
|
|
7875
|
+
// .text((d: string) => d.toLowerCase())
|
|
7876
|
+
.text((d) => d)
|
|
7877
|
+
.style('font-size', '11px')
|
|
7954
7878
|
.attr('y', 5)
|
|
7955
7879
|
.attr('x', 5)
|
|
7956
7880
|
.style('text-anchor', 'middle');
|
|
@@ -8533,6 +8457,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8533
8457
|
.style('stroke-width', '1px');
|
|
8534
8458
|
})
|
|
8535
8459
|
.selectAll('text')
|
|
8460
|
+
.style('font-size', isria ? '11px' : null)
|
|
8536
8461
|
.style('fill', 'var(--chart-text-color)');
|
|
8537
8462
|
// Right y-axis (hidden by default)
|
|
8538
8463
|
svgYAxisRight.append('g')
|
|
@@ -8581,7 +8506,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8581
8506
|
.attr('transform', 'rotate(-90)')
|
|
8582
8507
|
.attr('y', yPosition)
|
|
8583
8508
|
.attr('x', 0 - height / 2)
|
|
8584
|
-
.attr('dy', '
|
|
8509
|
+
.attr('dy', '0.5em')
|
|
8585
8510
|
.style('text-anchor', 'middle')
|
|
8586
8511
|
.attr('fill', 'var(--chart-text-color)');
|
|
8587
8512
|
if (this.chartConfiguration.isMultiChartGridLine === undefined) {
|
|
@@ -8643,11 +8568,12 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8643
8568
|
}
|
|
8644
8569
|
return baseClass + ' lib-axis-waterfall-label';
|
|
8645
8570
|
}
|
|
8646
|
-
renderTargetLine(svg, svgYAxisRight, y, width, rightSvgWidth, metaData, self) {
|
|
8571
|
+
renderTargetLine(svg, svgYAxisRight, y, width, rightSvgWidth, metaData, self, isria) {
|
|
8647
8572
|
const yZero = y(this.chartData.targetLineData.target);
|
|
8648
8573
|
// Draw target line
|
|
8649
8574
|
svg.append('line')
|
|
8650
|
-
.attr('x1', 20)
|
|
8575
|
+
// .attr('x1', 20)
|
|
8576
|
+
.attr('x1', isria ? 0 : 20)
|
|
8651
8577
|
.attr('x2', width)
|
|
8652
8578
|
.attr('y1', yZero)
|
|
8653
8579
|
.attr('y2', yZero)
|
|
@@ -8661,7 +8587,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8661
8587
|
.attr('width', rightSvgWidth)
|
|
8662
8588
|
.attr('height', 50)
|
|
8663
8589
|
.append('xhtml:div')
|
|
8664
|
-
.attr('class', 'target-display')
|
|
8590
|
+
.attr('class', isria ? 'target-display-ria' : 'target-display')
|
|
8665
8591
|
.style('color', 'var(--chart-text-color)')
|
|
8666
8592
|
.html(`<div>${targetLineName}</div><div>${self.chartData.targetLineData.target}${dataTypeTemp}</div>`);
|
|
8667
8593
|
}
|
|
@@ -8802,6 +8728,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8802
8728
|
}
|
|
8803
8729
|
createChartContainers(chartContainer, margin, height, rightSvgWidth, self, width) {
|
|
8804
8730
|
// Outer container
|
|
8731
|
+
const isria = this.customChartConfiguration.isRia;
|
|
8805
8732
|
const outerContainer = chartContainer
|
|
8806
8733
|
.append('div')
|
|
8807
8734
|
.attr('id', self.uniqueId)
|
|
@@ -8809,7 +8736,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8809
8736
|
.style('width', '100%')
|
|
8810
8737
|
.style('height', height)
|
|
8811
8738
|
.style('overflow', 'visible') // Allow overflow to show scrollbars
|
|
8812
|
-
.style('padding-left', `${margin.left}px`)
|
|
8739
|
+
// .style('padding-left', `${margin.left}px`)
|
|
8740
|
+
.style('padding-left', `${isria ? margin.left + 18 : margin.left + 15}px`)
|
|
8813
8741
|
.style('padding-right', `${rightSvgWidth}px`)
|
|
8814
8742
|
.style('margin-left', '15px');
|
|
8815
8743
|
// Left Y-Axis
|
|
@@ -8818,7 +8746,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8818
8746
|
.attr('width', '100')
|
|
8819
8747
|
.attr('height', height + margin.top + margin.bottom + 10)
|
|
8820
8748
|
.style('position', 'absolute')
|
|
8821
|
-
.style('left', '0')
|
|
8749
|
+
// .style('left', '0')
|
|
8750
|
+
.style('left', isria ? '2px' : '0')
|
|
8822
8751
|
.style('z-index', 1)
|
|
8823
8752
|
.append('g')
|
|
8824
8753
|
.attr('transform', `translate(${margin.left + 15},${margin.top})`);
|
|
@@ -8837,7 +8766,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8837
8766
|
.append('div')
|
|
8838
8767
|
.attr('class', 'inner-container')
|
|
8839
8768
|
.style('width', '100%')
|
|
8840
|
-
.style('overflow-x', 'auto')
|
|
8769
|
+
.style('overflow-x', 'auto')
|
|
8770
|
+
.style('height', isria ? '246px' : null);
|
|
8841
8771
|
// Main SVG
|
|
8842
8772
|
const svg = innerContainer
|
|
8843
8773
|
.append('svg')
|
|
@@ -8867,11 +8797,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8867
8797
|
this.clickEvent.emit(event);
|
|
8868
8798
|
}
|
|
8869
8799
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalGroupedBarWithScrollZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8870
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalGroupedBarWithScrollZoomComponent, selector: "lib-horizontal-grouped-bar-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["groupchartcontainer"], descendants: true, static: true }, { propertyName: "groupcontainerElt", first: true, predicate: ["groupcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n #groupcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n (resized)=\"onResized($event)\"\r\n>\r\n <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n ></lib-chart-header-v2>\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n </div>\r\n <lib-chart-header-v1\r\n [title]=\"chartData.metaData.title\"\r\n [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n [isria]=\"customChartConfiguration.isRia\"\r\n [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n [isAlertEnabled]=\"isAlertEnabled\"\r\n *ngIf=\"isHeaderVisible\"\r\n ></lib-chart-header-v1>\r\n <div\r\n *ngIf=\"\r\n chartData &&\r\n chartData.metaData &&\r\n chartConfiguration.legendJustified &&\r\n legendVisible &&\r\n chartConfiguration.legendAtTopRight\r\n \"\r\n class=\"legend-holder-right\"\r\n [style.height]=\"chartConfiguration.footerHeight\"\r\n >\r\n <ul class=\"display-flex\">\r\n <li\r\n class=\"legends-positioning-inline\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n >\r\n <span\r\n class=\"lib-donut-justified-label-icon-drilldown\"\r\n [style.background-color]=\"item.value\"\r\n ></span\r\n ><span>{{ item.key }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"groupchartcontainer\"\r\n #groupchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n\r\n\r\n <!-- <div\r\n *ngIf=\"\r\n chartData &&\r\n chartData.metaData &&\r\n chartConfiguration.legendJustified &&\r\n legendVisible &&\r\n !chartConfiguration.legendAtTopRight\r\n \"\r\n class=\"lib-donut-chart-footer\"\r\n [style.height]=\"chartConfiguration.footerHeight\"\r\n >\r\n <ul class=\"lib-donut-justified-label-wrapper\">\r\n <li\r\n class=\"lib-donut-justified-label-item\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n >\r\n <span\r\n class=\"lib-donut-justified-label-icon\"\r\n [style.background-color]=\"item.value\"\r\n ></span\r\n ><span>{{ item.key }}</span>\r\n </li>\r\n </ul>\r\n </div> -->\r\n\r\n\r\n <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n <div\r\n class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n *ngFor=\"\r\n let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n let i = index\r\n \">\r\n <div\r\n class=\"bar-name font-size-1\"\r\n *ngIf=\"\r\n chartData.data[0][item.key] &&\r\n i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n \"\r\n >\r\n {{ item.key }}\r\n </div>\r\n <div\r\n class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n [style.color]=\"\r\n chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n \"\r\n *ngIf=\"\r\n chartData.data[0][item.key] &&\r\n i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n \"\r\n >\r\n {{ chartData.data[0][item.key] }}\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}.outer-container{position:relative;width:100%;overflow:visible}.inner-container{width:100%;overflow-x:auto;overflow-y:hidden;position:relative;padding-bottom:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.inner-container.scroll-enabled{overflow-x:auto;-webkit-overflow-scrolling:touch;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}.inner-container.scroll-enabled::-webkit-scrollbar{height:8px}.inner-container.scroll-enabled::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.inner-container.scroll-enabled::-webkit-scrollbar-thumb{background:#888;border-radius:4px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV1Component, selector: "lib-chart-header-v1", inputs: ["isAlertEnabled", "title", "menuOptions", "isEditEnabled", "isria", "hasDrillDown", "selectedKpiTooltop"], outputs: ["menuOptionClickEvent"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8800
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalGroupedBarWithScrollZoomComponent, selector: "lib-horizontal-grouped-bar-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["groupchartcontainer"], descendants: true, static: true }, { propertyName: "groupcontainerElt", first: true, predicate: ["groupcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n #groupcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n (resized)=\"onResized($event)\"\r\n>\r\n <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n ></lib-chart-header-v2>\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n </div>\r\n <lib-chart-header-v1\r\n [title]=\"chartData.metaData.title\"\r\n [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n [isria]=\"customChartConfiguration.isRia\"\r\n [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n [isAlertEnabled]=\"isAlertEnabled\"\r\n *ngIf=\"isHeaderVisible\"\r\n ></lib-chart-header-v1>\r\n <div\r\n *ngIf=\"\r\n chartData &&\r\n chartData.metaData &&\r\n chartConfiguration.legendJustified &&\r\n legendVisible &&\r\n chartConfiguration.legendAtTopRight\r\n \"\r\n class=\"legend-holder-right\"\r\n [style.height]=\"chartConfiguration.footerHeight\"\r\n >\r\n <ul class=\"display-flex\">\r\n <li\r\n class=\"legends-positioning-inline\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n >\r\n <span\r\n class=\"lib-donut-justified-label-icon-drilldown\"\r\n [style.background-color]=\"item.value\"\r\n ></span\r\n ><span>{{ item.key }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"groupchartcontainer\"\r\n #groupchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n\r\n\r\n <!-- <div\r\n *ngIf=\"\r\n chartData &&\r\n chartData.metaData &&\r\n chartConfiguration.legendJustified &&\r\n legendVisible &&\r\n !chartConfiguration.legendAtTopRight\r\n \"\r\n class=\"lib-donut-chart-footer\"\r\n [style.height]=\"chartConfiguration.footerHeight\"\r\n >\r\n <ul class=\"lib-donut-justified-label-wrapper\">\r\n <li\r\n class=\"lib-donut-justified-label-item\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n >\r\n <span\r\n class=\"lib-donut-justified-label-icon\"\r\n [style.background-color]=\"item.value\"\r\n ></span\r\n ><span>{{ item.key }}</span>\r\n </li>\r\n </ul>\r\n </div> -->\r\n\r\n\r\n <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n <div\r\n class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n *ngFor=\"\r\n let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n let i = index\r\n \">\r\n <div\r\n class=\"bar-name font-size-1\"\r\n *ngIf=\"\r\n chartData.data[0][item.key] &&\r\n i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n \"\r\n >\r\n {{ item.key }}\r\n </div>\r\n <div\r\n class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n [style.color]=\"\r\n chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n \"\r\n *ngIf=\"\r\n chartData.data[0][item.key] &&\r\n i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n \"\r\n >\r\n {{ chartData.data[0][item.key] }}\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.target-display-ria{font-size:10px;line-height:14.52px;font-weight:400;text-transform:uppercase}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}.outer-container{position:relative;width:100%;overflow:visible}.inner-container{width:100%;overflow-x:auto;overflow-y:hidden;position:relative;padding-bottom:20px;-webkit-overflow-scrolling:touch}.inner-container.scroll-enabled{overflow-x:auto;-webkit-overflow-scrolling:touch;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}.inner-container.scroll-enabled::-webkit-scrollbar{height:8px}.inner-container.scroll-enabled::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.inner-container.scroll-enabled::-webkit-scrollbar-thumb{background:#888;border-radius:4px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV1Component, selector: "lib-chart-header-v1", inputs: ["isAlertEnabled", "title", "menuOptions", "isEditEnabled", "isria", "hasDrillDown", "selectedKpiTooltop"], outputs: ["menuOptionClickEvent"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8871
8801
|
}
|
|
8872
8802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalGroupedBarWithScrollZoomComponent, decorators: [{
|
|
8873
8803
|
type: Component,
|
|
8874
|
-
args: [{ selector: 'lib-horizontal-grouped-bar-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<div\r\n #groupcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n (resized)=\"onResized($event)\"\r\n>\r\n <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n ></lib-chart-header-v2>\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n </div>\r\n <lib-chart-header-v1\r\n [title]=\"chartData.metaData.title\"\r\n [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n [isria]=\"customChartConfiguration.isRia\"\r\n [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n [isAlertEnabled]=\"isAlertEnabled\"\r\n *ngIf=\"isHeaderVisible\"\r\n ></lib-chart-header-v1>\r\n <div\r\n *ngIf=\"\r\n chartData &&\r\n chartData.metaData &&\r\n chartConfiguration.legendJustified &&\r\n legendVisible &&\r\n chartConfiguration.legendAtTopRight\r\n \"\r\n class=\"legend-holder-right\"\r\n [style.height]=\"chartConfiguration.footerHeight\"\r\n >\r\n <ul class=\"display-flex\">\r\n <li\r\n class=\"legends-positioning-inline\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n >\r\n <span\r\n class=\"lib-donut-justified-label-icon-drilldown\"\r\n [style.background-color]=\"item.value\"\r\n ></span\r\n ><span>{{ item.key }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"groupchartcontainer\"\r\n #groupchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n\r\n\r\n <!-- <div\r\n *ngIf=\"\r\n chartData &&\r\n chartData.metaData &&\r\n chartConfiguration.legendJustified &&\r\n legendVisible &&\r\n !chartConfiguration.legendAtTopRight\r\n \"\r\n class=\"lib-donut-chart-footer\"\r\n [style.height]=\"chartConfiguration.footerHeight\"\r\n >\r\n <ul class=\"lib-donut-justified-label-wrapper\">\r\n <li\r\n class=\"lib-donut-justified-label-item\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n >\r\n <span\r\n class=\"lib-donut-justified-label-icon\"\r\n [style.background-color]=\"item.value\"\r\n ></span\r\n ><span>{{ item.key }}</span>\r\n </li>\r\n </ul>\r\n </div> -->\r\n\r\n\r\n <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n <div\r\n class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n *ngFor=\"\r\n let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n let i = index\r\n \">\r\n <div\r\n class=\"bar-name font-size-1\"\r\n *ngIf=\"\r\n chartData.data[0][item.key] &&\r\n i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n \"\r\n >\r\n {{ item.key }}\r\n </div>\r\n <div\r\n class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n [style.color]=\"\r\n chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n \"\r\n *ngIf=\"\r\n chartData.data[0][item.key] &&\r\n i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n \"\r\n >\r\n {{ chartData.data[0][item.key] }}\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}.outer-container{position:relative;width:100%;overflow:visible}.inner-container{width:100%;overflow-x:auto;overflow-y:hidden;position:relative;padding-bottom:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.inner-container.scroll-enabled{overflow-x:auto;-webkit-overflow-scrolling:touch;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}.inner-container.scroll-enabled::-webkit-scrollbar{height:8px}.inner-container.scroll-enabled::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.inner-container.scroll-enabled::-webkit-scrollbar-thumb{background:#888;border-radius:4px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
|
|
8804
|
+
args: [{ selector: 'lib-horizontal-grouped-bar-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<div\r\n #groupcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n (resized)=\"onResized($event)\"\r\n>\r\n <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n ></lib-chart-header-v2>\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n </div>\r\n <lib-chart-header-v1\r\n [title]=\"chartData.metaData.title\"\r\n [hasDrillDown]=\"chartData.metaData.hasDrillDown\"\r\n [isEditEnabled]=\"chartData.metaData.isEditEnabled\"\r\n [menuOptions]=\"chartConfiguration.headerMenuOptions\"\r\n [isria]=\"customChartConfiguration.isRia\"\r\n [selectedKpiTooltop]=\"chartConfiguration.selectedKpiTooltop\"\r\n (menuOptionClickEvent)=\"handleHeaderMenuClick($event)\"\r\n [isAlertEnabled]=\"isAlertEnabled\"\r\n *ngIf=\"isHeaderVisible\"\r\n ></lib-chart-header-v1>\r\n <div\r\n *ngIf=\"\r\n chartData &&\r\n chartData.metaData &&\r\n chartConfiguration.legendJustified &&\r\n legendVisible &&\r\n chartConfiguration.legendAtTopRight\r\n \"\r\n class=\"legend-holder-right\"\r\n [style.height]=\"chartConfiguration.footerHeight\"\r\n >\r\n <ul class=\"display-flex\">\r\n <li\r\n class=\"legends-positioning-inline\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"\r\n >\r\n <span\r\n class=\"lib-donut-justified-label-icon-drilldown\"\r\n [style.background-color]=\"item.value\"\r\n ></span\r\n ><span>{{ item.key }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"groupchartcontainer\"\r\n #groupchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n\r\n\r\n <!-- <div\r\n *ngIf=\"\r\n chartData &&\r\n chartData.metaData &&\r\n chartConfiguration.legendJustified &&\r\n legendVisible &&\r\n !chartConfiguration.legendAtTopRight\r\n \"\r\n class=\"lib-donut-chart-footer\"\r\n [style.height]=\"chartConfiguration.footerHeight\"\r\n >\r\n <ul class=\"lib-donut-justified-label-wrapper\">\r\n <li\r\n class=\"lib-donut-justified-label-item\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue\"\r\n >\r\n <span\r\n class=\"lib-donut-justified-label-icon\"\r\n [style.background-color]=\"item.value\"\r\n ></span\r\n ><span>{{ item.key }}</span>\r\n </li>\r\n </ul>\r\n </div> -->\r\n\r\n\r\n <!-- <div *ngIf=\"chartConfiguration?.isDisplayBarDetailsAtBottom\">\r\n <div\r\n class=\"bar-values lib-display-flex lib-justify-content-center lib-align-items-center\"\r\n *ngFor=\"\r\n let item of chartData.metaData.colors | keyvalue : keepOrder;\r\n let i = index\r\n \">\r\n <div\r\n class=\"bar-name font-size-1\"\r\n *ngIf=\"\r\n chartData.data[0][item.key] &&\r\n i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n \"\r\n >\r\n {{ item.key }}\r\n </div>\r\n <div\r\n class=\"bar-value lib-display-flex lib-align-items-center font-size-1\"\r\n [style.color]=\"\r\n chartConfiguration.barVauleColor ? barVauleColor : item.value\r\n \"\r\n *ngIf=\"\r\n chartData.data[0][item.key] &&\r\n i <= chartConfiguration.howmanyBarDetailsToDisplay\r\n \"\r\n >\r\n {{ chartData.data[0][item.key] }}\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>\r\n", styles: [".lib-axis-group-label{font-size:.85em;font-weight:600;letter-spacing:0px;color:#000;opacity:1}.text-transform-uppercase{text-transform:uppercase!important}.text-transform-capitalize{text-transform:capitalize!important}.legend-holder-right{display:flex;justify-content:flex-end}.display-flex{display:flex}.legends-positioning-inline{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-left:35px;font-size:18px;font-weight:700;letter-spacing:0px;color:#000;opacity:1}.title{background-color:#d9d9d9;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1.3}.title:after{content:\"\";position:absolute;bottom:0;margin-bottom:-10px;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #d3d3d3;border-left:solid 10px transparent;border-right:solid 10px transparent}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bar-value{color:var(--font-color)!important;font-size:14px}.title-bar-value>span{font-weight:600}.zoomIcons-holder{display:flex;align-items:center}.legends-latest{height:14px;width:14px;display:flex;margin-right:10px}.legend-latest-holder{font-size:12px;display:flex;justify-content:flex-start;align-items:center}.marginRight-30{margin-right:30px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}.marginLeft-20{margin-left:20px}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.target-display-ria{font-size:10px;line-height:14.52px;font-weight:400;text-transform:uppercase}.legend-style{font-weight:600;text-transform:capitalize}.bar-values{margin-top:10px}.bar-name{font-weight:600;margin-right:10px;text-transform:capitalize}.lib-chart-svg{margin-top:10px}.bar-value{height:29px;background-color:#f4f4f4;padding-left:15px;padding-right:15px;border-radius:8px;box-shadow:-2px 2px 10px #0000004d,2px 2px 10px #0000004d;font-weight:600}.mobile-xaxis-override{writing-mode:sideways-lr}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}.outer-container{position:relative;width:100%;overflow:visible}.inner-container{width:100%;overflow-x:auto;overflow-y:hidden;position:relative;padding-bottom:20px;-webkit-overflow-scrolling:touch}.inner-container.scroll-enabled{overflow-x:auto;-webkit-overflow-scrolling:touch;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}.inner-container.scroll-enabled::-webkit-scrollbar{height:8px}.inner-container.scroll-enabled::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.inner-container.scroll-enabled::-webkit-scrollbar-thumb{background:#888;border-radius:4px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background){background-color:#2e3640}.lib-chart-wrapper:hover .chart-header-v1:not(.header-no-background) .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"] }]
|
|
8875
8805
|
}], ctorParameters: () => [], propDecorators: { containerElt: [{
|
|
8876
8806
|
type: ViewChild,
|
|
8877
8807
|
args: ['groupchartcontainer', { static: true }]
|