@rm-graph/angular

RM-Graphs Angular - Angular components for RM-Graphs charting library.

Installation

``bash
npm install @rm-graph/angular

or just the core for direct usage

npm install @rm-graph/core
`

> scichart is automatically installed as a dependency!

Usage Options

$3

The most reliable approach is to use the core library directly in your Angular components:

`typescript
import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import {
Column3DChart,
createColumn3DChart,
} from '@rm-graph/core';

@Component({
selector: 'app-chart',
standalone: true,
template:
})
export class ChartComponent implements AfterViewInit, OnDestroy {
@ViewChild('chartContainer') chartRef!: ElementRef;
private chart: Column3DChart | null = null;

chartData = [[45, 1500, 1], [90, 2200, 2], [180, 1800, 3]];

async ngAfterViewInit(): Promise {
this.chart = await createColumn3DChart(this.chartRef.nativeElement, {
theme: 'dark',
data: this.chartData,
xAxisTitle: 'Phase Angle (°)',
yAxisTitle: 'Amplitude (mVp)',
zAxisTitle: 'Cycle',
});
}

ngOnDestroy(): void {
this.chart?.destroy();
}

// Update data dynamically
updateData(newData: number[][]): void {
this.chart?.setData(newData);
}

// Change theme
setTheme(theme: string): void {
this.chart?.setOptions({ theme });
}
}
`

$3

Import the pre-built Angular components:

`typescript
import { Component } from '@angular/core';
import { Column3DChartComponent, PRPDChartComponent, TrendsChartComponent } from '@rm-graph/angular';

@Component({
selector: 'app-dashboard',
standalone: true,
imports: [Column3DChartComponent, PRPDChartComponent, TrendsChartComponent],
template:
[data]="chartData"
height="400px"
[xAxisTitle]="'Phase Angle (°)'"
[yAxisTitle]="'Amplitude (mVp)'"
[zAxisTitle]="'Cycle'"
[showToolbar]="true"
[showStats]="true"
/>

})
export class DashboardComponent {
chartData = [[45, 1500, 1], [90, 2200, 2], [180, 1800, 3]];
}
`

Components

$3

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| data | number[][] | [] | Chart data as [x, y, z] tuples |
| width | string | '100%' | Chart width |
| height | string | '400px' | Chart height |
| theme | string \| ThemeConfig | - | Theme |
| xAxisTitle | string | - | X-axis title |
| yAxisTitle | string | - | Y-axis title |
| zAxisTitle | string | - | Z-axis title |

| Output | Type | Description |
|--------|------|-------------|
| ready | EventEmitter | Emitted when chart is ready |
| chartError | EventEmitter | Emitted on error |

Chart Types Available from Core

- createColumn3DChart - 3D column charts for phase-resolved data
- createPRPDChart - Phase Resolved Partial Discharge heatmaps

---

Column3DChart

The Column3DChartComponent displays 3D column/bar data with interactive camera controls, sine wave overlay, and camera presets. Ideal for visualizing Phase Resolved Partial Discharge data in 3D.

$3

`typescript
import { Component } from '@angular/core';
import { Column3DChartComponent } from '@rm-graph/angular';
import type { Column3DDataPoint, Column3DChartStats } from '@rm-graph/core';

