axidio-styleguide-library1-v2 0.0.962 → 0.0.964

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.
Files changed (6) hide show
  1. package/esm2022/lib/chart-header-v3/chart-header-v3.component.mjs +3 -3
  2. package/esm2022/lib/group-chart/group-chart.component.mjs +54 -16
  3. package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +58 -22
  4. package/fesm2022/axidio-styleguide-library1-v2.mjs +112 -38
  5. package/fesm2022/axidio-styleguide-library1-v2.mjs.map +1 -1
  6. package/package.json +1 -1
package/fesm2022/axidio-styleguide-library1-v2.mjs CHANGED
@@ -3644,11 +3644,11 @@ class ChartHeaderV3Component {
3644
3644
  this.zoomInZoomOutClick.emit({ isZoomOut: this.isZoomedOut, event: event });
3645
3645
  }
3646
3646
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartHeaderV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3647
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: { chartData: "chartData", chartConfiguration: "chartConfiguration" }, outputs: { compareByFilterSelection: "compareByFilterSelection", zoomInZoomOutClick: "zoomInZoomOutClick" }, ngImport: i0, template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n !chartData.dropdownData2 &&\r\n !chartData.dropdownData1 &&\r\n chartData.data.length <= 8\r\n ? 'lib-justify-content-start'\r\n : 'lib-justify-content-space-between'\r\n \">\r\n <span class=\"legend-latest-holder\" *ngIf=\"\r\n chartData.data &&\r\n chartData.metaData.default_dept &&\r\n (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n \">\r\n <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n Default Dept: {{ chartData.metaData.default_dept }}\r\n </span>\r\n <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n item.key != chartData.metaData.default_dept &&\r\n chartData.metaData.default_dept\r\n \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n Dept</span>\r\n </span>\r\n <span class=\"legend-latest-holder legend-width\"\r\n [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n <span class=\"lib-display-flex lib-align-items-center\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n [style.background-color]=\"item.value\"></span>\r\n <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n {{ item.key }}\r\n </span>\r\n </span>\r\n </span>\r\n <span class=\"display-flex\">\r\n <span *ngIf=\"\r\n chartData.dropdownData1 &&\r\n chartData.metaData.breadcrumbLength &&\r\n chartData.metaData.breadcrumbLength == 1\r\n \">\r\n <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n </span>\r\n <span *ngIf=\"\r\n chartData.dropdownData2 &&\r\n chartData.metaData.breadcrumbLength &&\r\n chartData.metaData.breadcrumbLength == 1\r\n \">\r\n <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n </span>\r\n <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n (click)=\"isZoomOutSelected(false, $event)\">\r\n <i class=\"fa fa-search-plus\"></i>\r\n </span>\r\n <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n (click)=\"isZoomOutSelected(true, $event)\">\r\n <i class=\"fa fa-search-minus\"></i>\r\n </span>\r\n </span>\r\n </span>\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media (min-height: 900px){.header-title-styles{margin-left:35px;margin-top:12px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}\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: "component", type: DropdownComponent, selector: "lib-dropdown", inputs: ["dropdownHeaderName", "isDropdownOpen", "dropdownData", "isCheckboxVisible"], outputs: ["ddClicked", "selectedFromDropdown"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
3647
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: { chartData: "chartData", chartConfiguration: "chartConfiguration" }, outputs: { compareByFilterSelection: "compareByFilterSelection", zoomInZoomOutClick: "zoomInZoomOutClick" }, ngImport: i0, template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n !chartData.dropdownData2 &&\r\n !chartData.dropdownData1 &&\r\n chartData.data.length <= 8\r\n ? 'lib-justify-content-start'\r\n : 'lib-justify-content-space-between'\r\n \">\r\n <span class=\"legend-latest-holder\" *ngIf=\"\r\n chartData.data &&\r\n chartData.metaData.default_dept &&\r\n (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n \">\r\n <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n Default Dept: {{ chartData.metaData.default_dept }}\r\n </span>\r\n <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n item.key != chartData.metaData.default_dept &&\r\n chartData.metaData.default_dept\r\n \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n Dept</span>\r\n </span>\r\n <span class=\"legend-latest-holder legend-width\"\r\n [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n <span class=\"lib-display-flex lib-align-items-center\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n [style.background-color]=\"item.value\"></span>\r\n <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n {{ item.key }}\r\n </span>\r\n </span>\r\n </span>\r\n <span class=\"display-flex\">\r\n <span *ngIf=\"\r\n chartData.dropdownData1 &&\r\n chartData.metaData.breadcrumbLength &&\r\n chartData.metaData.breadcrumbLength == 1\r\n \">\r\n <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n </span>\r\n <span *ngIf=\"\r\n chartData.dropdownData2 &&\r\n chartData.metaData.breadcrumbLength &&\r\n chartData.metaData.breadcrumbLength == 1\r\n \">\r\n <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n </span>\r\n <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n <span class=\"zoomIcons\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n (click)=\"isZoomOutSelected(false, $event)\">\r\n <i class=\"fa fa-search-plus\"></i>\r\n </span>\r\n <span class=\"zoomIcons\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n (click)=\"isZoomOutSelected(true, $event)\">\r\n <i class=\"fa fa-search-minus\"></i>\r\n </span>\r\n </span>\r\n </span>\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media (min-height: 900px){.header-title-styles{margin-left:35px;margin-top:12px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}\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: "component", type: DropdownComponent, selector: "lib-dropdown", inputs: ["dropdownHeaderName", "isDropdownOpen", "dropdownData", "isCheckboxVisible"], outputs: ["ddClicked", "selectedFromDropdown"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
3648
3648
  }
