axidio-styleguide-library1-v2 0.0.967 → 0.0.969

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 +57 -29
  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 +120 -51
  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
@@ -3931,7 +3924,6 @@ class GroupChartComponent extends ComponentUniqueId {
3931
3924
  .scaleBand()
3932
3925
  .rangeRound([width, 0])
3933
3926
  .align(0.5)
3934
- .padding([0.5])
3935
3927
  .domain(data.map(function (d) {
3936
3928
  return d.name.toLowerCase();
3937
3929
  }));
@@ -3941,7 +3933,7 @@ class GroupChartComponent extends ComponentUniqueId {
3941
3933
  .scaleBand()
3942
3934
  .domain(groups)
3943
3935
  .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
3944
- .padding([0.3]);
3936
+ .padding([0.2]);
3945
3937
  }
3946
3938
  // x.bandwidth(96);
3947
3939
  var xScaleFromOrigin = d3
@@ -3971,19 +3963,9 @@ class GroupChartComponent extends ComponentUniqueId {
3971
3963
  .call(d3.axisBottom(x))
3972
3964
  .call((g) => g.select('.domain').remove());
3973
3965
  svg.selectAll('g.x1.axis1 g.tick line').remove();
3974
- if (subgroups.length > 1 && !metaData.xLabel) {
3975
- svg
3976
- .selectAll('g.x1.axis1 g.tick text')
3977
- .attr('class', 'lib-xaxis-labels-texts-drilldown')
3978
- .style('fill', 'var(--chart-text-color)')
3979
- .attr('y', 32); // Increase distance from bars (default is ~9)
3980
- }
3981
- else {
3982
- svg
3983
- .selectAll('g.x1.axis1 g.tick text')
3984
- .attr('class', 'lib-xaxis-labels-texts-drilldown')
3985
- .style('fill', 'var(--chart-text-color)');
3986
- }
3966
+ svg.selectAll('g.x1.axis1 g.tick text')
3967
+ .attr('class', 'lib-xaxis-labels-texts-drilldown')
3968
+ .style('fill', 'var(--chart-text-color)');
3987
3969
  // .attr('y', function () {
3988
3970
  // if (alternate_text) {
3989
3971
  // alternate_text = false;
@@ -4004,7 +3986,7 @@ class GroupChartComponent extends ComponentUniqueId {
4004
3986
  svg
4005
3987
  .append('g')
4006
3988
  .attr('class', 'x1 axis1')
4007
- .attr('transform', 'translate(0,' + height + ')')
3989
+ .attr('transform', 'translate(-25,' + height + ')')
4008
3990
  .call(d3.axisBottom(x).tickSize(0))
4009
3991
  .call((g) => g.select('.domain').attr('fill', 'none'));
4010
3992
  /**
@@ -4451,15 +4433,13 @@ class GroupChartComponent extends ComponentUniqueId {
4451
4433
  .on('mouseout', handleMouseOut)
4452
4434
  .on('mouseover', handleMouseOver);
4453
4435
  }
4454
- if (this.chartConfiguration.displayTitleOnTop || (this.chartConfiguration.textsOnBar == undefined &&
4455
- this.chartConfiguration.displayTitleOnTop == undefined)) {
4436
+ if (this.chartConfiguration.displayTitleOnTop) {
4456
4437
  state
4457
4438
  .selectAll('rect')
4458
4439
  .on('mouseout', handleMouseOut)
4459
4440
  .on('mouseover', handleMouseOver);
4460
4441
  }
4461
4442
  function handleMouseOver(d, i) {
4462
- svg.selectAll('.lib-verticalstack-title-ontop').remove();
4463
4443
  svg
4464
4444
  .append('foreignObject')
4465
4445
  .attr('x', function () {
@@ -4583,8 +4563,57 @@ class GroupChartComponent extends ComponentUniqueId {
4583
4563
  });
4584
4564
  }
4585
4565
  function handleMouseOut(d, i) {
4566
+ if (!self.chartConfiguration.displayTitleOnTop) {
4567
+ return;
4568
+ }
4586
4569
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
4587
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
+ }
4588
4617
  svg
4589
4618
  .append('g')
4590
4619
  .attr('class', 'x2 axis2')
@@ -4601,7 +4630,6 @@ class GroupChartComponent extends ComponentUniqueId {
4601
4630
  .call(y)
4602
4631
  .style('display', 'none');
4603
4632
  svgYAxisLeft
4604
- .append('g')
4605
4633
  .append('g')
4606
4634
  .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
4607
4635
  .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
@@ -8880,18 +8908,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8880
8908
  });
8881
8909
  }
8882
8910
  }
8883
- if (isria && self.chartData.data.length > 8) {
8884
- svg
8885
- .selectAll('g.x1.axis1 g.tick text')
8886
- .classed('mobile-xaxis-override', true)
8887
- .text(function (d) {
8888
- return d.substring(0, 3);
8889
- })
8890
- .style('font-size', '12px')
8891
- .attr('y', 5)
8892
- .attr('x', 5)
8893
- .style('text-anchor', 'middle');
8894
- }
8895
8911
  if (isMobile && !this.isHeaderVisible) {
8896
8912
  svg
8897
8913
  .selectAll('g.x1.axis1 g.tick text')
@@ -9008,14 +9024,15 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9008
9024
  });
9009
9025
  }
9010
9026
  var xSubgroup = d3.scaleBand().domain(subgroups);
9011
- 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) {
9012
9032
  xSubgroup.range([0, x.bandwidth()]);
9013
9033
  }
9014
9034
  else {
9015
- /**
9016
- * used to make grouped bars with lesser width as we are not using padding for width
9017
- * used by weekly charts
9018
- */
9035
+ // used to make grouped bars with lesser width as we are not using padding for width
9019
9036
  xSubgroup.range([0, x.bandwidth()]);
9020
9037
  }
9021
9038
  // if (this.chartConfiguration.isDrilldownChart) {
@@ -9111,6 +9128,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9111
9128
  return y(0);
9112
9129
  })
