risadmin_prod/authsec_angular_clarity_modern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chart

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-chart-loader.service.ts
View File

@@ -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

28
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.html
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">

42
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.ts
View File

@@ -81,6 +81,12 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
dynamicStyles: string = ''; dynamicStyles: string = '';
dynamicOptions: any = null; dynamicOptions: any = null;
// Add setter to log when dynamicTemplate changes
setDynamicTemplate(value: string) {
console.log('Setting dynamic template:', value);
this.dynamicTemplate = value;
}
constructor( constructor(
private dashboardService: Dashboard3Service, private dashboardService: Dashboard3Service,
private filterService: FilterService, private filterService: FilterService,
@@ -129,6 +135,11 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
console.log('UnifiedChartComponent input changes:', changes); console.log('UnifiedChartComponent input changes:', changes);
// Log chartType changes specifically
if (changes.chartType) {
console.log('Chart type changed from', changes.chartType.previousValue, 'to', changes.chartType.currentValue);
}
// Log all input values for debugging // Log all input values for debugging
console.log('Current input values:', { console.log('Current input values:', {
chartType: this.chartType, chartType: this.chartType,
@@ -243,38 +254,53 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
} }
console.log(`Loading dynamic chart configuration for chart type: ${this.chartType}`); console.log(`Loading dynamic chart configuration for chart type: ${this.chartType}`);
console.log('Current dynamic template:', this.dynamicTemplate);
// Get chart type by name and load its configuration // Get chart type by name and load its configuration
console.log('Calling getChartTypeByName with:', this.chartType);
this.dynamicChartLoader.getChartTypeByName(this.chartType).subscribe({ this.dynamicChartLoader.getChartTypeByName(this.chartType).subscribe({
next: (chartType) => { next: (chartType) => {
console.log('Received chart type by name :', chartType);
if (chartType) { if (chartType) {
console.log('Found chart type:', chartType); console.log('Found chart type:', chartType);
// Load the complete configuration for this chart type // Load the complete configuration for this chart type
console.log('Loading chart configuration for chart type ID:', chartType.id);
this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({ this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
next: (config) => { next: (config) => {
console.log('Received chart configuration:', config);
console.log('Loaded chart configuration:', config); console.log('Loaded chart configuration:', config);
// Apply the first template if available // Apply the first template if available
if (config.templates && config.templates.length > 0) { if (config.templates && config.templates.length > 0) {
const defaultTemplate = config.templates.find(t => t.isDefault) || config.templates[0]; const defaultTemplate = config.templates.find(t => t.isDefault) || config.templates[0];
if (defaultTemplate) { if (defaultTemplate) {
this.dynamicTemplate = defaultTemplate.templateHtml || ''; this.setDynamicTemplate(defaultTemplate.templateHtml || '');
this.dynamicStyles = defaultTemplate.templateCss || ''; this.dynamicStyles = defaultTemplate.templateCss || '';
// Apply styles to the component // Apply styles to the component
this.applyDynamicStyles(); this.applyDynamicStyles();
console.log('Applied dynamic template and styles'); console.log('Applied dynamic template and styles', {
template: this.dynamicTemplate,
styles: this.dynamicStyles
});
} }
} else {
console.log('No templates found for chart type:', this.chartType);
} }
// Apply dynamic options if available // Apply dynamic options if available
console.log('Checking for dynamic fields:', config.dynamicFields);
if (config.dynamicFields && config.dynamicFields.length > 0) { if (config.dynamicFields && config.dynamicFields.length > 0) {
// Find the field that contains chart options // Find the field that contains chart options
const optionsField = config.dynamicFields.find(field => const optionsField = config.dynamicFields.find(field =>
field.fieldName === 'chartOptions' || field.fieldName.toLowerCase().includes('options')); field.fieldName === 'chartOptions' || field.fieldName.toLowerCase().includes('options'));
if (!optionsField) {
console.log('No chartOptions field found in dynamic fields');
}
if (optionsField && optionsField.fieldOptions) { if (optionsField && optionsField.fieldOptions) {
try { try {
this.dynamicOptions = JSON.parse(optionsField.fieldOptions); this.dynamicOptions = JSON.parse(optionsField.fieldOptions);
@@ -286,6 +312,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
console.error('Error parsing dynamic chart options:', e); console.error('Error parsing dynamic chart options:', e);
} }
} }
} else {
console.log('No dynamic fields found for chart type:', this.chartType);
} }
}, },
error: (error) => { error: (error) => {
@@ -294,6 +322,16 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
}); });
} else { } else {
console.log(`Chart type ${this.chartType} not found in database`); console.log(`Chart type ${this.chartType} not found in database`);
// Log available chart types for debugging
console.log('Available chart types in database:');
this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
next: (chartTypes) => {
console.log('All chart types:', chartTypes);
},
error: (error) => {
console.error('Error loading chart types:', error);
}
});
} }
}, },
error: (error) => { error: (error) => {