Charting and Dataflow

useLegend

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

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

Creates a signal local to this React component.

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

useSignal

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

Builds a new DataSource from a message ID.

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