From f654b233f6b7b4fdda72c8dbe1607ae65bbcf048 Mon Sep 17 00:00:00 2001 From: Gaurav Kumar Date: Mon, 27 Oct 2025 16:38:38 +0530 Subject: [PATCH] runner --- .../compact-filter.component.html | 18 +- .../common-filter/compact-filter.component.ts | 23 -- .../bar-runner/bar-runner.component.ts | 98 +++++++-- .../bubble-runner/bubble-runner.component.ts | 90 +++++++- .../dashrunnerline/dashrunner.service.ts | 22 +- .../dashrunnerline.component.ts | 6 +- .../doughnut-runner.component.ts | 91 +++++++- .../grid-runner/grid-runner.component.html | 23 +- .../grid-runner/grid-runner.component.ts | 205 ++++++++++++++---- .../line-runner/line-runner.component.ts | 88 +++++++- .../pie-runner/pie-runner.component.ts | 90 +++++++- .../polar-runner/polar-runner.component.ts | 90 +++++++- .../radar-runner/radar-runner.component.ts | 90 +++++++- .../scatter-runner.component.ts | 90 +++++++- .../todo-runner/todo-runner.component.ts | 83 ++++++- 15 files changed, 923 insertions(+), 184 deletions(-) diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html index 58c36df..26c2383 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html @@ -78,17 +78,13 @@ -
-
-
- - -
-
+
+
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts index cb32e8d..7424e96 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts @@ -201,29 +201,6 @@ export class CompactFilterComponent implements OnInit, OnChanges { this.onFilterValueChange(dateRange); } - // Handle multiselect checkbox changes - onMultiselectChange(option: string, event: any): void { - const isChecked = event.target.checked; - - // Ensure filterValue is an array - if (!Array.isArray(this.filterValue)) { - this.filterValue = []; - } - - if (isChecked) { - // Add option to selected values if not already present - if (!this.filterValue.includes(option)) { - this.filterValue = [...this.filterValue, option]; - } - } else { - // Remove option from selected values - this.filterValue = this.filterValue.filter((val: string) => val !== option); - } - - // Emit the change - this.onFilterValueChange(this.filterValue); - } - // Load available keys from API loadAvailableKeys(): void { if (this.apiUrl) { diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts index 2781144..19ae8fb 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts @@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service'; import { ActivatedRoute, Router } from '@angular/router'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-bar-runner', @@ -24,8 +28,18 @@ export class BarRunnerComponent implements OnInit { JsonData; barData; - constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router,) { } + + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; + + constructor( + private Dashtestservive:DashrunnerService, + private route: ActivatedRoute, + private dashboardService: Dashboard3Service, + private router : Router, + // Add FilterService to constructor + private filterService: FilterService + ) { } barChartLabels: any[] = []; barChartType: string = 'bar'; @@ -47,6 +61,13 @@ export class BarRunnerComponent implements OnInit { this.editId = this.route.snapshot.params.id; console.log(this.editId); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the chart data + this.fetchChartData(); + }) + ); this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); @@ -75,21 +96,60 @@ export class BarRunnerComponent implements OnInit { this.showlabel = ChartObject[i].showlabel; this.barChartLegend = ChartObject[i].chartlegend; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Bar Chart",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.JsonData = Ldata; - this.barChartData = this.JsonData.barChartData; - this.barChartLabels = this.JsonData.barChartLabels; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchChartData(); break; // No need to continue the loop once the correct placeholder is found } } }); } + // Fetch chart data with filter support + fetchChartData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; + + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('BarRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bar Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.JsonData = Ldata; + this.barChartData = this.JsonData.barChartData; + this.barChartLabels = this.JsonData.barChartLabels; + },(error) => { + console.log(error); + }); + } + } + generatePDFFile(){ this.buttonClicked.emit(); const content = this.contentContainerRef.nativeElement; @@ -97,5 +157,17 @@ export class BarRunnerComponent implements OnInit { this.Dashtestservive.generatePDF(content, filename); } - -} + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('BarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('BarRunnerComponent destroyed and cleaned up'); + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts index 5bb9632..1ff9551 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts @@ -5,6 +5,10 @@ import { ChartConfiguration, ChartDataset, ChartOptions } from 'chart.js'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; import { DashrunnerService } from '../dashrunner.service'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-bubble-runner', @@ -26,8 +30,13 @@ export class BubbleRunnerComponent implements OnInit { lineChartNoLabels: [] = []; ChartLegend = false; + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; + constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router,) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } public bubbleChartOptions: ChartConfiguration['options'] = { // scales: { @@ -87,6 +96,13 @@ export class BubbleRunnerComponent implements OnInit { this.editId = this.route.snapshot.params.id; console.log(this.editId); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the chart data + this.fetchChartData(); + }) + ); this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); @@ -113,21 +129,60 @@ export class BubbleRunnerComponent implements OnInit { this.showlabel = ChartObject[i].showlabel; this.ChartLegend = ChartObject[i].chartlegend; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Bubble Chart",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.JsonData = Ldata; - this.bubbleChartData = this.JsonData.bubbleChartData; - // this.radarChartLabels = this.JsonData.radarChartLabels; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchChartData(); break; // No need to continue the loop once the correct placeholder is found } } }); } - + + // Fetch chart data with filter support + fetchChartData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; + + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('BubbleRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bubble Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.JsonData = Ldata; + this.bubbleChartData = this.JsonData.bubbleChartData; + // this.radarChartLabels = this.JsonData.radarChartLabels; + },(error) => { + console.log(error); + }); + } + } + generatePDFFile(){ this.buttonClicked.emit(); const content = this.contentContainerRef.nativeElement; @@ -135,6 +190,19 @@ export class BubbleRunnerComponent implements OnInit { this.Dashtestservive.generatePDF(content, filename); } + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('BubbleRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('BubbleRunnerComponent destroyed and cleaned up'); + } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts index 5c814f6..cf8bb21 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts @@ -160,7 +160,27 @@ getlinechart(): any[] { return this._http.get(url); } - + // New method to support filters + public getChartDataWithFilters(tableName: string, jobType: string, xAxis:any, yAxes:any, sureId: number | undefined, parameterField: string, parameterValue: string, filterParams: string): Observable { + let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`; + + // Add sureId if provided + if (sureId) { + url += `&sureId=${sureId}`; + } + + // Add parameter field and value if provided + if (parameterField && parameterValue) { + url += `¶meter=${encodeURIComponent(parameterField)}¶meterValue=${encodeURIComponent(parameterValue)}`; + } + + // Add filter parameters if provided + if (filterParams) { + url += `&filters=${encodeURIComponent(filterParams)}`; + } + + return this._http.get(url); + } ////////////////////////////////////////////// diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts index 61f9a3c..39a7329 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts @@ -17,6 +17,8 @@ import { BubbleRunnerComponent } from './bubble-runner/bubble-runner.component'; import { ScatterRunnerComponent } from './scatter-runner/scatter-runner.component'; import { PolarRunnerComponent } from './polar-runner/polar-runner.component'; import { RadarRunnerComponent } from './radar-runner/radar-runner.component'; +// Add FilterService import +import { FilterService } from '../../dashboardnew/common-filter/filter.service'; @Component({ selector: 'app-dashrunnerline', @@ -47,7 +49,9 @@ export class DashrunnerlineComponent implements OnInit { ]; constructor(private Dashtestservive:DashrunnerService, private dashboardService: Dashboard3Service,private route: ActivatedRoute, - private router : Router,) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } ngOnInit(): void { diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts index f92400c..c47dcb6 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts @@ -5,6 +5,10 @@ import { ChartDataset, ChartType, } from 'chart.js'; import { ActivatedRoute, Router } from '@angular/router'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-doughnut-runner', @@ -34,9 +38,14 @@ export class DoughnutRunnerComponent implements OnInit { } doughnutChartType: ChartType = 'doughnut'; + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; + constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router,) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } ngOnInit(): void { this.doughnutChartData = this.doughnutData.chartData; this.doughnutChartLabels = this.doughnutData.chartLabels; @@ -44,6 +53,14 @@ export class DoughnutRunnerComponent implements OnInit { this.editId = this.route.snapshot.params.id; console.log(this.editId); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the chart data + this.fetchChartData(); + }) + ); + this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); this.workflowLine = data.dashbord1_Line[0].model; @@ -71,21 +88,60 @@ export class DoughnutRunnerComponent implements OnInit { this.showlabel = ChartObject[i].showlabel; this.doughnutChartLegend = ChartObject[i].chartlegend; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Doughnut Chart",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.JsonData = Ldata; - this.doughnutChartData = this.JsonData.chartData; - this.doughnutChartLabels = this.JsonData.chartLabels; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchChartData(); break; // No need to continue the loop once the correct placeholder is found } } }); } - + + // Fetch chart data with filter support + fetchChartData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; + + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('DoughnutRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "Doughnut Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.JsonData = Ldata; + this.doughnutChartData = this.JsonData.chartData; + this.doughnutChartLabels = this.JsonData.chartLabels; + },(error) => { + console.log(error); + }); + } + } + generatePDFFile(){ // this.buttonClicked.emit(); const content = this.contentContainerRef.nativeElement; @@ -93,6 +149,19 @@ export class DoughnutRunnerComponent implements OnInit { this.Dashtestservive.generatePDF(content, filename); } + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('DoughnutRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('DoughnutRunnerComponent destroyed and cleaned up'); + } diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html index 4761acc..9b55a47 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html @@ -39,16 +39,35 @@
-->
- + +
+

