This commit is contained in:
Gaurav Kumar
2025-11-04 18:37:45 +05:30
parent 0e6e4899e5
commit 1263805d61
3 changed files with 285 additions and 239 deletions

View File

@@ -22,7 +22,7 @@ export class DynamicChartLoaderService {
*/ */
loadAllChartConfigurations(): Observable<any> { loadAllChartConfigurations(): Observable<any> {
console.log('Loading all chart configurations dynamically'); console.log('Loading all chart configurations dynamically');
// Load all chart types first // Load all chart types first
return this.apiRequest.get(this.chartTypesUrl).pipe( return this.apiRequest.get(this.chartTypesUrl).pipe(
map(chartTypes => { map(chartTypes => {
@@ -43,7 +43,7 @@ export class DynamicChartLoaderService {
dynamicFields: DynamicField[] dynamicFields: DynamicField[]
}> { }> {
console.log(`Loading complete configuration for chart type ${chartTypeId}`); console.log(`Loading complete configuration for chart type ${chartTypeId}`);
// Load all related data in parallel // Load all related data in parallel
return forkJoin({ return forkJoin({
chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`), chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
@@ -89,17 +89,25 @@ export class DynamicChartLoaderService {
* Get chart type by name * Get chart type by name
* This is useful for finding a chart type by its name rather than ID * This is useful for finding a chart type by its name rather than ID
*/ */
getChartTypeByName(name: string): Observable<ChartType | null> { // getChartTypeByName(name: string): Observable<ChartType | null> {
// console.log(`Finding chart type by name: ${name}`);
// return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`).pipe(
// map((chartTypes: ChartType[]) => {
// console.log('Available chart types:', chartTypes);
// const chartType = chartTypes.find(ct => ct.name === name);
// console.log(`Found chart type for name ${name}:`, chartType);
// return chartType || null;
// })
// );
// }
getChartTypeByName(name: string): Observable<any> {
console.log(`Finding chart type by name: ${name}`); console.log(`Finding chart type by name: ${name}`);
return this.apiRequest.get(`${this.chartTypesUrl}`).pipe( return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`);
map((chartTypes: ChartType[]) => {
const chartType = chartTypes.find(ct => ct.name === name);
console.log(`Found chart type for name ${name}:`, chartType);
return chartType || null;
})
);
} }
/** /**
* Load all active chart types * Load all active chart types
* This is used to populate the chart selection in the dashboard editor * This is used to populate the chart selection in the dashboard editor

View File

@@ -43,7 +43,7 @@
</div> --> </div> -->
<!-- Line Chart --> <!-- Line Chart -->
<div *ngIf="chartType === 'line'" class="chart-canvas-container"> <!-- <div *ngIf="chartType === 'line'" class="chart-canvas-container">
<canvas baseChart <canvas baseChart
[datasets]="chartData" [datasets]="chartData"
[labels]="chartLabels" [labels]="chartLabels"
@@ -53,10 +53,10 @@
(chartClick)="chartClicked($event)" (chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"> (chartHover)="chartHovered($event)">
</canvas> </canvas>
</div> </div> -->
<!-- Pie Chart --> <!-- Pie Chart -->
<div *ngIf="chartType === 'pie'" class="chart-canvas-container"> <!-- <div *ngIf="chartType === 'pie'" class="chart-canvas-container">
<canvas baseChart <canvas baseChart
[datasets]="chartData" [datasets]="chartData"
[labels]="chartLabels" [labels]="chartLabels"
@@ -66,10 +66,10 @@
(chartClick)="chartClicked($event)" (chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"> (chartHover)="chartHovered($event)">
</canvas> </canvas>
</div> </div> -->
<!-- Doughnut Chart --> <!-- Doughnut Chart -->
<div *ngIf="chartType === 'doughnut'" class="chart-canvas-container"> <!-- <div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
<canvas baseChart <canvas baseChart
[datasets]="chartData" [datasets]="chartData"
[labels]="chartLabels" [labels]="chartLabels"
@@ -79,10 +79,10 @@
(chartClick)="chartClicked($event)" (chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"> (chartHover)="chartHovered($event)">
</canvas> </canvas>
</div> </div> -->
<!-- Bubble Chart --> <!-- Bubble Chart -->
<div *ngIf="chartType === 'bubble'" class="chart-canvas-container"> <!-- <div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
<canvas baseChart <canvas baseChart
[datasets]="bubbleChartData" [datasets]="bubbleChartData"
[options]="chartOptions" [options]="chartOptions"
@@ -91,10 +91,10 @@
(chartClick)="chartClicked($event)" (chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"> (chartHover)="chartHovered($event)">
</canvas> </canvas>
</div> </div> -->
<!-- Radar Chart --> <!-- Radar Chart -->
<div *ngIf="chartType === 'radar'" class="chart-canvas-container"> <!-- <div *ngIf="chartType === 'radar'" class="chart-canvas-container">
<canvas baseChart <canvas baseChart
[datasets]="chartData" [datasets]="chartData"
[labels]="chartLabels" [labels]="chartLabels"
@@ -104,10 +104,10 @@
(chartClick)="chartClicked($event)" (chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"> (chartHover)="chartHovered($event)">
</canvas> </canvas>
</div> </div> -->
<!-- Polar Area Chart --> <!-- Polar Area Chart -->
<div *ngIf="chartType === 'polar'" class="chart-canvas-container"> <!-- <div *ngIf="chartType === 'polar'" class="chart-canvas-container">
<canvas baseChart <canvas baseChart
[datasets]="chartData" [datasets]="chartData"
[labels]="chartLabels" [labels]="chartLabels"
@@ -117,10 +117,10 @@
(chartClick)="chartClicked($event)" (chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"> (chartHover)="chartHovered($event)">
</canvas> </canvas>
</div> </div> -->
<!-- Scatter Chart --> <!-- Scatter Chart -->
<div *ngIf="chartType === 'scatter'" class="chart-canvas-container"> <!-- <div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
<canvas baseChart <canvas baseChart
[datasets]="chartData" [datasets]="chartData"
[options]="chartOptions" [options]="chartOptions"
@@ -129,7 +129,7 @@
(chartClick)="chartClicked($event)" (chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)"> (chartHover)="chartHovered($event)">
</canvas> </canvas>
</div> </div> -->
<!-- Default/Unknown Chart Type --> <!-- Default/Unknown Chart Type -->
<div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container"> <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">