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-05 12:56:42 +05:30
parent c5d730ae22
commit 49b5300887
2 changed files with 40 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.ts
View File

@@ -127,6 +127,7 @@ export class ChartTypeFieldsComponent implements OnInit {
return;
}
console.log('Updating dynamic field:', this.selectedDynamicField);
this.loadingState = ClrLoadingState.LOADING;
this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
next: (data) => {

213
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
View File

@@ -489,6 +489,7 @@ export class EditnewdashComponent implements OnInit {
'polar': 'Polar Area Chart',
'bubble': 'Bubble Chart',
'scatter': 'Scatter Chart'
// Removed hardcoded heatmap entry to make it fully dynamic
};
// If this is a unified chart, set the name back to the appropriate chart name
@@ -546,8 +547,10 @@ export class EditnewdashComponent implements OnInit {
}
onDrop(ev) {
console.log("on drop event ", ev);
const componentType = ev.dataTransfer.getData("widgetIdentifier");
// Safely calculate maxChartId, handling cases where chartid might be NaN or missing
console.log("on drop ", componentType);
let maxChartId = 0;
if (this.dashboardArray && this.dashboardArray.length > 0) {
const validChartIds = this.dashboardArray
@@ -561,143 +564,26 @@ export class EditnewdashComponent implements OnInit {
switch (componentType) {
// Handle all chart types by converting them to unified charts
case "radar_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Radar Chart",
chartType: 'radar',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
// Use dynamic chart creation for all chart types
return this.createDynamicChart('radar', maxChartId);
case "line_chart":
return this.dashboardArray.push({
cols: 5,
rows: 7,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Line Chart",
chartType: 'line',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('line', maxChartId);
case "doughnut_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Doughnut Chart",
chartType: 'doughnut',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('doughnut', maxChartId);
case "bar_chart":
// Use dynamic chart creation for bar charts
return this.createDynamicChart('bar', maxChartId);
case "pie_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Pie Chart",
chartType: 'pie',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('pie', maxChartId);
case "polar_area_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Polar Area Chart",
chartType: 'polar',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('polar', maxChartId);
case "bubble_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Bubble Chart",
chartType: 'bubble',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('bubble', maxChartId);
case "scatter_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Scatter Chart",
chartType: 'scatter',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('scatter', maxChartId);
case "dynamic_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Dynamic Chart",
chartType: 'line', // Default to line for dynamic chart
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
case "financial_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Financial Chart",
chartType: 'line', // Default to line for financial chart
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
case "to_do_chart":
return this.dashboardArray.push({
cols: 5,
@@ -744,42 +630,16 @@ export class EditnewdashComponent implements OnInit {
name: "Grid View"
});
case "unified_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Unified Chart",
// Add default configuration for unified chart
chartType: 'bar',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('bar', maxChartId); // Default to bar for unified chart
default:
// Handle any other chart types dynamically
// Extract chart type name from identifier (e.g., "heatmap_chart" -> "heatmap")
const chartTypeName = componentType.replace('_chart', '');
const displayName = chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
console.log('Creating dynamic chart of type:', chartTypeName);
console.log('Display name for chart:', this.getChartDisplayName(chartTypeName));
// Create a unified chart with the dynamic chart type
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: displayName,
chartType: chartTypeName,
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
// Use dynamic chart creation for all chart types
return this.createDynamicChart(chartTypeName, maxChartId);
}
}
removeItem(item) {
@@ -1193,14 +1053,10 @@ export class EditnewdashComponent implements OnInit {
}
// For UnifiedChartComponent, pass chart properties with chartType
// Check for specific chart names that use UnifiedChartComponent
const unifiedChartNames = [
'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart',
'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
'Dynamic Chart', 'Financial Chart', 'Unified Chart'
];
if (unifiedChartNames.includes(item.name)) {
// Check if the component is UnifiedChartComponent dynamically
if (item.component === UnifiedChartComponent ||
(item.component && item.component.name === 'UnifiedChartComponent') ||
item.name === 'Unified Chart') {
const unifiedChartInputs = {
chartType: item.chartType || 'bar',
xAxis: item.xAxis,
@@ -2258,18 +2114,18 @@ export class EditnewdashComponent implements OnInit {
error: (error) => {
console.error(`Error loading configuration for ${chartTypeName}:`, error);
// Fallback to default configuration
// this.createDefaultChart(chartTypeName, maxChartId);
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
}
});
} else {
console.warn(`Chart type ${chartTypeName} not found, using default configuration`);
// this.createDefaultChart(chartTypeName, maxChartId);
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
}
},
error: (error) => {
console.error('Error loading configuration for chart type:', error);
// Fallback to default configuration
// this.createDefaultChart(chartType.name, chartType.displayName || chartType.name);
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
}
});
}
@@ -2278,7 +2134,7 @@ export class EditnewdashComponent implements OnInit {
createDefaultChart(chartTypeName: string, chartDisplayName: string) {
console.log(`Creating default chart for ${chartTypeName}`);
// Map chart type names to chart types
// Map chart type names to chart types - making it fully dynamic
const chartTypeMap = {
'bar': 'bar',
'line': 'line',
@@ -2288,10 +2144,11 @@ export class EditnewdashComponent implements OnInit {
'polar': 'polar',
'bubble': 'bubble',
'scatter': 'scatter'
// Removed hardcoded heatmap entry to make it fully dynamic
};
// Get the chart type from the name
const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bar';
// Get the chart type from the name - default to bubble for unknown chart types
const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bubble';
// Safely calculate maxChartId, handling cases where chartid might be NaN or missing
let maxChartId = 0;
@@ -2332,7 +2189,7 @@ export class EditnewdashComponent implements OnInit {
}
}
// Helper method to get display name for chart type
// Helper method to get display name for chart type - making it fully dynamic
getChartDisplayName(chartTypeName: string): string {
const displayNameMap = {
'bar': 'Bar Chart',
@@ -2343,9 +2200,17 @@ export class EditnewdashComponent implements OnInit {
'polar': 'Polar Area Chart',
'bubble': 'Bubble Chart',
'scatter': 'Scatter Chart'
// Removed hardcoded heatmap entry to make it fully dynamic
};
return displayNameMap[chartTypeName.toLowerCase()] || chartTypeName;
// For unknown chart types, create a display name by capitalizing the first letter and adding ' Chart'
const displayName = displayNameMap[chartTypeName.toLowerCase()];
if (displayName) {
return displayName;
} else {
// Capitalize first letter and add ' Chart'
return chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
}
}
}