stream-charts 1.0.1 → 1.1.0

package/changes.md

@@ -1,5 +1,12 @@
 # change history
 
+## version 1.1.0 (bar chart, Poincare chart, refactoring)
+1. Added bar chart
+2. Added Poincare chart
+3. Refactored code for better readability and maintainability
+4. Added tests
+5. Fixed an incorrect calculation of the plot size from the svg container size
+
 ## version 1.0.1 (tooltip clipping issue)
 Fixed issue where the tooltip was getting clipped at the top of the plot under certain circumstances.
 

package/dist/src/app/charts/Chart.d.ts

@@ -1,11 +1,18 @@
-/// <reference types="react" />
-import { Margin } from "./margins";
-import { SvgStyle } from "./svgStyle";
-import { Datum, Series } from "./datumSeries";
+import { JSX } from 'react';
+import { Margin } from "./styling/margins";
+import { SvgStyle } from "./styling/svgStyle";
+import { SeriesStyle } from "./axes/axes";
 import { Observable, Subscription } from "rxjs";
-import { ChartData } from "./chartData";
-import { SeriesLineStyle } from "./axes";
-interface Props {
+import { BaseSeries } from "./series/baseSeries";
+import { ChartData } from "./observables/ChartData";
+import { AxisInterval } from "./axes/AxisInterval";
+/**
+ * @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> {
+    chartId: number;
     /**
      * The width of the chart container
      */
@@ -19,11 +26,11 @@ interface Props {
      */
     margin?: Partial<Margin>;
     /**
-     * The base/default color of the chart lines. This can be overriden by the {@link Props.svgStyle} property.
+     * The base/default color of the chart lines. This can be overridden by the {@link Props.svgStyle} property.
      */
     color?: string;
     /**
-     * The base/default background color. This can be overriden by the {@link Props.svgStyle} property.
+     * The base/default background color. This can be overridden by the {@link Props.svgStyle} property.
      */
     backgroundColor?: string;
     /**
@@ -31,51 +38,67 @@ interface Props {
      */
     svgStyle?: Partial<SvgStyle>;
     /**
-     * Map holding the series name to the {@link SeriesLineStyle} associated with that series.
+     * Map holding the series name to the series style associated with that series.
+     */
+    seriesStyles?: Map<string, S>;
+    /**
+     * Initial (static) data to plot before subscribing to the {@link TimeSeriesChartData} observable.
      */
-    seriesStyles?: Map<string, SeriesLineStyle>;
+    initialData: Array<BaseSeries<D>>;
     /**
-     * Initial (static) data to plot before subscribing to the {@link ChartData} observable.
+     * Optional conversion function that converts an array of base-series with datum type D to a
+     * descendent of a {@link ChartData} object
+     * @param initialData The initial array of series
      */
-    initialData: Array<Series>;
+    asChartData?: (initialData: Array<BaseSeries<D>>) => CD;
     /**
      * Regular expression that filters which series to display on the plot. Can be update while streaming
      */
     seriesFilter?: RegExp;
     /**
-     * {@link ChartData} RxJS `Observable` that feeds the chart data to display (i.e. the data stream).
+     * {@link TimeSeriesChartData} RxJS `Observable` that feeds the chart data to display (i.e. the data stream).
      */
-    seriesObservable?: Observable<ChartData>;
+    seriesObservable?: Observable<CD>;
     /**
      * 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-window result in smoother scrolling, but more updates, and
+     * sourced by the observable. Smaller time-windows result in smoother scrolling, but more updates, and
      * possibly a larger lag.
      */
     windowingTime?: number;
     /**
-     * When switching to `true` from `false`, subscribes to the {@link Props.seriesObservable}. When switching
-     * to `false` from `true`, unsubscribes from the {@link Props.seriesObservable}.
+     * When switching to `true` from `false`, subscribes to the {@link seriesObservable}. When switching
+     * to `false` from `true`, unsubscribes from the {@link seriesObservable}.
      */
     shouldSubscribe?: boolean;
     /**
-     * Callback when the chart subscribes to the {@link ChartData} observable
+     * Callback when the chart subscribes to the {@link TimeSeriesChartData} observable
      * @param subscription The RxJS subscription
      */
     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
+     * 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.
+     * @param ranges 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.
      */
-    onUpdateTime?: (times: Map<string, [start: number, end: number]>) => void;
+    onUpdateAxesBounds?: (ranges: Map<string, AxisInterval>) => 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
+     * @param time The current chart time
+     */
+    onUpdateChartTime?: (time: 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;
+    onUpdateData?: (seriesName: string, data: Array<D>) => void;
     /**
      * The child components of the chart (i.e. the axis, plot, tracker, tooltip)
      */
@@ -85,21 +108,27 @@ interface Props {
  * The chart container that holds the axes, plot, tracker, and tooltip. The chart manages the
  * subscription, sets up the {@link useChart} hook via the {@link ChartProvider}.
  * @param props The properties of the chart
+ * @template CD Chart data
+ * @template D The type of the datum type held in a series
+ * @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
  *
- <Chart
-     width={useGridCellWidth()}
-     height={useGridCellHeight()}
-     margin={{...defaultMargin, top: 60, right: 75, left: 70}}
-     color={theme.color}
-     backgroundColor={theme.backgroundColor}
-     seriesStyles={new Map([
+
+<Chart
+    width={useGridCellWidth()}
+    height={useGridCellHeight()}
+    margin={{...defaultMargin, top: 60, right: 75, left: 70}}
+    color={theme.color}
+    backgroundColor={theme.backgroundColor}
+    seriesStyles={new Map([
         ['neuron1', {
-             ...defaultLineStyle,
-             color: 'orange',
-             lineWidth: 2,
-             highlightColor: 'orange'
+            ...defaultLineStyle,
+            color: 'orange',
+            lineWidth: 2,
+            highlightColor: 'orange'
         }],
         ['neuron6', {
             ...defaultLineStyle,
@@ -108,60 +137,60 @@ interface Props {
             highlightColor: theme.name === 'light' ? 'blue' : 'gray',
             highlightWidth: 5
         }],
-     ])}
-     initialData={initialDataRef.current}
-     seriesFilter={filter}
-     seriesObservable={observableRef.current}
-     shouldSubscribe={running}
-     onUpdateTime={handleChartTimeUpdate}
-     windowingTime={150}
- >
-     <ContinuousAxis
-         axisId="x-axis-1"
-         location={AxisLocation.Bottom}
-         domain={[0, 5000]}
-         label="t (ms)"
-     />
-     <CategoryAxis
-         axisId="y-axis-1"
-         location={AxisLocation.Left}
-         categories={initialDataRef.current.map(series => series.name)}
-         label="neuron"
-     />
-     <CategoryAxis
-         axisId="y-axis-2"
-         location={AxisLocation.Right}
-         categories={initialDataRef.current.map(series => series.name)}
-         label="neuron"
-     />
-     <Tracker
-         visible={visibility.tracker}
-         labelLocation={TrackerLabelLocation.WithMouse}
-         style={{color: theme.color}}
-         font={{color: theme.color}}
-     />
-     <Tooltip
-         visible={visibility.tooltip}
-         style={{
+    ])}
+    initialData={initialDataRef.current}
+    seriesFilter={filter}
+    seriesObservable={observableRef.current}
+    shouldSubscribe={running}
+    onUpdateTime={handleChartTimeUpdate}
+    windowingTime={150}
+>
+    <ContinuousAxis
+        axisId="x-axis-1"
+        location={AxisLocation.Bottom}
+        domain={[0, 5000]}
+        label="t (ms)"
+    />
+    <CategoryAxis
+        axisId="y-axis-1"
+        location={AxisLocation.Left}
+        categories={initialDataRef.current.map(series => series.name)}
+        label="neuron"
+    />
+    <CategoryAxis
+        axisId="y-axis-2"
+        location={AxisLocation.Right}
+        categories={initialDataRef.current.map(series => series.name)}
+        label="neuron"
+    />
+    <Tracker
+        visible={visibility.tracker}
+        labelLocation={TrackerLabelLocation.WithMouse}
+        style={{color: theme.color}}
+        font={{color: theme.color}}
+    />
+    <Tooltip
+        visible={visibility.tooltip}
+        style={{
             fontColor: theme.color,
             backgroundColor: theme.backgroundColor,
             borderColor: theme.color,
             backgroundOpacity: 0.9,
-         }}
-     >
-         <RasterPlotTooltipContent
-             xFormatter={value => formatNumber(value, " ,.0f") + ' ms'}
-             yFormatter={value => formatNumber(value, " ,.1f") + ' mV'}
-         />
-     </Tooltip>
-     <RasterPlot
-         spikeMargin={1}
-         dropDataAfter={5000}
-         panEnabled={true}
-         zoomEnabled={true}
-         zoomKeyModifiersRequired={true}
-     />
- </Chart>
- */
-export declare function Chart(props: Props): JSX.Element;
+        }}
+    >
+        <RasterPlotTooltipContent
+            xFormatter={value => formatNumber(value, " ,.0f") + ' ms'}
+            yFormatter={value => formatNumber(value, " ,.1f") + ' mV'}
+        />
+    </Tooltip>
+    <RasterPlot
+        spikeMargin={1}
+        dropDataAfter={5000}
+        panEnabled={true}
+        zoomEnabled={true}
+        zoomKeyModifiersRequired={true}
+    />
+</Chart>
+*/
+export declare function Chart<CD extends ChartData, D, S extends SeriesStyle, TM>(props: Props<CD, D, S>): JSX.Element;
 export {};

package/dist/src/app/charts/Chart.js

@@ -1,42 +1,43 @@
-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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from 'react';
-import { plotDimensionsFrom } from "./margins";
-import { initialSvgStyle } from "./svgStyle";
-import ChartProvider, { defaultMargin } from "./hooks/useChart";
+import { plotDimensionsFrom } from "./styling/margins";
+import { initialSvgStyle } from "./styling/svgStyle";
+import ChartProvider from "./hooks/useChart";
+import PlotDimensionsProvider, { defaultMargin } from "./hooks/usePlotDimensions";
 import * as d3 from "d3";
-import { createPlotContainer } from "./plot";
+import { createPlotContainer } from "./plots/plot";
 import { noop } from "./utils";
-var defaultBackground = '#202020';
+import AxesProvider from "./hooks/useAxes";
+import MouseProvider from "./hooks/useMouse";
+import TooltipProvider from "./hooks/useTooltip";
+import DataObservableProvider from './hooks/useDataObservable';
+import InitialDataProvider from "./hooks/useInitialData";
+const defaultBackground = '#202020';
 /**
  * The chart container that holds the axes, plot, tracker, and tooltip. The chart manages the
  * subscription, sets up the {@link useChart} hook via the {@link ChartProvider}.
  * @param props The properties of the chart
+ * @template CD Chart data
+ * @template D The type of the datum type held in a series
+ * @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
  *
- <Chart
-     width={useGridCellWidth()}
-     height={useGridCellHeight()}
-     margin={{...defaultMargin, top: 60, right: 75, left: 70}}
-     color={theme.color}
-     backgroundColor={theme.backgroundColor}
-     seriesStyles={new Map([
+
+<Chart
+    width={useGridCellWidth()}
+    height={useGridCellHeight()}
+    margin={{...defaultMargin, top: 60, right: 75, left: 70}}
+    color={theme.color}
+    backgroundColor={theme.backgroundColor}
+    seriesStyles={new Map([
         ['neuron1', {
-             ...defaultLineStyle,
-             color: 'orange',
-             lineWidth: 2,
-             highlightColor: 'orange'
+            ...defaultLineStyle,
+            color: 'orange',
+            lineWidth: 2,
+            highlightColor: 'orange'
         }],
         ['neuron6', {
             ...defaultLineStyle,
@@ -45,105 +46,99 @@ var defaultBackground = '#202020';
             highlightColor: theme.name === 'light' ? 'blue' : 'gray',
             highlightWidth: 5
         }],
-     ])}
-     initialData={initialDataRef.current}
-     seriesFilter={filter}
-     seriesObservable={observableRef.current}
-     shouldSubscribe={running}
-     onUpdateTime={handleChartTimeUpdate}
-     windowingTime={150}
- >
-     <ContinuousAxis
-         axisId="x-axis-1"
-         location={AxisLocation.Bottom}
-         domain={[0, 5000]}
-         label="t (ms)"
-     />
-     <CategoryAxis
-         axisId="y-axis-1"
-         location={AxisLocation.Left}
-         categories={initialDataRef.current.map(series => series.name)}
-         label="neuron"
-     />
-     <CategoryAxis
-         axisId="y-axis-2"
-         location={AxisLocation.Right}
-         categories={initialDataRef.current.map(series => series.name)}
-         label="neuron"
-     />
-     <Tracker
-         visible={visibility.tracker}
-         labelLocation={TrackerLabelLocation.WithMouse}
-         style={{color: theme.color}}
-         font={{color: theme.color}}
-     />
-     <Tooltip
-         visible={visibility.tooltip}
-         style={{
+    ])}
+    initialData={initialDataRef.current}
+    seriesFilter={filter}
+    seriesObservable={observableRef.current}
+    shouldSubscribe={running}
+    onUpdateTime={handleChartTimeUpdate}
+    windowingTime={150}
+>
+    <ContinuousAxis
+        axisId="x-axis-1"
+        location={AxisLocation.Bottom}
+        domain={[0, 5000]}
+        label="t (ms)"
+    />
+    <CategoryAxis
+        axisId="y-axis-1"
+        location={AxisLocation.Left}
+        categories={initialDataRef.current.map(series => series.name)}
+        label="neuron"
+    />
+    <CategoryAxis
+        axisId="y-axis-2"
+        location={AxisLocation.Right}
+        categories={initialDataRef.current.map(series => series.name)}
+        label="neuron"
+    />
+    <Tracker
+        visible={visibility.tracker}
+        labelLocation={TrackerLabelLocation.WithMouse}
+        style={{color: theme.color}}
+        font={{color: theme.color}}
+    />
+    <Tooltip
+        visible={visibility.tooltip}
+        style={{
             fontColor: theme.color,
             backgroundColor: theme.backgroundColor,
             borderColor: theme.color,
             backgroundOpacity: 0.9,
-         }}
-     >
-         <RasterPlotTooltipContent
-             xFormatter={value => formatNumber(value, " ,.0f") + ' ms'}
-             yFormatter={value => formatNumber(value, " ,.1f") + ' mV'}
-         />
-     </Tooltip>
-     <RasterPlot
-         spikeMargin={1}
-         dropDataAfter={5000}
-         panEnabled={true}
-         zoomEnabled={true}
-         zoomKeyModifiersRequired={true}
-     />
- </Chart>
- */
+        }}
+    >
+        <RasterPlotTooltipContent
+            xFormatter={value => formatNumber(value, " ,.0f") + ' ms'}
+            yFormatter={value => formatNumber(value, " ,.1f") + ' mV'}
+        />
+    </Tooltip>
+    <RasterPlot
+        spikeMargin={1}
+        dropDataAfter={5000}
+        panEnabled={true}
+        zoomEnabled={true}
+        zoomKeyModifiersRequired={true}
+    />
+</Chart>
+*/
 export function Chart(props) {
-    var width = props.width, height = props.height, _a = props.color, color = _a === void 0 ? '#d2933f' : _a, _b = props.backgroundColor, backgroundColor = _b === void 0 ? defaultBackground : _b, _c = props.seriesStyles, seriesStyles = _c === void 0 ? new Map() : _c, initialData = props.initialData, _d = props.seriesFilter, seriesFilter = _d === void 0 ? /./ : _d, seriesObservable = props.seriesObservable, _e = props.windowingTime, windowingTime = _e === void 0 ? 100 : _e, _f = props.shouldSubscribe, shouldSubscribe = _f === void 0 ? true : _f, 
-    // onUpdateTime = noop,
-    _g = props.onSubscribe, 
-    // onUpdateTime = noop,
-    onSubscribe = _g === void 0 ? noop : _g, _h = props.onUpdateTime, onUpdateTime = _h === void 0 ? noop : _h, _j = props.onUpdateData, onUpdateData = _j === void 0 ? noop : _j, children = props.children;
+    const { chartId, width, height, color = '#d2933f', backgroundColor = defaultBackground, seriesStyles = new Map(), initialData, asChartData, seriesFilter = /./, seriesObservable, windowingTime = 100, shouldSubscribe = true, onSubscribe = noop, onUpdateAxesBounds = noop, onUpdateChartTime = noop, onUpdateData = noop, children, } = props;
     // override the defaults with the parent's properties, leaving any unset values as the default value
-    var margin = __assign(__assign({}, defaultMargin), props.margin);
-    var svgStyle = useMemo(function () { return (__assign(__assign(__assign({}, initialSvgStyle), props.svgStyle), { width: props.width, height: props.height })); }, [props.height, props.svgStyle, props.width]);
-    // id of the chart to avoid dom conflicts when multiple charts are used in the same app
-    var chartId = useRef(Math.floor(Math.random() * Number.MAX_SAFE_INTEGER));
+    const margin = Object.assign(Object.assign({}, defaultMargin), props.margin);
+    const svgStyle = useMemo(() => (Object.assign(Object.assign(Object.assign({}, initialSvgStyle), props.svgStyle), { width: props.width, height: props.height })), [props.height, props.svgStyle, props.width]);
     // hold a reference to the current width and the plot dimensions
-    var plotDimRef = useRef(plotDimensionsFrom(width, height, margin));
+    const plotDimRef = useRef(plotDimensionsFrom(width, height, margin));
     // the container that holds the d3 svg element
-    var mainGRef = useRef(null);
-    var containerRef = useRef(null);
+    const mainGRef = useRef(null);
+    const containerRef = useRef(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
-    useEffect(function () {
+    useEffect(() => {
         if (containerRef.current) {
             // create the main SVG element if it doesn't already exist
             if (!mainGRef.current) {
-                mainGRef.current = createPlotContainer(chartId.current, containerRef.current, plotDimRef.current, color);
+                mainGRef.current = createPlotContainer(chartId, containerRef.current, plotDimRef.current, color);
             }
             // build up the svg style from the defaults and any svg style object
             // passed in as properties
-            var style = Object.getOwnPropertyNames(svgStyle)
-                .map(function (name) { return name + ": " + svgStyle[name] + "; "; })
+            const style = Object.getOwnPropertyNames(svgStyle)
+                .map(name => `${name}: ${svgStyle[name]}; `)
                 .join("");
             // when the chart "backgroundColor" property is set (i.e. not the default value),
             // then we need add it to the styles, overwriting any color that may have been
             // set in the svg style object
-            var background = backgroundColor !== defaultBackground ?
-                "background-color: " + backgroundColor + "; " :
+            const background = backgroundColor !== defaultBackground ?
+                `background-color: ${backgroundColor}; ` :
                 '';
             // update the dimension and style
             d3.select(containerRef.current)
                 .attr('width', width)
                 .attr('height', height)
-                .attr('style', style + background + (" color: " + color));
+                .attr('style', style + background + ` color: ${color}`);
         }
-    }, [color, backgroundColor, height, svgStyle, width]);
-    return (_jsxs(_Fragment, { children: [_jsx("svg", { ref: containerRef }, void 0), _jsx(ChartProvider, __assign({ chartId: chartId.current, container: containerRef.current, mainG: mainGRef.current, containerDimensions: { width: width, height: height }, margin: margin, color: color, seriesStyles: seriesStyles, initialData: initialData, seriesFilter: seriesFilter, seriesObservable: seriesObservable, windowingTime: windowingTime, shouldSubscribe: shouldSubscribe, onSubscribe: onSubscribe, onUpdateTime: onUpdateTime, onUpdateData: onUpdateData }, { children: 
-                // the chart elements are the children
-                children }), void 0)] }, void 0));
+    }, [color, backgroundColor, height, svgStyle, width, chartId]);
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { ref: containerRef }), _jsx(PlotDimensionsProvider, { containerDimensions: { width, height }, margin: margin, children: _jsx(AxesProvider, { onUpdateAxesInterval: onUpdateAxesBounds, children: _jsx(MouseProvider, { children: _jsx(TooltipProvider, { children: _jsx(InitialDataProvider, { initialData: initialData, asChartData: asChartData, children: _jsx(DataObservableProvider, { seriesObservable: seriesObservable, windowingTime: windowingTime, shouldSubscribe: shouldSubscribe, onSubscribe: onSubscribe, onUpdateData: onUpdateData, onUpdateChartTime: onUpdateChartTime, children: _jsx(ChartProvider, { chartId: chartId, container: containerRef.current, mainG: mainGRef.current, color: color, backgroundColor: backgroundColor, svgStyle: svgStyle, seriesStyles: seriesStyles, seriesFilter: seriesFilter, children: 
+                                        // the chart elements are the children
+                                        children }) }) }) }) }) }) })] }));
 }
 //# sourceMappingURL=Chart.js.map

