Charting and Dataflow


useLegend(sources: T) => KeyedAnnotatedLegendData<T>

Used to provide the key:string array which defines Legend components and interactions.

Provide an array of LegendDefiniton entries

export interface LegendDefinition {
name: string;
color: string;

during init like so

import { useLegend } from '@electricui/components-desktop-charts'
import { Colors } from '@blueprintjs/core'
const legendData = useLegend({
dataPrimary: {
name: 'Front Sensor',
color: Colors.GOLD1,
dataSecondary: {
name: 'Rear Sensor',
color: Colors.BLUE5,

Under the hood, this data is made available to downstream consumers (Charts, Legend) as AnnotatedLegendData, which powers hover/toggle interactions.

// Provided for REFERENCE ONLY,
// use hooks or components to interact with this data
interface AnnotatedLegendData extends LegendDefinition {
visible: Signal<boolean>;
opacity: Signal<number>;
setVisible: (visible: boolean) => void;
setHovered: (hovered: boolean) => void;


useMouseSignal() => [mouseSignal: Signal<MouseData>, captureRef: MouseCaptureRef]

Returns a Signal containing MouseData, and a reference.

import { useMouseSignal } from '@electricui/components-desktop-charts'
const [mouseSignal, captureRef] = useMouseSignal()

MouseData has the shape:

interface MouseData {
hovered: boolean;
x: number;
y: number;
chartAspectRatio: number;
id?: string | number;


useSignalProvider(initialValue: T) => [signal: Signal<T>, setSignal: function]

Creates a signal local to this React component.

import { useSignalProvider } from '@electricui/signals';
const [smoothing, setSmoothing] = useSignalProvider(42)


useSignal(signal: Signal<T>) => T

Reads the value for a given signal synchronously, and subscribes to updates which trigger React component re-renders on change.

import { useSignal } from '@electricui/signals';
const someData = useSignal(signalFromParent)


useMessageDataSource(messageID: M, deviceIDOverride: DeviceID) => MessageDataSource<unknown extends T ? ElectricUIDeveloperState[M] : T, M>

Builds a new DataSource from a message ID.