+
+
+
+
+
+ Loading chart type...
+
+
+
+
+
+
+ {{ errorMessage }}
+
+
+
+
+
+
+ {{ successMessage }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ chartType.id }}
+
+
+
+ {{ chartType.createdAt | date:'medium' }}
+
+
+
+ {{ chartType.updatedAt | date:'medium' }}
+
+
+
+
+
+
+
About Chart Types
+
Chart types define the different visualization options available in the dashboard builder. Each chart type can have:
+
+ - Associated UI components that define the configuration form
+ - Templates that define how the chart is rendered
+ - Dynamic fields that capture specific configuration parameters
+
+
After creating a chart type, you can configure its components, templates, and fields using the management links above.
+
+
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss
new file mode 100644
index 0000000..2c38984
--- /dev/null
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss
@@ -0,0 +1,163 @@
+.edit-chart-type-page {
+ padding: 20px;
+ max-width: 1200px;
+ margin: 0 auto;
+
+ .header {
+ margin-bottom: 20px;
+ h2 {
+ color: #0079b8;
+ font-weight: 300;
+ }
+ }
+
+ .loading-spinner {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+ gap: 10px;
+ }
+
+ .card {
+ margin-bottom: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ .card-block {
+ padding: 20px;
+ }
+
+ .card-header {
+ .chart-type-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ h3 {
+ margin: 0;
+ }
+ }
+ }
+ }
+
+ .form-actions {
+ margin-top: 20px;
+ display: flex;
+ gap: 10px;
+ }
+
+ .related-entities-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 20px;
+
+ .entity-card {
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 20px;
+ text-align: center;
+ background-color: #f9f9f9;
+
+ .entity-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 15px;
+
+ cds-icon {
+ color: #0079b8;
+ margin-bottom: 10px;
+ }
+
+ h4 {
+ margin: 0;
+ color: #0079b8;
+ }
+ }
+
+ p {
+ color: #666;
+ margin-bottom: 15px;
+ min-height: 60px;
+ }
+
+ .btn-link {
+ font-weight: 500;
+ }
+ }
+ }
+
+ .details-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 15px;
+
+ .detail-item {
+ display: flex;
+ flex-direction: column;
+
+ label {
+ font-weight: bold;
+ margin-bottom: 5px;
+ color: #333;
+ }
+
+ span {
+ padding: 8px;
+ background-color: #f6f6f6;
+ border-radius: 4px;
+ }
+ }
+ }
+
+ .info-section {
+ background-color: #f6f6f6;
+ border-left: 4px solid #0079b8;
+ padding: 15px;
+ border-radius: 4px;
+
+ h4 {
+ margin-top: 0;
+ color: #0079b8;
+ }
+
+ ul {
+ padding-left: 20px;
+
+ li {
+ margin-bottom: 8px;
+ }
+ }
+
+ p {
+ margin: 10px 0;
+ }
+ }
+
+ @media (max-width: 768px) {
+ padding: 10px;
+
+ .form-actions {
+ flex-direction: column;
+
+ button {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+ }
+
+ .chart-type-header {
+ flex-direction: column;
+ align-items: flex-start !important;
+
+ .label {
+ margin-top: 10px;
+ }
+ }
+
+ .related-entities-grid {
+ grid-template-columns: 1fr;
+ }
+ }
+}
+
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts
new file mode 100644
index 0000000..6f543ac
--- /dev/null
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts
@@ -0,0 +1,117 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ClrLoadingState } from '@clr/angular';
+import { ChartType, ChartTypeService } from './chart-type.service';
+
+@Component({
+ selector: 'app-edit-chart-type',
+ templateUrl: './edit-chart-type.component.html',
+ styleUrls: ['./edit-chart-type.component.scss']
+})
+export class EditChartTypeComponent implements OnInit {
+ chartType: ChartType | null = null;
+ loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
+ errorMessage: string | null = null;
+ successMessage: string | null = null;
+
+ // Make ClrLoadingState available to template
+ readonly ClrLoadingState = ClrLoadingState;
+
+ constructor(
+ private chartTypeService: ChartTypeService,
+ private route: ActivatedRoute,
+ private router: Router
+ ) { }
+
+ ngOnInit(): void {
+ const id = Number(this.route.snapshot.paramMap.get('id'));
+ if (id) {
+ this.loadChartType(id);
+ } else {
+ this.showError('Invalid chart type ID');
+ }
+ }
+
+ // Show error message
+ private showError(message: string): void {
+ this.errorMessage = message;
+ setTimeout(() => {
+ this.errorMessage = null;
+ }, 5000);
+ }
+
+ // Show success message
+ private showSuccess(message: string): void {
+ this.successMessage = message;
+ setTimeout(() => {
+ this.successMessage = null;
+ }, 3000);
+ }
+
+ loadChartType(id: number): void {
+ this.loadingState = ClrLoadingState.LOADING;
+ this.chartTypeService.getChartTypeById(id).subscribe({
+ next: (data) => {
+ this.chartType = data;
+ this.loadingState = ClrLoadingState.SUCCESS;
+ },
+ error: (error) => {
+ console.error('Error loading chart type:', error);
+ this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
+ this.loadingState = ClrLoadingState.ERROR;
+ }
+ });
+ }
+
+ updateChartType(): void {
+ if (!this.chartType || !this.chartType.name) {
+ this.showError('Chart type name is required');
+ return;
+ }
+
+ this.loadingState = ClrLoadingState.LOADING;
+ this.chartTypeService.updateChartType(this.chartType.id, this.chartType).subscribe({
+ next: (data) => {
+ this.chartType = data;
+ this.showSuccess('Chart type updated successfully');
+ this.loadingState = ClrLoadingState.SUCCESS;
+ // Redirect to chart types list after a short delay
+ setTimeout(() => {
+ this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
+ }, 1500);
+ },
+ error: (error) => {
+ console.error('Error updating chart type:', error);
+ this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
+ this.loadingState = ClrLoadingState.ERROR;
+ }
+ });
+ }
+
+ onCancel(): void {
+ this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
+ }
+
+ onDelete(): void {
+ if (!this.chartType) return;
+
+ if (confirm('Are you sure you want to delete this chart type? This action cannot be undone.')) {
+ this.loadingState = ClrLoadingState.LOADING;
+ this.chartTypeService.deleteChartType(this.chartType.id).subscribe({
+ next: () => {
+ this.showSuccess('Chart type deleted successfully');
+ this.loadingState = ClrLoadingState.SUCCESS;
+ // Redirect to chart types list after a short delay
+ setTimeout(() => {
+ this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
+ }, 1500);
+ },
+ error: (error) => {
+ console.error('Error deleting chart type:', error);
+ this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
+ this.loadingState = ClrLoadingState.ERROR;
+ }
+ });
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
index 8ab587f..407de1d 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
@@ -11,9 +11,6 @@