@dragonworks/ngx-dashboard 20.1.2 → 20.1.3
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 +13 -45
- package/fesm2022/dragonworks-ngx-dashboard.mjs +1 -1
- package/fesm2022/dragonworks-ngx-dashboard.mjs.map +1 -1
- package/index.d.ts +34 -368
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,15 +10,14 @@ npm install @dragonworks/ngx-dashboard
|
|
|
10
10
|
|
|
11
11
|
## Features
|
|
12
12
|
|
|
13
|
-
- **Grid-based Drag & Drop**:
|
|
13
|
+
- **Grid-based Drag & Drop**: Collision detection and boundary constraints
|
|
14
14
|
- **Resizable Cells**: Dynamic resizing with minimum size constraints
|
|
15
15
|
- **Dual-Mode Display**: Editor mode for configuration, viewer mode for presentation
|
|
16
|
-
- **NgRx Signals State Management**:
|
|
16
|
+
- **NgRx Signals State Management**: Reactive state with normalized widget storage
|
|
17
17
|
- **Material Design 3 Integration**: Full MD3 compliance with theme tokens
|
|
18
18
|
- **Context Menu System**: Right-click operations with Material menu
|
|
19
19
|
- **Extensible Widget System**: Factory pattern for custom widget types
|
|
20
20
|
- **Performance Optimized**: 100% OnPush change detection strategy
|
|
21
|
-
- **Dual-ID Architecture**: Separation of widget identity (WidgetId) from position (CellId)
|
|
22
21
|
- **Provider Pattern**: Extensible dialog and settings providers
|
|
23
22
|
|
|
24
23
|
## Requirements
|
|
@@ -30,28 +29,22 @@ npm install @dragonworks/ngx-dashboard
|
|
|
30
29
|
## Basic Usage
|
|
31
30
|
|
|
32
31
|
```typescript
|
|
33
|
-
import { Component } from
|
|
34
|
-
import { DashboardComponent, createEmptyDashboard } from
|
|
35
|
-
import type { DashboardData } from
|
|
32
|
+
import { Component } from "@angular/core";
|
|
33
|
+
import { DashboardComponent, createEmptyDashboard } from "@dragonworks/ngx-dashboard";
|
|
34
|
+
import type { DashboardData } from "@dragonworks/ngx-dashboard";
|
|
36
35
|
|
|
37
36
|
@Component({
|
|
38
|
-
selector:
|
|
37
|
+
selector: "app-dashboard-page",
|
|
39
38
|
standalone: true,
|
|
40
39
|
imports: [DashboardComponent],
|
|
41
|
-
template: `
|
|
42
|
-
<ngx-dashboard
|
|
43
|
-
[dashboardData]="dashboard"
|
|
44
|
-
[editMode]="true"
|
|
45
|
-
(dashboardChange)="onDashboardChange($event)">
|
|
46
|
-
</ngx-dashboard>
|
|
47
|
-
`
|
|
40
|
+
template: ` <ngx-dashboard [dashboardData]="dashboard" [editMode]="true" (dashboardChange)="onDashboardChange($event)"> </ngx-dashboard> `,
|
|
48
41
|
})
|
|
49
42
|
export class DashboardPageComponent {
|
|
50
|
-
dashboard = createEmptyDashboard(
|
|
43
|
+
dashboard = createEmptyDashboard("my-dashboard", 12, 8);
|
|
51
44
|
|
|
52
45
|
onDashboardChange(data: DashboardData) {
|
|
53
46
|
// Handle dashboard updates
|
|
54
|
-
console.log(
|
|
47
|
+
console.log("Dashboard changed:", data);
|
|
55
48
|
}
|
|
56
49
|
}
|
|
57
50
|
```
|
|
@@ -61,11 +54,11 @@ export class DashboardPageComponent {
|
|
|
61
54
|
Register custom widgets with the `DashboardService`:
|
|
62
55
|
|
|
63
56
|
```typescript
|
|
64
|
-
import { Injectable } from
|
|
65
|
-
import { DashboardService } from
|
|
66
|
-
import { MyCustomWidget } from
|
|
57
|
+
import { Injectable } from "@angular/core";
|
|
58
|
+
import { DashboardService } from "@dragonworks/ngx-dashboard";
|
|
59
|
+
import { MyCustomWidget } from "./widgets/my-custom-widget.component";
|
|
67
60
|
|
|
68
|
-
@Injectable({ providedIn:
|
|
61
|
+
@Injectable({ providedIn: "root" })
|
|
69
62
|
export class WidgetSetupService {
|
|
70
63
|
constructor(private dashboardService: DashboardService) {
|
|
71
64
|
this.registerWidgets();
|
|
@@ -97,23 +90,6 @@ export class WidgetSetupService {
|
|
|
97
90
|
- `CellData` - Individual cell/widget data
|
|
98
91
|
- `WidgetMetadata` - Widget type definition
|
|
99
92
|
|
|
100
|
-
## Advanced Features
|
|
101
|
-
|
|
102
|
-
### Custom Settings Dialog Provider
|
|
103
|
-
|
|
104
|
-
```typescript
|
|
105
|
-
import { CELL_SETTINGS_DIALOG_PROVIDER, DefaultCellSettingsDialogProvider } from '@dragonworks/ngx-dashboard';
|
|
106
|
-
|
|
107
|
-
@Component({
|
|
108
|
-
providers: [
|
|
109
|
-
{
|
|
110
|
-
provide: CELL_SETTINGS_DIALOG_PROVIDER,
|
|
111
|
-
useClass: DefaultCellSettingsDialogProvider
|
|
112
|
-
}
|
|
113
|
-
]
|
|
114
|
-
})
|
|
115
|
-
```
|
|
116
|
-
|
|
117
93
|
### Widget State Management
|
|
118
94
|
|
|
119
95
|
Widgets can implement optional lifecycle methods:
|
|
@@ -126,14 +102,6 @@ export interface DashboardWidgetComponent {
|
|
|
126
102
|
}
|
|
127
103
|
```
|
|
128
104
|
|
|
129
|
-
## Architecture Highlights
|
|
130
|
-
|
|
131
|
-
- **NgRx Signals Store**: Feature-based state management with normalized widget storage
|
|
132
|
-
- **Signal-based Architecture**: Modern Angular signals throughout
|
|
133
|
-
- **Material Design 3**: Complete MD3 compliance with design tokens
|
|
134
|
-
- **Performance First**: OnPush change detection, computed signals, memoization
|
|
135
|
-
- **TypeScript Strict Mode**: Full type safety (no `any` types in public API)
|
|
136
|
-
|
|
137
105
|
## Documentation
|
|
138
106
|
|
|
139
107
|
See the [main repository](https://github.com/TobyBackstrom/ngx-dashboard) for full documentation, examples, and demo application.
|
|
@@ -2246,5 +2246,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
2246
2246
|
* Generated bundle index. Do not edit.
|
|
2247
2247
|
*/
|
|
2248
2248
|
|
|
2249
|
-
export { CELL_SETTINGS_DIALOG_PROVIDER,
|
|
2249
|
+
export { CELL_SETTINGS_DIALOG_PROVIDER, CellSettingsDialogProvider, DashboardComponent, DashboardService, DefaultCellSettingsDialogProvider, WidgetListComponent, createDefaultDashboard, createEmptyDashboard };
|
|
2250
2250
|
//# sourceMappingURL=dragonworks-ngx-dashboard.mjs.map
|