package/dist/src/app/charts/Chart.js.map

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

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

@@ -0,0 +1,64 @@
+import { BaseAxis } from "./axes";
+import { Optional } from "result-fn";
+/**
+ * Holds the information to allow mapping axes names to the underlying axes objects.
+ * These objects hold the axis ID, its location on the chart (i.e. left, right, bottom, upper)
+ * and the underlying d3 selection objects for managing the axes. Axis objects that extend
+ * the `BaseAxis` class may have additional properties.
+ * @typeParam A The type of the axes (must extend `BaseAxis`)
+ */
+export declare class AxesState<A extends BaseAxis> {
+    readonly axes: Map<string, A>;
+    private constructor();
+    /**
+     * Creates a new axes state from the specified map of axes.
+     * @param axes Mapping of the axes ID's to the axes.
+     * @return A new axes-state object.
+     */
+    static from<A extends BaseAxis>(axes: Map<string, A>): AxesState<A>;
+    /**
+     * Creates an empty axes-state object.
+     * @return A new axes-state object.
+     */
+    static empty<A extends BaseAxis>(): AxesState<A>;
+    /**
+     * @return `true` if the axes state is empty, `false` otherwise.
+     */
+    isEmpty(): boolean;
+    /**
+     * Creates a deep copy of the current axes state.
+     * @return A deep copy of the current axes state.
+     */
+    copy(): AxesState<A>;
+    /**
+     * 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.
+     * @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
+     */
+    addAxis(axis: A, id: string): AxesState<A>;
+    /**
+     * Attempts to retrieve the x-axis for the specified ID
+     * @param axisId The unique ID of the axis
+     * @return The axis, or undefined if no axis with the specified ID is found
+     */
+    axisFor(axisId: string): Optional<A>;
+    /**
+     * Returns the default axis
+     * @return The default axis
+     * @see axisDefaultId
+     */
+    defaultAxis(): Optional<A>;
+    /**
+     * @return An array holding all existing the x-axis IDs
+     */
+    axisIds(): Array<string>;
+    /**
+     * @return The default name of the x-axis (in case only on default axis was added)
+     */
+    axisDefaultId(): Optional<string>;
+}