axidio-styleguide-library1-v2 0.0.965 → 0.0.966

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 +29 -57
  3. package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +22 -63
  4. package/fesm2022/axidio-styleguide-library1-v2.mjs +51 -120
  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\" [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" }] }); }
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" }] }); }
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\" [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"] }]
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"] }]
3652
3652
  }], propDecorators: { chartData: [{
3653
3653
  type: Input
3654
3654
  }], chartConfiguration: [{
@@ -3833,13 +3833,20 @@ class GroupChartComponent extends ComponentUniqueId {
3833
3833
  ? this.chartConfiguration.svgHeight
3834
3834
  : parseInt(verticalstackedcontainer.style('height'));
3835
3835
  }
3836
- if (this.chartConfiguration.isDrilldownChart) {
3836
+ if (this.chartConfiguration.isDrilldownChart && !this.isHeaderVisible) {
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
+ }
3843
3850
  /**
3844
3851
  * for hiding header
3845
3852
  * used by weekly charts
@@ -3924,6 +3931,7 @@ class GroupChartComponent extends ComponentUniqueId {
3924
3931
  .scaleBand()
3925
3932
  .rangeRound([width, 0])
3926
3933
  .align(0.5)
3934
+ .padding([0.5])
3927
3935
  .domain(data.map(function (d) {
3928
3936
  return d.name.toLowerCase();
3929
3937
  }));
@@ -3933,7 +3941,7 @@ class GroupChartComponent extends ComponentUniqueId {
3933
3941
  .scaleBand()
3934
3942
  .domain(groups)
3935
3943
  .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
3936
- .padding([0.2]);
3944
+ .padding([0.3]);
3937
3945
  }
3938
3946
  // x.bandwidth(96);
3939
3947
  var xScaleFromOrigin = d3
@@ -3963,9 +3971,19 @@ class GroupChartComponent extends ComponentUniqueId {
3963
3971
  .call(d3.axisBottom(x))
3964
3972
  .call((g) => g.select('.domain').remove());
3965
3973
  svg.selectAll('g.x1.axis1 g.tick line').remove();
3966
- svg.selectAll('g.x1.axis1 g.tick text')
3967
- .attr('class', 'lib-xaxis-labels-texts-drilldown')
3968
- .style('fill', 'var(--chart-text-color)');
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
+ }
3969
3987
  // .attr('y', function () {
3970
3988
  // if (alternate_text) {
3971
3989
  // alternate_text = false;
@@ -3986,7 +4004,7 @@ class GroupChartComponent extends ComponentUniqueId {
3986
4004
  svg
3987
4005
  .append('g')
3988
4006
  .attr('class', 'x1 axis1')
3989
- .attr('transform', 'translate(-25,' + height + ')')
4007
+ .attr('transform', 'translate(0,' + height + ')')
3990
4008
  .call(d3.axisBottom(x).tickSize(0))
3991
4009
  .call((g) => g.select('.domain').attr('fill', 'none'));
3992
4010
  /**
@@ -4433,13 +4451,15 @@ class GroupChartComponent extends ComponentUniqueId {
4433
4451
  .on('mouseout', handleMouseOut)
4434
4452
  .on('mouseover', handleMouseOver);
4435
4453
  }
4436
- if (this.chartConfiguration.displayTitleOnTop) {
4454
+ if (this.chartConfiguration.displayTitleOnTop || (this.chartConfiguration.textsOnBar == undefined &&
4455
+ this.chartConfiguration.displayTitleOnTop == undefined)) {
4437
4456
  state
4438
4457
  .selectAll('rect')
4439
4458
  .on('mouseout', handleMouseOut)
4440
4459
  .on('mouseover', handleMouseOver);
4441
4460
  }
4442
4461
  function handleMouseOver(d, i) {
4462
+ svg.selectAll('.lib-verticalstack-title-ontop').remove();
4443
4463
  svg
4444
4464
  .append('foreignObject')
4445
4465
  .attr('x', function () {
@@ -4563,57 +4583,8 @@ class GroupChartComponent extends ComponentUniqueId {
4563
4583
  });
4564
4584
  }
4565
4585
  function handleMouseOut(d, i) {
4566
- if (!self.chartConfiguration.displayTitleOnTop) {
4567
- return;
4568
- }
4569
4586
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
4570
4587
  }
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
- }
4617
4588
  svg
4618
4589
  .append('g')
4619
4590
  .attr('class', 'x2 axis2')
@@ -4630,6 +4601,7 @@ class GroupChartComponent extends ComponentUniqueId {
4630
4601
  .call(y)
4631
4602
  .style('display', 'none');
4632
4603
  svgYAxisLeft
4604
+ .append('g')
4633
4605
  .append('g')
4634
4606
  .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
4635
4607
  .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
@@ -8908,6 +8880,18 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8908
8880
  });
8909
8881
  }
8910
8882
  }
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
+ }
8911
8895
  if (isMobile && !this.isHeaderVisible) {
8912
8896
  svg
8913
8897
  .selectAll('g.x1.axis1 g.tick text')
@@ -9024,15 +9008,14 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9024
9008
  });
9025
9009
  }
9026
9010
  var xSubgroup = d3.scaleBand().domain(subgroups);
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) {
9011
+ if (this.chartConfiguration.isMultiChartGridLine == undefined) {
9032
9012
  xSubgroup.range([0, x.bandwidth()]);
9033
9013
  }
9034
9014
  else {
9035
- // used to make grouped bars with lesser width as we are not using padding for width
9015
+ /**
9016
+ * used to make grouped bars with lesser width as we are not using padding for width
9017
+ * used by weekly charts
9018
+ */
9036
9019
  xSubgroup.range([0, x.bandwidth()]);
9037
9020
  }
9038
9021
  // if (this.chartConfiguration.isDrilldownChart) {
@@ -9128,11 +9111,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9128
9111
  return y(0);
9129
9112
  })
9130
9113
  .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
9136
9114
  if (self.chartConfiguration.isDrilldownChart) {
9137
9115
  data.map((indiv) => {
9138
9116
  if (indiv.name == d.name) {
@@ -9319,13 +9297,16 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9319
9297
  .on('mouseout', handleMouseOut)
9320
9298
  .on('mouseover', handleMouseOver);
9321
9299
  }
9322
- if (this.chartConfiguration.displayTitleOnTop) {
9300
+ if (this.chartConfiguration.displayTitleOnTop ||
9301
+ (this.chartConfiguration.textsOnBar == undefined &&
9302
+ this.chartConfiguration.displayTitleOnTop == undefined)) {
9323
9303
  state
9324
9304
  .selectAll('rect')
9325
9305
  .on('mouseout', handleMouseOut)
9326
9306
  .on('mouseover', handleMouseOver);
9327
9307
  }
9328
9308
  function handleMouseOver(d, i) {
9309
+ svg.selectAll('.lib-verticalstack-title-ontop').remove();
9329
9310
  svg
9330
9311
  .append('foreignObject')
9331
9312
  .attr('x', function () {
@@ -9432,58 +9413,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9432
9413
  });
9433
9414
  }
9434
9415
  function handleMouseOut(d, i) {
9435
- if (!self.chartConfiguration.displayTitleOnTop) {
9436
- return;
9437
- }
9438
9416
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
9439
9417
  }
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
- }
9487
9418
  svg
9488
9419
  .append('g')
9489
9420
  .attr('class', 'x2 axis2')