axidio-styleguide-library1-v2 0.2.50 → 0.2.51

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.
@@ -6488,8 +6488,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6488
6488
  LONG_TICK_LENGTH: 16,
6489
6489
  SHORT_TICK_LENGTH_BG: 5,
6490
6490
  LONG_TICK_LENGTH_BG: 30,
6491
- FIXED_BAR_WIDTH: 40, // Fixed bar width for all resolutions
6492
- FIXED_BAR_PADDING: 0, // Fixed padding
6491
+ MIN_MOBILE_BAR_WIDTH: 28, // Adjusted for better mobile fit
6492
+ DESKTOP_MIN_BAR_WIDTH: 40,
6493
+ TABLET_MIN_BAR_WIDTH: 35, // Added tablet-specific width
6494
+ MOBILE_BAR_PADDING: 10, // Reduced padding for mobile
6495
+ TABLET_BAR_PADDING: 8, // Added tablet-specific padding
6493
6496
  ZOOM_THRESHOLD: 30,
6494
6497
  ZOOM_IN_THRESHOLD: 8,
6495
6498
  };
@@ -6554,6 +6557,48 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6554
6557
  removeExistingChart() {
6555
6558
  d3.select('#' + this.uniqueId).remove();
6556
6559
  }
6560
+ getDeviceConfig() {
6561
+ const width = window.innerWidth;
6562
+ return {
6563
+ isMobile: width < 768, // Changed from 576 to 768 for better mobile coverage
6564
+ isTablet: width >= 768 && width < 1024, // Changed from 576-992 to 768-1024
6565
+ isDesktop: width >= 1024, // Changed from 992 to 1024
6566
+ };
6567
+ }
6568
+ configureResponsiveSettings(device) {
6569
+ if (device.isMobile) {
6570
+ this.chartConfiguration.margin = { top: 15, right: 5, bottom: 35, left: 25 };
6571
+ this.chartConfiguration.numberOfYTicks = 4;
6572
+ this.chartConfiguration.svgHeight = 55;
6573
+ }
6574
+ else if (device.isTablet) {
6575
+ this.chartConfiguration.margin = { top: 20, right: 15, bottom: 40, left: 35 };
6576
+ this.chartConfiguration.numberOfYTicks = 5;
6577
+ this.chartConfiguration.svgHeight = 65;
6578
+ }
6579
+ else {
6580
+ // Desktop/Large screens
6581
+ const width = window.innerWidth;
6582
+ if (width >= 1920) {
6583
+ // Large monitors
6584
+ this.chartConfiguration.margin = { top: 35, right: 35, bottom: 55, left: 70 };
6585
+ this.chartConfiguration.numberOfYTicks = 8;
6586
+ this.chartConfiguration.svgHeight = 85;
6587
+ }
6588
+ else if (width >= 1366) {
6589
+ // Medium monitors
6590
+ this.chartConfiguration.margin = { top: 30, right: 30, bottom: 50, left: 60 };
6591
+ this.chartConfiguration.numberOfYTicks = 7;
6592
+ this.chartConfiguration.svgHeight = 80;
6593
+ }
6594
+ else {
6595
+ // Small desktops/laptops
6596
+ this.chartConfiguration.margin = { top: 25, right: 25, bottom: 45, left: 50 };
6597
+ this.chartConfiguration.numberOfYTicks = 6;
6598
+ this.chartConfiguration.svgHeight = 75;
6599
+ }
6600
+ }
6601
+ }
6557
6602
  mergeConfigurations() {
6558
6603
  for (const key in this.defaultConfiguration) {
6559
6604
  this.chartConfiguration[key] = ChartHelper.getValueByConfigurationType(key, this.defaultConfiguration, this.customChartConfiguration);
@@ -6572,18 +6617,26 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6572
6617
  }
6573
6618
  return metaData;
6574
6619
  }
