@dragonworks/ngx-dashboard 20.0.0 → 20.0.1
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 +38 -52
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,63 +1,49 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @dragonworks/ngx-dashboard
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Core Angular library for building drag-and-drop grid dashboards with resizable cells and customizable widgets.
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
ng generate component component-name
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
5
|
+
## Installation
|
|
14
6
|
|
|
15
7
|
```bash
|
|
16
|
-
|
|
8
|
+
npm install @dragonworks/ngx-dashboard
|
|
17
9
|
```
|
|
18
10
|
|
|
19
|
-
##
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
- Grid-based drag and drop with collision detection
|
|
14
|
+
- Resizable cells with boundary constraints
|
|
15
|
+
- Editor and viewer modes
|
|
16
|
+
- NgRx Signals state management
|
|
17
|
+
- Context menu with Material Design
|
|
18
|
+
- Extensible widget system
|
|
19
|
+
- 100% OnPush change detection
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { DashboardComponent, createEmptyDashboard } from '@dragonworks/ngx-dashboard';
|
|
25
|
+
import { provideNgxDashboard } from '@dragonworks/ngx-dashboard';
|
|
26
|
+
|
|
27
|
+
@Component({
|
|
28
|
+
template: `
|
|
29
|
+
<ngx-dashboard
|
|
30
|
+
[dashboardData]="dashboard"
|
|
31
|
+
[editMode]="true"
|
|
32
|
+
(dashboardChange)="onDashboardChange($event)">
|
|
33
|
+
</ngx-dashboard>
|
|
34
|
+
`,
|
|
35
|
+
imports: [DashboardComponent],
|
|
36
|
+
providers: [provideNgxDashboard()]
|
|
37
|
+
})
|
|
38
|
+
export class MyComponent {
|
|
39
|
+
dashboard = createEmptyDashboard('my-dashboard', 12, 8);
|
|
40
|
+
}
|
|
49
41
|
```
|
|
50
42
|
|
|
51
|
-
##
|
|
52
|
-
|
|
53
|
-
For end-to-end (e2e) testing, run:
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
ng e2e
|
|
57
|
-
```
|
|
43
|
+
## Documentation
|
|
58
44
|
|
|
59
|
-
|
|
45
|
+
See the [main repository](https://github.com/dragonworks/ngx-dashboard) for full documentation and examples.
|
|
60
46
|
|
|
61
|
-
##
|
|
47
|
+
## License
|
|
62
48
|
|
|
63
|
-
|
|
49
|
+
MIT
|