9113
9130
  .attr('width', function (d) {
9131
+ // For grouped bar charts in zoom-in view, slightly increase bar width for both bars (shipped and planned)
9132
+ if (subgroups.length > 1 && !self.isZoomedOut) {
9133
+ return xSubgroup.bandwidth() * 1.1;
9134
+ }
9135
+ // Default logic for other chart types
9114
9136
  if (self.chartConfiguration.isDrilldownChart) {
9115
9137
  data.map((indiv) => {
9116
9138
  if (indiv.name == d.name) {
@@ -9297,16 +9319,13 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9297
9319
  .on('mouseout', handleMouseOut)
9298
9320
  .on('mouseover', handleMouseOver);
9299
9321
  }
9300
- if (this.chartConfiguration.displayTitleOnTop ||
9301
- (this.chartConfiguration.textsOnBar == undefined &&
9302
- this.chartConfiguration.displayTitleOnTop == undefined)) {
9322
+ if (this.chartConfiguration.displayTitleOnTop) {
9303
9323
  state
9304
9324
  .selectAll('rect')
9305
9325
  .on('mouseout', handleMouseOut)
9306
9326
  .on('mouseover', handleMouseOver);
9307
9327
  }
9308
9328
  function handleMouseOver(d, i) {
9309
- svg.selectAll('.lib-verticalstack-title-ontop').remove();
9310
9329
  svg
9311
9330
  .append('foreignObject')
9312
9331
  .attr('x', function () {
@@ -9413,8 +9432,58 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9413
9432
  });
9414
9433
  }
9415
9434
  function handleMouseOut(d, i) {
9435
+ if (!self.chartConfiguration.displayTitleOnTop) {
9436
+ return;
9437
+ }
9416
9438
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
9417
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
+ }
9418
9487
  svg
9419
9488
  .append('g')
9420
9489
  .attr('class', 'x2 axis2')