stream-charts
    Preparing search index...

    Interface Props<CD, D, S>

    A unique identifier for the chart. This is used to identify the chart in the DOM.

    The width of the chart container

    The height of the chart container

    The margin between the edges of the chart container and the axes

    The base/default color of the chart lines. This can be overridden by the Props.svgStyle property.

    The base/default background color. This can be overridden by the Props.svgStyle property.

    Overrides for the SVG style

    Map holding the series name to the series style associated with that series.

    Initial (static) data to plot before subscribing to the ChartData observable.

    Optional conversion function that converts an array of base-series with datum type D to a descendent of a ChartData object

    Regular expression that filters which series to display on the plot. Can be update while streaming

    ChartData RxJS Observable that feeds the chart data to display (i.e. the data stream).

    The time-window (in milliseconds) to buffer the incoming data before updating the chart. This is a lever to reduce the lag between real-time and chart-time when a large amount of data is being sourced by the observable. Smaller time-windows result in smoother scrolling, but more updates, and possibly a larger lag.

    When switching to true from false, subscribes to the seriesObservable. When switching to false from true, unsubscribes from the seriesObservable.

    Callback when the chart subscribes to the ChartData observable

    Callback when the time range changes. This is generally used by plots where the x-axis starts to scroll as the data streams in past the end of the current time

    Callback for updating the current chart time. This is generally used by plots

    interface Props<CD, D, S extends SeriesStyle> {
        asChartData?: (initialData: BaseSeries<D>[]) => CD;
        backgroundColor?: string;
        chartId: number;
        children: Element | Element[];
        color?: string;
        height: number;
        initialData: BaseSeries<D>[];
        margin?: Partial<Margin>;
        onSubscribe?: (subscription: Subscription) => void;
        onUpdateAxesBounds?: (ranges: Map<string, AxisInterval>) => void;
        onUpdateChartTime?: (time: number) => void;
        onUpdateData?: (seriesName: string, data: D[]) => void;
        seriesFilter?: RegExp;
        seriesObservable?: Observable<CD>;
        seriesStyles?: Map<string, S>;
        shouldSubscribe?: boolean;
        svgStyle?: Partial<SvgStyle>;
        width: number;
        windowingTime?: number;
    }

    Type Parameters

    • CD

      refers to the chart-data that is used by the Observable that has the stream of data.

    • D

      refers to the datum in the data-series

    • S extends SeriesStyle

      refers to the type for the series style

    Index

    Properties

    asChartData?: (initialData: BaseSeries<D>[]) => CD

    Optional conversion function that converts an array of base-series with datum type D to a descendent of a ChartData object

    Type Declaration

    backgroundColor?: string

    The base/default background color. This can be overridden by the Props.svgStyle property.

    chartId: number
    children: Element | Element[]

    The child components of the chart (i.e. the axis, plot, tracker, tooltip)

    color?: string

    The base/default color of the chart lines. This can be overridden by the Props.svgStyle property.

    height: number

    The height of the chart container

    initialData: BaseSeries<D>[]

    Initial (static) data to plot before subscribing to the ChartData observable.

    margin?: Partial<Margin>

    The margin between the edges of the chart container and the axes

    onSubscribe?: (subscription: Subscription) => void

    Callback when the chart subscribes to the ChartData observable

    Type Declaration

      • (subscription: Subscription): void
      • Parameters

        • subscription: Subscription

          The RxJS subscription

        Returns void

    onUpdateAxesBounds?: (ranges: Map<string, AxisInterval>) => void

    Callback when the time range changes. This is generally used by plots where the x-axis starts to scroll as the data streams in past the end of the current time window.

    Type Declaration

      • (ranges: Map<string, AxisInterval>): void
      • Parameters

        • ranges: Map<string, AxisInterval>

          A function that accepts the ranges, (start, end) associated with each axis in the plot. The ranges argument is a map(axis_id -> (start, end)). Where start and end refer to the range for the axis.

        Returns void

    onUpdateChartTime?: (time: number) => void

    Callback for updating the current chart time. This is generally used by plots where the axes do not represent time, but rather some fix values, and the data hold time information

    Type Declaration

      • (time: number): void
      • Parameters

        • time: number

          The current chart time

        Returns void

    onUpdateData?: (seriesName: string, data: D[]) => void

    Callback function that is called when new data arrives to the chart.

    Type Declaration

      • (seriesName: string, data: D[]): void
      • Parameters

        • seriesName: string

          The name of the series for which new data arrived

        • data: D[]

          The new data that arrived in the windowing tine

        Returns void

    UseChartValues.windowingTime

    seriesFilter?: RegExp

    Regular expression that filters which series to display on the plot. Can be update while streaming

    seriesObservable?: Observable<CD>

    ChartData RxJS Observable that feeds the chart data to display (i.e. the data stream).

    seriesStyles?: Map<string, S>

    Map holding the series name to the series style associated with that series.

    shouldSubscribe?: boolean

    When switching to true from false, subscribes to the seriesObservable. When switching to false from true, unsubscribes from the seriesObservable.

    svgStyle?: Partial<SvgStyle>

    Overrides for the SVG style

    width: number

    The width of the chart container

    windowingTime?: number

    The time-window (in milliseconds) to buffer the incoming data before updating the chart. This is a lever to reduce the lag between real-time and chart-time when a large amount of data is being sourced by the observable. Smaller time-windows result in smoother scrolling, but more updates, and possibly a larger lag.