Charting and Dataflow


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;


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;


Creates a signal local to this React component.

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


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)


Builds a new DataSource from a message ID.

import { useMessageDataSource } from '@electricui/core-timeseries'
const spectralDataSource = useMessageDataSource('spectra')
const tempeDataSource = useMessageDataSource<number>('spectra')