@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

Installation

npm install @memberjunction/ng-dashboard-viewer

Usage

Import the Module

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

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

Dashboard Viewer

Render a full dashboard by ID:

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

Dashboard Browser

Browse available dashboards with category filtering:

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

Dashboard Breadcrumb

Navigation breadcrumb trail:

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

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
}

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
}

Built-in Part Types

| Part Type | Config Panel | Runtime Part | Description | |-----------|-------------|-------------|-------------| | Web URL | WebURLConfigPanelComponent | WebURLPartComponent | Embedded web page via iframe | | View | ViewConfigPanelComponent | ViewPartComponent | MJ Entity View grid/cards | | Query | QueryConfigPanelComponent | QueryPartComponent | MJ Query results display | | Artifact | ArtifactConfigPanelComponent | ArtifactPartComponent | Conversation artifact viewer |

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

| Component | Description | |-----------|-------------| | AddPanelDialogComponent | Add a new panel to the dashboard | | EditPartDialogComponent | Edit a part's configuration | | ConfirmDialogComponent | Generic confirmation dialog |

Dependencies

| Package | Description | |---------|-------------| | @memberjunction/core | Core framework | | @memberjunction/core-entities | Entity type definitions | | @memberjunction/global | Global utilities and ClassFactory | | @memberjunction/ng-artifacts | Artifact viewer components | | @memberjunction/ng-entity-viewer | Entity data grids | | @memberjunction/ng-query-viewer | Query result display | | @memberjunction/ng-shared-generic | Shared generic components | | @memberjunction/ng-trees | Tree view components |

Peer Dependencies

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

Build

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

License

ISC