6575
- calculateDimensions(chartContainer, verticalContainer, margin, dataLength) {
6620
+ calculateDimensions(chartContainer, verticalContainer, margin, device, dataLength) {
6576
6621
  const containerWidth = chartContainer.node().getBoundingClientRect().width;
6577
6622
  const containerHeight = verticalContainer.node().getBoundingClientRect().height;
6578
6623
  let width = containerWidth - margin.left - margin.right;
6579
6624
  let height = containerHeight * (this.chartConfiguration.svgHeight / 100) - margin.top - margin.bottom;
6580
- // Fixed zoom handling - same for all resolutions
6625
+ // Responsive zoom handling
6581
6626
  if (dataLength > this.CONSTANTS.ZOOM_THRESHOLD && this.isZoomedOut) {
6582
- const minWidth = dataLength * 25;
6627
+ const minWidth = device.isMobile
6628
+ ? dataLength * 12
6629
+ : device.isTablet
6630
+ ? dataLength * 20
6631
+ : dataLength * 25;
6583
6632
  width = Math.max(width, minWidth);
6584
6633
  }
6585
6634
  if (dataLength > this.CONSTANTS.ZOOM_IN_THRESHOLD && !this.isZoomedOut) {
6586
- width = dataLength * 130;
6635
+ width = device.isMobile
6636
+ ? dataLength * 50
6637
+ : device.isTablet
6638
+ ? dataLength * 90
6639
+ : dataLength * 130;
6587
6640
  }
6588
6641
  if (this.chartConfiguration.isFullScreen) {
6589
6642
  height = this.chartConfiguration.svgHeight !== 80
@@ -6591,15 +6644,28 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6591
6644
  : containerHeight;
6592
6645
  }
6593
6646
  if (this.chartConfiguration.isDrilldownChart) {
6594
- height = containerHeight - margin.top - margin.bottom - 130;
6595
- }
6596
- // Fixed bar width and padding for all resolutions
6597
- const barWidth = this.CONSTANTS.FIXED_BAR_WIDTH;
6598
- const barPadding = 20; // 20px gap between bars
6599
- // Calculate required SVG width: bars + gaps + side spaces
6600
- const totalBarsWidth = barWidth * dataLength;
6601
- const totalGaps = barPadding * (dataLength - 1);
6602
- const requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, totalBarsWidth + totalGaps + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2));
6647
+ const offset = device.isMobile ? 60 : device.isTablet ? 90 : 130;
6648
+ height = containerHeight - margin.top - margin.bottom - offset;
6649
+ }
6650
+ let barWidth;
6651
+ let barPadding;
6652
+ let requiredSvgWidth;
6653
+ if (device.isMobile) {
6654
+ barWidth = this.CONSTANTS.MIN_MOBILE_BAR_WIDTH;
6655
+ barPadding = this.CONSTANTS.MOBILE_BAR_PADDING;
6656
+ requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 +
6657
+ this.CONSTANTS.RIGHT_SVG_WIDTH - barPadding);
6658
+ }
6659
+ else if (device.isTablet) {
6660
+ barWidth = this.CONSTANTS.TABLET_MIN_BAR_WIDTH;
6661
+ barPadding = this.CONSTANTS.TABLET_BAR_PADDING;
6662
+ requiredSvgWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, (barWidth + barPadding) * dataLength + this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
6663
+ }
6664
+ else {
6665
+ barWidth = Math.max(this.CONSTANTS.DESKTOP_MIN_BAR_WIDTH, (width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES * 2) / dataLength);
6666
+ barPadding = 0;
6667
+ requiredSvgWidth = width - this.CONSTANTS.RIGHT_SVG_WIDTH;
6668
+ }
6603
6669
  return {
6604
6670
  width,
6605
6671
  height,
@@ -6617,7 +6683,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6617
6683
  .attr('class', 'outer-container')
6618
6684
  .style('width', '100%')
6619
6685
  .style('height', dimensions.height)
6620
- .style('overflow-x', 'auto') // Enable scroll for all resolutions
6686
+ .style('overflow-x', 'hidden')
6621
6687
  .style('padding-left', `${margin.left}px`)
6622
6688
  .style('margin-left', '10px')
6623
6689
  .style('padding-right', `${this.CONSTANTS.RIGHT_SVG_WIDTH}px`);
@@ -6643,7 +6709,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6643
6709
  .append('div')
6644
6710
  .attr('class', 'inner-container')
6645
6711
  .style('width', '100%')
6646
- .style('overflow-x', 'visible');
6712
+ .style('overflow-x', 'auto');
6647
6713
  const svg = innerContainer
6648
6714
  .append('svg')
6649
6715
  .attr('width', dimensions.requiredSvgWidth)
@@ -6652,24 +6718,18 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6652
6718
  .attr('transform', `translate(0,${margin.top})`);
6653
6719
  return { svg, svgYAxisLeft, svgYAxisRight, innerContainer };
6654
6720
  }
