@altara/core

React components for real-time telemetry dashboards. Canvas-rendered time-series charts, gauges, attitude indicators, GPS maps, signal panels, and event logs for robotics, aerospace, autonomous-vehicle, and industrial-IoT applications — where generic charting libraries fall short.

Install

npm install @altara/core

Quick start

import '@altara/core/styles.css';
import { AltaraProvider, TimeSeries, Gauge } from '@altara/core';

export function Dashboard() {
  return (
    <AltaraProvider theme="dark">
      <TimeSeries mockMode height={240} />
      <Gauge mockMode min={0} max={100} label="Battery" unit="%" />
    </AltaraProvider>
  );
}

A working dashboard with zero configuration — mockMode plumbs realistic synthetic data into every component until you swap in a real dataSource.

What's in the package

• Components — TimeSeries, Gauge, Attitude, SignalPanel, LiveMap, EventLog, ConnectionBar, MultiAxisPlot, DashboardLayout
• Hooks — useWebSocket, useTelemetry, useRingBuffer
• Adapters — createMqttAdapter, createWorkerDataSource, createMockDataSource, mergeChannels
• Mock generators — sineWave, randomWalk, stepFunction, custom
• Design tokens — single CSS file (@altara/core/styles.css), dark + light themes via CSS custom properties

Driving multi-input components — mergeChannels

mergeChannels(sources) unions several single-value data sources into one channel-tagged source: each key becomes the channel on that source's samples, so a multi-input component (like PrimaryFlightDisplay from @altara/aerospace, which routes by roll / pitch / heading / airspeed / altitude) can consume a single dataSource. getHistory() merges children in timestamp order, status is worst-of, and destroy() tears down every child.

import { mergeChannels } from '@altara/core';

const source = mergeChannels({
  roll: rollAdapter,   // samples tagged channel: 'roll'
  pitch: pitchAdapter, // samples tagged channel: 'pitch'
});
// <PrimaryFlightDisplay dataSource={source} />

Mock profiles

Gauge takes an optional mockProfile?: 'sine' | 'ramp' (default 'sine') that's only relevant when mockMode is on: 'sine' sweeps the needle back and forth, while 'ramp' drains monotonically from max → min then resets — a believable draining-battery demo.

LiveMap's mockMode now rotates the marker's nose along its orbit (great-circle bearing along the simulated path); when you pass a controlled position, your heading prop still wins.

Showcase

Why Altara

Most React charting libraries render via SVG or React DOM — at 100 Hz+ sensor data rates that causes visible jank. Altara writes directly to Canvas via requestAnimationFrame and keeps the hot path completely out of React. A RingBuffer (Float64Array) holds samples; the rAF loop reads from the buffer and paints. React state only tracks UI concerns like connection status.

It also ships the domain-specific components engineers actually need — attitude indicators, live GPS maps, threshold-aware gauges — and a typed rosbridge adapter (in @altara/ros) so a one-line import gets you live ROS2 data on screen.

Bundle size

Under 30 KB gzipped. Optional peer deps (leaflet, react-leaflet, react-grid-layout, mqtt, three) are dynamically imported and only paid for if you use the components that need them.

Documentation

• 📚 Storybook — every component, every prop, with live demos. Plus Guides (Getting started, Connecting ROS2 / MQTT, Mock data, Theming, Performance), Cookbook dashboards, and Comparisons vs. Grafana / Foxglove.
• 🛰️ Live demo dashboard — multi-tab showcase combining core, aerospace, av, and industrial, all driven by mock data.

Or run them locally:

git clone https://github.com/JayaSaiKishanChapparam/altara.git
cd altara
pnpm install
pnpm --filter @altara/storybook storybook   # http://localhost:6006
pnpm --filter @altara/demo dev              # http://localhost:5173

Sibling packages

| Package | What it does | | --- | --- | | @altara/aerospace | Flight instruments — PFD, HSI, altimeter, airspeed, VSI, engine cluster, TCAS, TAWS, FMA, fuel gauge, radio altimeter. | | @altara/ros | ROS2 / rosbridge adapter + typed factories for common sensor_msgs/* message types. | | @altara/mqtt | MQTT-over-WebSocket adapter (re-exports createMqttAdapter from this package). |

Links

• Storybook (live) · Demo dashboard (live)
• GitHub repository
• Issue tracker
• Discussions

License

MIT — see LICENSE.