@memberjunction/ng-dashboard-viewer 4.0.0 → 4.2.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.
Files changed (2) hide show
  1. package/README.md +165 -67
  2. package/package.json +9 -9
package/README.md CHANGED
@@ -1,104 +1,202 @@
1
1
  # @memberjunction/ng-dashboard-viewer
2
2
 
3
- Angular component for rendering configurable dashboards with draggable/resizable panels using Golden Layout 2.
3
+ A pluggable Angular dashboard viewer for rendering and editing MemberJunction dashboards with configurable panels, multiple part types (Web URLs, Entity Views, Queries, Artifacts), and a dynamic plugin architecture.
4
+
5
+ ## Overview
6
+
7
+ The `@memberjunction/ng-dashboard-viewer` package provides a complete dashboard rendering and editing system. Dashboards consist of panels containing parts, where each part type has a corresponding runtime renderer and configuration panel -- both loaded dynamically via MemberJunction's `ClassFactory` plugin system. The package includes a dashboard browser for navigating available dashboards, breadcrumb navigation, and built-in support for Web URL, Entity View, Query, and Artifact part types.
8
+
9
+ ```mermaid
10
+ graph TD
11
+ A[DashboardViewerModule] --> B[Core Components]
12
+ A --> C[Config Panels]
13
+ A --> D[Runtime Parts]
14
+ A --> E[Dialogs]
15
+
16
+ B --> B1[DashboardViewerComponent]
17
+ B --> B2[DashboardBrowserComponent]
18
+ B --> B3[DashboardBreadcrumbComponent]
19
+
20
+ C --> C1["WebURLConfigPanel
21
+ (@RegisterClass)"]
22
+ C --> C2["ViewConfigPanel
23
+ (@RegisterClass)"]
24
+ C --> C3["QueryConfigPanel
25
+ (@RegisterClass)"]
26
+ C --> C4["ArtifactConfigPanel
27
+ (@RegisterClass)"]
28
+
29
+ D --> D1["WebURLPartComponent
30
+ (@RegisterClass)"]
31
+ D --> D2["ViewPartComponent
32
+ (@RegisterClass)"]
33
+ D --> D3["QueryPartComponent
34
+ (@RegisterClass)"]
35
+ D --> D4["ArtifactPartComponent
36
+ (@RegisterClass)"]
37
+
38
+ E --> E1[AddPanelDialogComponent]
39
+ E --> E2[EditPartDialogComponent]
40
+ E --> E3[ConfirmDialogComponent]
41
+
42
+ style A fill:#2d6a9f,stroke:#1a4971,color:#fff
43
+ style B fill:#7c5295,stroke:#563a6b,color:#fff
44
+ style C fill:#2d8659,stroke:#1a5c3a,color:#fff
45
+ style D fill:#b8762f,stroke:#8a5722,color:#fff
46
+ style E fill:#7c5295,stroke:#563a6b,color:#fff
47
+ ```
4
48
 
5
- ## Architecture
49
+ ## Installation
6
50
 
7
- This package uses a **single source of truth** design where Golden Layout's native `ResolvedLayoutConfig` stores both layout geometry AND panel configuration data.
51
+ ```bash
52
+ npm install @memberjunction/ng-dashboard-viewer
53
+ ```
8
54
 
9
- ### Key Design Principles
55
+ ## Usage
10
56
 
11
- 1. **No Redundancy**: Panel data is stored ONLY in Golden Layout's `componentState` within the layout tree. There is no separate `panels[]` array to keep in sync.
57
+ ### Import the Module
12
58
 
13
- 2. **Native GL Format**: We store Golden Layout's `ResolvedLayoutConfig` directly without conversion. This preserves all layout properties (widths, heights, positions, stacks) losslessly.
59
+ ```typescript
60
+ import { DashboardViewerModule } from '@memberjunction/ng-dashboard-viewer';
14
61
 
15
- 3. **Layout IS the Data**: The layout configuration contains everything needed to restore a dashboard - both the visual arrangement and the panel configurations.
62
+ @NgModule({
63
+ imports: [DashboardViewerModule]
64
+ })
65
+ export class YourModule { }
66
+ ```
16
67
 
17
- ## Data Model
68
+ ### Dashboard Viewer
18
69
 
