gamma-app-controller 2.0.15 → 2.0.16
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/esm2020/lib/application-controller/support-components/dash-chart/dash-chart.component.mjs +7 -3
- package/esm2020/lib/shared/advanced-component/gamma-advance-chart/gamma-advance-chart.component.mjs +2 -1
- package/esm2020/lib/shared/advanced-component/gamma-geo-chart/gamma-geo-chart.component.mjs +14 -19
- package/fesm2015/gamma-app-controller.mjs +20 -19
- package/fesm2015/gamma-app-controller.mjs.map +1 -1
- package/fesm2020/gamma-app-controller.mjs +20 -19
- package/fesm2020/gamma-app-controller.mjs.map +1 -1
- package/lib/shared/advanced-component/gamma-geo-chart/gamma-geo-chart.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3633,7 +3633,6 @@ class GammaGeoChartComponent {
|
|
|
3633
3633
|
};
|
|
3634
3634
|
}
|
|
3635
3635
|
else if (this.mapTYpe == "choroplethMap") {
|
|
3636
|
-
debugger;
|
|
3637
3636
|
let chartConfig = value.kpiConfig.dataConfig;
|
|
3638
3637
|
if (chartConfig.isDataAggregation) {
|
|
3639
3638
|
const aggreationData = this.getGroupDataForChart(value.kpiConfig.dataSource, chartConfig['dataAggregationConfig']['dataAggregateColumes'], chartConfig['dataAggregationConfig']['aggregateFields']);
|
|
@@ -3664,9 +3663,6 @@ class GammaGeoChartComponent {
|
|
|
3664
3663
|
this.choroplethMapslideSpeed = chartConfig.slideSpeed;
|
|
3665
3664
|
}
|
|
3666
3665
|
this.initChoroplethMap(chartConfig, tootTipColumn);
|
|
3667
|
-
setTimeout(() => {
|
|
3668
|
-
this.isLoader = false;
|
|
3669
|
-
}, 200);
|
|
3670
3666
|
}
|
|
3671
3667
|
else {
|
|
3672
3668
|
this.locations = value.kpiConfig.dataSource;
|
|
@@ -4114,22 +4110,22 @@ class GammaGeoChartComponent {
|
|
|
4114
4110
|
};
|
|
4115
4111
|
}
|
|
4116
4112
|
initChoroplethMap(chartConfig, tootTipColumn) {
|
|
4113
|
+
this.isLoader = true;
|
|
4117
4114
|
this.map = new google.maps.Map(document.getElementById("googlemap"), {
|
|
4118
|
-
center: {
|
|
4115
|
+
center: {
|
|
4116
|
+
lat: parseFloat(chartConfig.centerLat),
|
|
4117
|
+
lng: parseFloat(chartConfig.centerLng)
|
|
4118
|
+
},
|
|
4119
4119
|
zoom: parseInt(chartConfig.zoom)
|
|
4120
4120
|
});
|
|
4121
|
+
google.maps.event.addListenerOnce(this.map.data, 'addfeature', () => {
|
|
4122
|
+
this.applyChoroplethStyles(chartConfig);
|
|
4123
|
+
});
|
|
4121
4124
|
this.map.data.loadGeoJson(chartConfig.gjsonFilePath);
|
|
4125
|
+
}
|
|
4126
|
+
applyChoroplethStyles(chartConfig) {
|
|
4122
4127
|
this.map.data.setStyle(feature => this.getFeatureStyle(feature, chartConfig, this.minChoroplethMapCnt, this.maxChoroplethMapCnt));
|
|
4123
|
-
|
|
4124
|
-
this.map.data.addListener('mouseover', (event) => {
|
|
4125
|
-
const district = event.feature.getProperty('d');
|
|
4126
|
-
const key = district?.toUpperCase();
|
|
4127
|
-
const row = this.choroplethTooltipDataSource.get(key);
|
|
4128
|
-
infoWindow.setContent(this.buildInfoWindowContent(district, row, tootTipColumn));
|
|
4129
|
-
infoWindow.setPosition(event.latLng);
|
|
4130
|
-
infoWindow.open(this.map);
|
|
4131
|
-
});
|
|
4132
|
-
this.map.data.addListener('mouseout', () => infoWindow.close());
|
|
4128
|
+
this.isLoader = false;
|
|
4133
4129
|
}
|
|
4134
4130
|
buildInfoWindowContent(district, row, tootTipColumn) {
|
|
4135
4131
|
const rows = tootTipColumn.map(c => `
|
|
@@ -4236,10 +4232,10 @@ class GammaGeoChartComponent {
|
|
|
4236
4232
|
}
|
|
4237
4233
|
}
|
|
4238
4234
|
GammaGeoChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4239
|
-
GammaGeoChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaGeoChartComponent, selector: "app-gamma-geo-chart", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n <ng-container *ngIf=\"isLoader\">\n <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n <app-loader></app-loader>\n </div>\n </ng-container
|
|
4235
|
+
GammaGeoChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaGeoChartComponent, selector: "app-gamma-geo-chart", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n <!-- <ng-container *ngIf=\"isLoader\">\n <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n <app-loader></app-loader>\n </div>\n </ng-container> -->\n\n\n <div class=\"relative w-full\">\n\n <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n <div *ngIf=\"isLoader\" class=\"absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm\">\n <div class=\"loader\"></div>\n </div>\n\n\n\n <div class=\"mx-2 pb-2\">\n <div class=\" mx-auto w-full mt-3\" *ngIf=\"isRangeSliderVisible\">\n <div class=\"flex items-center justify-between mb-2\">\n\n <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"togglePlay()\">\n <i class=\"fa\" [ngClass]=\"isPlaying ? 'fa-pause' : 'fa-play'\"></i>\n </button>\n\n <div class=\"flex space-x-2 text-sm font-semibold\">\n <ng-container *ngFor=\"let year of allSelectedRangeSliderValues; let i = index\">\n <span class=\"cursor-pointer select-none px-2 py-1 rounded-md transition\" [ngClass]=\"{\n 'bg-black text-white shadow': year === selectedRangeSliderValue,\n 'text-gray-300 hover:text-white': year !== selectedRangeSliderValue\n }\" (click)=\"setYearByIndex(i)\">\n {{ year }}\n </span>\n </ng-container>\n </div>\n\n <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"restart()\">\n <i class=\"fa fa-refresh\"></i>\n </button>\n\n </div>\n\n <input type=\"range\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer\n bg-gradient-to-r from-green-400 via-yellow-400 to-red-500\" [min]=\"0\"\n [max]=\"allSelectedRangeSliderValues.length - 1\" [value]=\"choroplethMapCurrentIndex\"\n (input)=\"onYearChange($event)\" />\n </div>\n\n\n\n\n </div>\n\n </div>\n\n\n\n\n\n</div>", styles: [".loader{width:64px;height:64px;border:6px solid rgba(255,255,255,.2);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
4240
4236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, decorators: [{
|
|
4241
4237
|
type: Component,
|
|
4242
|
-
args: [{ selector: "app-gamma-geo-chart", template: "<div class=\"mx-2 bg-gray-800\">\n <ng-container *ngIf=\"isLoader\">\n <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n <app-loader></app-loader>\n </div>\n </ng-container
|
|
4238
|
+
args: [{ selector: "app-gamma-geo-chart", template: "<div class=\"mx-2 bg-gray-800\">\n <!-- <ng-container *ngIf=\"isLoader\">\n <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n <app-loader></app-loader>\n </div>\n </ng-container> -->\n\n\n <div class=\"relative w-full\">\n\n <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n <div *ngIf=\"isLoader\" class=\"absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm\">\n <div class=\"loader\"></div>\n </div>\n\n\n\n <div class=\"mx-2 pb-2\">\n <div class=\" mx-auto w-full mt-3\" *ngIf=\"isRangeSliderVisible\">\n <div class=\"flex items-center justify-between mb-2\">\n\n <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"togglePlay()\">\n <i class=\"fa\" [ngClass]=\"isPlaying ? 'fa-pause' : 'fa-play'\"></i>\n </button>\n\n <div class=\"flex space-x-2 text-sm font-semibold\">\n <ng-container *ngFor=\"let year of allSelectedRangeSliderValues; let i = index\">\n <span class=\"cursor-pointer select-none px-2 py-1 rounded-md transition\" [ngClass]=\"{\n 'bg-black text-white shadow': year === selectedRangeSliderValue,\n 'text-gray-300 hover:text-white': year !== selectedRangeSliderValue\n }\" (click)=\"setYearByIndex(i)\">\n {{ year }}\n </span>\n </ng-container>\n </div>\n\n <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"restart()\">\n <i class=\"fa fa-refresh\"></i>\n </button>\n\n </div>\n\n <input type=\"range\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer\n bg-gradient-to-r from-green-400 via-yellow-400 to-red-500\" [min]=\"0\"\n [max]=\"allSelectedRangeSliderValues.length - 1\" [value]=\"choroplethMapCurrentIndex\"\n (input)=\"onYearChange($event)\" />\n </div>\n\n\n\n\n </div>\n\n </div>\n\n\n\n\n\n</div>", styles: [".loader{width:64px;height:64px;border:6px solid rgba(255,255,255,.2);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
4243
4239
|
}], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { googlMap: [{
|
|
4244
4240
|
type: ViewChild,
|
|
4245
4241
|
args: ["googlMap"]
|
|
@@ -5427,6 +5423,7 @@ class GammaAdvanceChartComponent {
|
|
|
5427
5423
|
return;
|
|
5428
5424
|
}
|
|
5429
5425
|
else {
|
|
5426
|
+
this.isLoader = true;
|
|
5430
5427
|
this.page_config = value;
|
|
5431
5428
|
this.page_parms = value.titleParams;
|
|
5432
5429
|
this.chartOrderBy = (value.kpiConfig.descendingOrder) ? value.kpiConfig.descendingOrder : false;
|
|
@@ -6014,6 +6011,12 @@ class DashChartComponent {
|
|
|
6014
6011
|
if (value.selectedWidgetConfig) {
|
|
6015
6012
|
this.userOptionContainer = value.selectedWidgetConfig?.permissions ? value.selectedWidgetConfig.permissions : [];
|
|
6016
6013
|
this.chartConfig = value.selectedWidgetConfig.dataConfig;
|
|
6014
|
+
value.selectedWidgetConfig['dataConfig']['isDataAggregation'] = (value.selectedWidgetConfig['dataConfig']['isDataAggregation']) ? value.selectedWidgetConfig['dataConfig']['isDataAggregation'] : false;
|
|
6015
|
+
if (value.selectedWidgetConfig['dataConfig']['isDataAggregation']) {
|
|
6016
|
+
this.dataAggregationContainer = value.selectedWidgetConfig['dataConfig']['dataAggregationConfig']['dataAggregateColumes'];
|
|
6017
|
+
this.dataAggregateGroupByColume = value.selectedWidgetConfig['dataConfig']['dataAggregationConfig']['aggregateFields'];
|
|
6018
|
+
this.saveAggregationColume();
|
|
6019
|
+
}
|
|
6017
6020
|
this.mainChartCourceObject['kpiConfig'] = value.selectedWidgetConfig;
|
|
6018
6021
|
this.chartType = value.selectedWidgetConfig.dataConfig['chartType'];
|
|
6019
6022
|
if (this.chartType == 'doughnut' || this.chartType == 'pie' || this.chartType == 'stackedBar' || this.chartType == 'multiLine' || this.chartType == 'multiBar') {
|
|
@@ -6027,8 +6030,6 @@ class DashChartComponent {
|
|
|
6027
6030
|
value.selectedWidgetConfig['keyToPass'] = (value.selectedWidgetConfig['keyToPass']) ? value.selectedWidgetConfig['keyToPass'] : [];
|
|
6028
6031
|
value.selectedWidgetConfig['dataConfig']['chartGroupBy'] = (value.selectedWidgetConfig['dataConfig']['chartGroupBy']) ? value.selectedWidgetConfig['dataConfig']['chartGroupBy'] : "";
|
|
6029
6032
|
value.selectedWidgetConfig['dataConfig']['chartSortBy'] = (value.selectedWidgetConfig['dataConfig']['chartSortBy']) ? value.selectedWidgetConfig['dataConfig']['chartSortBy'] : "";
|
|
6030
|
-
value.selectedWidgetConfig['dataConfig']['dataGroupBy'] = (value.selectedWidgetConfig['dataConfig']['dataGroupBy']) ? value.selectedWidgetConfig['dataConfig']['dataGroupBy'] : "";
|
|
6031
|
-
value.selectedWidgetConfig['dataConfig']['functionType'] = (value.selectedWidgetConfig['dataConfig']['functionType']) ? value.selectedWidgetConfig['dataConfig']['functionType'] : "";
|
|
6032
6033
|
if (value.selectedWidgetConfig['dataConfig']['chartGroupBy']) {
|
|
6033
6034
|
const { dataSourceForChart, listOfGroupByData } = this.geChartWithGroupByForMultiSeris(this.previewData, this.chartConfig.argumentField, this.chartConfig.chart_config[0].valueField, value.selectedWidgetConfig['dataConfig']['chartGroupBy']);
|
|
6034
6035
|
this.dataSourseForChart = dataSourceForChart;
|