axidio-styleguide-library1-v2 0.0.969 → 0.0.971

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 +34 -62
  3. package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +17 -53
  4. package/fesm2022/axidio-styleguide-library1-v2.mjs +51 -115
  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
@@ -3959,13 +3967,23 @@ class GroupChartComponent extends ComponentUniqueId {
3959
3967
  svg
3960
3968
  .append('g')
3961
3969
  .attr('class', 'x1 axis1')
3962
- .attr('transform', 'translate(-25,' + height + ')')
3970
+ .attr('transform', 'translate(0,' + height + ')')
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 () {
@@ -4539,21 +4559,21 @@ class GroupChartComponent extends ComponentUniqueId {
4539
4559
  .html(function () {
4540
4560
  let dataType = metaData.dataType ? metaData.dataType : '';
4541
4561
  if (!self.isZoomedOut) {
4542
- let desiredText = '<span class="title-bar-name">' + d.key + '</span>';
4562
+ let desiredText = '<span class="title-bar-name">' + d.name + '</span>';
4543
4563
  desiredText +=
4544
4564
  '<span class="title-bar-value"><span>' +
4545
- d.value +
4565
+ d.Value +
4546
4566
  '</span>' +
4547
4567
  dataType +
4548
4568
  '</span>';
4549
4569
  return desiredText;
4550
4570
  }
4551
4571
  else {
4552
- let tempKey = d.key.length <= 8 ? d.key : d.key.substring(0, 5) + '...';
4572
+ let tempKey = d.name.length <= 8 ? d.name : d.name.substring(0, 5) + '...';
4553
4573
  let desiredText = '<span class="title-bar-name">' +
4554
4574
  tempKey +
4555
4575
  ':' +
4556
- d.value +
4576
+ d.Value +
4557
4577
  dataType +
4558
4578
  '</span>';
4559
4579
  desiredText +=
@@ -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')
@@ -9130,7 +9114,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9130
9114
  .attr('width', function (d) {
9131
9115
  // For grouped bar charts in zoom-in view, slightly increase bar width for both bars (shipped and planned)
9132
9116
  if (subgroups.length > 1 && !self.isZoomedOut) {
9133
- return xSubgroup.bandwidth() * 1.1;
9117
+ return xSubgroup.bandwidth() * 0.5;
9134
9118
  }
9135
9119
  // Default logic for other chart types
9136
9120
  if (self.chartConfiguration.isDrilldownChart) {
@@ -9319,13 +9303,15 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9319
9303
  .on('mouseout', handleMouseOut)
9320
9304
  .on('mouseover', handleMouseOver);
9321
9305
  }
9322
- if (this.chartConfiguration.displayTitleOnTop) {
9306
+ if (this.chartConfiguration.displayTitleOnTop || (this.chartConfiguration.textsOnBar == undefined &&
9307
+ this.chartConfiguration.displayTitleOnTop == undefined)) {
9323
9308
  state
9324
9309
  .selectAll('rect')
9325
9310
  .on('mouseout', handleMouseOut)
9326
9311
  .on('mouseover', handleMouseOver);
9327
9312
  }
9328
9313
  function handleMouseOver(d, i) {
9314
+ svg.selectAll('.lib-verticalstack-title-ontop').remove();
9329
9315
  svg
9330
9316
  .append('foreignObject')
9331
9317
  .attr('x', function () {
@@ -9432,58 +9418,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9432
9418
  });
9433
9419
  }
9434
9420
  function handleMouseOut(d, i) {
9435
- if (!self.chartConfiguration.displayTitleOnTop) {
9436
- return;
9437
- }
9438
9421
  svg.selectAll('.lib-verticalstack-title-ontop').remove();
9439
9422
  }
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
9423
  svg
9488
9424
  .append('g')
9489
9425
  .attr('class', 'x2 axis2')