axidio-styleguide-library1-v2 0.0.963 → 0.0.965

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 +52 -13
  3. package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +63 -22
  4. package/fesm2022/axidio-styleguide-library1-v2.mjs +115 -35
  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: [{
@@ -3833,20 +3833,13 @@ class GroupChartComponent extends ComponentUniqueId {
3833
3833
  ? this.chartConfiguration.svgHeight
3834
3834
  : parseInt(verticalstackedcontainer.style('height'));
3835
3835
  }
3836
- if (this.chartConfiguration.isDrilldownChart && !this.isHeaderVisible) {
3836
+ if (this.chartConfiguration.isDrilldownChart) {
3837
3837
  height =
3838
3838
  parseInt(verticalstackedcontainer.style('height')) -
3839
3839
  margin.top -
3840
3840
  margin.bottom -
3841
3841
  130;
3842
3842
  }
3843
- if (this.chartConfiguration.isHeaderVisible) {
3844
- height =
3845
- parseInt(verticalstackedcontainer.style('height')) -
3846
- margin.top -
3847
- margin.bottom -
3848
- 100;
3849
- }
3850
3843
  /**
3851
3844
  * for hiding header
3852
3845
  * used by weekly charts
@@ -4440,15 +4433,13 @@ class GroupChartComponent extends ComponentUniqueId {
4440
4433
  .on('mouseout', handleMouseOut)
4441
4434
  .on('mouseover', handleMouseOver);
4442
4435
  }
4443
- if (this.chartConfiguration.displayTitleOnTop || (this.chartConfiguration.textsOnBar == undefined &&
4444
- this.chartConfiguration.displayTitleOnTop == undefined)) {
4436
+ if (this.chartConfiguration.displayTitleOnTop) {
4445
4437
  state
4446
4438
  .selectAll('rect')
4447
4439
  .on('mouseout', handleMouseOut)
4448
4440
  .on('mouseover', handleMouseOver);
4449
4441
  }
4450
4442
  function handleMouseOver(d, i) {
4451
- svg.selectAll('.lib-verticalstack-title-ontop').remove();
4452
4443
  svg
4453
4444
  .append('foreignObject')
4454
4445
  .attr('x', function () {
@@ -4572,8 +4563,57 @@ class GroupChartComponent extends ComponentUniqueId {
4572
4563
  });
4573
4564
  }
4574
4565
  function handleMouseOut(d, i) {
4566
+ if (!self.chartConfiguration.displayTitleOnTop) {
4567
+ return;
4568
+ }
4575
4569
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
4576
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
+ }
4577
4617
  svg
4578
4618
  .append('g')
4579
4619
  .attr('class', 'x2 axis2')
@@ -4590,7 +4630,6 @@ class GroupChartComponent extends ComponentUniqueId {
4590
4630
  .call(y)
4591
4631
  .style('display', 'none');
4592
4632
  svgYAxisLeft
4593
- .append('g')
4594
4633
  .append('g')
4595
4634
  .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
4596
4635
  .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
@@ -8869,18 +8908,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8869
8908
  });
8870
8909
  }
8871
8910
  }
8872
- if (isria && self.chartData.data.length > 8) {
8873
- svg
8874
- .selectAll('g.x1.axis1 g.tick text')
8875
- .classed('mobile-xaxis-override', true)
8876
- .text(function (d) {
8877
- return d.substring(0, 3);
8878
- })
8879
- .style('font-size', '12px')
8880
- .attr('y', 5)
8881
- .attr('x', 5)
8882
- .style('text-anchor', 'middle');
8883
- }
8884
8911
  if (isMobile && !this.isHeaderVisible) {
8885
8912
  svg
8886
8913
  .selectAll('g.x1.axis1 g.tick text')
@@ -8997,14 +9024,15 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8997
9024
  });
8998
9025
  }
8999
9026
  var xSubgroup = d3.scaleBand().domain(subgroups);
9000
- 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) {
9001
9032
  xSubgroup.range([0, x.bandwidth()]);
9002
9033
  }
9003
9034
  else {
9004
- /**
9005
- * used to make grouped bars with lesser width as we are not using padding for width
9006
- * used by weekly charts
9007
- */
9035
+ // used to make grouped bars with lesser width as we are not using padding for width
9008
9036
  xSubgroup.range([0, x.bandwidth()]);
9009
9037
  }
9010
9038
  // if (this.chartConfiguration.isDrilldownChart) {
@@ -9100,6 +9128,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9100
9128
  return y(0);
9101
9129
  })