19
- ```typescript
20
- interface DashboardConfig {
21
- /** Golden Layout configuration - THE SINGLE SOURCE OF TRUTH */
22
- layout: ResolvedLayoutConfig | null;
23
- /** Dashboard-level settings (not per-panel) */
24
- settings: DashboardSettings;
25
- }
70
+ Render a full dashboard by ID:
26
71
 
27
- interface DashboardPanel {
28
- id: string;
29
- title: string;
30
- icon?: string;
31
- partTypeId: string;
32
- config: PanelConfig;
33
- state?: Record<string, unknown>;
34
- }
72
+ ```html
73
+ <mj-dashboard-viewer
74
+ [dashboardId]="selectedDashboardId"
75
+ [editMode]="isEditing"
76
+ (dashboardSaved)="onDashboardSaved($event)"
77
+ (panelClicked)="onPanelClicked($event)">
78
+ </mj-dashboard-viewer>
35
79
  ```
36
80
 
37
- Panel data is embedded in each component's `componentState` within the Golden Layout tree. To extract panels, use the utility function:
81
+ ### Dashboard Browser
38
82
 
39
- ```typescript
40
- import { extractPanelsFromLayout, findPanelInLayout } from '@memberjunction/ng-dashboard-viewer';
83
+ Browse available dashboards with category filtering:
41
84
 
42
- const panels = extractPanelsFromLayout(config.layout);
43
- const panel = findPanelInLayout(config.layout, 'panel-id');
85
+ ```html
86
+ <mj-dashboard-browser
87
+ [categoryId]="selectedCategoryId"
88
+ (dashboardSelected)="onDashboardSelected($event)">
89
+ </mj-dashboard-browser>
44
90
  ```
45
91
 
46
- ## Usage
92
+ ### Dashboard Breadcrumb
47
93
 
48
- ### Basic Usage
94
+ Navigation breadcrumb trail:
49
95
 
50
96
  ```html
51
- <mj-dashboard-viewer
52
- [dashboard]="dashboard"
53
- [isEditing]="isEditMode"
54
- (dashboardSaved)="onSaved($event)"
55
- (panelInteraction)="onInteraction($event)">
56
- </mj-dashboard-viewer>
97
+ <mj-dashboard-breadcrumb
98
+ [dashboardId]="currentDashboardId"
99
+ (navigate)="onBreadcrumbNavigate($event)">
100
+ </mj-dashboard-breadcrumb>
57
101
  ```
58
102
 
59
- ### Adding Panels
103
+ ## Architecture
104
+
105
+ ### Plugin System
106
+
107
+ Both config panels and runtime parts are registered with `@RegisterClass` and loaded dynamically via ClassFactory. This allows custom part types to be added without modifying the dashboard viewer itself.
108
+
109
+ #### Adding a Custom Part Type
110
+
111
+ 1. Create a config panel component:
60
112
 
61
113
  ```typescript
62
- @ViewChild(DashboardViewerComponent) viewer: DashboardViewerComponent;
63
-
64
- addPanel() {
65
- this.viewer.addPanel(
66
- 'part-type-id',
67
- { type: 'View', entityName: 'Customers', displayMode: 'grid', ... },
68
- 'Customer List',
69
- 'fa-solid fa-users'
70
- );
114
+ import { RegisterClass } from '@memberjunction/global';
115
+ import { BaseDashboardConfigPanel } from '@memberjunction/ng-dashboard-viewer';
116
+
117
+ @RegisterClass(BaseDashboardConfigPanel, 'CustomChart')
118
+ @Component({
119
+ selector: 'mj-custom-chart-config',
120
+ template: `<!-- chart configuration form -->`
121
+ })
122
+ export class CustomChartConfigComponent extends BaseDashboardConfigPanel {
123
+ // Configuration logic
71
124
  }
72
125
  ```
73
126
 
74
- ## Panel Types
127
+ 2. Create a runtime part component:
75
128
 
76
- - **View**: Entity grid/card/timeline views
77
- - **Query**: Query results with parameters
78
- - **Artifact**: MJ artifact rendering
79
- - **WebURL**: Embedded iframe content
80
- - **Custom**: Custom components via `@RegisterClass`
129
+ ```typescript
130
+ import { RegisterClass } from '@memberjunction/global';
131
+ import { BaseDashboardPart } from '@memberjunction/ng-dashboard-viewer';
132
+
133
+ @RegisterClass(BaseDashboardPart, 'CustomChart')
134
+ @Component({
135
+ selector: 'mj-custom-chart-part',
136
+ template: `<!-- chart rendering -->`
137
+ })
138
+ export class CustomChartPartComponent extends BaseDashboardPart {
139
+ // Rendering logic
140
+ }
141
+ ```
81
142
 
82
- ## Golden Layout Integration
143
+ ### Built-in Part Types
83
144
 