6655
- createScales(data, layers, lineData, dimensions) {
6721
+ createScales(data, layers, lineData, dimensions, device) {
6656
6722
  const { width, height, barWidth, barPadding } = dimensions;
6657
- // Calculate total width needed for all bars with proper spacing
6658
- const totalBarsWidth = data.length * barWidth;
6659
- const totalSpacing = (data.length - 1) * 20; // 20px gap between bars
6660
- const requiredWidth = totalBarsWidth + totalSpacing + (this.CONSTANTS.LEFT_RIGHT_SPACES * 2);
6661
- // Use the larger of container width or required width for proper spacing
6662
- const effectiveWidth = Math.max(width - this.CONSTANTS.RIGHT_SVG_WIDTH, requiredWidth);
6723
+ // Adjust padding based on device
6724
+ const padding = device.isMobile ? 0.15 : device.isTablet ? 0.3 : 0.5;
6663
6725
  const xScale = d3
6664
6726
  .scaleBand()
6665
6727
  .rangeRound([
6666
6728
  this.CONSTANTS.LEFT_RIGHT_SPACES,
6667
- effectiveWidth + this.CONSTANTS.LEFT_RIGHT_SPACES - this.CONSTANTS.RIGHT_SVG_WIDTH
6729
+ width - this.CONSTANTS.RIGHT_SVG_WIDTH - this.CONSTANTS.LEFT_RIGHT_SPACES
6668
6730
  ])
6669
6731
  .domain(data.map(d => d.name).reverse())
6670
- .paddingInner(20 / (barWidth + 20)) // Convert 20px gap to padding ratio
6671
- .paddingOuter(0.5)
6672
- .align(0.5); // Center alignment
6732
+ .padding(padding);
6673
6733
  const xScaleFromOrigin = d3
6674
6734
  .scaleBand()
6675
6735
  .rangeRound([width - this.CONSTANTS.RIGHT_SVG_WIDTH, 0])
@@ -6718,7 +6778,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6718
6778
  }
6719
6779
  return { xAxis, yAxis, yLineAxis };
6720
6780
  }
6721
- renderBars(svg, layers, scales, metaData, dimensions) {
6781
+ renderBars(svg, layers, scales, metaData, dimensions, device) {
6722
6782
  const layer = svg
6723
6783
  .selectAll('.layer')
6724
6784
  .data(layers)
@@ -6730,11 +6790,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6730
6790
  .selectAll('rect')
6731
6791
  .data((d) => d)
6732
6792
  .enter();
6733
- this.appendRectangles(rect, scales, metaData, dimensions);
6793
+ this.appendRectangles(rect, scales, metaData, dimensions, device);
6734
6794
  this.addInteractions(rect, svg, metaData, scales);
6735
6795
  return rect;
6736
6796
  }
6737
- appendRectangles(rect, scales, metaData, dimensions) {
6797
+ appendRectangles(rect, scales, metaData, dimensions, device) {
6738
6798
  const { barWidth, barPadding } = dimensions;
6739
6799
  const { xScale, yScale } = scales;
6740
6800
  rect
@@ -6753,19 +6813,17 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6753
6813
  }
6754
6814
  return 0;
6755
6815
  })
