stream-charts 1.1.1 → 1.2.0

package/dist/{src/index.js → index.js}

@@ -6,23 +6,19 @@ export { noop, mouseInPlotAreaFor, textWidthOf, textDimensions, formatNumber, fo
 export { defaultAxisTickStyle, defaultAxesFont, defaultLineStyle, AxisLocation, addOrdinalStringAxis, labelIdFor, calculateOrdinalConstrainedZoomFor, calculateConstrainedZoomFor, ordinalAxisZoomHandler, axesZoomHandler, calculatePanFor, panHandler, panHandler2D, axesForSeriesGen, continuousAxisRanges, continuousAxisIntervals, continuousRange } from './app/charts/axes/axes';
 export { AxisInterval } from './app/charts/axes/AxisInterval';
 export { ContinuousAxis, } from './app/charts/axes/ContinuousAxis';
-export { OrdinalAxis } from './app/charts/axes/OrdinalAxis';
+export { OrdinalAxis, } from './app/charts/axes/OrdinalAxis';
+export { EmptyAxis, } from './app/charts/axes/EmptyAxis';
 //
 // filters
 //
 export { regexFilter } from './app/charts/filters/regexFilter';
-export * from './app/charts/hooks/useAxes';
-export { useAxes, defaultAxesValues } from './app/charts/hooks/useAxes';
-export * from './app/charts/hooks/useChart';
+export { useAxes, defaultAxesValues, } from './app/charts/hooks/useAxes';
 export { useChart, } from './app/charts/hooks/useChart';
-export * from './app/charts/hooks/useDataObservable';
 export { useDataObservable, } from './app/charts/hooks/useDataObservable';
-export * from './app/charts/hooks/useInitialData';
 export { useInitialData, } from './app/charts/hooks/useInitialData';
-export * from './app/charts/hooks/useMouse';
 export { useMouse, defaultMouseValues, } from './app/charts/hooks/useMouse';
-export { usePlotDimensions, defaultPlotDimensions, defaultMargin } from './app/charts/hooks/usePlotDimensions';
-export { useTooltip, defaultTooltipValues } from './app/charts/hooks/useTooltip';
+export { usePlotDimensions, defaultPlotDimensions, defaultMargin, } from './app/charts/hooks/usePlotDimensions';
+export { useTooltip, defaultTooltipValues, } from './app/charts/hooks/useTooltip';
 //
 // observables
 //
@@ -34,18 +30,18 @@ export { ordinalsObservable, defaultOrdinalStats, defaultOrdinalValueStats, init
 // plots
 //
 export { createPlotContainer, setClipPathG, assignAxes } from './app/charts/plots/plot';
-export { BarPlot } from './app/charts/plots/BarPlot';
-export { NoCurveFactory, PoincarePlot } from './app/charts/plots/PoincarePlot';
-export { RasterPlot } from './app/charts/plots/RasterPlot';
-export { ScatterPlot } from './app/charts/plots/ScatterPlot';
+export { BarPlot, } from './app/charts/plots/BarPlot';
+export { NoCurveFactory, PoincarePlot, } from './app/charts/plots/PoincarePlot';
+export { RasterPlot, } from './app/charts/plots/RasterPlot';
+export { ScatterPlot, } from './app/charts/plots/ScatterPlot';
 //
 // series
 //
 export { seriesFrom, emptySeries, emptySeriesFor } from './app/charts/series/baseSeries';
 export { emptyIterateDatum, iterateDatumOf, nonEmptyIterateDatum, iterateSeriesFromTuples, } from './app/charts/series/iterateSeries';
 export { emptyOrdinalDatum, copyOrdinalDatum, ordinalDatumOf, nonEmptyOrdinalDatum, ordinateSeriesFromTuples, initialOrdinalChartData, } from './app/charts/series/ordinalSeries';
-export { datumOf, emptyDatum, timeSeriesFromTuples } from './app/charts/series/timeSeries';
 export { emptyTimeSeriesChartData, initialTimeSeriesChartData, } from './app/charts/series/timeSeriesChartData';
+export { datumOf, emptyDatum, timeSeriesFromTuples } from './app/charts/series/timeSeries';
 //
 // styling
 //
@@ -59,15 +55,19 @@ export { TimeWindowBehavior, subscriptionTimeSeriesFor, subscriptionTimeSeriesWi
 //
 // tooltips
 //
-export { BarPlotTooltipContent } from './app/charts/tooltips/BarPlotTooltipContent';
-export { PoincarePlotTooltipContent } from './app/charts/tooltips/PoincarePlotTooltipContent';
-export { RasterPlotTooltipContent } from './app/charts/tooltips/RasterPlotTooltipContent';
-export { ScatterPlotTooltipContent } from './app/charts/tooltips/ScatterPlotTooltipContent';
-export { Tooltip } from './app/charts/tooltips/Tooltip';
+export { BarPlotTooltipContent, } from './app/charts/tooltips/BarPlotTooltipContent';
+export { PoincarePlotTooltipContent, } from './app/charts/tooltips/PoincarePlotTooltipContent';
+export { RasterPlotTooltipContent, } from './app/charts/tooltips/RasterPlotTooltipContent';
+export { ScatterPlotTooltipContent, } from './app/charts/tooltips/ScatterPlotTooltipContent';
+export { Tooltip, } from './app/charts/tooltips/Tooltip';
 export { defaultTooltipStyle, removeTooltip, tooltipX, tooltipY, categoryTooltipY, boundingPoints, findPointAndNeighbors } from './app/charts/tooltips/tooltipUtils';
 //
 // trackers
 //
 export { TrackerLabelLocation, Tracker, } from './app/charts/trackers/Tracker';
 export { defaultTrackerLabelFont, defaultTrackerStyle, trackerControlInstance, removeTrackerControl, } from './app/charts/trackers/trackerUtils';
+//
+// legend
+//
+export { Legend, defaultLegendStyle, LegendLocation } from './app/charts/legends/Legend';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,22 +1,33 @@
 {
   "name": "stream-charts",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Charts for steaming data",
   "author": "Rob Philipp",
   "homepage": "https://robphilipp.github.io/stream-charts/",
   "license": "MIT",
   "repository": "github:robphilipp/stream-charts",
-  "main": "dist/src/index.js",
-  "types": "dist/src/index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "jest src/app/charts/**/*.test.ts*",
     "build": "tsc",
     "prepare": "npm run build",
-    "gen-docs": "npx typedoc src/app/charts/*"
+    "gen-docs": "npx typedoc src/app/charts/ --out docs/ --entryPoints src/index.ts --entryPointStrategy expand"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
+  "typedocOptions": {
+    "externalSymbolLinkMappings": {
+      "result-fn": {
+        "Optional": "https://github.com/robphilipp/result-fn/blob/master/docs/Optional.md"
+      },
+      "typescript": {
+        "Set": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set",
+        "Map": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"
+      }
+    }
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -46,21 +57,22 @@
     "d3": "^7.9.0",
     "data-frame-ts": "^1.0.3",
     "jest": "^30.2.0",
-    "ts-jest": "^29.4.4",
     "jest-util": "^30.2.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "result-fn": "^0.5.0",
     "rxjs": "^7.8.2",
     "svg-table": "^0.1.2",
+    "ts-jest": "^29.4.4",
     "typescript": "^5.9.2"
   },
   "files": [
     "package.json",
     "README.md",
     "changes.md",
-    "dist/src/app/**",
-    "dist/src/index.*",
-    "src/app/charts/**"
+    "dist/app",
+    "dist/index.*",
+    "src/app/charts/**",
+    "src/index.ts"
   ]
 }

package/src/app/charts/Chart.tsx

@@ -21,11 +21,34 @@ import {AxisInterval} from "./axes/AxisInterval";
 const defaultBackground = '#202020';
 
 /**
+ * @param chartId A unique identifier for the chart. This is used to identify the chart in the DOM.
+ * @param width The width of the chart container
+ * @param height The height of the chart container
+ * @param margin The margin between the edges of the chart container and the axes
+ * @param color The base/default color of the chart lines. This can be overridden by the {@link Props.svgStyle} property.
+ * @param backgroundColor The base/default background color. This can be overridden by the {@link Props.svgStyle} property.
+ * @param svgStyle Overrides for the SVG style
+ * @param seriesStyles Map holding the series name to the series style associated with that series.
+ * @param initialData Initial (static) data to plot before subscribing to the {@link ChartData} observable.
+ * @param asChartData Optional conversion function that converts an array of base-series with datum type D to a
+ * descendent of a {@link ChartData} object
+ * @param seriesFilter Regular expression that filters which series to display on the plot. Can be update while streaming
+ * @param seriesObservable {@link ChartData} RxJS `Observable` that feeds the chart data to display (i.e. the data stream).
+ * @param windowingTime 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.
+ * @param shouldSubscribe When switching to `true` from `false`, subscribes to the {@link seriesObservable}. When switching
+ * to `false` from `true`, unsubscribes from the {@link seriesObservable}.
+ * @param onSubscribe Callback when the chart subscribes to the {@link ChartData} observable
+ * @param onUpdateAxesBounds 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
+ * @param onUpdateChartTime Callback for updating the current chart time. This is generally used by plots
  * @template CD refers to the chart-data that is used by the Observable that has the stream of data.
  * @template D refers to the datum in the data-series
  * @template S refers to the type for the series style
  */
-interface Props<CD, D, S extends SeriesStyle> {
+export interface Props<CD, D, S extends SeriesStyle> {
     chartId: number
     /**
      * The width of the chart container
@@ -60,7 +83,7 @@ interface Props<CD, D, S extends SeriesStyle> {
      | INITIAL DATA
      */
     /**
-     * Initial (static) data to plot before subscribing to the {@link TimeSeriesChartData} observable.
+     * Initial (static) data to plot before subscribing to the {@link ChartData} observable.
      */
     initialData: Array<BaseSeries<D>>
     /**
@@ -78,7 +101,7 @@ interface Props<CD, D, S extends SeriesStyle> {
      | DATA STREAM
      */
     /**
-     * {@link TimeSeriesChartData} RxJS `Observable` that feeds the chart data to display (i.e. the data stream).
+     * {@link ChartData} RxJS `Observable` that feeds the chart data to display (i.e. the data stream).
      */
     seriesObservable?: Observable<CD>
     /**
@@ -94,7 +117,7 @@ interface Props<CD, D, S extends SeriesStyle> {
      */
     shouldSubscribe?: boolean
     /**
-     * Callback when the chart subscribes to the {@link TimeSeriesChartData} observable
+     * Callback when the chart subscribes to the {@link ChartData} observable
      * @param subscription The RxJS subscription
      */
     onSubscribe?: (subscription: Subscription) => void
@@ -137,7 +160,6 @@ interface Props<CD, D, S extends SeriesStyle> {
  * @template S The type of the series style
  * @template TM The type of the tooltip metadata (the data about the series). If not specified,
  * defaults to an empty object
- * @constructor
  * @example
  *
 
@@ -253,6 +275,7 @@ export function Chart<CD extends ChartData, D, S extends SeriesStyle, TM>(props:
     // the container that holds the d3 svg element
     const mainGRef = useRef<GSelection | null>(null)
     const containerRef = useRef<SVGSVGElement>(null)
+    const hoveredSeriesRef = useRef<string | null>(null)
 
     // creates the main <g> element for the chart if it doesn't already exist, otherwise
     // updates the svg element with the updated dimensions or style properties
@@ -317,6 +340,7 @@ export function Chart<CD extends ChartData, D, S extends SeriesStyle, TM>(props:
                                         svgStyle={svgStyle}
                                         seriesStyles={seriesStyles}
                                         seriesFilter={seriesFilter}
+                                        hoveredSeriesRef={hoveredSeriesRef}
                                     >
                                         {
                                             // the chart elements are the children

package/src/app/charts/axes/AxesState.ts

@@ -53,13 +53,13 @@ export class AxesState<A extends BaseAxis> {
 
     /**
      * Adds an axis to the current axis state and returns a new axis state. This is an internal state
-     * management function. This should generally not be used. Instead, use the {@link UseChartValues.addXAxis}
-     * and {@link UseChartValues.addYAxis} functions to add axes.
+     * management function. This should generally not be used. Instead, use the {@link UseAxesValues.addXAxis}
+     * and {@link UseAxesValues.addYAxis} functions to add axes.
      * @param axis The axis to add
      * @param id The ID of the axis to add
      * @return An updated axes state that has the new axis
-     * @see UseChartValues.addXAxis
-     * @see UseChartValues.addYAxis
+     * @see UseAxesValues.addXAxis
+     * @see UseAxesValues.addYAxis
      */
     addAxis(axis: A, id: string): AxesState<A> {
         const updatedAxes = this.axes.set(id, axis)

package/src/app/charts/axes/ContinuousAxis.tsx

@@ -17,7 +17,7 @@ import {Datum} from "../series/timeSeries";
 import {AxisInterval} from "./AxisInterval";
 import {ContinuousAxisRange} from "./ContinuousAxisRange";
 
-interface Props {
+export interface Props {
     // the unique ID of the axis
     axisId: string
     // the location of the axis. for x-axes, this must be either top or bottom. for
@@ -56,7 +56,6 @@ interface Props {
  * React won't render it because we are updating the SVG element and don't want React
  * involved, except to call this function if the props change.
  * @param props The properties for the axis
- * @constructor
  */
 export function ContinuousAxis(props: Props): null {
     const {
@@ -134,7 +133,7 @@ export function ContinuousAxis(props: Props): null {
                             // addXAxis(axisRef.current, axisId, AxisInterval.as(domain))
 
                             // add an update handler
-                            rangeUpdateHandlerIdRef.current = `x-axis-${chartId}-${location.valueOf()}`
+                            rangeUpdateHandlerIdRef.current = `x-axis-${chartId}-${axisId}-${location.valueOf()}`
                             addAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current, handleRangeUpdates)
 
                             break
@@ -152,7 +151,7 @@ export function ContinuousAxis(props: Props): null {
                             // addYAxis(axisRef.current, axisId, AxisInterval.as(domain))
 
                             // add an update handler
-                            rangeUpdateHandlerIdRef.current = `y-axis-${chartId}-${location.valueOf()}`
+                            rangeUpdateHandlerIdRef.current = `y-axis-${chartId}-${axisId}-${location.valueOf()}`
                             addAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current, handleRangeUpdates)
                         }
                     }

package/src/app/charts/axes/EmptyAxis.tsx

@@ -0,0 +1,119 @@
+import {addEmptyXAxis, addEmptyYAxis, AxisLocation, ContinuousNumericAxis,} from "./axes";
+import {useChart} from "../hooks/useChart";
+import {useEffect, useRef} from "react";
+import * as d3 from "d3";
+import {Margin} from "../styling/margins";
+import {usePlotDimensions} from "../hooks/usePlotDimensions";
+import {Datum} from "../series/timeSeries";
+import {AxisInterval} from "./AxisInterval";
+import {ContinuousAxisRange} from "./ContinuousAxisRange";
+
+export interface Props {
+    // the unique ID of the axis
+    axisId: string
+    // the location of the axis. for x-axes, this must be either top or bottom. for
+    // y-axes, this mut be either left or right
+    location: AxisLocation
+}
+
+// linear scale
+const EMPTY_AXIS_SCALE = d3.scaleLinear()
+
+// the min and max values for the axis
+const EMPTY_AXIS_DOMAIN: [min: number, max: number] = [0, 1]
+
+/**
+ * Represents an empty axis (x or y) that can be place on the top, bottom,
+ * left, or right of the chart. An empty axis is just a line where the axis
+ * would be, without any ticks or labels.
+ * @param props The properties for the axis
+ */
+export function EmptyAxis(props: Props): null {
+    const {
+        chartId,
+        container,
+        axes,
+    } = useChart<Datum, any, any, ContinuousAxisRange, ContinuousNumericAxis>()
+
+    const {
+        addXAxis,
+        addYAxis,
+        axisRangeFor,
+        setAxisRangeFor,
+        setAxisIntervalFor,
+    } = axes
+
+    const {
+        plotDimensions,
+        margin
+    } = usePlotDimensions()
+
+    const {
+        axisId,
+        location,
+    } = props
+
+    const axisRef = useRef<ContinuousNumericAxis>(undefined)
+    const axisIdRef = useRef<string>(axisId)
+    const marginRef = useRef<Margin>(margin)
+
+    useEffect(
+        () => {
+            axisIdRef.current = axisId
+            marginRef.current = margin
+        },
+        [axisId, plotDimensions, margin]
+    )
+
+    useEffect(
+        () => {
+            if (container) {
+                const svg = d3.select<SVGSVGElement, any>(container)
+
+                if (axisRef.current === undefined) {
+                    switch (location) {
+                        case AxisLocation.Bottom:
+                        case AxisLocation.Top: {
+                            axisRef.current = addEmptyXAxis(
+                                axisId, svg, plotDimensions, location, EMPTY_AXIS_SCALE,
+                                margin, setAxisIntervalFor, EMPTY_AXIS_DOMAIN
+                            )
+                            // add the x-axis to the chart context
+                            const [start, end] = AxisInterval.as(EMPTY_AXIS_DOMAIN).asTuple()
+                            addXAxis(axisRef.current, axisId, ContinuousAxisRange.from(start, end))
+
+                            break
+                        }
+
+                        case AxisLocation.Left:
+                        case AxisLocation.Right: {
+                            axisRef.current = addEmptyYAxis(
+                                axisId, svg, plotDimensions, location, EMPTY_AXIS_SCALE,
+                                margin, setAxisIntervalFor, EMPTY_AXIS_DOMAIN
+                            )
+                            // add the y-axis to the chart context
+                            const [start, end] = AxisInterval.as(EMPTY_AXIS_DOMAIN).asTuple()
+                            addYAxis(axisRef.current, axisId, ContinuousAxisRange.from(start, end))
+                        }
+                    }
+                } else {
+                    const axisRange = axisRangeFor(axisId)
+                    const domain = axisRange
+                        .map(range => range.current)
+                        .getOrElse(AxisInterval.empty())
+                    if (domain.isNotEmpty()) {
+                        axisRef.current.update(domain, plotDimensions, margin)
+                    }
+                }
+            }
+        },
+        [
+            chartId, axisId, location, addXAxis, addYAxis,
+            container, margin, plotDimensions, setAxisIntervalFor,
+            axisRangeFor,
+            setAxisRangeFor,
+        ]
+    )
+
+    return null
+}

package/src/app/charts/axes/OrdinalAxis.tsx

@@ -18,7 +18,7 @@ import {OrdinalAxisRange} from "./OrdinalAxisRange";
 import {Datum} from "../series/timeSeries";
 import {AxisInterval} from "./AxisInterval";
 
-interface Props {
+export interface Props {
     // the unique ID of the axis
     axisId: string
     // the location of the axis. for y-axes, this mut be either left or right,
@@ -59,7 +59,6 @@ interface Props {
  * be the name of the series used to represent each category.
  * @param props The properties for the component
  * @return null
- * @constructor
  */
 export function OrdinalAxis(props: Props): null {
     const {
@@ -77,6 +76,7 @@ export function OrdinalAxis(props: Props): null {
         setAxisIntervalFor,
         axisRangeFor,
         addAxesRangesUpdateHandler,
+        removeAxesRangesUpdateHandler,
         setOriginalAxisIntervalFor,
     } = axes
 
@@ -136,7 +136,7 @@ export function OrdinalAxis(props: Props): null {
                             addXAxis(xAxis, axisId, OrdinalAxisRange.from(start, end))
 
                             // add an update handler
-                            rangeUpdateHandlerIdRef.current = `x-axis-${chartId}-${location.valueOf()}`
+                            rangeUpdateHandlerIdRef.current = `x-axis-${chartId}-${axisId}-${location.valueOf()}`
                             addAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current, handleRangeUpdates)
                             break
                         }
@@ -152,7 +152,7 @@ export function OrdinalAxis(props: Props): null {
                             const [start, end] = AxisInterval.as(yAxis.scale.range()).asTuple()
                             addYAxis(yAxis, axisId, OrdinalAxisRange.from(start, end))
                             // add an update handler
-                            rangeUpdateHandlerIdRef.current = `y-axis-${chartId}-${location.valueOf()}`
+                            rangeUpdateHandlerIdRef.current = `y-axis-${chartId}-${axisId}-${location.valueOf()}`
                             addAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current, handleRangeUpdates)
                         }
                     }
@@ -218,6 +218,17 @@ export function OrdinalAxis(props: Props): null {
         ]
     );
 
+    useEffect(
+        () => {
+            return () => {
+                if (rangeUpdateHandlerIdRef.current) {
+                    removeAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current)
+                }
+            }
+        },
+        [removeAxesRangesUpdateHandler]
+    )
+
     return null
 }
 

package/src/app/charts/axes/axes.ts

@@ -616,6 +616,122 @@ function ordinalLabelYTranslation(
     continuous numeric axes
  */
 
+/**
+ * Adds a new empty x-axis to the SVG element at the specified location. An empty axis
+ * is just a line where the axis would be, without any ticks or labels.
+ * @param axisId The ID of the axis
+ * @param svg The SVG selection to which to add the axis
+ * @param plotDimensions The dimensions of the plot
+ * @param location The location of the axis
+ * @param scaleGenerator The higher-order function that returns the axis d3 "scale" function
+ * @param domain The axis range (start, end)
+ * @param margin The plot margins for the border of main SVG group
+ * @param setAxisRangeFor A callback used to set the axis range
+ * @return A {@link ContinuousNumericAxis} based on the arguments to this function
+ */
+export function addEmptyXAxis(
+    axisId: string,
+    svg: SvgSelection,
+    plotDimensions: Dimensions,
+    location: AxisLocation.Bottom | AxisLocation.Top,
+    scaleGenerator: ScaleContinuousNumeric<number, number>,
+    margin: Margin,
+    setAxisRangeFor: (axisId: string, timeRange: AxisInterval) => void,
+    domain: [minValue: number, maxValue: number] = [0, 1],
+): ContinuousNumericAxis {
+    const scale = scaleGenerator.domain(domain).range([0, plotDimensions.width])
+
+    const selection = svg
+        .append<SVGGElement>('g')
+        .attr('transform', `translate(${margin.left}, ${yTranslation(location, plotDimensions, margin)})`)
+
+    const line = selection.append('line')
+        .attr('x1', 0)
+        .attr('y1', 0)
+        .attr('x2', plotDimensions.width)
+        .attr('y2', 0)
+        .attr('stroke', 'currentColor')
+
+    const axis: ContinuousNumericAxis = {
+        axisId,
+        location,
+        selection,
+        scale,
+        generator: d3.axisBottom(scale).tickValues([]).tickSize(0),
+        update: noop
+    }
+    return {
+        ...axis,
+        update: (domain: AxisInterval, plotDimensions: Dimensions, margin: Margin) => {
+            axis.scale.domain(domain.asTuple()).range([0, plotDimensions.width])
+            axis.selection
+                .attr('transform', `translate(${margin.left}, ${yTranslation(location, plotDimensions, margin)})`)
+
+            line.attr('x2', plotDimensions.width)
+
+            setAxisRangeFor(axisId, domain)
+        }
+    }
+}
+
+/**
+ * Adds a new empty y-axis to the SVG element at the specified location. An empty axis
+ * is just a line where the axis would be, without any ticks or labels.
+ * @param axisId The ID of the axis
+ * @param svg The SVG selection to which to add the axis
+ * @param plotDimensions The dimensions of the plot
+ * @param location The location of the axis
+ * @param scaleGenerator The higher-order function that returns the axis d3 "scale" function
+ * @param domain The axis range (start, end)
+ * @param margin The plot margins for the border of main SVG group
+ * @param setAxisRangeFor A callback used to set the axis range
+ * @return A {@link ContinuousNumericAxis} based on the arguments to this function
+ */
+export function addEmptyYAxis(
+    axisId: string,
+    svg: SvgSelection,
+    plotDimensions: Dimensions,
+    location: AxisLocation.Left | AxisLocation.Right,
+    scaleGenerator: ScaleContinuousNumeric<number, number>,
+    margin: Margin,
+    setAxisRangeFor: (axisId: string, timeRange: AxisInterval) => void,
+    domain: [minValue: number, maxValue: number] = [0, 1],
+): ContinuousNumericAxis {
+    const scale = scaleGenerator.domain(domain).range([plotDimensions.height, 0])
+
+    const selection = svg
+        .append<SVGGElement>('g')
+        .attr('transform', `translate(${xTranslation(location, plotDimensions, margin)}, ${margin.top})`)
+
+    const line = selection.append('line')
+        .attr('x1', 0)
+        .attr('y1', 0)
+        .attr('x2', 0)
+        .attr('y2', plotDimensions.height)
+        .attr('stroke', 'currentColor')
+
+    const axis: ContinuousNumericAxis = {
+        axisId,
+        location,
+        selection,
+        scale,
+        generator: d3.axisLeft(scale).tickValues([]).tickSize(0),
+        update: noop
+    }
+    return {
+        ...axis,
+        update: (domain: AxisInterval, plotDimensions: Dimensions, margin: Margin) => {
+            axis.scale.domain(domain.asTuple()).range([plotDimensions.height, 0])
+            axis.selection
+                .attr('transform', `translate(${xTranslation(location, plotDimensions, margin)}, ${margin.top})`)
+
+            line.attr('y2', plotDimensions.height)
+
+            setAxisRangeFor(axisId, domain)
+        }
+    }
+}
+
 /**
  * Adds a new x-axis to the SVG element at the specified location
  * @param chartId The ID of the chart
@@ -653,13 +769,13 @@ export function addContinuousNumericXAxis(
     svg
         .append<SVGTextElement>('text')
             .attr('id', labelIdFor(chartId, location))
-            .style('text-anchor', 'middle')
+            .attr('text-anchor', 'middle')
             // when the axis is at the top, want the label to hang from the top (y=0) of the plot
-            .style('dominant-baseline', location === AxisLocation.Top ? "hanging" : "baseline")
-            .style('font-size', axesLabelFont.size)
-            .style('fill', axesLabelFont.color)
-            .style('font-family', axesLabelFont.family)
-            .style('font-weight', axesLabelFont.weight)
+            .attr('dominant-baseline', location === AxisLocation.Top ? "hanging" : "baseline")
+            .attr('font-size', axesLabelFont.size)
+            .attr('fill', axesLabelFont.color)
+            .attr('font-family', axesLabelFont.family)
+            .attr('font-weight', axesLabelFont.weight)
             .attr('transform', `translate(${margin.left + plotDimensions.width / 2}, ${continuousLabelYTranslation(location, plotDimensions, margin)})`)
         .text(axisLabel)
 

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

@@ -28,7 +28,7 @@ export type UseAxesValues<AR extends BaseAxisRange, A extends BaseAxis> = {
      * 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
-     * @param domain The initial axis range (start, end)
+     * @param range The initial axis range (start, end)
      */
     addXAxis: (axis: A, id: string, range?: AR) => void
     /**
@@ -39,7 +39,7 @@ export type UseAxesValues<AR extends BaseAxisRange, A extends BaseAxis> = {
      * 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
-     * @param domain The initial axis range (start, end)
+     * @param range The initial axis range (start, end)
      */
     addYAxis: (axis: A, id: string, range?: AR) => void
     /**
@@ -153,7 +153,7 @@ export const defaultAxesValues = (): UseAxesValues<any, any> => ({
 // the context for axes
 const AxesContext = createContext<UseAxesValues<any, any>>(defaultAxesValues())
 
-type Props = {
+export type Props = {
     /**y
      * Callback when axes bounds change.
      * @param ranges The ranges (start, end) for each axis in the plot
@@ -167,7 +167,6 @@ type Props = {
  * The React context provider for the {@link UseAxesValues}
  * @param props The properties
  * @return The children wrapped in this provider
- * @constructor
  */
 export default function AxesProvider<AR extends BaseAxisRange, A extends BaseAxis>(props: Props): JSX.Element {
     const {onUpdateAxesInterval, children} = props