3649
3649
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartHeaderV3Component, decorators: [{
3650
3650
  type: Component,
3651
- args: [{ selector: 'lib-chart-header-v3', template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n !chartData.dropdownData2 &&\r\n !chartData.dropdownData1 &&\r\n chartData.data.length <= 8\r\n ? 'lib-justify-content-start'\r\n : 'lib-justify-content-space-between'\r\n \">\r\n <span class=\"legend-latest-holder\" *ngIf=\"\r\n chartData.data &&\r\n chartData.metaData.default_dept &&\r\n (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n \">\r\n <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n Default Dept: {{ chartData.metaData.default_dept }}\r\n </span>\r\n <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n item.key != chartData.metaData.default_dept &&\r\n chartData.metaData.default_dept\r\n \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n Dept</span>\r\n </span>\r\n <span class=\"legend-latest-holder legend-width\"\r\n [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n <span class=\"lib-display-flex lib-align-items-center\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n [style.background-color]=\"item.value\"></span>\r\n <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n {{ item.key }}\r\n </span>\r\n </span>\r\n </span>\r\n <span class=\"display-flex\">\r\n <span *ngIf=\"\r\n chartData.dropdownData1 &&\r\n chartData.metaData.breadcrumbLength &&\r\n chartData.metaData.breadcrumbLength == 1\r\n \">\r\n <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n </span>\r\n <span *ngIf=\"\r\n chartData.dropdownData2 &&\r\n chartData.metaData.breadcrumbLength &&\r\n chartData.metaData.breadcrumbLength == 1\r\n \">\r\n <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n </span>\r\n <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n (click)=\"isZoomOutSelected(false, $event)\">\r\n <i class=\"fa fa-search-plus\"></i>\r\n </span>\r\n <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n (click)=\"isZoomOutSelected(true, $event)\">\r\n <i class=\"fa fa-search-minus\"></i>\r\n </span>\r\n </span>\r\n </span>\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media (min-height: 900px){.header-title-styles{margin-left:35px;margin-top:12px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}\n"] }]
3651
+ args: [{ selector: 'lib-chart-header-v3', template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n !chartData.dropdownData2 &&\r\n !chartData.dropdownData1 &&\r\n chartData.data.length <= 8\r\n ? 'lib-justify-content-start'\r\n : 'lib-justify-content-space-between'\r\n \">\r\n <span class=\"legend-latest-holder\" *ngIf=\"\r\n chartData.data &&\r\n chartData.metaData.default_dept &&\r\n (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n \">\r\n <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n Default Dept: {{ chartData.metaData.default_dept }}\r\n </span>\r\n <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n item.key != chartData.metaData.default_dept &&\r\n chartData.metaData.default_dept\r\n \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n Dept</span>\r\n </span>\r\n <span class=\"legend-latest-holder legend-width\"\r\n [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n <span class=\"lib-display-flex lib-align-items-center\"\r\n *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n [style.background-color]=\"item.value\"></span>\r\n <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n {{ item.key }}\r\n </span>\r\n </span>\r\n </span>\r\n <span class=\"display-flex\">\r\n <span *ngIf=\"\r\n chartData.dropdownData1 &&\r\n chartData.metaData.breadcrumbLength &&\r\n chartData.metaData.breadcrumbLength == 1\r\n \">\r\n <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n </span>\r\n <span *ngIf=\"\r\n chartData.dropdownData2 &&\r\n chartData.metaData.breadcrumbLength &&\r\n chartData.metaData.breadcrumbLength == 1\r\n \">\r\n <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n </span>\r\n <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n <span class=\"zoomIcons\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n (click)=\"isZoomOutSelected(false, $event)\">\r\n <i class=\"fa fa-search-plus\"></i>\r\n </span>\r\n <span class=\"zoomIcons\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n (click)=\"isZoomOutSelected(true, $event)\">\r\n <i class=\"fa fa-search-minus\"></i>\r\n </span>\r\n </span>\r\n </span>\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media (min-height: 900px){.header-title-styles{margin-left:35px;margin-top:12px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}\n"] }]
3652
3652
  }], propDecorators: { chartData: [{
3653
3653
  type: Input
3654
3654
  }], chartConfiguration: [{
@@ -3683,7 +3683,7 @@ class GroupChartComponent extends ComponentUniqueId {
3683
3683
  headerMenuOptions: HeaderConfigHelper.headerConfig.headerMenuOptions,
3684
3684
  xAxisGrid: undefined,
3685
3685
  yAxisGrid: false,
3686
- legendVisible: false,
3686
+ legendVisible: true,
3687
3687
  isHeaderVisible: undefined,
3688
3688
  isTransparentBackground: undefined,
3689
3689
  isMultiChartGridLine: undefined,
@@ -3708,14 +3708,13 @@ class GroupChartComponent extends ComponentUniqueId {
3708
3708
  xLabelsOnSameLine: undefined,
3709
3709
  textAlwaysHorizontal: undefined,
3710
3710
  legendAtTopRight: undefined,
3711
- isDrilldownChart: true,
3711
+ isDrilldownChart: undefined,
3712
3712
  displayTitleOnTop: undefined,
3713
3713
  isToggleVisible: undefined,
3714
3714
  isTitleHidden: undefined,
3715
3715
  isDisplayBarDetailsAtBottom: undefined,
3716
3716
  howmanyBarDetailsToDisplay: 0,
3717
3717
  barVauleColor: undefined,
3718
- defaultBarHeight: 2,
3719
3718
  };
3720
3719
  this.uniqueId = this.getUniqueId();
3721
3720
  this.isZoomedOut = false;
@@ -3834,20 +3833,13 @@ class GroupChartComponent extends ComponentUniqueId {
3834
3833
  ? this.chartConfiguration.svgHeight
3835
3834
  : parseInt(verticalstackedcontainer.style('height'));
3836
3835
  }
3837
- if (this.chartConfiguration.isDrilldownChart && !this.isHeaderVisible) {
3836
+ if (this.chartConfiguration.isDrilldownChart) {
3838
3837
  height =
3839
3838
  parseInt(verticalstackedcontainer.style('height')) -
3840
3839
  margin.top -
3841
3840
  margin.bottom -
3842
3841
  130;
3843
3842
  }
3844
- if (this.chartConfiguration.isHeaderVisible) {
3845
- height =
3846
- parseInt(verticalstackedcontainer.style('height')) -
3847
- margin.top -
3848
- margin.bottom -
3849
- 100;
3850
- }
3851
3843
  /**
3852
3844
  * for hiding header
3853
3845
  * used by weekly charts
@@ -4441,15 +4433,13 @@ class GroupChartComponent extends ComponentUniqueId {
4441
4433
  .on('mouseout', handleMouseOut)
4442
4434
  .on('mouseover', handleMouseOver);
4443
4435
  }
4444
- if (this.chartConfiguration.displayTitleOnTop || (this.chartConfiguration.textsOnBar == undefined &&
4445
- this.chartConfiguration.displayTitleOnTop == undefined)) {
4436
+ if (this.chartConfiguration.displayTitleOnTop) {
4446
4437
  state
4447
4438
  .selectAll('rect')
4448
4439
  .on('mouseout', handleMouseOut)
4449
4440
  .on('mouseover', handleMouseOver);
4450
4441
  }
4451
4442
  function handleMouseOver(d, i) {
4452
- svg.selectAll('.lib-verticalstack-title-ontop').remove();
4453
4443
  svg
4454
4444
  .append('foreignObject')
4455
4445
  .attr('x', function () {
@@ -4573,8 +4563,57 @@ class GroupChartComponent extends ComponentUniqueId {
4573
4563
  });
4574
4564
  }
4575
4565
  function handleMouseOut(d, i) {
4566
+ if (!self.chartConfiguration.displayTitleOnTop) {
4567
+ return;
4568
+ }
4576
4569
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
4577
4570
  }
4571
+ /**
4572
+ * display data values on mouse over
4573
+ * used by dashboard charts
4574
+ */
4575
+ if (this.chartConfiguration.textsOnBar == undefined &&
4576
+ this.chartConfiguration.displayTitleOnTop == undefined) {
4577
+ state
4578
+ .selectAll('rect')
4579
+ .on('mouseout', function (d) {
4580
+ state.selectAll('.barstext').remove();
4581
+ })
4582
+ .on('mouseover', function (d1) {
4583
+ state
4584
+ .selectAll('text')
4585
+ .data(function (d) {
4586
+ let newList = [];
4587
+ subgroups.map(function (key) {
4588
+ if (key !== 'name' &&
4589
+ d1.key == key &&
4590
+ d1.value == d[key] &&
4591
+ d1.name == d.name) {
4592
+ let obj = { key: key, value: d[key], name: d.name };
4593
+ newList.push(obj);
4594
+ }
4595
+ });
4596
+ return newList;
4597
+ })
4598
+ .enter()
4599
+ .append('text')
4600
+ .attr('class', 'barstext')
4601
+ .attr('x', function (d) {
4602
+ return xSubgroup(d.key);
4603
+ })
4604
+ .attr('y', function (d) {
4605
+ return y(d.value);
4606
+ })
4607
+ .attr('style', 'font-size: ' + '.85em' + ';' + ' font-weight:' + 'bold' + ';')
4608
+ .style('fill', function (d) {
4609
+ return metaData.colors[d.key];
4610
+ })
4611
+ .attr('width', xSubgroup.bandwidth())
4612
+ .text(function (d) {
4613
+ return d.value;
4614
+ });
4615
+ });
4616
+ }
4578
4617
  svg
4579
4618
  .append('g')
4580
4619
  .attr('class', 'x2 axis2')
@@ -4591,7 +4630,6 @@ class GroupChartComponent extends ComponentUniqueId {
4591
4630
  .call(y)
4592
4631
  .style('display', 'none');
4593
4632
  svgYAxisLeft
4594
- .append('g')
4595
4633
  .append('g')
4596
4634
  .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
4597
4635
  .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
@@ -8870,18 +8908,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8870
8908
  });
8871
8909
  }
8872
8910
  }
8873
- if (isria && self.chartData.data.length > 8) {
8874
- svg
8875
- .selectAll('g.x1.axis1 g.tick text')
8876
- .classed('mobile-xaxis-override', true)
8877
- .text(function (d) {
8878
- return d.substring(0, 3);
8879
- })
8880
- .style('font-size', '12px')
8881
- .attr('y', 5)
8882
- .attr('x', 5)
8883
- .style('text-anchor', 'middle');
8884
- }
8885
8911
  if (isMobile && !this.isHeaderVisible) {
8886
8912
  svg
8887
8913
  .selectAll('g.x1.axis1 g.tick text')
@@ -8998,14 +9024,15 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8998
9024
  });
8999
9025
  }
