stream-charts 1.0.1 → 1.1.1

package/dist/src/app/charts/hooks/useChart.d.ts

@@ -1,27 +1,26 @@
-/// <reference types="react" />
-import { Dimensions, Margin } from "../margins";
+import { JSX } from "react";
 import { GSelection } from "../d3types";
-import { Observable, Subscription } from "rxjs";
-import { ChartData } from "../chartData";
-import { Datum, Series } from "../datumSeries";
-import { BaseAxis, SeriesLineStyle } from "../axes";
-import { ContinuousAxisRange } from "../continuousAxisRangeFor";
-import { AxesAssignment, TimeSeries } from "../plot";
-import { TooltipDimensions } from "../tooltipUtils";
-import { AxesState } from "./AxesState";
-export declare const defaultMargin: Margin;
+import { BaseAxis, SeriesLineStyle, SeriesStyle } from "../axes/axes";
+import { UseAxesValues } from "./useAxes";
+import { UseMouseValues } from "./useMouse";
+import { UseTooltipValues } from "./useTooltip";
+import { SvgStyle } from "../styling/svgStyle";
+import { BaseAxisRange } from "../axes/BaseAxisRange";
+export type NoTooltipMetadata = {};
 /**
  * The values exposed through the {@link useChart} react hook
+ * @param chartId The unique ID for the chart
+ * @param mainG The root <g> element for the chart
+ * @param container The SVG element which is the container for this chart
+ * @template D The type of the series' datum
+ * @template S The type of the series style
+ * @template TM The type of the tooltip's metadata (data about the series data)
  */
