+
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.scss
index df5a97d..062a218 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.scss
@@ -59,6 +59,42 @@
border-top: 4px solid #0f9d58;
}
+.deleted-items-section {
+ background: white;
+ border-radius: 4px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ padding: 20px;
+
+ h3 {
+ margin-top: 0;
+ color: #333;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 10px;
+ }
+
+ .deleted-items-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-bottom: 15px;
+
+ .deleted-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ background: #f8f9fa;
+ border: 1px solid #e9ecef;
+ border-radius: 4px;
+ padding: 8px 12px;
+
+ span {
+ font-size: 14px;
+ color: #495057;
+ }
+ }
+ }
+}
+
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
@@ -81,6 +117,23 @@
cursor: move;
}
+.drop-zone-indicator {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 500px;
+ background-color: #f8f9fa;
+ border: 2px dashed #dee2e6;
+ border-radius: 4px;
+ color: #6c757d;
+ font-size: 18px;
+ text-align: center;
+
+ p {
+ margin: 0;
+ }
+}
+
/* Gridster specific styles */
gridster {
background: transparent !important;
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts
index f1563b5..2ec68fd 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts
@@ -5,6 +5,12 @@ interface ShieldDashboardItem extends GridsterItem {
chartType: string;
name: string;
id: number;
+ component?: any;
+}
+
+interface WidgetModel {
+ name: string;
+ identifier: string;
}
@Component({
@@ -15,6 +21,38 @@ interface ShieldDashboardItem extends GridsterItem {
export class ShieldDashboardComponent implements OnInit {
options: GridsterConfig;
dashboard: Array;
+
+ // Component palette
+ showComponentPalette = false;
+ WidgetsMock: WidgetModel[] = [
+ {
+ name: 'Bar Chart',
+ identifier: 'bar_chart'
+ },
+ {
+ name: 'Doughnut Chart',
+ identifier: 'doughnut_chart'
+ },
+ {
+ name: 'Map Chart',
+ identifier: 'map_chart'
+ },
+ {
+ name: 'Data Table',
+ identifier: 'grid_view'
+ },
+ {
+ name: 'Deal Details',
+ identifier: 'to_do_chart'
+ },
+ {
+ name: 'Quarterwise Flow',
+ identifier: 'line_chart'
+ }
+ ];
+
+ // Keep track of deleted items
+ deletedItems: Array = [];
constructor() { }
@@ -22,7 +60,7 @@ export class ShieldDashboardComponent implements OnInit {
this.options = {
gridType: 'fit',
enableEmptyCellDrop: true,
- emptyCellDropCallback: this.onDrop.bind(this),
+ emptyCellDropCallback: this.onDrop,
pushItems: true,
swap: true,
pushDirections: { north: true, east: true, south: true, west: true },
@@ -41,26 +79,164 @@ export class ShieldDashboardComponent implements OnInit {
itemResizeCallback: this.itemResize.bind(this)
};
- // Initialize the dashboard with default components
- this.dashboard = [
- { cols: 5, rows: 6, y: 0, x: 0, chartType: 'bar-chart', name: 'Bar Chart', id: 1 },
- { cols: 5, rows: 6, y: 0, x: 5, chartType: 'donut-chart', name: 'End Customer', id: 2 },
- { cols: 5, rows: 6, y: 6, x: 0, chartType: 'donut-chart', name: 'Segment Penetration', id: 3 },
- { cols: 5, rows: 6, y: 6, x: 5, chartType: 'map-chart', name: 'Map Chart', id: 4 },
- { cols: 10, rows: 6, y: 12, x: 0, chartType: 'data-table', name: 'Data Table', id: 5 },
- { cols: 5, rows: 6, y: 18, x: 0, chartType: 'deal-details', name: 'Deal Details', id: 6 },
- { cols: 5, rows: 6, y: 18, x: 5, chartType: 'quarterwise-flow', name: 'Quarterwise Flow', id: 7 }
- ];
+ // Initialize the dashboard with empty canvas
+ this.dashboard = [];
+ }
+
+ // Toggle component palette visibility
+ toggleComponentPalette(): void {
+ this.showComponentPalette = !this.showComponentPalette;
+ }
+
+ // Handle drag start event for components - matching the working implementation
+ onDrag(event: DragEvent, identifier: string): void {
+ console.log("on drag", identifier);
+ console.log("on drag ", event);
+ if (event.dataTransfer) {
+ event.dataTransfer.setData('widgetIdentifier', identifier);
+ }
}
- onDrop(event: any) {
+ onDrop(ev: any) {
// Handle dropping new components onto the dashboard
- console.log('Item dropped:', event);
+ console.log('Item dropped:', ev);
+
+ // Get the component identifier from the drag event
+ const componentType = ev.dataTransfer ? ev.dataTransfer.getData('widgetIdentifier') : '';
+ console.log('Component type dropped:', componentType);
+
+ if (componentType) {
+ this.addComponentToDashboard(componentType);
+ } else {
+ console.log('No component type found in drag data');
+ }
+ }
+
+ // Add a new component to the dashboard
+ addComponentToDashboard(componentType: string) {
+ // Generate a new ID for the component
+ const newId = this.dashboard.length > 0 ? Math.max(...this.dashboard.map(item => item.id), 0) + 1 : 1;
+
+ let newItem: ShieldDashboardItem;
+
+ switch (componentType) {
+ case "bar_chart":
+ newItem = {
+ cols: 5,
+ rows: 6,
+ y: 0,
+ x: 0,
+ chartType: 'bar-chart',
+ name: 'Bar Chart',
+ id: newId
+ };
+ break;
+ case "doughnut_chart":
+ // For doughnut charts, we'll need to determine which one based on existing items
+ const donutCount = this.dashboard.filter(item => item.chartType === 'donut-chart').length;
+ if (donutCount % 2 === 0) {
+ newItem = {
+ cols: 5,
+ rows: 6,
+ y: 0,
+ x: 0,
+ chartType: 'donut-chart',
+ name: 'End Customer Donut',
+ id: newId
+ };
+ } else {
+ newItem = {
+ cols: 5,
+ rows: 6,
+ y: 0,
+ x: 0,
+ chartType: 'donut-chart',
+ name: 'Segment Penetration Donut',
+ id: newId
+ };
+ }
+ break;
+ case "map_chart":
+ newItem = {
+ cols: 5,
+ rows: 6,
+ y: 0,
+ x: 0,
+ chartType: 'map-chart',
+ name: 'Map Chart',
+ id: newId
+ };
+ break;
+ case "grid_view":
+ newItem = {
+ cols: 10,
+ rows: 6,
+ y: 0,
+ x: 0,
+ chartType: 'data-table',
+ name: 'Data Table',
+ id: newId
+ };
+ break;
+ case "to_do_chart":
+ newItem = {
+ cols: 5,
+ rows: 6,
+ y: 0,
+ x: 0,
+ chartType: 'deal-details',
+ name: 'Deal Details',
+ id: newId
+ };
+ break;
+ case "line_chart":
+ newItem = {
+ cols: 5,
+ rows: 6,
+ y: 0,
+ x: 0,
+ chartType: 'quarterwise-flow',
+ name: 'Quarterwise Flow',
+ id: newId
+ };
+ break;
+ default:
+ newItem = {
+ cols: 5,
+ rows: 6,
+ y: 0,
+ x: 0,
+ chartType: componentType,
+ name: componentType,
+ id: newId
+ };
+ }
+
+ // Add the new item to the dashboard
+ this.dashboard.push(newItem);
}
removeItem(item: ShieldDashboardItem) {
+ // Add the item to deleted items list before removing
+ this.deletedItems.push({...item});
+
+ // Remove the item from the dashboard
this.dashboard.splice(this.dashboard.indexOf(item), 1);
}
+
+ // Restore a deleted item
+ restoreItem(item: ShieldDashboardItem) {
+ // Remove from deleted items
+ this.deletedItems.splice(this.deletedItems.indexOf(item), 1);
+
+ // Add back to dashboard
+ this.dashboard.push(item);
+ }
+
+ // Clear all deleted items
+ clearDeletedItems() {
+ this.deletedItems = [];
+ }
itemChange() {
console.log('Item changed:', this.dashboard);
@@ -71,4 +247,25 @@ export class ShieldDashboardComponent implements OnInit {
// Trigger a window resize event to notify charts to resize
window.dispatchEvent(new Event('resize'));
}
+
+ /**
+ * Extract only the relevant chart configuration properties to pass to chart components
+ * This prevents errors when trying to set properties that don't exist on the components
+ */
+ getChartInputs(item: any): any {
+ // Only pass properties that are relevant to chart components
+ const chartInputs = {
+ chartType: item.chartType,
+ name: item.name
+ };
+
+ // Remove undefined properties to avoid passing unnecessary data
+ Object.keys(chartInputs).forEach(key => {
+ if (chartInputs[key] === undefined) {
+ delete chartInputs[key];
+ }
+ });
+
+ return chartInputs;
+ }
}
\ No newline at end of file