@dragonworks/ngx-dashboard 20.3.1 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,111 +1,111 @@
|
|
|
1
|
-
# @dragonworks/ngx-dashboard
|
|
2
|
-
|
|
3
|
-
Core Angular library for building drag-and-drop grid dashboards with resizable cells and customizable widgets.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @dragonworks/ngx-dashboard
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Features
|
|
12
|
-
|
|
13
|
-
- **Grid-based Drag & Drop**: Collision detection and boundary constraints
|
|
14
|
-
- **Resizable Cells**: Dynamic resizing with minimum size constraints
|
|
15
|
-
- **Dual-Mode Display**: Editor mode for configuration, viewer mode for presentation
|
|
16
|
-
- **NgRx Signals State Management**: Reactive state with normalized widget storage
|
|
17
|
-
- **Material Design 3 Integration**: Full MD3 compliance with theme tokens
|
|
18
|
-
- **Context Menu System**: Right-click operations with Material menu
|
|
19
|
-
- **Extensible Widget System**: Factory pattern for custom widget types
|
|
20
|
-
- **Performance Optimized**: 100% OnPush change detection strategy
|
|
21
|
-
- **Provider Pattern**: Extensible dialog and settings providers
|
|
22
|
-
|
|
23
|
-
## Requirements
|
|
24
|
-
|
|
25
|
-
- Angular 20.2.0+
|
|
26
|
-
- Angular Material 20.2.0+
|
|
27
|
-
- Angular CDK 20.2.0+
|
|
28
|
-
|
|
29
|
-
## Basic Usage
|
|
30
|
-
|
|
31
|
-
```typescript
|
|
32
|
-
import { Component } from "@angular/core";
|
|
33
|
-
import { DashboardComponent, createEmptyDashboard } from "@dragonworks/ngx-dashboard";
|
|
34
|
-
import type { DashboardData } from "@dragonworks/ngx-dashboard";
|
|
35
|
-
|
|
36
|
-
@Component({
|
|
37
|
-
selector: "app-dashboard-page",
|
|
38
|
-
standalone: true,
|
|
39
|
-
imports: [DashboardComponent],
|
|
40
|
-
template: ` <ngx-dashboard [dashboardData]="dashboard" [editMode]="true" (dashboardChange)="onDashboardChange($event)"> </ngx-dashboard> `,
|
|
41
|
-
})
|
|
42
|
-
export class DashboardPageComponent {
|
|
43
|
-
dashboard = createEmptyDashboard("my-dashboard", 12, 8);
|
|
44
|
-
|
|
45
|
-
onDashboardChange(data: DashboardData) {
|
|
46
|
-
// Handle dashboard updates
|
|
47
|
-
console.log("Dashboard changed:", data);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Widget Registration
|
|
53
|
-
|
|
54
|
-
Register custom widgets with the `DashboardService`:
|
|
55
|
-
|
|
56
|
-
```typescript
|
|
57
|
-
import { Injectable } from "@angular/core";
|
|
58
|
-
import { DashboardService } from "@dragonworks/ngx-dashboard";
|
|
59
|
-
import { MyCustomWidget } from "./widgets/my-custom-widget.component";
|
|
60
|
-
|
|
61
|
-
@Injectable({ providedIn: "root" })
|
|
62
|
-
export class WidgetSetupService {
|
|
63
|
-
constructor(private dashboardService: DashboardService) {
|
|
64
|
-
this.registerWidgets();
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
private registerWidgets() {
|
|
68
|
-
this.dashboardService.registerWidgetType(MyCustomWidget.metadata);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
## Components
|
|
74
|
-
|
|
75
|
-
### Main Components
|
|
76
|
-
|
|
77
|
-
- `DashboardComponent` - Main dashboard component with automatic mode switching
|
|
78
|
-
- `DashboardEditorComponent` - Editor mode with drag & drop
|
|
79
|
-
- `DashboardViewerComponent` - Viewer mode for presentation
|
|
80
|
-
- `WidgetListComponent` - Widget palette for drag & drop
|
|
81
|
-
|
|
82
|
-
### Services
|
|
83
|
-
|
|
84
|
-
- `DashboardService` - Widget registration and management
|
|
85
|
-
|
|
86
|
-
### Models & Utilities
|
|
87
|
-
|
|
88
|
-
- `createEmptyDashboard()` - Create new dashboard configuration
|
|
89
|
-
- `DashboardData` - Dashboard configuration interface
|
|
90
|
-
- `CellData` - Individual cell/widget data
|
|
91
|
-
- `WidgetMetadata` - Widget type definition
|
|
92
|
-
|
|
93
|
-
### Widget State Management
|
|
94
|
-
|
|
95
|
-
Widgets can implement optional lifecycle methods:
|
|
96
|
-
|
|
97
|
-
```typescript
|
|
98
|
-
export interface DashboardWidgetComponent {
|
|
99
|
-
dashboardGetState?(): unknown;
|
|
100
|
-
dashboardSetState?(state: unknown): void;
|
|
101
|
-
dashboardEditState?(): void;
|
|
102
|
-
}
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
## Documentation
|
|
106
|
-
|
|
107
|
-
See the [main repository](https://github.com/TobyBackstrom/ngx-dashboard) for full documentation, examples, and demo application.
|
|
108
|
-
|
|
109
|
-
## License
|
|
110
|
-
|
|
111
|
-
MIT
|
|
1
|
+
# @dragonworks/ngx-dashboard
|
|
2
|
+
|
|
3
|
+
Core Angular library for building drag-and-drop grid dashboards with resizable cells and customizable widgets.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @dragonworks/ngx-dashboard
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
- **Grid-based Drag & Drop**: Collision detection and boundary constraints
|
|
14
|
+
- **Resizable Cells**: Dynamic resizing with minimum size constraints
|
|
15
|
+
- **Dual-Mode Display**: Editor mode for configuration, viewer mode for presentation
|
|
16
|
+
- **NgRx Signals State Management**: Reactive state with normalized widget storage
|
|
17
|
+
- **Material Design 3 Integration**: Full MD3 compliance with theme tokens
|
|
18
|
+
- **Context Menu System**: Right-click operations with Material menu
|
|
19
|
+
- **Extensible Widget System**: Factory pattern for custom widget types
|
|
20
|
+
- **Performance Optimized**: 100% OnPush change detection strategy
|
|
21
|
+
- **Provider Pattern**: Extensible dialog and settings providers
|
|
22
|
+
|
|
23
|
+
## Requirements
|
|
24
|
+
|
|
25
|
+
- Angular 20.2.0+
|
|
26
|
+
- Angular Material 20.2.0+
|
|
27
|
+
- Angular CDK 20.2.0+
|
|
28
|
+
|
|
29
|
+
## Basic Usage
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { Component } from "@angular/core";
|
|
33
|
+
import { DashboardComponent, createEmptyDashboard } from "@dragonworks/ngx-dashboard";
|
|
34
|
+
import type { DashboardData } from "@dragonworks/ngx-dashboard";
|
|
35
|
+
|
|
36
|
+
@Component({
|
|
37
|
+
selector: "app-dashboard-page",
|
|
38
|
+
standalone: true,
|
|
39
|
+
imports: [DashboardComponent],
|
|
40
|
+
template: ` <ngx-dashboard [dashboardData]="dashboard" [editMode]="true" (dashboardChange)="onDashboardChange($event)"> </ngx-dashboard> `,
|
|
41
|
+
})
|
|
42
|
+
export class DashboardPageComponent {
|
|
43
|
+
dashboard = createEmptyDashboard("my-dashboard", 12, 8);
|
|
44
|
+
|
|
45
|
+
onDashboardChange(data: DashboardData) {
|
|
46
|
+
// Handle dashboard updates
|
|
47
|
+
console.log("Dashboard changed:", data);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Widget Registration
|
|
53
|
+
|
|
54
|
+
Register custom widgets with the `DashboardService`:
|
|
55
|
+
|
|
56
|
+
```typescript
|
|
57
|
+
import { Injectable } from "@angular/core";
|
|
58
|
+
import { DashboardService } from "@dragonworks/ngx-dashboard";
|
|
59
|
+
import { MyCustomWidget } from "./widgets/my-custom-widget.component";
|
|
60
|
+
|
|
61
|
+
@Injectable({ providedIn: "root" })
|
|
62
|
+
export class WidgetSetupService {
|
|
63
|
+
constructor(private dashboardService: DashboardService) {
|
|
64
|
+
this.registerWidgets();
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
private registerWidgets() {
|
|
68
|
+
this.dashboardService.registerWidgetType(MyCustomWidget.metadata);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Components
|
|
74
|
+
|
|
75
|
+
### Main Components
|
|
76
|
+
|
|
77
|
+
- `DashboardComponent` - Main dashboard component with automatic mode switching
|
|
78
|
+
- `DashboardEditorComponent` - Editor mode with drag & drop
|
|
79
|
+
- `DashboardViewerComponent` - Viewer mode for presentation
|
|
80
|
+
- `WidgetListComponent` - Widget palette for drag & drop
|
|
81
|
+
|
|
82
|
+
### Services
|
|
83
|
+
|
|
84
|
+
- `DashboardService` - Widget registration and management
|
|
85
|
+
|
|
86
|
+
### Models & Utilities
|
|
87
|
+
|
|
88
|
+
- `createEmptyDashboard()` - Create new dashboard configuration
|
|
89
|
+
- `DashboardData` - Dashboard configuration interface
|
|
90
|
+
- `CellData` - Individual cell/widget data
|
|
91
|
+
- `WidgetMetadata` - Widget type definition
|
|
92
|
+
|
|
93
|
+
### Widget State Management
|
|
94
|
+
|
|
95
|
+
Widgets can implement optional lifecycle methods:
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
export interface DashboardWidgetComponent {
|
|
99
|
+
dashboardGetState?(): unknown;
|
|
100
|
+
dashboardSetState?(state: unknown): void;
|
|
101
|
+
dashboardEditState?(): void;
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Documentation
|
|
106
|
+
|
|
107
|
+
See the [main repository](https://github.com/TobyBackstrom/ngx-dashboard) for full documentation, examples, and demo application.
|
|
108
|
+
|
|
109
|
+
## License
|
|
110
|
+
|
|
111
|
+
MIT
|