stream-charts 1.1.1 → 1.2.0

package/src/app/charts/hooks/useChart.tsx

@@ -1,4 +1,4 @@
-import {createContext, JSX, useContext} from "react";
+import {createContext, JSX, MutableRefObject, useContext} from "react";
 import {GSelection} from "../d3types";
 import {BaseAxis, SeriesLineStyle, SeriesStyle} from "../axes/axes";
 import {defaultAxesValues, useAxes, UseAxesValues} from "./useAxes";
@@ -18,7 +18,7 @@ export type NoTooltipMetadata = {}
  * @template S The type of the series style
  * @template TM The type of the tooltip's metadata (data about the series data)
  */
-interface UseChartValues<D, S extends SeriesStyle, TM, AR extends BaseAxisRange, A extends BaseAxis> {
+export interface UseChartValues<D, S extends SeriesStyle, TM, AR extends BaseAxisRange, A extends BaseAxis> {
     /**
      * Unique ID for the chart
      */
@@ -66,6 +66,11 @@ interface UseChartValues<D, S extends SeriesStyle, TM, AR extends BaseAxisRange,
      */
     mouse: UseMouseValues<D, TM>
     tooltip: UseTooltipValues<D, TM>
+    /**
+     * Ref tracking the currently-hovered series name (null when nothing is hovered).
+     * Updated by the Legend; read by plots so new path elements use the correct stroke.
+     */
+    hoveredSeriesRef: MutableRefObject<string | null>
 }
 
 const defaultUseChartValues: UseChartValues<any, any, any, any, any> = {
@@ -85,12 +90,13 @@ const defaultUseChartValues: UseChartValues<any, any, any, any, any> = {
 
     // internal chart-interaction event handlers
     mouse: defaultMouseValues(),
-    tooltip: defaultTooltipValues()
+    tooltip: defaultTooltipValues(),
+    hoveredSeriesRef: { current: null },
 }
 
 const ChartContext = createContext<UseChartValues<any, any, any, any, any>>(defaultUseChartValues)
 
-interface Props {
+export interface Props {
     chartId: number
     container: SVGSVGElement | null
     mainG: GSelection | null
@@ -99,6 +105,7 @@ interface Props {
     svgStyle: Partial<SvgStyle>
     seriesStyles?: Map<string, SeriesLineStyle>
     seriesFilter?: RegExp
+    hoveredSeriesRef: MutableRefObject<string | null>
 
     children: JSX.Element | Array<JSX.Element>
 }
@@ -107,7 +114,6 @@ interface Props {
  * 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 {
     const {
@@ -119,6 +125,7 @@ export default function ChartProvider(props: Props): JSX.Element {
         seriesFilter = defaultUseChartValues.seriesFilter,
         svgStyle,
         seriesStyles = new Map<string, SeriesLineStyle>(),
+        hoveredSeriesRef,
     } = props
 
     const axes = useAxes()
@@ -139,6 +146,7 @@ export default function ChartProvider(props: Props): JSX.Element {
             axes,
             mouse,
             tooltip,
+            hoveredSeriesRef,
         }}
     >
         {props.children}

package/src/app/charts/hooks/useDataObservable.tsx

@@ -3,7 +3,6 @@ import {concat, from, Observable, Subscription} from "rxjs";
 import {ChartData} from "../observables/ChartData";
 import {useInitialData} from "./useInitialData";
 import {BaseSeries} from "../series/baseSeries";
-// import {noop} from "../utils";
 
 /**
  * No operation function for use when a default function is needed
@@ -12,13 +11,10 @@ const noop = () => {
     /* empty on purpose */
 }
 
-// type SeriesObservable = Observable<TimeSeriesChartData> | Observable<IterateChartData>
-// type Data = Array<Datum> | Array<IterateDatum>
-
 /**
  * The values exposed through the {@link useDataObservable} react hook
  */
-interface UseObservableValues<CD extends ChartData, D> {
+export interface UseObservableValues<CD extends ChartData, D> {
     /**
      * An observable source for chart data
      */
@@ -70,7 +66,7 @@ const defaultObservableValues: UseObservableValues<any, any> = {
 
 const DataObservableContext = createContext<UseObservableValues<any, any>>(defaultObservableValues)
 
-interface Props<CD extends ChartData, D> {
+export interface Props<CD extends ChartData, D> {
     // live data
     seriesObservable?: Observable<CD>
     windowingTime?: number
@@ -100,7 +96,6 @@ interface Props<CD extends ChartData, D> {
  * 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 {
 

package/src/app/charts/hooks/useInitialData.tsx

@@ -6,7 +6,7 @@ import {ChartData} from "../observables/ChartData";
 /**
  * The values exposed through the {@link useInitialData} react hook
  */
-type UseInitialDataValues<CD extends ChartData, D> = {
+export type UseInitialDataValues<CD extends ChartData, D> = {
     /**
      * An array of series representing the initial data for the chart (i.e. static data
      * before streaming starts) where D is a datum, whose type must be the same as that
@@ -28,7 +28,7 @@ const defaultInitialDataValues: UseInitialDataValues<any, any> = {
 
 const InitialDataContext = createContext<UseInitialDataValues<any, any>>(defaultInitialDataValues)
 
-interface Props<CD extends ChartData, D> {
+export interface Props<CD extends ChartData, D> {
     initialData: Array<BaseSeries<D>>
     asChartData?: (seriesList: Array<BaseSeries<D>>) => CD
     children: JSX.Element | Array<JSX.Element>
@@ -38,7 +38,6 @@ interface Props<CD extends ChartData, D> {
  * The React context provider for the {@link UseInitialDataValues}
  * @param props The properties
  * @return The children wrapped in this provider
- * @constructor
  */
 export default function InitialDataProvider<CD extends ChartData, D>(props: Props<CD, D>): JSX.Element {
     const {

package/src/app/charts/hooks/useMouse.tsx

@@ -8,6 +8,11 @@ const noop = () => {
     /* empty on purpose */
 }
 
+/**
+ * Type representing the values exposed through the {@link useMouse} react hook.
+ * @template D The type of the data object for the series
+ * @template TM The type of the metadata object for the series
+ */
 export type UseMouseValues<D, TM> = {
     /**
      * Adds a mouse-over-series handler with the specified ID and handler function
@@ -64,7 +69,7 @@ export const defaultMouseValues = (): UseMouseValues<any, any> => ({
 
 const MouseContext = createContext<UseMouseValues<any, any>>(defaultMouseValues())
 
-type Props = {
+export type Props = {
     children: JSX.Element | Array<JSX.Element>
 }
 
@@ -82,13 +87,12 @@ export default function MouseProvider<D, TM>(props: Props): JSX.Element {
             },
             unregisterMouseOverHandler: handlerId => mouseOverHandlersRef.current.delete(handlerId),
             mouseOverHandlerFor: (handlerId, providerId) => {
-                const handlerHoc = mouseOverHandlersRef.current.get(handlerId)
-                if (handlerHoc !== undefined) {
-                    return (seriesName: string, time: number, tooltipData: TooltipData<D, TM>, mouseCoords: [x: number, y: number])=> {
-                        handlerHoc(seriesName, time, tooltipData, mouseCoords, providerId)
-                    }
+                if (mouseOverHandlersRef.current.size === 0) return undefined
+                return (seriesName: string, time: number, tooltipData: TooltipData<D, TM>, mouseCoords: [x: number, y: number]) => {
+                    mouseOverHandlersRef.current.forEach(handler => {
+                        handler(seriesName, time, tooltipData, mouseCoords, providerId)
+                    })
                 }
-                return undefined
             },
 
             registerMouseLeaveHandler: (handlerId, handler) => {
@@ -97,13 +101,12 @@ export default function MouseProvider<D, TM>(props: Props): JSX.Element {
             },
             unregisterMouseLeaveHandler: handlerId => mouseLeaveHandlersRef.current.delete(handlerId),
             mouseLeaveHandlerFor: (handlerId, providerId) => {
-                const handlerHoc = mouseLeaveHandlersRef.current.get(handlerId)
-                if (handlerHoc !== undefined) {
-                    return (seriesName: string)=> {
-                        handlerHoc(seriesName, providerId)
-                    }
+                if (mouseLeaveHandlersRef.current.size === 0) return undefined
+                return (seriesName: string) => {
+                    mouseLeaveHandlersRef.current.forEach(handler => {
+                        handler(seriesName, providerId)
+                    })
                 }
-                return undefined
             },
         }}
     >

package/src/app/charts/hooks/usePlotDimensions.tsx

@@ -40,7 +40,7 @@ export const defaultPlotDimensions = (): UsePlotDimensionsValues => ({
 
 const PlotDimensionsContext = createContext<UsePlotDimensionsValues>(defaultPlotDimensions())
 
-type Props = {
+export type Props = {
     containerDimensions: Dimensions
     margin: Margin
     children: JSX.Element | Array<JSX.Element>
@@ -97,7 +97,6 @@ export default function PlotDimensionsProvider(props: Props): JSX.Element {
             plotDimensions: dimensions,
             margin,
             updateDimensions,
-            // updateDimensions: dimensions => setDimensions(dimensions),
             registerPlotDimensionChangeHandler,
             unregisterPlotDimensionChangeHandler
         }}

package/src/app/charts/hooks/useTooltip.tsx

@@ -11,6 +11,8 @@ const noop = () => {
 
 /**
  * Base interface for tooltip data that is passed through to the tooltip content provider
+ * @template D The type of the data object for the series
+ * @template M The type of the metadata object for the series
  */
 export interface TooltipData<D, M> {
     series: Series<D>
@@ -27,10 +29,8 @@ export interface TooltipData<D, M> {
  * @param mouseCoords The mouse coordinates over which the mouse is hovering
  * @param providerId An optional ID of the tooltip content provider.
  */
-type TooltipContentProvider<D, M> =
+export type TooltipContentProvider<D, M> =
     (seriesName: string, time: number, tooltipData: TooltipData<D, M>, mouseCoords: [x: number, y: number], providerId?: string) => TooltipDimensions
-// type TooltipContentProvider<D, M> =
-//     (seriesName: string, time: number, tooltipData: TooltipData<D, M>, mouseCoords: [x: number, y: number]) => TooltipDimensions
 
 /**
  * The functions and values exposed through the {@link useTooltip} react hook
@@ -66,7 +66,7 @@ export const defaultTooltipValues = (): UseTooltipValues<any, any> => ({
 
 const TooltipContext = createContext<UseTooltipValues<any, any>>(defaultTooltipValues())
 
-type Props = {
+export type Props = {
     children: JSX.Element | Array<JSX.Element>
 }
 
@@ -77,7 +77,6 @@ type Props = {
  * the context or types of objects being moused over. When a tooltip content provider is registered
  * without a provider ID, then the default provider ID is used.
  * @param props The properties holding the children
- * @constructor
  * @return A JSX element containing the children
  */
 export default function TooltipProvider<D, M>(props: Props): JSX.Element {