-interface UseChartValues {
+interface UseChartValues<D, S extends SeriesStyle, TM, AR extends BaseAxisRange, A extends BaseAxis> {
     /**
      * Unique ID for the chart
      */
     chartId: number;
-    /**
-     * The width and height (in pixels) of this chart
-     */
-    plotDimensions: Dimensions;
     /**
      * The root <g> element for the chart
      */
@@ -30,221 +29,51 @@ interface UseChartValues {
      * The SVG element which is the container for this chart
      */
     container: SVGSVGElement | null;
-    /**
-     * The plot margins for the border of main G
-     */
-    margin: Margin;
     /**
      * Base color
      */
     color: string;
     /**
-     * A `map(series_name -> series_line_style)`
-     */
-    seriesStyles: Map<string, SeriesLineStyle>;
-    /**
-     * The x-axes state holds the currently set x-axes, manipulation and accessor functions
-     */
-    xAxesState: AxesState;
-    /**
-     * Adds an x-axis to the axes and updates the internal state
-     * @param axis The axis to add
-     * @param id The ID of the axis to add
-     */
-    addXAxis: (axis: BaseAxis, id: string) => void;
-    /**
-     * The y-axes state holds the currently set x-axes, manipulation and accessor functions
-     */
-    yAxesState: AxesState;
-    /**
-     * Adds a y-axis to the axes and updates the internal state
-     * @param axis The axis to add
-     * @param id The ID of the axis to add
-     */
-    addYAxis: (axis: BaseAxis, id: string) => void;
-    /**
-     * Sets the axis assigned to each series. This should contain **all** the series used in
-     * the chart.
-     * @param assignments The assignment of the series to their axes
+     * The base/default background color. This can be overridden by the {@link Props.svgStyle} property.
      */
-    setAxisAssignments: (assignments: Map<string, AxesAssignment>) => void;
+    backgroundColor: string;
     /**
-     * Retrieves the axis assigned to the specified series
-     * @return The axes assigned to the specified series
+     * Overrides for the SVG style
      */
-    axisAssignmentsFor: (seriesName: string) => AxesAssignment;
+    svgStyle: Partial<SvgStyle>;
     /**
-     * Retrieves the time range for the specified axis ID
-     * @param axisId The ID of the axis for which to retrieve the time-range
-     * @return The time-range as a `[t_start, t_end]` tuple if the axis ID is found, `undefined` otherwise
-     */
-    timeRangeFor: (axisId: string) => [start: number, end: number] | undefined;
-    /**
-     * Sets the time-range for the specified axis ID to the specified range
-     * @param axisId The ID of the axis for which to set the range
-     * @param timeRange The new time range as an `[t_start, t_end]` tuple
-     */
-    setTimeRangeFor: (axisId: string, timeRange: [start: number, end: number]) => void;
-    /**
-     * An array of time-series representing the initial data for the chart (i.e. static data
-     * before streaming starts)
-     */
-    initialData: Array<Series>;
-    /**
-     * An observable source for chart data
-     */
-    seriesObservable?: Observable<ChartData>;
-    /**
-     * When `true` the chart will subscribe to the observable, or if already subscribed, will remain
-     * subscribed. When `false` the chart will unsubscribe to the observable if subscribed, or will
-     * remain unsubscribed if not already subscribed.
-     */
-    shouldSubscribe?: boolean;
-    /**
-     * The windowing time for aggregating chart-data events. Defines the update rate of the chart.
-     * For example if chart-data events occur every 1 ms, and the windowing time is set to 10 ms,
-     * then events will be aggregated for 10 ms, and then the chart will be updated. In this example,
-     * the chart would be updated only once per 10 ms.
+     * A `map(series_name -> series_line_style)`
      */
-    windowingTime?: number;
+    seriesStyles: Map<string, S>;
+    axes: UseAxesValues<AR, A>;
     /**
      * A regular expression uses against the series names to determine which series to show in the chart
      */
     seriesFilter: RegExp;
-    /**
-     * Callback function that is called when the chart subscribes to the observable
-     * @param subscription The subscription resulting form the subscribe action
-     */
-    onSubscribe: (subscription: Subscription) => void;
-    /**
-     * Callback when the time range changes.
-     * @param times The times (start, end) times for each axis in the plot
-     * @return void
-     */
-    onUpdateTime?: (times: Map<string, [start: number, end: number]>) => void;
-    /**
-     * Callback function that is called when new data arrives to the chart.
-     * @param seriesName The name of the series for which new data arrived
-     * @param data The new data that arrived in the windowing tine
-     * @see UseChartValues.windowingTime
-     */
-    onUpdateData?: (seriesName: string, data: Array<Datum>) => void;
-    /**
-     * Callback function that is called when the time ranges change. The time ranges could
-     * change because of a zoom action, a pan action, or as new data is streamed in.
-     * @param times A `map(axis_id -> time_range)` that associates the axis ID with the
-     * current time range.
-     */
-    updateTimeRanges: (times: Map<string, ContinuousAxisRange>) => void;
-    /**
-     * Update the plot dimensions (for example, on a window resize)
-     * @param dimensions the new dimensions of the plot
-     */
-    updateDimensions: (dimensions: Dimensions) => void;
-    /**
-     * Adds a handler for when the time is updated. The time could change because of a zoom action,
-     * a pan action, or as new data is streamed in.
-     * @param handlerId The unique ID of the handler to register/add
-     * @param handler The handler function
-     */
-    addTimeUpdateHandler: (handlerId: string, handler: (updates: Map<string, ContinuousAxisRange>, plotDim: Dimensions) => void) => void;
-    /**
-     * Removes the time-update handler with the specified ID
-     * @param handlerId The ID of the handler to remove
-     */
-    removeTimeUpdateHandler: (handlerId: string) => void;
-    /**
-     * Adds a mouse-over-series handler with the specified ID and handler function
-     * @param handlerId The handler ID
-     * @param handler The handler function called when a mouse-over-series event occurs
-     * @return The handler ID
-     */
-    registerMouseOverHandler: (handlerId: string, handler: (seriesName: string, time: number, series: TimeSeries, mouseCoords: [x: number, y: number]) => void) => string;
-    /**
-     * Removes the mouse-over-series handler with the specified ID
-     * @param handlerId The ID of the handler to remove
-     */
-    unregisterMouseOverHandler: (handlerId: string) => void;
-    /**
-     * Attempts to retrieve the mouse-over-series handler for the specified ID
-     * @param handlerId The ID of the handler
-     * @return The mouse-over-series handler for the ID, or `undefined` if not found
-     */
-    mouseOverHandlerFor: (handlerId: string) => ((seriesName: string, time: number, series: TimeSeries, mouseCoords: [x: number, y: number]) => void) | undefined;
-    /**
-     * Adds a mouse-leave-series handler with the specified ID and handler function
-     * @param handlerId The handler ID
-     * @param handler The handler function called when a mouse-leave-series event occurs
-     * @return The handler ID
-     */
-    registerMouseLeaveHandler: (handlerId: string, handler: (seriesName: string) => void) => string;
-    /**
-     * Removes the mouse-leave-series handler with the specified ID
-     * @param handlerId The ID of the handler to remove
-     */
-    unregisterMouseLeaveHandler: (handlerId: string) => void;
-    /**
-     * Attempts to retrieve the mouse-leave-series handler for the specified ID
-     * @param handlerId The ID of the handler
-     * @return The mouse-leave-series handler for the ID, or `undefined` if not found
-     */
-    mouseLeaveHandlerFor: (handlerId: string) => ((seriesName: string) => void) | undefined;
-    /**
-     * Registers the provider of the tooltip content (generally this will be registered by the plot).
-     * When this function is called again, overwrites the previously registered provider with the
-     * one specified. This function can be called repeatedly.
-     * @param provider The function that provides the content when called.
-     */
-    registerTooltipContentProvider: (provider: (seriesName: string, time: number, series: TimeSeries, mouseCoords: [x: number, y: number]) => TooltipDimensions) => void;
-    /**
-     * @return The registered function that provides the tooltip content. If no function has been
-     * registered, then returns `undefined`.
-     */
-    tooltipContentProvider: () => ((seriesName: string, time: number, series: TimeSeries, mouseCoords: [x: number, y: number]) => TooltipDimensions) | undefined;
+    mouse: UseMouseValues<D, TM>;
+    tooltip: UseTooltipValues<D, TM>;
 }
 interface Props {
     chartId: number;
     container: SVGSVGElement | null;
     mainG: GSelection | null;
-    containerDimensions: Dimensions;
-    margin: Margin;
     color: string;
+    backgroundColor: string;
+    svgStyle: Partial<SvgStyle>;
     seriesStyles?: Map<string, SeriesLineStyle>;
-    initialData: Array<Series>;
     seriesFilter?: RegExp;
-    seriesObservable?: Observable<ChartData>;
-    windowingTime?: number;
-    shouldSubscribe?: boolean;
-    /**
-     * Callback function that is called when the chart subscribes to the observable
-     * @param subscription The subscription resulting form the subscribe action
-     */
-    onSubscribe?: (subscription: Subscription) => void;
-    /**
-     * Callback when the time range changes.
-     * @param times The times (start, end) times for each axis in the plot
-     * @return void
-     */
-    onUpdateTime?: (times: Map<string, [start: number, end: number]>) => void;
-    /**
-     * Callback function that is called when new data arrives to the chart.
-     * @param seriesName The name of the series for which new data arrived
-     * @param data The new data that arrived in the windowing tine
-     * @see UseChartValues.windowingTime
-     */
-    onUpdateData?: (seriesName: string, data: Array<Datum>) => void;
     children: JSX.Element | Array<JSX.Element>;
 }
 /**
- * The react context provider for the {@link UseChartValues}
+ * The React context provider for the {@link UseChartValues}
  * @param props The properties
  * @return The children wrapped in this provider
  * @constructor
  */
 export default function ChartProvider(props: Props): JSX.Element;
 /**
- * React hook that sets up the react context for the chart values.
- * @return The {@link UseChartValues} held in the react context.
+ * React hook that sets up the React context for the chart values.
+ * @return The {@link UseChartValues} held in the React context.
  */
-export declare function useChart(): UseChartValues;
+export declare function useChart<D, S extends SeriesStyle, TM, AR extends BaseAxisRange, A extends BaseAxis>(): UseChartValues<D, S, TM, AR, A>;
 export {};

package/dist/src/app/charts/hooks/useChart.js

@@ -1,158 +1,57 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
-import { plotDimensionsFrom } from "../margins";
-import { noop } from "../utils";
-import { addAxisTo, createAxesState } from "./AxesState";
-export var defaultMargin = { top: 30, right: 20, bottom: 30, left: 50 };
-var defaultUseChartValues = {
+import { createContext, useContext } from "react";
+import { defaultAxesValues, useAxes } from "./useAxes";
+import { defaultMouseValues, useMouse } from "./useMouse";
+import { defaultTooltipValues, useTooltip } from "./useTooltip";
+const defaultUseChartValues = {
     chartId: NaN,
     container: null,
     mainG: null,
-    plotDimensions: { width: 0, height: 0 },
-    margin: defaultMargin,
     color: '#d2933f',
+    backgroundColor: '#EEE',
+    svgStyle: new Map(),
     seriesStyles: new Map(),
     // axes
-    xAxesState: createAxesState(),
-    yAxesState: createAxesState(),
-    addXAxis: noop,
-    addYAxis: noop,
-    setAxisAssignments: noop,
-    axisAssignmentsFor: function () { return ({ xAxis: "", yAxis: "" }); },
-    // timing
-    timeRangeFor: function () { return [NaN, NaN]; },
-    setTimeRangeFor: noop,
+    axes: defaultAxesValues(),
     // data
-    initialData: [],
     seriesFilter: /./,
-    windowingTime: NaN,
-    shouldSubscribe: false,
-    // user callbacks
-    onSubscribe: noop,
-    // internal event handlers
-    updateTimeRanges: noop,
-    updateDimensions: noop,
-    addTimeUpdateHandler: function () { return noop; },
-    removeTimeUpdateHandler: function () { return noop; },
     // internal chart-interaction event handlers
-    registerMouseOverHandler: function () { return ''; },
-    unregisterMouseOverHandler: noop,
-    mouseOverHandlerFor: function () { return undefined; },
-    registerMouseLeaveHandler: function () { return ''; },
-    unregisterMouseLeaveHandler: noop,
-    mouseLeaveHandlerFor: function () { return undefined; },
-    registerTooltipContentProvider: noop,
-    tooltipContentProvider: function () { return undefined; }
+    mouse: defaultMouseValues(),
+    tooltip: defaultTooltipValues()
 };
-var ChartContext = createContext(defaultUseChartValues);
+const ChartContext = createContext(defaultUseChartValues);
 /**
- * The react context provider for the {@link UseChartValues}
+ * The React context provider for the {@link UseChartValues}
  * @param props The properties
  * @return The children wrapped in this provider
  * @constructor
  */
 export default function ChartProvider(props) {
-    var chartId = props.chartId, container = props.container, mainG = props.mainG, containerDimensions = props.containerDimensions, margin = props.margin, color = props.color, initialData = props.initialData, _a = props.seriesFilter, seriesFilter = _a === void 0 ? defaultUseChartValues.seriesFilter : _a, _b = props.seriesStyles, seriesStyles = _b === void 0 ? new Map() : _b, seriesObservable = props.seriesObservable, _c = props.windowingTime, windowingTime = _c === void 0 ? defaultUseChartValues.windowingTime || 100 : _c, shouldSubscribe = props.shouldSubscribe, _d = props.onSubscribe, onSubscribe = _d === void 0 ? noop : _d, _e = props.onUpdateTime, onUpdateTime = _e === void 0 ? noop : _e, _f = props.onUpdateData, onUpdateData = _f === void 0 ? noop : _f;
-    var _g = useState(defaultUseChartValues.plotDimensions), dimensions = _g[0], setDimensions = _g[1];
-    var xAxesRef = useRef(createAxesState());
-    var yAxesRef = useRef(createAxesState());
-    var axisAssignmentsRef = useRef(new Map());
-    var timeRangesRef = useRef(new Map());
-    var timeUpdateHandlersRef = useRef(new Map());
-    var mouseOverHandlersRef = useRef(new Map());
-    var mouseLeaveHandlersRef = useRef(new Map());
-    var tooltipContentProviderRef = useRef(undefined);
-    // update the plot dimensions when the container size or margin change
-    useEffect(function () {
-        setDimensions(plotDimensionsFrom(containerDimensions.width, containerDimensions.height, margin));
-    }, [containerDimensions, margin]);
-    /**
-     * Called when the time is updated on one or more of the chart's axes (generally x-axes). In turn,
-     * dispatches the update to all the internal time update handlers.
-     * @param updates A map holding the axis ID to the updated axis time-range
-     */
-    function updateTimeRanges(updates) {
-        // update the current time-ranges reference
-        updates.forEach(function (range, id) {
-            return timeRangesRef.current.set(id, [range.start, range.end]);
-        });
-        // dispatch the updates to all the registered handlers
-        timeUpdateHandlersRef.current.forEach(function (handler) { return handler(updates, dimensions); });
-    }
-    /**
-     * Retrieves the x-axis and y-axis assignments for the specified series. If the axes does not have
-     * an assignment, then is assumed to be using the default x- and y-axes.
-     * @param seriesName The name of the series for which to retrieve the axes assignments
-     * @return An {@link AxesAssignment} for the specified axes.
-     */
-    function axisAssignmentsFor(seriesName) {
-        return axisAssignmentsRef.current.get(seriesName) || {
-            xAxis: xAxesRef.current.axisDefaultName(),
-            yAxis: yAxesRef.current.axisDefaultName()
-        };
-    }
-    return _jsx(ChartContext.Provider, __assign({ value: {
-            chartId: chartId,
-            plotDimensions: dimensions,
-            margin: margin,
-            color: color,
-            seriesStyles: seriesStyles,
-            initialData: initialData,
-            seriesFilter: seriesFilter,
-            mainG: mainG,
-            container: container,
-            xAxesState: xAxesRef.current,
-            yAxesState: yAxesRef.current,
-            addXAxis: function (axis, id) { return xAxesRef.current = addAxisTo(xAxesRef.current, axis, id); },
-            addYAxis: function (axis, id) { return yAxesRef.current = addAxisTo(yAxesRef.current, axis, id); },
-            setAxisAssignments: function (assignments) { return axisAssignmentsRef.current = assignments; },
-            axisAssignmentsFor: function (seriesName) { return axisAssignmentsFor(seriesName); },
-            timeRangeFor: function (axisId) { return timeRangesRef.current.get(axisId); },
-            setTimeRangeFor: (function (axisId, timeRange) { return timeRangesRef.current.set(axisId, timeRange); }),
-            seriesObservable: seriesObservable,
-            windowingTime: windowingTime,
-            shouldSubscribe: shouldSubscribe,
-            onSubscribe: onSubscribe,
-            onUpdateTime: onUpdateTime,
-            onUpdateData: onUpdateData,
-            updateTimeRanges: updateTimeRanges,
-            updateDimensions: function (dimensions) { return setDimensions(dimensions); },
-            addTimeUpdateHandler: function (handlerId, handler) { return timeUpdateHandlersRef.current.set(handlerId, handler); },
-            removeTimeUpdateHandler: function (handlerId) { return timeUpdateHandlersRef.current.delete(handlerId); },
-            registerMouseOverHandler: function (handlerId, handler) {
-                mouseOverHandlersRef.current.set(handlerId, handler);
-                return handlerId;
-            },
-            unregisterMouseOverHandler: function (handlerId) { return mouseOverHandlersRef.current.delete(handlerId); },
-            mouseOverHandlerFor: function (handlerId) { return mouseOverHandlersRef.current.get(handlerId); },
-            registerMouseLeaveHandler: function (handlerId, handler) {
-                mouseLeaveHandlersRef.current.set(handlerId, handler);
-                return handlerId;
-            },
-            unregisterMouseLeaveHandler: function (handlerId) { return mouseLeaveHandlersRef.current.delete(handlerId); },
-            mouseLeaveHandlerFor: function (handlerId) { return mouseLeaveHandlersRef.current.get(handlerId); },
-            registerTooltipContentProvider: function (provider) { return tooltipContentProviderRef.current = provider; },
-            tooltipContentProvider: function () { return tooltipContentProviderRef.current; },
-        } }, { children: props.children }), void 0);
+    const { chartId, container, mainG, color, backgroundColor, seriesFilter = defaultUseChartValues.seriesFilter, svgStyle, seriesStyles = new Map(), } = props;
+    const axes = useAxes();
+    const mouse = useMouse();
+    const tooltip = useTooltip();
+    return _jsx(ChartContext.Provider, { value: {
+            chartId,
+            color,
+            backgroundColor,
+            svgStyle,
+            seriesStyles,
+            seriesFilter,
+            mainG,
+            container,
+            axes,
+            mouse,
+            tooltip,
+        }, children: props.children });
 }
 /**
- * React hook that sets up the react context for the chart values.
- * @return The {@link UseChartValues} held in the react context.
+ * React hook that sets up the React context for the chart values.
+ * @return The {@link UseChartValues} held in the React context.
  */
 export function useChart() {
-    var context = useContext(ChartContext);
-    var chartId = context.chartId;
+    const context = useContext(ChartContext);
+    const { chartId } = context;
     if (isNaN(chartId)) {
         throw new Error("useChart can only be used when the parent is a <ChartProvider/>");
     }

package/dist/src/app/charts/hooks/useChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChart.js","sourceRoot":"","sources":["../../../../../src/app/charts/hooks/useChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useChart.js","sourceRoot":"","sources":["../../../../../src/app/charts/hooks/useChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAO,UAAU,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAC,iBAAiB,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;AACpE,OAAO,EAAC,kBAAkB,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACxE,OAAO,EAAC,oBAAoB,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAiEhF,MAAM,qBAAqB,GAA4C;IACnE,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,MAAM;IACvB,QAAQ,EAAE,IAAI,GAAG,EAAE;IACnB,YAAY,EAAE,IAAI,GAAG,EAAE;IAEvB,OAAO;IACP,IAAI,EAAE,iBAAiB,EAAE;IAEzB,OAAO;IACP,YAAY,EAAE,GAAG;IAEjB,4CAA4C;IAC5C,KAAK,EAAE,kBAAkB,EAAE;IAC3B,OAAO,EAAE,oBAAoB,EAAE;CAClC,CAAA;AAED,MAAM,YAAY,GAAG,aAAa,CAA0C,qBAAqB,CAAC,CAAA;AAelG;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAY;IAC9C,MAAM,EACF,OAAO,EACP,SAAS,EACT,KAAK,EACL,KAAK,EACL,eAAe,EACf,YAAY,GAAG,qBAAqB,CAAC,YAAY,EACjD,QAAQ,EACR,YAAY,GAAG,IAAI,GAAG,EAA2B,GACpD,GAAG,KAAK,CAAA;IAET,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAE5B,OAAO,KAAC,YAAY,CAAC,QAAQ,IACzB,KAAK,EAAE;YACH,OAAO;YACP,KAAK;YACL,eAAe;YACf,QAAQ;YACR,YAAY;YACZ,YAAY;YACZ,KAAK;YACL,SAAS;YAET,IAAI;YACJ,KAAK;YACL,OAAO;SACV,YAEA,KAAK,CAAC,QAAQ,GACK,CAAA;AAC5B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,QAAQ;IACpB,MAAM,OAAO,GAAG,UAAU,CAAkC,YAAY,CAAC,CAAA;IACzE,MAAM,EAAC,OAAO,EAAC,GAAG,OAAO,CAAA;IACzB,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAA;IACtF,CAAC;IACD,OAAO,OAAO,CAAA;AAClB,CAAC"}

package/dist/src/app/charts/hooks/useDataObservable.d.ts

@@ -0,0 +1,74 @@
+import { JSX } from "react";
+import { Observable, Subscription } from "rxjs";
+import { ChartData } from "../observables/ChartData";
+/**
+ * The values exposed through the {@link useDataObservable} react hook
+ */
+interface UseObservableValues<CD extends ChartData, D> {
+    /**
+     * An observable source for chart data
+     */
+    seriesObservable?: Observable<CD>;
+    /**
+     * When `true` the chart will subscribe to the observable, or if already subscribed, will remain
+     * subscribed. When `false` the chart will unsubscribe to the observable if subscribed, or will
+     * remain unsubscribed if not already subscribed.
+     */
+    shouldSubscribe?: boolean;
+    /**
+     * The windowing time for aggregating chart-data events. Defines the update rate of the chart.
+     * For example if chart-data events occur every 1 ms, and the windowing time is set to 10 ms,
+     * then events will be aggregated for 10 ms, and then the chart will be updated. In this example,
+     * the chart would be updated only once per 10 ms.
+     */
+    windowingTime?: number;
+    /**
+     * Callback function that is called when the chart subscribes to the observable
+     * @param subscription The subscription resulting form the subscribe action
+     */
+    onSubscribe: (subscription: Subscription) => void;
+    /**
+     * Callback function that is called when new data arrives to the chart.
+     * @param seriesName The name of the series for which new data arrived
+     * @param data The new data that arrived in the windowing tine
+     * @see UseChartValues.windowingTime
+     */
+    onUpdateData?: (seriesName: string, data: Array<D>) => void;
+    /**
+     * todo
+     * @param time
+     */
+    onUpdateChartTime?: (time: number) => void;
+}
+interface Props<CD extends ChartData, D> {
+    seriesObservable?: Observable<CD>;
+    windowingTime?: number;
+    shouldSubscribe?: boolean;
+    /**
+     * Callback function that is called when the chart subscribes to the observable
+     * @param subscription The subscription resulting form the subscribe action
+     */
+    onSubscribe?: (subscription: Subscription) => void;
+    /**
+     * Callback function that is called when new data arrives to the chart.
+     * @param seriesName The name of the series for which new data arrived
+     * @param data The new data that arrived in the windowing tine
+     * @see UseChartValues.windowingTime
+     */
+    onUpdateData?: (seriesName: string, data: Array<D>) => void;
+    onUpdateChartTime?: (time: number) => void;
+    children: JSX.Element | Array<JSX.Element>;
+}
+/**
+ * The react context provider for the {@link UseObservableValues}
+ * @param props The properties
+ * @return The children wrapped in this provider
+ * @constructor
+ */
+export default function DataObservableProvider<CD extends ChartData, D>(props: Props<CD, D>): JSX.Element;
+/**
+ * React hook that sets up the React context for the chart values.
+ * @return The {@link UseObservableValues} held in the React context.
+ */
+export declare function useDataObservable<CD extends ChartData, D>(): UseObservableValues<CD, D>;
+export {};

package/dist/src/app/charts/hooks/useDataObservable.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { concat, from } from "rxjs";
+import { useInitialData } from "./useInitialData";
+// import {noop} from "../utils";
+/**
+ * No operation function for use when a default function is needed
+ */
+const noop = () => {
+    /* empty on purpose */
+};
+const defaultObservableValues = {
+    windowingTime: NaN,
+    shouldSubscribe: false,
+    // user callbacks
+    onSubscribe: noop,
+};
+const DataObservableContext = createContext(defaultObservableValues);
+/**
+ * The react context provider for the {@link UseObservableValues}
+ * @param props The properties
+ * @return The children wrapped in this provider
+ * @constructor
+ */
+export default function DataObservableProvider(props) {
+    const { seriesObservable, windowingTime = defaultObservableValues.windowingTime || 100, shouldSubscribe, onSubscribe = noop, onUpdateData = noop, onUpdateChartTime = noop, } = props;
+    // when initial data is provided, and importantly, when a function is provided that converts
+    // the initial data into an object of type ChartData, and when there is a defined series
+    // observable, then the initial data is prepended to the data observable.
+    const { initialData, asChartData } = useInitialData();
+    const observable = dataObservable(seriesObservable, initialData, asChartData);
+    return _jsx(DataObservableContext.Provider, { value: {
+            seriesObservable: observable,
+            windowingTime,
+            shouldSubscribe,
+            onSubscribe,
+            onUpdateData,
+            onUpdateChartTime,
+        }, children: props.children });
+}
+/**
+ * When initial data is provided, and importantly, when a function is provided that converts
+ * the initial data into an object of type ChartData, and when there is a defined series
+ * observable, then the initial data is prepended to the data observable. When only initial data
+ * is provided and a conversion function, then a creates an observable from the initial data.
+ * And, when only a defined series observable is specified, then that is used (this is the default,
+ * and backward compatible behavior).
+ * @param seriesObservable An optional series observable
+ * @param initialData An array of initial data series
+ * @param asChartData A function that converts the initial data series into chart data
+ * @return An {@link Observable} of {@link ChartData}, or an `undefined`
+ */
+function dataObservable(seriesObservable, initialData, asChartData) {
+    if (seriesObservable !== undefined && initialData !== undefined && initialData.length > 0 && asChartData !== undefined) {
+        return concat(from([asChartData(initialData)]), seriesObservable);
+    }
+    else if (initialData !== undefined && initialData.length > 0 && asChartData !== undefined) {
+        return from([asChartData(initialData)]);
+    }
+    else {
+        return seriesObservable;
+    }
+}
+/**
+ * React hook that sets up the React context for the chart values.
+ * @return The {@link UseObservableValues} held in the React context.
+ */
+export function useDataObservable() {
+    const context = useContext(DataObservableContext);
+    const { onSubscribe } = context;
+    if (onSubscribe === undefined) {
+        throw new Error("useDataObservable can only be used when the parent is a <DataObservableProvider/>");
+    }
+    return context;
+}
+//# sourceMappingURL=useDataObservable.js.map

package/dist/src/app/charts/hooks/useDataObservable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataObservable.js","sourceRoot":"","sources":["../../../../../src/app/charts/hooks/useDataObservable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAO,UAAU,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAC,MAAM,EAAE,IAAI,EAA2B,MAAM,MAAM,CAAC;AAE5D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,iCAAiC;AAEjC;;GAEG;AACH,MAAM,IAAI,GAAG,GAAG,EAAE;IACd,sBAAsB;AAC1B,CAAC,CAAA;AAkDD,MAAM,uBAAuB,GAAkC;IAC3D,aAAa,EAAE,GAAG;IAClB,eAAe,EAAE,KAAK;IAEtB,iBAAiB;IACjB,WAAW,EAAE,IAAI;CACpB,CAAA;AAED,MAAM,qBAAqB,GAAG,aAAa,CAAgC,uBAAuB,CAAC,CAAA;AA4BnG;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAA0B,KAAmB;IAEvF,MAAM,EACF,gBAAgB,EAChB,aAAa,GAAG,uBAAuB,CAAC,aAAa,IAAI,GAAG,EAC5D,eAAe,EAEf,WAAW,GAAG,IAAI,EAClB,YAAY,GAAG,IAAI,EACnB,iBAAiB,GAAG,IAAI,GAC3B,GAAG,KAAK,CAAA;IAET,4FAA4F;IAC5F,wFAAwF;IACxF,yEAAyE;IACzE,MAAM,EAAC,WAAW,EAAE,WAAW,EAAC,GAAG,cAAc,EAAS,CAAA;IAC1D,MAAM,UAAU,GAAG,cAAc,CAAQ,gBAAgB,EAAE,WAAW,EAAE,WAAW,CAAC,CAAA;IAEpF,OAAO,KAAC,qBAAqB,CAAC,QAAQ,IAClC,KAAK,EAAE;YACH,gBAAgB,EAAE,UAAU;YAC5B,aAAa;YACb,eAAe;YAEf,WAAW;YACX,YAAY;YACZ,iBAAiB;SACpB,YAEA,KAAK,CAAC,QAAQ,GACc,CAAA;AACrC,CAAC;AAED;;;;;;;;;;;GAWG;AACH,SAAS,cAAc,CACnB,gBAAiC,EACjC,WAAkC,EAClC,WAAsD;IAEtD,IAAI,gBAAgB,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QACrH,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAA;IACrE,CAAC;SAAM,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC1F,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;IAC3C,CAAC;SAAM,CAAC;QACJ,OAAO,gBAAgB,CAAA;IAC3B,CAAC;AACL,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,iBAAiB;IAC7B,MAAM,OAAO,GAAG,UAAU,CAA6B,qBAAqB,CAAC,CAAA;IAC7E,MAAM,EAAC,WAAW,EAAC,GAAG,OAAO,CAAA;IAC7B,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CAAC,mFAAmF,CAAC,CAAA;IACxG,CAAC;IACD,OAAO,OAAO,CAAA;AAClB,CAAC"}