6756
- .attr('x', (d) => {
6757
- // Center the bar within its bandwidth with proper spacing
6758
- const xPosition = xScale(d.data.name);
6759
- const bandwidth = xScale.bandwidth();
6816
+ .attr('x', (d, i) => {
6817
+ if (device.isMobile) {
6818
+ return this.CONSTANTS.LEFT_RIGHT_SPACES + i * (barWidth + barPadding);
6819
+ }
6760
6820
  if (!this.chartConfiguration.isMultiChartGridLine) {
6761
- // Center the fixed-width bar in the available space
6762
- return xPosition + (bandwidth - barWidth) / 2;
6821
+ return xScale(d.data.name);
6763
6822
  }
6764
6823
  if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
6765
- return xPosition + bandwidth / 2 - 35;
6824
+ return xScale(d.data.name) + xScale.bandwidth() / 2 - 35;
6766
6825
  }
6767
- const calculatedWidth = bandwidth * 0.8;
6768
- return xPosition + (bandwidth - calculatedWidth) / 2;
6826
+ return xScale(d.data.name) + xScale.bandwidth() * 0.1;
6769
6827
  })
6770
6828
  .attr('height', (d) => {
6771
6829
  if (!isNaN(d[0]) && !isNaN(d[1])) {
@@ -6775,8 +6833,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6775
6833
  return 0;
6776
6834
  })
6777
6835
  .attr('width', (d) => {
6778
- if (!this.chartConfiguration.isMultiChartGridLine)
6836
+ if (device.isMobile)
6779
6837
  return barWidth;
6838
+ if (!this.chartConfiguration.isMultiChartGridLine)
6839
+ return xScale.bandwidth();
6780
6840
  if (this.chartConfiguration.isDrilldownChart && this.chartData.data.length <= 3) {
6781
6841
  return 70;
6782
6842
  }
@@ -6832,13 +6892,23 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6832
6892
  const value = d[1] - d[0];
6833
6893
  if (isNaN(value))
6834
6894
  return;
6895
+ const device = this.getDeviceConfig();
6835
6896
  const bandwidth = xScale.bandwidth();
6836
- // Fixed tooltip width for all resolutions
6837
- const width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
6838
- ? '250px'
6839
- : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 > 180
6840
- ? '180px'
6841
- : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
6897
+ // Responsive tooltip width
6898
+ let width;
6899
+ if (device.isMobile) {
6900
+ width = Math.min(bandwidth + 40, 150);
6901
+ }
6902
+ else if (device.isTablet) {
6903
+ width = Math.min(bandwidth + 60, 200);
6904
+ }
6905
+ else {
6906
+ width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
6907
+ ? '250px'
6908
+ : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 > 180
6909
+ ? '180px'
6910
+ : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
6911
+ }
6842
6912
  svg
6843
6913
  .append('foreignObject')
6844
6914
  .attr('x', this.calculateTooltipX(d, xScale, width))
@@ -6956,10 +7026,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6956
7026
  }
6957
7027
  }
6958
7028
  initializeStackedChart() {
6959
- // Use fixed configuration for all resolutions
6960
- this.chartConfiguration.margin = { top: 20, right: 20, bottom: 40, left: 40 };
6961
- this.chartConfiguration.numberOfYTicks = 5;
6962
- this.chartConfiguration.svgHeight = 70;
7029
+ const device = this.getDeviceConfig();
7030
+ this.configureResponsiveSettings(device);
6963
7031
  this.mergeConfigurations();
6964
7032
  this.applyConfigurationFlags();
6965
7033
  const data = this.chartData.data;
@@ -6970,16 +7038,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
6970
7038
  const chartContainer = d3.select(this.containerElt.nativeElement);
6971
7039
  const verticalstackedcontainer = d3.select(this.verticalstackedcontainerElt.nativeElement);
6972
7040
  const margin = this.chartConfiguration.margin;
6973
- const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, data.length);
7041
+ const dimensions = this.calculateDimensions(chartContainer, verticalstackedcontainer, margin, device, data.length);
6974
7042
  const { svg, svgYAxisLeft, svgYAxisRight } = this.createSvgContainers(chartContainer, dimensions, margin);
6975
7043
  const stack = d3.stack().keys(keyList).offset(d3.stackOffsetNone);
6976
7044
  const layers = stack(data);
6977
7045
  data.sort((a, b) => b.total - a.total);
6978
- const scales = this.createScales(data, layers, lineData, dimensions);
7046
+ const scales = this.createScales(data, layers, lineData, dimensions, device);
6979
7047
  const axes = this.createAxes(scales);
6980
7048
  this.renderGrids(svg, scales, dimensions);
6981
- const rect = this.renderBars(svg, layers, scales, metaData, dimensions);
6982
- this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data);
7049
+ const rect = this.renderBars(svg, layers, scales, metaData, dimensions, device);
7050
+ this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, device, data);
6983
7051
  this.renderAxisLabels(svg, svgYAxisLeft, metaData, dimensions, margin);