@Component({
selector: 'app-dashboard',
standalone: true,
imports: [Column3DChartComponent],
template:
id="my-3d-chart"
title="3D Column Chart"
[data]="column3dData"
height="400px"
[xAxisTitle]="'Phase Angle (°)'"
[yAxisTitle]="'Amplitude (mVp)'"
[zAxisTitle]="'Cycle'"
[xRange]="{ min: 0, max: 360 }"
[yRange]="{ min: 0, max: 5000 }"
[zRange]="{ min: 0, max: 50 }"
[barFill]="'#52aaf2'"
[barOpacity]="0.95"
[barWidthX]="8"
[barWidthZ]="8"
[cameraPosition]="{ x: -250, y: 450, z: 280 }"
[showSineWave]="true"
[showToolbar]="true"
[showStats]="true"
[showMaximizeIcon]="true"
[isMaximized]="false"
[unitOfMeasurement]="1"
[timestamp]="timestamp"
(maximizeToggle)="onMaximize()"
(statsChange)="onStatsChange($event)"
/>

})
export class DashboardComponent {
timestamp = Date.now();

// Data format: [phaseAngle, amplitude, cycle][]
column3dData: Column3DDataPoint[] = [
[45, 1500, 1], // 45° phase, 1500mV amplitude, cycle 1
[90, 2200, 2], // 90° phase, 2200mV amplitude, cycle 2
[180, 1800, 3], // 180° phase, 1800mV amplitude, cycle 3
[270, 2500, 4], // 270° phase, 2500mV amplitude, cycle 4
];

onMaximize() {
console.log('Maximize toggled');
}

onStatsChange(stats: Column3DChartStats) {
console.log('Pulse Count:', stats.pulseCount, 'Peak:', stats.peakValue);
}
}
`

$3

`typescript
type Column3DDataPoint = [number, number, number];
// [phaseAngle, amplitude, cycle]
`

| Index | Type | Description |
|-------|------|-------------|
| 0 | number | Phase angle in degrees (X-axis) |
| 1 | number | Amplitude value (Y-axis) |
| 2 | number | Cycle number (Z-axis) |

$3

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| id | string | auto-generated | Unique ID for the chart |
| title | string | - | Chart title displayed in header |
| data | Column3DDataPoint[] | [] | Array of [phase, amplitude, cycle] tuples |
| height | string | '400px' | Chart height |
| width | string | '100%' | Chart width |
| xAxisTitle | string | - | X-axis title |
| yAxisTitle | string | - | Y-axis title |
| zAxisTitle | string | - | Z-axis title |
| xRange | { min, max } | - | X-axis visible range |
| yRange | { min, max } | - | Y-axis visible range |
| zRange | { min, max } | - | Z-axis visible range |
| barFill | string | '#52aaf2' | Bar fill color |
| barStroke | string | - | Bar stroke/outline color |
| barOpacity | number | 0.95 | Bar opacity (0-1) |
| barWidthX | number | 8 | Bar width in X direction |
| barWidthZ | number | 8 | Bar width in Z direction |
| cameraPosition | { x, y, z } | { x: -250, y: 450, z: 280 } | Initial camera position |
| cameraTarget | { x, y, z } | { x: 0, y: 0, z: 0 } | Camera look-at target |
| showSineWave | boolean | false | Show sine wave reference line |
| sineWaveCenter | number | - | Sine wave vertical center |
| sineWaveAmplitude | number | - | Sine wave amplitude range |
| showToolbar | boolean | true | Show toolbar with camera presets and controls |
| showStats | boolean | true | Show pulse count and peak value |
| showMaximizeIcon | boolean | false | Show maximize/minimize button |
| isMaximized | boolean | false | Current maximized state |
| unitOfMeasurement | number \| string | 'mVp' | Unit label (1=mVp, 2=mVrms, 3=dBm, 4=dB) |
| enableAnimation | boolean | false | Enable animated data playback |
| animationInterval | number | 100 | Animation speed in milliseconds |
| timestamp | number | - | Timestamp for screenshot filename |

$3

| Output | Type | Description |
|--------|------|-------------|
| maximizeToggle | EventEmitter | Emitted when maximize is toggled |
| statsChange | EventEmitter | Emitted when statistics update |
| screenshot | EventEmitter | Emitted when screenshot is taken |

$3

`typescript
interface Column3DChartStats {
pulseCount: number; // Total number of data points
peakValue: number; // Maximum amplitude value
}
`

$3

- 📊 3D Column Visualization - WebGL-powered 3D bar chart using SciChart
- 🎥 Camera Presets - Multiple predefined camera angles (top view, angle view)
- 🔄 Camera Clamping - Restricted rotation to prevent disorienting views
- 〰️ Sine Wave Overlay - Reference waveform on back plane
- 🖱️ Orbit Control - Click and drag to rotate the 3D view
- 🔍 Mouse Wheel Zoom - Zoom in/out with scroll
- 📸 Screenshot - Export chart as PNG image
- 📈 Statistics - Real-time pulse count and peak value display
- 🎬 Animation Mode - Animated data playback support

---

PRPDChart

The PRPDChartComponent displays Phase Resolved Partial Discharge data as an interactive heatmap.

$3

`typescript
import { Component } from '@angular/core';
import { PRPDChartComponent } from '@rm-graph/angular';
import type { PRPDDataPoint, PRPDChartStats } from '@rm-graph/core';