Debug Information

+

TableName: {{ TableName }}

+

XAxis: {{ XAxis }}

+

YAxis: {{ YAxis }}

+

Rows: {{ rows?.length }} items

+

Headers: {{ getHeaders() | json }}

+
Error: {{ error }}
+
+ +
+ {{ error }} +
+ +
- +
{{co}}
{{item[key]}}
+ + +

No data available

+
\ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts index 9e1f6ac..c71474d 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts @@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; import { ActivatedRoute, Router } from '@angular/router'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-grid-runner', @@ -26,86 +30,191 @@ export class GridRunnerComponent implements OnInit { public DashtestboardArray: DashboardContentModel[] = []; workflowLine; TableName; + ConnectionId: number; // Add ConnectionId property + + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; constructor( - private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router + private Dashtestservive:DashrunnerService, + private route: ActivatedRoute, + private dashboardService: Dashboard3Service, + private router : Router, + // Add FilterService to constructor + private filterService: FilterService ) { } ngOnInit(): void { this.editId = this.route.snapshot.params.id; - console.log(this.editId); + console.log('GridRunner: Component initialized with editId:', this.editId); // this.getbyId(); - this.dashboardService.getById(this.editId).subscribe((data)=>{ - console.log(data); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + console.log('GridRunner: Filter state changed:', filters); + // When filters change, refresh the grid data + this.fetchGridData(); + }) + ); + + this.dashboardService.getById(this.editId).subscribe((data) => { + console.log('GridRunner: Received dashboard data:', data); this.workflowLine = data.dashbord1_Line[0].model; - const dash = JSON.parse(this.workflowLine) ; + const dash = JSON.parse(this.workflowLine); // this.DashtestboardArray = dash.dashboard; // console.log(this.DashtestboardArray); const ChartObject = dash.dashboard.filter(obj => obj.name === "Grid View"); - console.log(ChartObject); + console.log('GridRunner: ChartObject for Grid View:', ChartObject); for (let i = 0; i < ChartObject.length; i++) { const ids = this.Dashtestservive.getgridview(); + console.log('GridRunner: Current gridview ids:', ids); + console.log('GridRunner: Checking chartid:', ChartObject[i].chartid); // console.log(ids); if (ids.includes(ChartObject[i].chartid)) { // If the chartid is already in the ids array, continue to the next iteration + console.log('GridRunner: Skipping chartid as it already exists:', ChartObject[i].chartid); continue; } + console.log('GridRunner: Adding new chartid:', ChartObject[i].chartid); this.Dashtestservive.setgridview(ChartObject[i].chartid); - const id = ids[i]; - console.log(id); - - if (ChartObject[i].chartid === id) { - this.TableName = ChartObject[i].table; - this.XAxis = ChartObject[i].xAxis; - this.YAxis = ChartObject[i].yAxis; - console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Grid View",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.rows = Ldata; - this.rowdata = this.rows - - },(error) => { - console.log(error); - }); - break; // No need to continue the loop once the correct placeholder is found - } + + this.TableName = ChartObject[i].table; + this.XAxis = ChartObject[i].xAxis; + this.YAxis = ChartObject[i].yAxis; + // Add connection ID if available + this.ConnectionId = ChartObject[i].connection; + console.log('GridRunner: TableName:', this.TableName); + console.log('GridRunner: XAxis:', this.XAxis); + console.log('GridRunner: YAxis:', this.YAxis); + console.log('GridRunner: ConnectionId:', this.ConnectionId); + // Fetch data with filters + this.fetchGridData(); + break; // No need to continue the loop once the correct placeholder is found } + }, (error) => { + console.log('GridRunner: Error fetching dashboard data:', error); }); } + // Fetch grid data with filter support + fetchGridData(): void { + console.log('fetching grid data ...') + if (this.TableName) { + console.log('GridRunner: Fetching data for TableName:', this.TableName, 'XAxis:', this.XAxis, 'YAxis:', this.YAxis); + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; - -//dynamic table + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; -getTableData(id){ -} -getHeaders() { -let headers: string[] = []; -if(this.rows) { - this.rows.forEach((value) => { - Object.keys(value).forEach((key) => { - if(!headers.find((header) => header == key)){ - headers.push(key) + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); } - }) + console.log('GridRunner: Final filter object to send to API:', filterObj); - }) -} -return headers; -} + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "grid", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => { + console.log('GridRunner: Received data from API:', Ldata); -generatePDFFile(){ - this.buttonClicked.emit(); - const content = this.contentContainerRef.nativeElement; - const filename = 'gridview.pdf'; // You can provide any desired filename here + // Handle the actual data structure returned by the API + if (Ldata && Ldata.chartData) { + this.rows = Ldata.chartData; + this.rowdata = this.rows; + } else if (Ldata && Ldata.data) { + // Handle the original expected format as fallback + this.rows = Ldata.data; + this.rowdata = this.rows; + } else if (Array.isArray(Ldata)) { + // Handle case where data is directly an array + this.rows = Ldata; + this.rowdata = this.rows; + } else { + console.warn('GridRunner: Received data does not have expected structure', Ldata); + this.rows = []; + this.rowdata = []; + } - this.Dashtestservive.generatePDF(content, filename); -} -} + // Log the structure of the received data + if (this.rows) { + console.log('GridRunner: Rows length:', this.rows.length); + if (this.rows.length > 0) { + console.log('GridRunner: First row structure:', this.rows[0]); + } + } else { + console.log('GridRunner: No data received'); + } + }, (error) => { + console.log('GridRunner: Error fetching data:', error); + this.error = error; + }); + } else { + console.log('GridRunner: Missing TableName or XAxis'); + } + } + + //dynamic table + + + getTableData(id) { + } + getHeaders() { + let headers: string[] = []; + if (this.rows) { + console.log('GridRunner: Getting headers from rows:', this.rows); + this.rows.forEach((value) => { + Object.keys(value).forEach((key) => { + if (!headers.find((header) => header == key)) { + headers.push(key) + } + }) + }) + } + console.log('GridRunner: Computed headers:', headers); + return headers; + } + + generatePDFFile() { + this.buttonClicked.emit(); + const content = this.contentContainerRef.nativeElement; + const filename = 'gridview.pdf'; // You can provide any desired filename here + + this.Dashtestservive.generatePDF(content, filename); + } + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('GridRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('GridRunnerComponent destroyed and cleaned up'); + } +} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts index 93d621b..bb0da3e 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts @@ -7,6 +7,10 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; import { jsPDF } from 'jspdf'; import domtoimage from 'dom-to-image'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-line-runner', templateUrl: './line-runner.component.html', @@ -54,8 +58,13 @@ export class LineRunnerComponent implements OnInit { lineChartLegend = false; lineChartPlugins = []; lineChartType = 'line'; + + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router,) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } ngOnInit(): void { @@ -65,6 +74,13 @@ export class LineRunnerComponent implements OnInit { this.editId = this.route.snapshot.params.id; console.log(this.editId); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the chart data + this.fetchChartData(); + }) + ); this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); @@ -93,15 +109,8 @@ export class LineRunnerComponent implements OnInit { this.showlabel = ChartObject[i].showlabel; this.lineChartLegend = ChartObject[i].chartlegend; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Line Chart",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.JsonData = Ldata; - this.lineChartData = this.JsonData.chartData; - this.lineChartLabels = this.JsonData.chartLabels; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchChartData(); break; // No need to continue the loop once the correct placeholder is found } } @@ -128,6 +137,52 @@ export class LineRunnerComponent implements OnInit { // } } + // Fetch chart data with filter support + fetchChartData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; + + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('LineRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "Line Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.JsonData = Ldata; + this.lineChartData = this.JsonData.chartData; + this.lineChartLabels = this.JsonData.chartLabels; + },(error) => { + console.log(error); + }); + } + } + generatePDFFile(){ this.buttonClicked.emit(); const content = this.contentContainerRef.nativeElement; @@ -165,5 +220,18 @@ export class LineRunnerComponent implements OnInit { // console.error('Error generating PDF:', error); // } // } + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('LineRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('LineRunnerComponent destroyed and cleaned up'); + } } \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts index c1a64d1..a224b25 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts @@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service'; import { ActivatedRoute, Router } from '@angular/router'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ @@ -24,8 +28,13 @@ export class PieRunnerComponent implements OnInit { JsonData; lineChartNoLabels: any[] = []; + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; + constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router,) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } public pieChartLabels: string[] = ['SciFi', 'Drama', 'Comedy']; public pieChartData: number[] = [30, 50, 20]; @@ -39,6 +48,13 @@ export class PieRunnerComponent implements OnInit { this.editId = this.route.snapshot.params.id; console.log(this.editId); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the chart data + this.fetchChartData(); + }) + ); this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); @@ -67,21 +83,60 @@ export class PieRunnerComponent implements OnInit { this.showlabel = ChartObject[i].showlabel; this.ChartLegend = ChartObject[i].chartlegend; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Pie Chart",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.JsonData = Ldata; - this.pieChartData = this.JsonData.pieChartData; - this.pieChartLabels = this.JsonData.pieChartLabels; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchChartData(); break; // No need to continue the loop once the correct placeholder is found } } }); } - + + // Fetch chart data with filter support + fetchChartData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; + + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('PieRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "Pie Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.JsonData = Ldata; + this.pieChartData = this.JsonData.pieChartData; + this.pieChartLabels = this.JsonData.pieChartLabels; + },(error) => { + console.log(error); + }); + } + } + generatePDFFile(){ this.buttonClicked.emit(); const content = this.contentContainerRef.nativeElement; @@ -89,4 +144,17 @@ export class PieRunnerComponent implements OnInit { this.Dashtestservive.generatePDF(content, filename); } + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('PieRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('PieRunnerComponent destroyed and cleaned up'); + } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts index fdbe17a..b2d7dcb 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts @@ -4,6 +4,10 @@ import { ActivatedRoute, Router } from '@angular/router'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; // import { Label } from 'ng2-charts'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-polar-runner', @@ -24,8 +28,13 @@ export class PolarRunnerComponent implements OnInit { JsonData; lineChartNoLabels: any[] = []; + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; + constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router,) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } public polarAreaChartLabels: string[] = [ 'Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales' ]; public polarAreaChartData: any = [ @@ -41,6 +50,13 @@ export class PolarRunnerComponent implements OnInit { this.editId = this.route.snapshot.params.id; console.log(this.editId); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the chart data + this.fetchChartData(); + }) + ); this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); @@ -67,21 +83,60 @@ export class PolarRunnerComponent implements OnInit { this.showlabel = ChartObject[i].showlabel; this.ChartLegend = ChartObject[i].chartlegend; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"PolarArea Chart",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.JsonData = Ldata; - this.polarAreaChartData = this.JsonData.polarAreaChartData; - this.polarAreaChartLabels = this.JsonData.polarAreaChartLabels; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchChartData(); break; // No need to continue the loop once the correct placeholder is found } } }); } - + + // Fetch chart data with filter support + fetchChartData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; + + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('PolarRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "PolarArea Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.JsonData = Ldata; + this.polarAreaChartData = this.JsonData.polarAreaChartData; + this.polarAreaChartLabels = this.JsonData.polarAreaChartLabels; + },(error) => { + console.log(error); + }); + } + } + generatePDFFile(){ this.buttonClicked.emit(); const content = this.contentContainerRef.nativeElement; @@ -89,5 +144,18 @@ export class PolarRunnerComponent implements OnInit { this.Dashtestservive.generatePDF(content, filename); } + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('PolarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('PolarRunnerComponent destroyed and cleaned up'); + } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts index e1a901e..a0e6083 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts @@ -4,6 +4,10 @@ import { ActivatedRoute, Router } from '@angular/router'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; // import { Label } from 'ng2-charts'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-radar-runner', @@ -25,8 +29,13 @@ export class RadarRunnerComponent implements OnInit { lineChartNoLabels: any[] = []; ChartLegend = false; + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; + constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router,) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } public radarChartLabels: string[] = [ "Eating", @@ -50,6 +59,13 @@ export class RadarRunnerComponent implements OnInit { this.editId = this.route.snapshot.params.id; console.log(this.editId); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the chart data + this.fetchChartData(); + }) + ); this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); @@ -76,21 +92,60 @@ export class RadarRunnerComponent implements OnInit { this.showlabel = ChartObject[i].showlabel; this.ChartLegend = ChartObject[i].chartlegend; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Radar Chart",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.JsonData = Ldata; - this.radarChartData = this.JsonData.radarChartData; - this.radarChartLabels = this.JsonData.radarChartLabels; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchChartData(); break; // No need to continue the loop once the correct placeholder is found } } }); } - + + // Fetch chart data with filter support + fetchChartData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; + + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('RadarRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "Radar Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.JsonData = Ldata; + this.radarChartData = this.JsonData.radarChartData; + this.radarChartLabels = this.JsonData.radarChartLabels; + },(error) => { + console.log(error); + }); + } + } + generatePDFFile(){ this.buttonClicked.emit(); const content = this.contentContainerRef.nativeElement; @@ -98,5 +153,18 @@ export class RadarRunnerComponent implements OnInit { this.Dashtestservive.generatePDF(content, filename); } + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('RadarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('RadarRunnerComponent destroyed and cleaned up'); + } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts index 2f36596..a456469 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts @@ -5,6 +5,10 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; // import { Label } from 'ng2-charts'; import { ChartDataset } from 'chart.js'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-scatter-runner', @@ -26,8 +30,13 @@ export class ScatterRunnerComponent implements OnInit { lineChartNoLabels: any[] = []; ChartLegend = false; + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; + constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router,) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } public scatterChartLabels: string[] = [ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ]; @@ -69,6 +78,13 @@ export class ScatterRunnerComponent implements OnInit { this.editId = this.route.snapshot.params.id; console.log(this.editId); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the chart data + this.fetchChartData(); + }) + ); this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); @@ -95,21 +111,60 @@ export class ScatterRunnerComponent implements OnInit { this.showlabel = ChartObject[i].showlabel; this.ChartLegend = ChartObject[i].chartlegend; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Scatter Chart",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.JsonData = Ldata; - this.scatterChartData = this.JsonData.scatterChartData; - this.scatterChartLabels = this.JsonData.scatterChartLabels; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchChartData(); break; // No need to continue the loop once the correct placeholder is found } } }); } - + + // Fetch chart data with filter support + fetchChartData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Convert YAxis to string if it's an array + const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis; + + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + const filterDefinitions = this.filterService.getFilters(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('ScatterRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "Scatter Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.JsonData = Ldata; + this.scatterChartData = this.JsonData.scatterChartData; + this.scatterChartLabels = this.JsonData.scatterChartLabels; + },(error) => { + console.log(error); + }); + } + } + generatePDFFile(){ this.buttonClicked.emit(); const content = this.contentContainerRef.nativeElement; @@ -117,5 +172,18 @@ export class ScatterRunnerComponent implements OnInit { this.Dashtestservive.generatePDF(content, filename); } + + ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('ScatterRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('ScatterRunnerComponent destroyed and cleaned up'); + } } diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts index cb264cb..a1cdf88 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts @@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service'; import { DashboardContentModel } from 'src/app/models/builder/dashboard'; import { ActivatedRoute, Router } from '@angular/router'; import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; +// Add FilterService import +import { FilterService } from '../../../dashboardnew/common-filter/filter.service'; +// Add Subscription import +import { Subscription } from 'rxjs'; @Component({ selector: 'app-todo-runner', @@ -12,8 +16,13 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service'; export class TodoRunnerComponent implements OnInit { @ViewChild('contentContainer') contentContainerRef!: ElementRef; @Output() buttonClicked = new EventEmitter(); + + // Add subscriptions to unsubscribe on destroy + private subscriptions: Subscription[] = []; constructor( private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service, - private router : Router) { } + private router : Router, + // Add FilterService to constructor + private filterService: FilterService) { } loading = false; givendata; @@ -39,6 +48,14 @@ export class TodoRunnerComponent implements OnInit { console.log(this.editId); // this.getbyId(); + // Subscribe to filter changes + this.subscriptions.push( + this.filterService.filterState$.subscribe(filters => { + // When filters change, refresh the todo data + this.fetchTodoData(); + }) + ); + this.dashboardService.getById(this.editId).subscribe((data)=>{ console.log(data); this.workflowLine = data.dashbord1_Line[0].model; @@ -64,14 +81,8 @@ export class TodoRunnerComponent implements OnInit { this.XAxis = ChartObject[i].xAxis; this.YAxis = ChartObject[i].yAxis; console.log(this.TableName); - this.Dashtestservive.getChartData(this.TableName,"Todo List",this.XAxis,this.YAxis).subscribe((Ldata) => { - console.log(Ldata); - this.todoList.listName = Ldata.listName; - this.todoList.List = Ldata.List; - - },(error) => { - console.log(error); - }); + // Fetch data with filters + this.fetchTodoData(); break; // No need to continue the loop once the correct placeholder is found } } @@ -100,4 +111,58 @@ generatePDFFile(){ this.Dashtestservive.generatePDF(content, filename); } + +// Fetch todo data with filter support +fetchTodoData(): void { + if (this.TableName && this.XAxis && this.YAxis) { + // Get filter parameters from common filters + const commonFilters = this.filterService.getFilterValues(); + + // Build filter object using field names as keys + const filterObj = {}; + Object.keys(commonFilters).forEach(filterId => { + const filterValue = commonFilters[filterId]; + + // Find the filter definition to get the field name + const filterDef = this.filterService.getFilters().find(f => f.id === filterId); + + if (filterDef && filterDef.field) { + const fieldName = filterDef.field; + if (filterValue !== undefined && filterValue !== null && filterValue !== '') { + filterObj[fieldName] = filterValue; + } + } + }); + + // Convert to JSON string for API call + let filterParams = ''; + if (Object.keys(filterObj).length > 0) { + filterParams = JSON.stringify(filterObj); + } + + console.log('TodoRunner: Final filter object to send to API:', filterObj); + + // Fetch data from the dashboard service with filters + this.Dashtestservive.getChartDataWithFilters(this.TableName, "Todo List", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => { + console.log(Ldata); + this.todoList.listName = Ldata.listName; + this.todoList.List = Ldata.List; + },(error) => { + console.log(error); + }); + } } + +ngOnDestroy() { + // Unsubscribe from all subscriptions to prevent memory leaks + console.log('TodoRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions'); + this.subscriptions.forEach(subscription => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); + } + }); + this.subscriptions = []; + + console.log('TodoRunnerComponent destroyed and cleaned up'); +} +} \ No newline at end of file