9000
9026
  var xSubgroup = d3.scaleBand().domain(subgroups);
9001
- if (this.chartConfiguration.isMultiChartGridLine == undefined) {
9027
+ if (subgroups.length > 1 && !this.isZoomedOut) {
9028
+ // For grouped bar charts in zoom-in view, reduce padding between bars
9029
+ xSubgroup.range([0, x.bandwidth()]).padding(0.05);
9030
+ }
9031
+ else if (this.chartConfiguration.isMultiChartGridLine == undefined) {
9002
9032
  xSubgroup.range([0, x.bandwidth()]);
9003
9033
  }
9004
9034
  else {
9005
- /**
9006
- * used to make grouped bars with lesser width as we are not using padding for width
9007
- * used by weekly charts
9008
- */
9035
+ // used to make grouped bars with lesser width as we are not using padding for width
9009
9036
  xSubgroup.range([0, x.bandwidth()]);
9010
9037
  }
9011
9038
  // if (this.chartConfiguration.isDrilldownChart) {
@@ -9287,16 +9314,13 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9287
9314
  .on('mouseout', handleMouseOut)
9288
9315
  .on('mouseover', handleMouseOver);
9289
9316
  }
9290
- if (this.chartConfiguration.displayTitleOnTop ||
9291
- (this.chartConfiguration.textsOnBar == undefined &&
9292
- this.chartConfiguration.displayTitleOnTop == undefined)) {
9317
+ if (this.chartConfiguration.displayTitleOnTop) {
9293
9318
  state
9294
9319
  .selectAll('rect')
9295
9320
  .on('mouseout', handleMouseOut)
9296
9321
  .on('mouseover', handleMouseOver);
9297
9322
  }
9298
9323
  function handleMouseOver(d, i) {
9299
- svg.selectAll('.lib-verticalstack-title-ontop').remove();
9300
9324
  svg
9301
9325
  .append('foreignObject')
9302
9326
  .attr('x', function () {
@@ -9403,8 +9427,58 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9403
9427
  });
9404
9428
  }
9405
9429
  function handleMouseOut(d, i) {
9430
+ if (!self.chartConfiguration.displayTitleOnTop) {
9431
+ return;
9432
+ }
9406
9433
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
9407
9434
  }
9435
+ /**
9436
+ * display data values on mouse over
9437
+ * used by dashboard charts
9438
+ */
9439
+ if (this.chartConfiguration.textsOnBar == undefined &&
9440
+ this.chartConfiguration.displayTitleOnTop == undefined) {
9441
+ state
9442
+ .selectAll('rect')
9443
+ .on('mouseout', function (d) {
9444
+ state.selectAll('.barstext').remove();
9445
+ })
9446
+ .on('mouseover', function (d1) {
9447
+ state
9448
+ .selectAll('text')
9449
+ .data(function (d) {
9450
+ let newList = [];
9451
+ subgroups.map(function (key) {
9452
+ if (key !== 'name' &&
9453
+ d1.key == key &&
9454
+ d1.value == d[key] &&
9455
+ d1.name == d.name) {
9456
+ let obj = { key: key, value: d[key], name: d.name };
9457
+ newList.push(obj);
9458
+ }
9459
+ });
9460
+ return newList;
9461
+ })
9462
+ .enter()
9463
+ .append('text')
9464
+ .attr('fill', 'var(--chart-text-color)')
9465
+ .attr('class', 'barstext')
9466
+ .attr('x', function (d) {
9467
+ return xSubgroup(d.key);
9468
+ })
9469
+ .attr('y', function (d) {
9470
+ return y(d.value);
9471
+ })
9472
+ .attr('style', 'font-size: ' + '.85em' + ';' + ' font-weight:' + 'bold' + ';')
9473
+ .style('fill', function (d) {
9474
+ return metaData.colors[d.key];
9475
+ })
9476
+ .attr('width', self.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth())
9477
+ .text(function (d) {
9478
+ return d.value;
9479
+ });
9480
+ });
9481
+ }
9408
9482
  svg
9409
9483
  .append('g')
9410
9484
  .attr('class', 'x2 axis2')