6984
7052
  this.renderTargetLine(svg, svgYAxisRight, scales, dimensions, metaData);
6985
7053
  this.renderDataLabels(rect, scales, metaData, dimensions);
@@ -7020,7 +7088,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7020
7088
  }
7021
7089
  }
7022
7090
  }
7023
- renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data) {
7091
+ renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, device, data) {
7024
7092
  if (this.chartConfiguration.showXaxisTop) {
7025
7093
  svg
7026
7094
  .append('g')
@@ -7030,7 +7098,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7030
7098
  svg.selectAll('.x-axis > g > text').attr('class', 'lib-display-hidden');
7031
7099
  }
7032
7100
  if (!this.chartConfiguration.isMultiChartGridLine) {
7033
- this.renderStandardAxes(svg, axes, scales, dimensions, data);
7101
+ this.renderStandardAxes(svg, axes, scales, dimensions, device, data);
7034
7102
  }
7035
7103
  else if (this.chartConfiguration.isDrilldownChart) {
7036
7104
  this.renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions);
@@ -7041,19 +7109,24 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7041
7109
  this.applyAxisStyling(svg, svgYAxisLeft, svgYAxisRight);
7042
7110
  this.applyAxisConfigurations(svg, scales, dimensions, data);
7043
7111
  }
7044
- renderStandardAxes(svg, axes, scales, dimensions, data) {
7045
- svg
7046
- .append('g')
7047
- .attr('transform', `translate(0,${dimensions.height})`)
7048
- .attr('class', 'lib-stacked-x-axis-text')
7049
- .call(axes.xAxis)
7050
- .selectAll('text')
7051
- .style('fill', 'var(--chart-text-color)')
7052
- .style('font-size', '12px')
7053
- .attr('text-anchor', 'middle')
7054
- .attr('dx', '0')
7055
- .attr('dy', '0.71em')
7056
- .attr('transform', null);
7112
+ renderStandardAxes(svg, axes, scales, dimensions, device, data) {
7113
+ if (device.isMobile) {
7114
+ this.renderMobileXAxis(svg, data, dimensions);
7115
+ }
7116
+ else {
7117
+ svg
7118
+ .append('g')
7119
+ .attr('transform', `translate(0,${dimensions.height})`)
7120
+ .attr('class', 'lib-stacked-x-axis-text')
7121
+ .call(axes.xAxis)
7122
+ .selectAll('text')
7123
+ .style('fill', 'var(--chart-text-color)')
7124
+ .style('font-size', '12px')
7125
+ .attr('text-anchor', 'middle')
7126
+ .attr('dx', '0')
7127
+ .attr('dy', '0.71em')
7128
+ .attr('transform', null);
7129
+ }
7057
7130
  svg
7058
7131
  .append('g')
7059
7132
  .attr('class', 'lib-stacked-y-axis-text')
@@ -7062,6 +7135,27 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7062
7135
  .selectAll('text')
7063
7136
  .style('fill', 'var(--chart-text-color)');
7064
7137
  }
7138
+ renderMobileXAxis(svg, data, dimensions) {
7139
+ svg.selectAll('.custom-x-label').remove();
7140
+ const maxLength = Math.max(...data.map(d => d.name.length));
7141
+ const fontSize = maxLength > 10 ? '8px' : '10px';
7142
+ data.forEach((d, i) => {
7143
+ const xVal = this.CONSTANTS.LEFT_RIGHT_SPACES +
7144
+ i * (dimensions.barWidth + dimensions.barPadding) +
7145
+ dimensions.barWidth / 2;
7146
+ svg
7147
+ .append('text')
7148
+ .attr('class', 'custom-x-label')
7149
+ .attr('x', 0)
7150
+ .attr('y', dimensions.height + 18)
7151
+ .attr('text-anchor', 'middle')
7152
+ .attr('transform', `translate(${xVal + 20},0)`)
7153
+ .style('font-size', fontSize)
7154
+ .style('fill', 'var(--chart-text-color)')
7155
+ .style('writing-mode', 'sideways-lr')
7156
+ .text(d.name.length > 6 ? d.name.substring(0, 4) + '...' : d.name);
7157
+ });
7158
+ }
7065
7159
  renderDrilldownAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions) {
7066
7160
  svg
7067
7161
  .append('g')
@@ -7143,6 +7237,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7143
7237
  }
