@memberjunction/ng-dashboard-viewer

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.

Overview

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.

graph TD
    A[DashboardViewerModule] --> B[Core Components]
    A --> C[Config Panels]
    A --> D[Runtime Parts]
    A --> E[Dialogs]

    B --> B1[DashboardViewerComponent]
    B --> B2[DashboardBrowserComponent]
    B --> B3[DashboardBreadcrumbComponent]

    C --> C1["WebURLConfigPanel
    (@RegisterClass)"]
    C --> C2["ViewConfigPanel
    (@RegisterClass)"]
    C --> C3["QueryConfigPanel
    (@RegisterClass)"]
    C --> C4["ArtifactConfigPanel
    (@RegisterClass)"]

    D --> D1["WebURLPartComponent
    (@RegisterClass)"]
    D --> D2["ViewPartComponent
    (@RegisterClass)"]
    D --> D3["QueryPartComponent
    (@RegisterClass)"]
    D --> D4["ArtifactPartComponent
    (@RegisterClass)"]

    E --> E1[AddPanelDialogComponent]
    E --> E2[EditPartDialogComponent]
    E --> E3[ConfirmDialogComponent]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
    style D fill:#b8762f,stroke:#8a5722,color:#fff
    style E fill:#7c5295,stroke:#563a6b,color:#fff
Copy

Installation

npm install @memberjunction/ng-dashboard-viewer
Copy

Usage

Import the Module

import { DashboardViewerModule } from '@memberjunction/ng-dashboard-viewer';

@NgModule({
  imports: [DashboardViewerModule]
})
export class YourModule { }
Copy

Dashboard Viewer

Render a full dashboard by ID:

<mj-dashboard-viewer
  [dashboardId]="selectedDashboardId"
  [editMode]="isEditing"
  (dashboardSaved)="onDashboardSaved($event)"
  (panelClicked)="onPanelClicked($event)">
</mj-dashboard-viewer>
Copy

Dashboard Browser

Browse available dashboards with category filtering:

<mj-dashboard-browser
  [categoryId]="selectedCategoryId"
  (dashboardSelected)="onDashboardSelected($event)">
</mj-dashboard-browser>
Copy

Dashboard Breadcrumb

Navigation breadcrumb trail:

<mj-dashboard-breadcrumb
  [dashboardId]="currentDashboardId"
  (navigate)="onBreadcrumbNavigate($event)">
</mj-dashboard-breadcrumb>
Copy

Architecture

Plugin System

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.

Adding a Custom Part Type

1. Create a config panel component:

import { RegisterClass } from '@memberjunction/global';
import { BaseDashboardConfigPanel } from '@memberjunction/ng-dashboard-viewer';

@RegisterClass(BaseDashboardConfigPanel, 'CustomChart')
@Component({
  selector: 'mj-custom-chart-config',
  template: `<!-- chart configuration form -->`
})
export class CustomChartConfigComponent extends BaseDashboardConfigPanel {
  // Configuration logic
}
Copy

2. Create a runtime part component:

import { RegisterClass } from '@memberjunction/global';
import { BaseDashboardPart } from '@memberjunction/ng-dashboard-viewer';

@RegisterClass(BaseDashboardPart, 'CustomChart')
@Component({
  selector: 'mj-custom-chart-part',
  template: `<!-- chart rendering -->`
})
export class CustomChartPartComponent extends BaseDashboardPart {
  // Rendering logic
}
Copy

Built-in Part Types

Component Reference

DashboardViewerComponent

Main viewer component that renders a dashboard's panels and parts.

DashboardBrowserComponent

Grid/list browser for navigating available dashboards with category tree sidebar.

DashboardBreadcrumbComponent

Breadcrumb navigation showing the current dashboard path.

Dialog Components

Dependencies

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x

Build

cd packages/Angular/Generic/dashboard-viewer
npm run build
Copy

License

ISC