runner
This commit is contained in:
parent
123c4698a4
commit
f654b233f6
@ -78,17 +78,13 @@
|
||||
</div>
|
||||
|
||||
<!-- Multi-Select Filter -->
|
||||
<div class="filter-control multiselect-container" *ngIf="filterType === 'multiselect'">
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox-item" *ngFor="let option of filterOptions">
|
||||
<input type="checkbox"
|
||||
[value]="option"
|
||||
[checked]="filterValue && filterValue.includes(option)"
|
||||
(change)="onMultiselectChange(option, $event)"
|
||||
class="clr-checkbox">
|
||||
<label class="checkbox-label">{{ option }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-control" *ngIf="filterType === 'multiselect'">
|
||||
<select [(ngModel)]="filterValue"
|
||||
(ngModelChange)="onFilterValueChange($event)"
|
||||
multiple
|
||||
class="clr-select compact-multiselect">
|
||||
<option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Date Range Filter -->
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
@ -98,4 +158,16 @@ 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');
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -136,5 +191,18 @@ 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');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -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<any> {
|
||||
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);
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
|
||||
@ -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;
|
||||
@ -94,6 +150,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');
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -39,16 +39,35 @@
|
||||
</div> -->
|
||||
<div><button class="btn btn-primary" (click)="generatePDFFile()">Export</button></div>
|
||||
<div style="max-height: 400px; overflow: auto; padding: 10px;">
|
||||
<table class="table">
|
||||
<!-- Debug information -->
|
||||
<div *ngIf="false" style="background-color: #f0f0f0; padding: 10px; margin-bottom: 10px;">
|
||||
<h4>Debug Information</h4>
|
||||
<p><strong>TableName:</strong> {{ TableName }}</p>
|
||||
<p><strong>XAxis:</strong> {{ XAxis }}</p>
|
||||
<p><strong>YAxis:</strong> {{ YAxis }}</p>
|
||||
<p><strong>Rows:</strong> {{ rows?.length }} items</p>
|
||||
<p><strong>Headers:</strong> {{ getHeaders() | json }}</p>
|
||||
<div *ngIf="error"><strong>Error:</strong> {{ error }}</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="error" class="error_mess">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<table class="table" *ngIf="rows && rows.length > 0; else noData">
|
||||
<thead>
|
||||
<tr>
|
||||
<th *ngFor="let co of getHeaders();let i=index">{{co}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of rows?.slice()?.reverse()">
|
||||
<tr *ngFor="let item of rows">
|
||||
<td *ngFor="let key of getHeaders()">{{item[key]}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ng-template #noData>
|
||||
<p *ngIf="!error">No data available</p>
|
||||
</ng-template>
|
||||
</div>
|
||||
@ -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;
|
||||
|
||||
// Get filter parameters from common filters
|
||||
const commonFilters = this.filterService.getFilterValues();
|
||||
const filterDefinitions = this.filterService.getFilters();
|
||||
|
||||
//dynamic table
|
||||
// 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);
|
||||
|
||||
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)
|
||||
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');
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -166,4 +221,17 @@ export class LineRunnerComponent implements OnInit {
|
||||
// }
|
||||
// }
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
}
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -90,4 +145,17 @@ 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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -99,4 +154,17 @@ 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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -118,4 +173,17 @@ 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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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<void>();
|
||||
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user