@Component({
selector: 'app-dashboard',
standalone: true,
imports: [PRPDChartComponent],
template:
id="my-prpd-chart"
title="PRPD Analysis"
[data]="prpdData"
height="400px"
[scalingFactor]="1"
unitOfMeasurement="mVp"
[maxPeak]="5000"
[minPeak]="-5000"
[maxPhaseAngle]="360"
[showSineWave]="true"
[showColorPalette]="true"
[showMaximizeIcon]="true"
[colorMin]="0"
[colorMax]="100"
(statsChange)="onStatsChange($event)"
/>

})
export class DashboardComponent {
// Data format: [phaseAngle, amplitude, count][]
prpdData: PRPDDataPoint[] = [
[45, 1500, 10], // 45° phase, 1500mV amplitude, 10 pulses
[90, 2200, 25], // 90° phase, 2200mV amplitude, 25 pulses
[180, -1800, 15], // 180° phase, -1800mV amplitude, 15 pulses
[270, -2500, 30], // 270° phase, -2500mV amplitude, 30 pulses
];

onStatsChange(stats: PRPDChartStats) {
console.log('Peak:', stats.peakValue, 'Total:', stats.totalCount);
}
}
`

$3

`typescript
type PRPDDataPoint = [number, number, number];
// [phaseAngle, amplitude, count]
`

| Index | Type | Description |
|-------|------|-------------|
| 0 | number | Phase angle in degrees (0-360) |
| 1 | number | Amplitude value (positive or negative) |
| 2 | number | Pulse count at this phase/amplitude |

$3

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| id | string | auto-generated | Unique ID for the chart |
| title | string | - | Chart title displayed in header |
| data | PRPDDataPoint[] | [] | Array of [phase, amplitude, count] tuples |
| height | string | '400px' | Chart height |
| width | string | '100%' | Chart width |
| scalingFactor | number | 1 | Multiplier for amplitude values |
| unitOfMeasurement | string | 'mVp' | Unit label for amplitude axis |
| maxPeak | number | 5000 | Maximum amplitude value |
| minPeak | number | -5000 | Minimum amplitude value |
| maxPhaseAngle | number | 360 | Maximum phase angle |
| yAxisRange | number | - | Y-axis visible range |
| showSineWave | boolean | true | Show sine wave overlay |
| showColorPalette | boolean | true | Show color legend bar |
| showMaximizeIcon | boolean | false | Show maximize button |
| isMaximized | boolean | false | Current maximized state |
| colorMin | number | 0 | Minimum color scale value |
| colorMax | number | 100 | Maximum color scale value |
| resolutionLabel | PRPDResolutionLabel | - | Resolution mode config |
| windowingData | PRPDWindowingRegion[] | - | Windowing filter regions |

$3

| Output | Type | Description |
|--------|------|-------------|
| ready | EventEmitter | Emitted when chart is initialized |
| statsChange | EventEmitter | Emitted when statistics update |
| resolutionChange | EventEmitter | Emitted when resolution mode changes |
| windowingClick | EventEmitter | Emitted when windowing button clicked |
| yAxisRangeChange | EventEmitter | Emitted when Y-range changes |
| maximizeToggle | EventEmitter | Emitted when maximize toggled |

$3

- 🎨 Heatmap Visualization - Color-coded pulse density display
- 📊 Color Palette Legend - Visual scale for pulse counts
- 〰️ Sine Wave Overlay - Reference waveform display
- 🔍 Zoom & Pan - Interactive data exploration
- 📏 Y-Range Control - Adjustable amplitude range (100-5000 or custom)
- 🔄 Resolution Modes - UNI/BI and HI/LO toggle options
- 🪟 Windowing Support - Filter specific phase/amplitude regions
- 📸 Screenshot - Export chart as PNG image
- 📈 Statistics - Real-time peak value and total count

---

TrendsChart

The TrendsChartComponent displays multiple time series with interactive features.

$3

`typescript
import { Component } from '@angular/core';
import { TrendsChartComponent, TrendLineData } from '@rm-graph/angular';

@Component({
selector: 'app-dashboard',
standalone: true,
imports: [TrendsChartComponent],
template:
id="my-trends-chart"
[data]="trendsData"
height="500px"
[showLegend]="true"
[showResetButton]="true"
[showPointMarkerToggle]="true"
[showOverview]="true"
/>

})
export class DashboardComponent {
trendsData: TrendLineData[] = [
{
name: 'Channel 1',
values: [150, 145, 160, 155, 148],
timestamps: [1707012000000, 1707012060000, 1707012120000, 1707012180000, 1707012240000],
color: '#3b82f6',
uom: 2,
},
{
name: 'Channel 2',
values: [100, 95, 110, 105, 98],
timestamps: [1707012000000, 1707012060000, 1707012120000, 1707012180000, 1707012240000],
color: '#ef4444',
uom: 2,
},
];
}
`

$3

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| name | string | ✅ | Display name for the series (shown in legend) |
| values | number[] | ✅ | Array of numeric values (Y-axis data points) |
| timestamps | number[] | ✅ | Array of timestamps in milliseconds (X-axis data points) |
| color | string | ✅ | Line color (hex or CSS color, e.g., #3b82f6) |
| uom | number | ❌ | Optional unit of measurement code |

> Note: The values and timestamps arrays must have the same length.

$3

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| id | string | auto-generated | Unique ID for the chart |
| data | TrendLineData[] | [] | Array of trend line data |
| height | string | '400px' | Chart height |
| xAxisTitle | string | "Time (HH:MM)" | X-axis title |
| yAxisTitle | string | Based on chartType | Y-axis title |
| showLegend | boolean | true | Show interactive legend |
| showResetButton | boolean | true | Show reset zoom button |
| showPointMarkerToggle | boolean | true | Show point marker toggle |
| showOverview | boolean | true | Show overview mini-map |

$3

- 📊 Interactive Legend - Click to toggle series visibility
- 🔍 Zoom & Pan - Rubber band zoom, mouse wheel zoom, drag to pan
- 🔄 Reset Zoom - One-click reset to initial view
- 📍 Point Markers - Toggle visibility of data point markers
- 🗺️ Overview Chart - Mini-map for navigation
- 📸 Screenshot - Export chart as PNG with header
- 📅 Custom Date Labels - Formatted as DD/MM/YYYY HH:MM

---

Theming

`typescript
import { getThemeManager } from '@rm-graph/core';

// Built-in themes: 'light', 'dark', 'modern', 'midnight'

// Register custom theme
getThemeManager().registerTheme({
name: 'custom',
backgroundColor: '#1a1a2e',
colorPalette: ['#ff6b6b', '#4ecdc4'],
// ...
});
``

See main README for full documentation.