84
- The `GoldenLayoutWrapperService` provides a clean Angular interface to Golden Layout 2.6.0's VirtualLayout API:
145
+ | Part Type | Config Panel | Runtime Part | Description |
146
+ |-----------|-------------|-------------|-------------|
147
+ | Web URL | `WebURLConfigPanelComponent` | `WebURLPartComponent` | Embedded web page via iframe |
148
+ | View | `ViewConfigPanelComponent` | `ViewPartComponent` | MJ Entity View grid/cards |
149
+ | Query | `QueryConfigPanelComponent` | `QueryPartComponent` | MJ Query results display |
150
+ | Artifact | `ArtifactConfigPanelComponent` | `ArtifactPartComponent` | Conversation artifact viewer |
85
151
 
86
- - Initialize with saved layout or empty
87
- - Add/remove panels
88
- - Handle layout change events
89
- - Manage edit mode (drag/drop/resize/close)
152
+ ## Component Reference
90
153
 
91
- Layout is destroyed and recreated when toggling edit mode to ensure proper Golden Layout state.
154
+ ### DashboardViewerComponent
92
155
 
93
- ## Module
156
+ Main viewer component that renders a dashboard's panels and parts.
94
157
 
95
- Import the module to use the dashboard viewer:
158
+ ### DashboardBrowserComponent
96
159
 
97
- ```typescript
98
- import { DashboardViewerModule } from '@memberjunction/ng-dashboard-viewer';
160
+ Grid/list browser for navigating available dashboards with category tree sidebar.
99
161
 
100
- @NgModule({
101
- imports: [DashboardViewerModule]
102
- })
103
- export class MyModule {}
162
+ ### DashboardBreadcrumbComponent
163
+
164
+ Breadcrumb navigation showing the current dashboard path.
165
+
166
+ ### Dialog Components
167
+
168
+ | Component | Description |
169
+ |-----------|-------------|
170
+ | `AddPanelDialogComponent` | Add a new panel to the dashboard |
171
+ | `EditPartDialogComponent` | Edit a part's configuration |
172
+ | `ConfirmDialogComponent` | Generic confirmation dialog |
173
+
174
+ ## Dependencies
175
+
176
+ | Package | Description |
177
+ |---------|-------------|
178
+ | `@memberjunction/core` | Core framework |
179
+ | `@memberjunction/core-entities` | Entity type definitions |
180
+ | `@memberjunction/global` | Global utilities and ClassFactory |
181
+ | `@memberjunction/ng-artifacts` | Artifact viewer components |
182
+ | `@memberjunction/ng-entity-viewer` | Entity data grids |
183
+ | `@memberjunction/ng-query-viewer` | Query result display |
184
+ | `@memberjunction/ng-shared-generic` | Shared generic components |
185
+ | `@memberjunction/ng-trees` | Tree view components |
186
+
187
+ ### Peer Dependencies
188
+
189
+ - `@angular/common` ^21.x
190
+ - `@angular/core` ^21.x
191
+ - `@angular/forms` ^21.x
192
+
193
+ ## Build
194
+
195
+ ```bash
196
+ cd packages/Angular/Generic/dashboard-viewer
197
+ npm run build
104
198
  ```
199
+
200
+ ## License
201
+
202
+ ISC
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-dashboard-viewer",
3
- "version": "4.0.0",
3
+ "version": "4.2.0",
4
4
  "description": "MemberJunction: Angular components for metadata-driven dashboards with Golden Layout panels, supporting views, queries, artifacts, and custom content",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -35,14 +35,14 @@
35
35
  "golden-layout": "^2.6.0"
36
36
  },
37
37
  "dependencies": {
38
- "@memberjunction/core-entities": "4.0.0",
39
- "@memberjunction/global": "4.0.0",
40
- "@memberjunction/core": "4.0.0",
41
- "@memberjunction/ng-shared-generic": "4.0.0",
42
- "@memberjunction/ng-entity-viewer": "4.0.0",
43
- "@memberjunction/ng-artifacts": "4.0.0",
44
- "@memberjunction/ng-query-viewer": "4.0.0",
45
- "@memberjunction/ng-trees": "4.0.0",
38
+ "@memberjunction/core-entities": "4.2.0",
39
+ "@memberjunction/global": "4.2.0",
40
+ "@memberjunction/core": "4.2.0",
41
+ "@memberjunction/ng-shared-generic": "4.2.0",
42
+ "@memberjunction/ng-entity-viewer": "4.2.0",
43
+ "@memberjunction/ng-artifacts": "4.2.0",
44
+ "@memberjunction/ng-query-viewer": "4.2.0",
45
+ "@memberjunction/ng-trees": "4.2.0",
46
46
  "rxjs": "^7.8.2",
47
47
  "tslib": "^2.8.1"
48
48
  },