9102
9130
  .attr('width', function (d) {
9131
+ // For grouped bar charts in zoom-in view, increase bar width for both bars (shipped and planned)
9132
+ if (subgroups.length > 1 && !self.isZoomedOut) {
9133
+ return xSubgroup.bandwidth() * 1.2;
9134
+ }
9135
+ // Default logic for other chart types
9103
9136
  if (self.chartConfiguration.isDrilldownChart) {
9104
9137
  data.map((indiv) => {
9105
9138
  if (indiv.name == d.name) {
@@ -9286,16 +9319,13 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9286
9319
  .on('mouseout', handleMouseOut)
9287
9320
  .on('mouseover', handleMouseOver);
9288
9321
  }
9289
- if (this.chartConfiguration.displayTitleOnTop ||
9290
- (this.chartConfiguration.textsOnBar == undefined &&
9291
- this.chartConfiguration.displayTitleOnTop == undefined)) {
9322
+ if (this.chartConfiguration.displayTitleOnTop) {
9292
9323
  state
9293
9324
  .selectAll('rect')
9294
9325
  .on('mouseout', handleMouseOut)
9295
9326
  .on('mouseover', handleMouseOver);
9296
9327
  }
9297
9328
  function handleMouseOver(d, i) {
9298
- svg.selectAll('.lib-verticalstack-title-ontop').remove();
9299
9329
  svg
9300
9330
  .append('foreignObject')
9301
9331
  .attr('x', function () {
@@ -9402,8 +9432,58 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9402
9432
  });
9403
9433
  }
9404
9434
  function handleMouseOut(d, i) {
9435
+ if (!self.chartConfiguration.displayTitleOnTop) {
9436
+ return;
9437
+ }
9405
9438
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
9406
9439
  }
9440
+ /**
9441
+ * display data values on mouse over
9442
+ * used by dashboard charts
9443
+ */
9444
+ if (this.chartConfiguration.textsOnBar == undefined &&
9445
+ this.chartConfiguration.displayTitleOnTop == undefined) {
9446
+ state
9447
+ .selectAll('rect')
9448
+ .on('mouseout', function (d) {
9449
+ state.selectAll('.barstext').remove();
9450
+ })
9451
+ .on('mouseover', function (d1) {
9452
+ state
9453
+ .selectAll('text')
9454
+ .data(function (d) {
9455
+ let newList = [];
9456
+ subgroups.map(function (key) {
9457
+ if (key !== 'name' &&
9458
+ d1.key == key &&
9459
+ d1.value == d[key] &&
9460
+ d1.name == d.name) {
9461
+ let obj = { key: key, value: d[key], name: d.name };
9462
+ newList.push(obj);
9463
+ }
9464
+ });
9465
+ return newList;
9466
+ })
9467
+ .enter()
9468
+ .append('text')
9469
+ .attr('fill', 'var(--chart-text-color)')
9470
+ .attr('class', 'barstext')
9471
+ .attr('x', function (d) {
9472
+ return xSubgroup(d.key);
9473
+ })
9474
+ .attr('y', function (d) {
9475
+ return y(d.value);
9476
+ })
9477
+ .attr('style', 'font-size: ' + '.85em' + ';' + ' font-weight:' + 'bold' + ';')
9478
+ .style('fill', function (d) {
9479
+ return metaData.colors[d.key];
9480
+ })
9481
+ .attr('width', self.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth())
9482
+ .text(function (d) {
9483
+ return d.value;
9484
+ });
9485
+ });
9486
+ }
9407
9487
  svg
9408
9488
  .append('g')
9409
9489
  .attr('class', 'x2 axis2')