gamma-app-controller 1.0.7 → 1.0.8

package/fesm2020/gamma-app-controller.mjs

@@ -7414,6 +7414,314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['chartDataSource']
             }] } });
 
+class GammaGeoChartComponent {
+    constructor(commonService) {
+        this.commonService = commonService;
+        this.markers = [];
+        this.bounds = new google.maps.LatLngBounds();
+        this.getTableConfigOutPut = new EventEmitter();
+        this.oRowClick = new EventEmitter();
+        this.onrightClickContextSelection = new EventEmitter();
+        this.rightClickEnable = true;
+    }
+    set chartDataSource(value) {
+        if (value === undefined || value.length === 0) {
+            return;
+        }
+        else {
+            this.isLoader = true;
+            this.page_config = value;
+            this.page_parms = value.titleParams;
+            if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
+                if (value.kpiConfig.formate == "monthly") {
+                    this.mapTYpe = value.kpiConfig.dataConfig.mapType;
+                    if (this.mapTYpe == "geoMap") {
+                        this.region = value.kpiConfig.dataConfig.region;
+                        this.regionCode = value.kpiConfig.dataConfig.regionCode;
+                        this.tootTipColumn = value.kpiConfig.dataConfig.chart_config;
+                        let data = value.kpiConfig.dataSource;
+                        this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
+                        this.chartType = value.kpiConfig.dataConfig.chartType;
+                        this.bacgroundColor = value.kpiConfig.dataConfig.backgroundColor;
+                        this.mapColors = value.kpiConfig.dataConfig.colors;
+                        const formattedData = [
+                            [
+                                value.kpiConfig.dataConfig["argumentField"],
+                                value.kpiConfig.dataConfig["chartValueField"],
+                                { type: "string", role: "tooltip", p: { html: true } },
+                            ],
+                        ].concat(data.map((item) => {
+                            const tooltip = this.getTooltip(item);
+                            return [
+                                item[value.kpiConfig.dataConfig["argumentField"]],
+                                item[value.kpiConfig.dataConfig["chartValueField"]],
+                                tooltip,
+                            ];
+                        }));
+                        this.charData = formattedData;
+                        setTimeout(() => {
+                            this.isLoader = false;
+                        }, 200);
+                    }
+                    else {
+                        this.locations = value.kpiConfig.dataSource;
+                        this.tootTipColumn = value.kpiConfig.dataConfig.chart_config;
+                        this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
+                        this.zoomValuForAll = parseFloat(this.page_config.kpiConfig.dataConfig.zoom);
+                        this.mapOptionForHeatMap = {
+                            zoom: this.zoomValuForAll
+                        };
+                    }
+                }
+            }
+        }
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        if (this.mapTYpe == "geoMap") {
+            this.loadGoogleCharts();
+        }
+        else if (this.mapTYpe == "heatMap") {
+            if (this.page_config.kpiConfig.dataConfig.heatMapCategory == "heatMapOnly") {
+                this.isLoader = false;
+                this.loadGoogleHeatOnlyMaps(this.locations);
+            }
+            else if (this.page_config.kpiConfig.dataConfig.heatMapCategory == "heatMapMarker") {
+                this.isLoader = false;
+                this.initializeMap();
+                this.addMarkers();
+            }
+            else {
+                this.isLoader = false;
+                this.initializeHeatWithMarkerMap(this.locations);
+            }
+        }
+    }
+    loadGoogleCharts() {
+        google.charts.load("current", {
+            packages: [this.chartType],
+        });
+        google.charts.setOnLoadCallback(this.drawChart.bind(this));
+    }
+    drawChart() {
+        const data = google.visualization.arrayToDataTable(this.charData);
+        const options = this.getOptionConfig();
+        const chart = new google.visualization.GeoChart(this.googlMap.nativeElement);
+        this.googlMap.nativeElement.style.height = this.chartHeight;
+        chart.draw(data, options);
+    }
+    getTooltip(data) {
+        let toolTipData = "";
+        this.tootTipColumn.forEach((element) => {
+            if (typeof data[element.dataField] === 'number') {
+                toolTipData +=
+                    "<div class='inline'><b>" +
+                        element.caption +
+                        ":</b></div> " +
+                        this.commonService.roundOffTillTwo(data[element.dataField], 2) +
+                        "<br />";
+            }
+            else {
+                toolTipData +=
+                    "<div class='inline'><b>" +
+                        element.caption +
+                        ":</b></div> " +
+                        data[element.dataField] +
+                        "<br />";
+            }
+        });
+        return toolTipData;
+    }
+    getOptionConfig() {
+        if (this.region == 'city') {
+            const options = {
+                region: this.regionCode,
+                displayMode: 'markers',
+                backgroundColor: this.bacgroundColor,
+                tooltip: { isHtml: true },
+                colorAxis: { colors: this.mapColors }
+            };
+            return options;
+        }
+        else {
+            const options = {
+                backgroundColor: this.bacgroundColor,
+                tooltip: { isHtml: true },
+                colorAxis: { colors: this.mapColors }
+            };
+            return options;
+        }
+    }
+    initializeMap() {
+        const mapOptions = this.mapOptionForHeatMap;
+        this.map = new google.maps.Map(this.googlMap.nativeElement, mapOptions);
+        this.googlMap.nativeElement.style.height = this.chartHeight;
+    }
+    addMarkers() {
+        this.locations.forEach((location) => {
+            const marker = new google.maps.Marker({
+                position: {
+                    lat: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLatitude]),
+                    lng: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLongitude]),
+                },
+                icon: this.page_config.kpiConfig.dataConfig.icon ? {
+                    url: this.page_config.kpiConfig.dataConfig.icon,
+                    scaledSize: {
+                        width: 32,
+                        height: 32,
+                    },
+                } : '',
+                map: this.map,
+                title: `${location.city}: $${location.total_sales_amount}`,
+            });
+            this.bounds.extend(marker.getPosition());
+            this.markers.push(marker);
+            let stringWithoutQuotes = this.getInfoWindoData(location);
+            const infoWIndowData = this.getInfoWindoData(location);
+            const infoWindow = new google.maps.InfoWindow({
+                content: `<div style="height: 100%; width: 100%; color: black; font-size: 20px;">
+        ${infoWIndowData}
+      </div>`,
+            });
+            marker.addListener("click", () => {
+                if (this.currentInfoWindow) {
+                    this.currentInfoWindow.close();
+                }
+                infoWindow.open(this.map, marker);
+                this.currentInfoWindow = infoWindow;
+            });
+        });
+        this.map.fitBounds(this.bounds);
+    }
+    getInfoWindoData(data) {
+        let toolTipData = ``;
+        this.tootTipColumn.forEach((element) => {
+            if (typeof data[element.dataField] === "number") {
+                toolTipData +=
+                    `<div class='inline'><b>` +
+                        element.caption +
+                        `:</b></div> ` +
+                        this.commonService.roundOffTillTwo(data[element.dataField], 2) +
+                        `<br />`;
+            }
+            else {
+                toolTipData +=
+                    `<div class='inline'><b>` +
+                        element.caption +
+                        `:</b></div> ` +
+                        data[element.dataField] +
+                        `<br />`;
+            }
+        });
+        return toolTipData;
+    }
+    loadGoogleHeatOnlyMaps(data) {
+        this.heatmapData = [];
+        data.forEach((element) => {
+            let latitude = parseFloat(element[this.page_config.kpiConfig.dataConfig.markerLatitude]);
+            let logtitude = parseFloat(element[this.page_config.kpiConfig.dataConfig.markerLongitude]);
+            this.heatmapData.push({
+                location: new google.maps.LatLng(latitude, logtitude)
+            });
+            this.bounds.extend(new google.maps.LatLng(latitude, logtitude));
+        });
+        const mapOptions = {
+            zoom: this.zoomValuForAll
+        };
+        this.map = new google.maps.Map(this.googlMap.nativeElement, mapOptions);
+        this.googlMap.nativeElement.style.height = this.chartHeight;
+        this.map.fitBounds(this.bounds);
+        this.heatmap = new google.maps.visualization.HeatmapLayer({
+            data: this.heatmapData,
+            map: this.map,
+        });
+    }
+    initializeHeatWithMarkerMap(data) {
+        this.map = new google.maps.Map(this.googlMap.nativeElement, {
+            zoom: parseFloat(this.page_config.kpiConfig.dataConfig.zoom),
+        });
+        this.googlMap.nativeElement.style.height = this.chartHeight;
+        this.heatmapData = [];
+        data.forEach(element => {
+            let latitude = parseFloat(element[this.page_config.kpiConfig.dataConfig.markerLatitude]);
+            let logtitude = parseFloat(element[this.page_config.kpiConfig.dataConfig.markerLongitude]);
+            this.heatmapData.push({
+                location: new google.maps.LatLng(latitude, logtitude)
+            });
+            this.bounds.extend(new google.maps.LatLng(latitude, logtitude));
+        });
+        this.heatmap = new google.maps.visualization.HeatmapLayer({
+            data: this.heatmapData,
+            map: this.map,
+        });
+        this.locations.forEach((location) => {
+            const marker = new google.maps.Marker({
+                position: {
+                    lat: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLatitude]),
+                    lng: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLongitude]),
+                },
+                icon: this.page_config.kpiConfig.dataConfig.icon ? {
+                    url: this.page_config.kpiConfig.dataConfig.icon,
+                    scaledSize: {
+                        width: 32,
+                        height: 32,
+                    },
+                } : '',
+                map: this.map,
+                title: `${location.city}: $${location.total_sales_amount}`,
+            });
+            this.bounds.extend(marker.getPosition());
+            this.markers.push(marker);
+            const infoWIndowData = this.getInfoWindoData(location);
+            const infoWindow = new google.maps.InfoWindow({
+                content: `<div style="height: 100%; width: 100%; color: black; font-size: 20px;">
+            ${infoWIndowData}
+          </div>`,
+            });
+            marker.addListener("click", () => {
+                if (this.currentInfoWindow) {
+                    this.currentInfoWindow.close();
+                }
+                infoWindow.open(this.map, marker);
+                this.currentInfoWindow = infoWindow;
+            });
+        });
+        this.map.fitBounds(this.bounds);
+        this.map.addListener('zoom_changed', () => this.handleZoomChange());
+    }
+    handleZoomChange() {
+        const zoomLevel = this.map.getZoom();
+        if (zoomLevel < 5) {
+            this.heatmap.setMap(this.map);
+            this.markers.forEach((marker) => marker.setMap(null));
+        }
+        else {
+            this.heatmap.setMap(null);
+            this.markers.forEach((marker) => marker.setMap(this.map));
+        }
+    }
+}
+GammaGeoChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+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: "\n<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    <div class=\"mx-2 pb-2\">\n\n      <ng-container>\n        <div id=\"regions_div\" #googlMap style=\"width: 100%\" ></div>    \n      </ng-container>\n      \n       \n\n    </div>\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-gamma-geo-chart", template: "\n<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    <div class=\"mx-2 pb-2\">\n\n      <ng-container>\n        <div id=\"regions_div\" #googlMap style=\"width: 100%\" ></div>    \n      </ng-container>\n      \n       \n\n    </div>\n\n\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { googlMap: [{
+                type: ViewChild,
+                args: ["googlMap"]
+            }], getTableConfigOutPut: [{
+                type: Output
+            }], oRowClick: [{
+                type: Output
+            }], onrightClickContextSelection: [{
+                type: Output
+            }], rightClickEnable: [{
+                type: Input
+            }], chartDataSource: [{
+                type: Input,
+                args: ["chartDataSource"]
+            }] } });
+
 class kpicommonService {
     constructor(commonService) {
         this.commonService = commonService;
@@ -8941,7 +9249,8 @@ class PageConfigComponent {
             GammaTableWithPercentageComponent,
             GammSingleNumberCardComponent,
             GammaAdvanceOperatorTableComponent,
-            AdvanceWidgetHeaderFilterComponent
+            AdvanceWidgetHeaderFilterComponent,
+            GammaGeoChartComponent
         };
         this.dataSourceMataData = [];
         this.queryType = "mongo";
@@ -10485,7 +10794,8 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         GoogleGeoMapComponent,
         GammaTableClumnBarChartComponent,
         ApplicationMenusComponent,
-        ApplicationCreateMenuComponent], imports: [CommonModule, i2.RouterModule, DevExtremeModule,
+        ApplicationCreateMenuComponent,
+        GammaGeoChartComponent], imports: [CommonModule, i2.RouterModule, DevExtremeModule,
         DxButtonModule,
         DxCheckBoxModule,
         DxNumberBoxModule,
@@ -10542,7 +10852,8 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         GeoMapComponent,
         SafeHtmlPipe,
         GoogleGeoMapComponent,
-        GammaTableClumnBarChartComponent] });
+        GammaTableClumnBarChartComponent,
+        GammaGeoChartComponent] });
 PackageApplicationControllerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PackageApplicationControllerModule, providers: [
         ApplicationContentService,
         ApplicationDatssetsCall
@@ -10624,7 +10935,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         GoogleGeoMapComponent,
                         GammaTableClumnBarChartComponent,
                         ApplicationMenusComponent,
-                        ApplicationCreateMenuComponent
+                        ApplicationCreateMenuComponent,
+                        GammaGeoChartComponent
                     ],
                     imports: [
                         CommonModule,
@@ -10689,7 +11001,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         GeoMapComponent,
                         SafeHtmlPipe,
                         GoogleGeoMapComponent,
-                        GammaTableClumnBarChartComponent
+                        GammaTableClumnBarChartComponent,
+                        GammaGeoChartComponent
                     ],
                     providers: [
                         ApplicationContentService,
@@ -10739,5 +11052,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-export { APP_ENVIRONMENT, AdvanceWidgetHeaderFilterComponent, AppAdvanceHeaderComponent, AppHttpService, AppTitleComponent, ApplicationContentService, ApplicationDatssetsCall, ApplicationFilterComponent, ApplicationViewsComponent, BreadCrumbsComponent, CdrConfigComponent, CommonHeaderComponent, CommonService, CreateCompViewComponent, CreateDatasetComponent, CreateDatasetJsonComponent, CreateDatasetSqlComponent, DashChartComponent, DashTableComponent, GamamWidgetComponent, GammSingleNumberCardComponent, GammaAdvanceChartComponent, GammaAdvanceFilterComponent, GammaAdvanceOperatorTableComponent, GammaAppControllerComponent, GammaAppControllerModule, GammaAppControllerService, GammaTableClumnBarChartComponent, GammaTableWithPercentageComponent, GammaTodayPreviousComponent, GeoMapComponent, GoogleGeoMapComponent, IconsModule, LoaderComponent, LoadingComponent, LoadingModule, PackageApplicationControllerModule, SafeHtmlPipe, SqlPipe, TableWithBarComponent, contentSafeHtml, kpicommonService$2 as kpicommonService };
+export { APP_ENVIRONMENT, AdvanceWidgetHeaderFilterComponent, AppAdvanceHeaderComponent, AppHttpService, AppTitleComponent, ApplicationContentService, ApplicationDatssetsCall, ApplicationFilterComponent, ApplicationViewsComponent, BreadCrumbsComponent, CdrConfigComponent, CommonHeaderComponent, CommonService, CreateCompViewComponent, CreateDatasetComponent, CreateDatasetJsonComponent, CreateDatasetSqlComponent, DashChartComponent, DashTableComponent, GamamWidgetComponent, GammSingleNumberCardComponent, GammaAdvanceChartComponent, GammaAdvanceFilterComponent, GammaAdvanceOperatorTableComponent, GammaAppControllerComponent, GammaAppControllerModule, GammaAppControllerService, GammaGeoChartComponent, GammaTableClumnBarChartComponent, GammaTableWithPercentageComponent, GammaTodayPreviousComponent, GeoMapComponent, GoogleGeoMapComponent, IconsModule, LoaderComponent, LoadingComponent, LoadingModule, PackageApplicationControllerModule, SafeHtmlPipe, SqlPipe, TableWithBarComponent, contentSafeHtml, kpicommonService$2 as kpicommonService };
 //# sourceMappingURL=gamma-app-controller.mjs.map