axidio-styleguide-library1-v2 0.0.968 → 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.
- package/esm2022/lib/chart-header-v3/chart-header-v3.component.mjs +3 -3
- package/esm2022/lib/group-chart/group-chart.component.mjs +58 -30
- package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +52 -16
- package/fesm2022/axidio-styleguide-library1-v2.mjs +110 -46
- package/fesm2022/axidio-styleguide-library1-v2.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -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\"
|
|
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\"
|
|
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
|
|
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.
|
|
3936
|
+
.padding([0.2]);
|
|
3945
3937
|
}
|
|
3946
3938
|
// x.bandwidth(96);
|
|
3947
3939
|
var xScaleFromOrigin = d3
|
|
@@ -3967,23 +3959,13 @@ class GroupChartComponent extends ComponentUniqueId {
|
|
|
3967
3959
|
svg
|
|
3968
3960
|
.append('g')
|
|
3969
3961
|
.attr('class', 'x1 axis1')
|
|
3970
|
-
.attr('transform', 'translate(
|
|
3962
|
+
.attr('transform', 'translate(-25,' + height + ')')
|
|
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
|
-
|
|
3975
|
-
|
|
3976
|
-
|
|
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(
|
|
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
|
|
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')
|
|
@@ -9303,15 +9319,13 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9303
9319
|
.on('mouseout', handleMouseOut)
|
|
9304
9320
|
.on('mouseover', handleMouseOver);
|
|
9305
9321
|
}
|
|
9306
|
-
if (this.chartConfiguration.displayTitleOnTop
|
|
9307
|
-
this.chartConfiguration.displayTitleOnTop == undefined)) {
|
|
9322
|
+
if (this.chartConfiguration.displayTitleOnTop) {
|
|
9308
9323
|
state
|
|
9309
9324
|
.selectAll('rect')
|
|
9310
9325
|
.on('mouseout', handleMouseOut)
|
|
9311
9326
|
.on('mouseover', handleMouseOver);
|
|
9312
9327
|
}
|
|
9313
9328
|
function handleMouseOver(d, i) {
|
|
9314
|
-
svg.selectAll('.lib-verticalstack-title-ontop').remove();
|
|
9315
9329
|
svg
|
|
9316
9330
|
.append('foreignObject')
|
|
9317
9331
|
.attr('x', function () {
|
|
@@ -9418,8 +9432,58 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9418
9432
|
});
|
|
9419
9433
|
}
|
|
9420
9434
|
function handleMouseOut(d, i) {
|
|
9435
|
+
if (!self.chartConfiguration.displayTitleOnTop) {
|
|
9436
|
+
return;
|
|
9437
|
+
}
|
|
9421
9438
|
svg.selectAll('.lib-verticalstack-title-ontop').remove();
|
|
9422
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
|
+
}
|
|
9423
9487
|
svg
|
|
9424
9488
|
.append('g')
|
|
9425
9489
|
.attr('class', 'x2 axis2')
|