@rm-graph/react

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

Installation

``bash
npm install @rm-graph/react
`

> scichart is automatically installed as a dependency!

Usage

`tsx
import { Column3DChart, PRPDChart, TrendsChart } from '@rm-graph/react';

function App() {
const data = [[45, 1500, 1], [90, 2200, 2], [180, 1800, 3]];

return (
id="my-chart"
data={data}
height={400}
options={{
theme: 'dark',
xAxisTitle: 'Phase Angle (°)',
yAxisTitle: 'Amplitude (mVp)',
zAxisTitle: 'Cycle',
}}
onReady={(chart) => console.log('Chart ready!')}
/>
);
}
`

Components

- - 3D column charts for phase-resolved data
- - Phase Resolved Partial Discharge heatmap
- - Multi-series time trends

---

Column3DChart

The Column3DChart component 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

`tsx
import { Column3DChart } from '@rm-graph/react';
import type { Column3DChartStats } from '@rm-graph/react';

// Type for 3D column data point [x, y, z]
type Column3DDataPoint = [number, number, number];

function App() {
// Data format: [phaseAngle, amplitude, cycle][]
const 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
];

return (
id="my-3d-chart"
title="3D Column Chart"
data={column3dData}
height={400}
showToolbar={true}
showStats={true}
showMaximizeIcon={true}
unitOfMeasurement={1}
timestamp={Date.now()}
onStatsChange={(stats: Column3DChartStats) =>
console.log('Pulse Count:', stats.pulseCount, 'Peak:', stats.peakValue)
}
options={{
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,
enableCameraClamping: true,
}}
/>
);
}
`

$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

| Prop | 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 | number \| string | 400 | Chart height |
| width | number \| string | '100%' | Chart width |
| 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 |
| className | string | - | Additional CSS class name |
| style | CSSProperties | - | Additional inline styles |

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| 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 |
| enableCameraClamping | boolean | true | Restrict camera rotation to prevent disorienting views |

$3

| Prop | Type | Description |
|------|------|-------------|
| onMaximizeToggle | () => void | Called when maximize is toggled |
| onStatsChange | (stats: Column3DChartStats) => void | Called when statistics update |
| onScreenshot | () => void | Called 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 PRPDChart component displays Phase Resolved Partial Discharge data as an interactive heatmap.

$3

`tsx
import { PRPDChart } from '@rm-graph/react';
import type { PRPDDataPoint } from '@rm-graph/react';

function App() {
// Data format: [phaseAngle, amplitude, count][]
const 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
// ... more data points
];

return (
id="my-prpd-chart"
title="PRPD Analysis"
data={prpdData}
height={400}
scalingFactor={1}
unitOfMeasurement="mVp"
maxPeak={5000}
minPeak={-5000}
maxPhaseAngle={360}
showSineWave={true}
showColorPalette={true}
showMaximizeIcon={true}
colorMin={0}
colorMax={100}
onStatsChange={(stats) => console.log('Stats:', stats)}
/>
);
}
`

$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

| Prop | 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 | number \| string | 400 | Chart height |
| width | number \| 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 |
| showToolbar | boolean | true | Show toolbar buttons |
| 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

| Prop | Type | Description |
|------|------|-------------|
| onReady | (chart) => void | Called when chart is initialized |
| onStatsChange | (stats) => void | Called when statistics update |
| onResolutionChange | (label) => void | Called when resolution mode changes |
| onWindowingClick | () => void | Called when windowing button clicked |
| onYAxisRangeChange | (range) => void | Called when Y-range changes |
| onMaximizeToggle | () => void | Called 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 TrendsChart component displays multiple time series with interactive features.

$3

`tsx
import { TrendsChart } from '@rm-graph/react';
import type { TrendLineData } from '@rm-graph/react';

function App() {
const 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,
},
];

return (
id="my-trends-chart"
data={trendsData}
height={500}
showLegend={true}
showResetButton={true}
showPointMarkerToggle={true}
showOverview={true}
showScreenshotButton={true}
/>
);
}
`

$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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| id | string | auto-generated | Unique ID for the chart |
| data | TrendLineData[] | [] | Array of trend line data |
| height | number \| string | 400 | 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 |
| showScreenshotButton | boolean | true | Show screenshot button |
| onScreenshot | () => void | - | Callback when screenshot is taken |

$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

---

Hooks

`tsx
import { useChart } from '@rm-graph/react';
import { createColumn3DChart } from '@rm-graph/core';

function CustomChart() {
const { containerRef, chart, isLoading } = useChart({
config: { data: [...] },
createChart: createColumn3DChart,
});

return

;
}
``

See main README for full documentation.

Show more