7144
7238
  }
7145
7239
  renderCustomXAxis(svg, scales, dimensions, data) {
7240
+ const device = this.getDeviceConfig();
7146
7241
  svg
7147
7242
  .append('g')
7148
7243
  .attr('class', 'x1 axis1')
@@ -7150,12 +7245,12 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7150
7245
  .style('color', '#000')
7151
7246
  .call(d3.axisBottom(scales.xScale).tickSize(0))
7152
7247
  .call((g) => g.select('.domain').attr('fill', 'none'));
7153
- this.styleCustomXAxisTicks(svg, data);
7248
+ this.styleCustomXAxisTicks(svg, data, device);
7154
7249
  if (this.chartConfiguration.xLabelsOnSameLine) {
7155
- this.applyXLabelsOnSameLine(svg);
7250
+ this.applyXLabelsOnSameLine(svg, device);
7156
7251
  }
7157
7252
  }
7158
- styleCustomXAxisTicks(svg, data) {
7253
+ styleCustomXAxisTicks(svg, data, device) {
7159
7254
  let alternateText = false;
7160
7255
  svg.selectAll('.x1.axis1 .tick line').attr('y2', () => {
7161
7256
  if (this.chartConfiguration.hideXaxisTick)
@@ -7187,17 +7282,28 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7187
7282
  return this.CONSTANTS.SHORT_TICK_LENGTH_BG;
7188
7283
  });
7189
7284
  }
7190
- applyXLabelsOnSameLine(svg) {
7285
+ applyXLabelsOnSameLine(svg, device) {
7191
7286
  svg
7192
7287
  .selectAll('g.x1.axis1 g.tick text')
7193
7288
  .attr('class', 'lib-xaxis-labels-texts-drilldown')
7194
7289
  .attr('y', this.CONSTANTS.SHORT_TICK_LENGTH_BG)
7195
7290
  .text((d) => {
7291
+ if (device.isMobile) {
7292
+ return d.split(' ')[0].substring(0, 3);
7293
+ }
7196
7294
  const trimmed = d.trim();
7197
7295
  const spaceIndex = trimmed.indexOf(' ');
7198
7296
  return spaceIndex > -1
7199
7297
  ? trimmed.substring(0, spaceIndex).toLowerCase()
7200
7298
  : trimmed.toLowerCase();
7299
+ })
7300
+ .attr('transform', function (d, i) {
7301
+ if (device.isMobile) {
7302
+ const parent = this.parentNode?.parentNode;
7303
+ const totalBars = parent ? d3.select(parent).selectAll('g.tick').size() : 0;
7304
+ return totalBars === 2 ? 'translate(0,0)' : `translate(${i * 30},0)`;
7305
+ }
7306
+ return null;
7201
7307
  });
7202
7308
  svg
7203
7309
  .selectAll('g.x1.axis1 g.tick')
@@ -7206,11 +7312,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7206
7312
  .attr('y', this.CONSTANTS.LONG_TICK_LENGTH_BG)
7207
7313
  .attr('fill', 'currentColor')
7208
7314
  .text((d) => {
7315
+ if (device.isMobile)
7316
+ return '';
7209
7317
  const trimmed = d.trim();
7210
7318
  const spaceIndex = trimmed.indexOf(' ');
7211
7319
  return spaceIndex > -1
7212
7320
  ? trimmed.substring(spaceIndex).toLowerCase()
7213
7321
  : '';
7322
+ })
7323
+ .attr('transform', (d, i) => {
7324
+ return device.isMobile && i === 0 ? 'translate(20,0)' : null;
7214
7325
  });
7215
7326
  }
7216
7327
  renderDataLabels(rect, scales, metaData, dimensions) {
@@ -7401,11 +7512,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7401
7512
  this.isZoomOutSelected(isZoomOut);
7402
7513
  }
7403
7514
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalBarsWithScrollZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7404
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalBarsWithScrollZoomComponent, selector: "lib-horizontal-bars-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["verticalstackedchartcontainer"], descendants: true, static: true }, { propertyName: "verticalstackedcontainerElt", first: true, predicate: ["verticalstackedcontainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n #verticalstackedcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n\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\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 <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"verticalstackedchartcontainer\"\r\n #verticalstackedchartcontainer\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:12px}.lib-axis-group-label{font-size:12px;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:11px;line-height:13px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1;padding:4px 8px;box-sizing:border-box}.title-top-text{color:var(--font-color)!important;font-size:12px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:14px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:11px}.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}.lib-xaxis-labels-texts-drilldown,.lib-xaxis-labels-texts-drilldown-alt,.lib-xaxis-labels-texts-weeklycharts{font-size:12px}.lib-display-hidden{display:none!important}\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: 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 }); }
7515
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalBarsWithScrollZoomComponent, selector: "lib-horizontal-bars-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["verticalstackedchartcontainer"], descendants: true, static: true }, { propertyName: "verticalstackedcontainerElt", first: true, predicate: ["verticalstackedcontainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n #verticalstackedcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n\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\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 <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"verticalstackedchartcontainer\"\r\n #verticalstackedchartcontainer\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:12px}.lib-axis-group-label{font-size:12px;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:11px;line-height:13px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1;padding:4px 8px;box-sizing:border-box}.title-top-text{color:var(--font-color)!important;font-size:12px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:14px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:11px}.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}@media (max-width: 767px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:9px!important}.lib-axis-group-label{font-size:10px!important}.dots{font-size:8px!important}.lib-xaxis-labels-texts-drilldown{writing-mode:sideways-lr;font-size:9px!important}.target-display{font-size:9px;line-height:11px}.title-top-text{font-size:10px}.title-bar-name{font-size:12px}.zoomIcons{width:26px;height:26px}.lib-verticalstack-labels-ontop-weklycharts{font-size:9px}}@media (min-width: 768px) and (max-width: 1023px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.lib-axis-group-label{font-size:11px!important}.dots{font-size:9px!important}.target-display{font-size:10px;line-height:12px}.title-top-text{font-size:11px}.title-bar-name{font-size:13px}.zoomIcons{width:28px;height:28px}}@media (min-width: 1024px) and (max-width: 1365px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:11px!important}.lib-axis-group-label{font-size:12px!important}.dots{font-size:10px!important}}@media (min-width: 1366px) and (max-width: 1919px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.lib-axis-group-label{font-size:13px!important}.dots{font-size:11px!important}}@media (min-width: 1920px) and (max-width: 2559px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.lib-axis-group-label{font-size:14px!important}.dots{font-size:12px!important}.target-display{font-size:13px;line-height:15px}.title-top-text{font-size:14px}.title-bar-name{font-size:16px}}@media (min-width: 2560px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.lib-axis-group-label{font-size:15px!important}.dots{font-size:14px!important}.target-display{font-size:14px;line-height:16px}.title-top-text{font-size:15px}.title-bar-name{font-size:18px}.zoomIcons{width:34px;height:34px}}@media (orientation: portrait) and (max-width: 767px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:8px!important}.lib-xaxis-labels-texts-drilldown{font-size:8px!important}}@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:11px!important}}\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: 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 }); }
7405
7516
  }
7406
7517
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalBarsWithScrollZoomComponent, decorators: [{
7407
7518
  type: Component,
7408
- args: [{ selector: 'lib-horizontal-bars-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n #verticalstackedcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n\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\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 <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"verticalstackedchartcontainer\"\r\n #verticalstackedchartcontainer\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:12px}.lib-axis-group-label{font-size:12px;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:11px;line-height:13px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1;padding:4px 8px;box-sizing:border-box}.title-top-text{color:var(--font-color)!important;font-size:12px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:14px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:11px}.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}.lib-xaxis-labels-texts-drilldown,.lib-xaxis-labels-texts-drilldown-alt,.lib-xaxis-labels-texts-weeklycharts{font-size:12px}.lib-display-hidden{display:none!important}\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"] }]
7519
+ args: [{ selector: 'lib-horizontal-bars-with-scroll-zoom', encapsulation: ViewEncapsulation.None, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n #verticalstackedcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n\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\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 <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"verticalstackedchartcontainer\"\r\n #verticalstackedchartcontainer\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:12px}.lib-axis-group-label{font-size:12px;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:11px;line-height:13px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1;padding:4px 8px;box-sizing:border-box}.title-top-text{color:var(--font-color)!important;font-size:12px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:14px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:11px}.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}@media (max-width: 767px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:9px!important}.lib-axis-group-label{font-size:10px!important}.dots{font-size:8px!important}.lib-xaxis-labels-texts-drilldown{writing-mode:sideways-lr;font-size:9px!important}.target-display{font-size:9px;line-height:11px}.title-top-text{font-size:10px}.title-bar-name{font-size:12px}.zoomIcons{width:26px;height:26px}.lib-verticalstack-labels-ontop-weklycharts{font-size:9px}}@media (min-width: 768px) and (max-width: 1023px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.lib-axis-group-label{font-size:11px!important}.dots{font-size:9px!important}.target-display{font-size:10px;line-height:12px}.title-top-text{font-size:11px}.title-bar-name{font-size:13px}.zoomIcons{width:28px;height:28px}}@media (min-width: 1024px) and (max-width: 1365px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:11px!important}.lib-axis-group-label{font-size:12px!important}.dots{font-size:10px!important}}@media (min-width: 1366px) and (max-width: 1919px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.lib-axis-group-label{font-size:13px!important}.dots{font-size:11px!important}}@media (min-width: 1920px) and (max-width: 2559px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.lib-axis-group-label{font-size:14px!important}.dots{font-size:12px!important}.target-display{font-size:13px;line-height:15px}.title-top-text{font-size:14px}.title-bar-name{font-size:16px}}@media (min-width: 2560px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.lib-axis-group-label{font-size:15px!important}.dots{font-size:14px!important}.target-display{font-size:14px;line-height:16px}.title-top-text{font-size:15px}.title-bar-name{font-size:18px}.zoomIcons{width:34px;height:34px}}@media (orientation: portrait) and (max-width: 767px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:8px!important}.lib-xaxis-labels-texts-drilldown{font-size:8px!important}}@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:11px!important}}\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"] }]
7409
7520
  }], ctorParameters: () => [], propDecorators: { containerElt: [{
7410
7521
  type: ViewChild,
7411
7522
  args: ['verticalstackedchartcontainer', { static: true }]
@@ -9778,11 +9889,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9778
9889
  this.clickEvent.emit(event);
9779
9890
  }
9780
9891
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalGroupedBarWithScrollZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9781
- 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}.mobile-xaxis-override[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}g.x1.axis1 g.tick text[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}\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 }); }
9892
+ 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}}\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 }); }
9782
9893
  }
9783
9894
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalGroupedBarWithScrollZoomComponent, decorators: [{
9784
9895
  type: Component,
9785
- 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}.mobile-xaxis-override[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}g.x1.axis1 g.tick text[style*=\"writing-mode: horizontal-tb\"]{writing-mode:horizontal-tb!important;transform:none!important}@media (min-height: 900px){.legends-latest{height:17px;width:17px}}\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"] }]
9896
+ 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}}\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"] }]
9786
9897
  }], ctorParameters: () => [], propDecorators: { containerElt: [{
9787
9898
  type: ViewChild,
9788
9899
  args: ['groupchartcontainer', { static: true }]