JSPM

@altara/core

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 43
  • Score
    100M100P100Q79847F
  • License MIT

React components for real-time telemetry dashboards — canvas-rendered time-series, gauges, attitude indicators, GPS maps, signal panels, and event logs for robotics, aerospace, autonomous vehicles, and industrial IoT.

Package Exports

  • @altara/core
  • @altara/core/styles.css

Readme

@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.

npm version bundle size types included license

Altara — real-time telemetry at 60fps

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

TimeSeries — 60fps canvas chart
TimeSeries — 60fps canvas chart 		Attitude indicator
Attitude — artificial horizon
Analog gauge
Gauge — threshold-zone arcs 		Signal panel
SignalPanel — live signals + status dots

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).

License

MIT — see LICENSE.