From 50df914ca928e6774569b807f3619f76e5760ff8 Mon Sep 17 00:00:00 2001 From: Gaurav Kumar Date: Wed, 29 Oct 2025 16:52:45 +0530 Subject: [PATCH] pie --- .../pie-chart/pie-chart.component.html | 10 +- .../gadgets/pie-chart/pie-chart.component.ts | 128 ++++++++++++++---- 2 files changed, 108 insertions(+), 30 deletions(-) diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html index 5fa8fc6..0e9c001 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html @@ -281,7 +281,7 @@
-
+

Loading chart data...

@@ -291,15 +291,15 @@

No chart data available

- + + (chartClick)="chartClicked($event)" + [style.display]="shouldShowChart() ? 'block' : 'none'">
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts index 4b735de..eabb63c 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts @@ -37,6 +37,12 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O public pieChartLabels: string[] = ['Category A', 'Category B', 'Category C']; public pieChartData: number[] = [30, 50, 20]; + public pieChartDatasets: any[] = [ + { + data: [30, 50, 20], + label: 'Dataset 1' + } + ]; public pieChartType: string = 'pie'; public pieChartOptions: any = { responsive: true, @@ -96,7 +102,7 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O noDataAvailable: boolean = false; // Flag to prevent infinite loops - private isFetchingData: boolean = false; + isFetchingData: boolean = false; // Subscriptions to unsubscribe on destroy private subscriptions: Subscription[] = []; @@ -132,7 +138,17 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O console.log('PieChartComponent initialized with default data:', { labels: this.pieChartLabels, data: this.pieChartData }); // Validate initial data this.validateChartData(); - this.fetchChartData(); + // Initialize datasets with default data + this.pieChartDatasets = [ + { + data: this.pieChartData, + label: 'Dataset 1' + } + ]; + // Only fetch data if we have the required inputs, otherwise show default data + if (this.table && this.xAxis && this.yAxis) { + this.fetchChartData(); + } } ngOnChanges(changes: SimpleChanges): void { @@ -165,6 +181,12 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O console.log('Chart configuration changed, fetching new data'); this.fetchChartData(); } + + // If we have the required inputs and haven't fetched data yet, fetch it + if ((xAxisChanged || yAxisChanged || tableChanged) && this.table && this.xAxis && this.yAxis && !this.isFetchingData) { + console.log('Required inputs available, fetching data'); + this.fetchChartData(); + } } ngOnDestroy(): void { @@ -576,8 +598,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O if (data === null) { console.warn('API returned null data. Check if the API endpoint is working correctly.'); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; // Reset flag after fetching this.isFetchingData = false; return; @@ -588,9 +608,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O // Backend has already filtered the data, just display it this.noDataAvailable = data.chartLabels.length === 0; this.pieChartLabels = data.chartLabels; - this.pieChartData = data.chartData; + + // Extract the actual data values from the chartData array + // chartData is an array with one object containing the data + if (data.chartData.length > 0 && data.chartData[0].data) { + this.pieChartData = data.chartData[0].data; + } else { + this.pieChartData = []; + } + // Trigger change detection + this.pieChartLabels = [...this.pieChartLabels]; this.pieChartData = [...this.pieChartData]; + this.pieChartDatasets = [ + { + data: this.pieChartData, + label: 'Dataset 1' + } + ]; console.log('Updated pie chart with data:', { labels: this.pieChartLabels, data: this.pieChartData }); } else if (data && data.labels && data.datasets) { // Backend has already filtered the data, just display it @@ -598,13 +633,29 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O this.pieChartLabels = data.labels; this.pieChartData = data.datasets[0]?.data || []; // Trigger change detection + this.pieChartLabels = [...this.pieChartLabels]; this.pieChartData = [...this.pieChartData]; + this.pieChartDatasets = [ + { + data: this.pieChartData, + label: 'Dataset 1' + } + ]; console.log('Updated pie chart with legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData }); } else { console.warn('Received data does not have expected structure', data); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; + // Keep default data if no data is available + if (this.pieChartLabels.length === 0 && this.pieChartData.length === 0) { + this.pieChartLabels = ['Category A', 'Category B', 'Category C']; + this.pieChartData = [30, 50, 20]; + this.pieChartDatasets = [ + { + data: this.pieChartData, + label: 'Dataset 1' + } + ]; + } } // Reset flag after fetching this.isFetchingData = false; @@ -612,18 +663,13 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O (error) => { console.error('Error fetching pie chart data:', error); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; // Reset flag after fetching this.isFetchingData = false; - // Keep default data in case of error } ); } else { console.log('Missing required data for chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection }); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; // Reset flag after fetching this.isFetchingData = false; } @@ -652,8 +698,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O } else { console.warn('Invalid drilldown layer index:', layerIndex); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; return; } } @@ -664,8 +708,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O if (!drilldownConfig || !drilldownConfig.apiUrl || !drilldownConfig.xAxis || !drilldownConfig.yAxis) { console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; return; } @@ -762,8 +804,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O if (data === null) { console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.'); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; return; } @@ -772,9 +812,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O // Backend has already filtered the data, just display it this.noDataAvailable = data.chartLabels.length === 0; this.pieChartLabels = data.chartLabels; - this.pieChartData = data.chartData; + + // Extract the actual data values from the chartData array + // chartData is an array with one object containing the data + if (data.chartData.length > 0 && data.chartData[0].data) { + this.pieChartData = data.chartData[0].data; + } else { + this.pieChartData = []; + } + // Trigger change detection + this.pieChartLabels = [...this.pieChartLabels]; this.pieChartData = [...this.pieChartData]; + this.pieChartDatasets = [ + { + data: this.pieChartData, + label: 'Dataset 1' + } + ]; console.log('Updated pie chart with drilldown data:', { labels: this.pieChartLabels, data: this.pieChartData }); } else if (data && data.labels && data.datasets) { // Backend has already filtered the data, just display it @@ -782,21 +837,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O this.pieChartLabels = data.labels; this.pieChartData = data.datasets[0]?.data || []; // Trigger change detection + this.pieChartLabels = [...this.pieChartLabels]; this.pieChartData = [...this.pieChartData]; + this.pieChartDatasets = [ + { + data: this.pieChartData, + label: 'Dataset 1' + } + ]; console.log('Updated pie chart with drilldown legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData }); } else { console.warn('Drilldown received data does not have expected structure', data); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; + // Keep current data if no data is available } }, (error) => { console.error('Error fetching drilldown data:', error); this.noDataAvailable = true; - this.pieChartLabels = []; - this.pieChartData = []; - // Keep current data in case of error } ); } @@ -884,6 +942,26 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O getLegendColor(index: number): string { return this.chartColors[index % this.chartColors.length]; } + + // Method to determine if chart should be displayed + shouldShowChart(): boolean { + // Show chart if we have data + if (this.pieChartLabels.length > 0 && this.pieChartData.length > 0) { + return true; + } + + // Show chart if we're still fetching data + if (this.isFetchingData) { + return true; + } + + // Show chart if we have default data + if (this.pieChartLabels.length > 0 && this.originalPieChartLabels.length > 0) { + return true; + } + + return false; + } // events public chartClicked(e: any): void { @@ -977,4 +1055,4 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O ngAfterViewChecked(): void { // This lifecycle hook can be used if needed for post-render operations } -} \ No newline at end of file +} \ No newline at end of file