stream-charts 1.0.1 → 1.1.0

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

@@ -0,0 +1,192 @@
+import {
+    addContinuousNumericXAxis,
+    addContinuousNumericYAxis,
+    AxesFont,
+    AxisLocation,
+    ContinuousNumericAxis,
+    defaultAxesFont,
+    labelIdFor
+} from "./axes";
+import {useChart} from "../hooks/useChart";
+import {useEffect, useRef} from "react";
+import * as d3 from "d3";
+import {ScaleContinuousNumeric} from "d3";
+import {Dimensions, Margin} from "../styling/margins";
+import {usePlotDimensions} from "../hooks/usePlotDimensions";
+import {Datum} from "../series/timeSeries";
+import {AxisInterval} from "./AxisInterval";
+import {ContinuousAxisRange} from "./ContinuousAxisRange";
+
+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, log, or power scale that defaults to linear scale when not specified
+    scale?: ScaleContinuousNumeric<number, number>
+    // the min and max values for the axis
+    domain: [min: number, max: number]
+    // the font for drawing the axis ticks and labels
+    font?: Partial<AxesFont>
+    // the axis label
+    label: string
+    // The domain prop holds the axis bounds as a (min, max) tuple. The default
+    // behavior is to update the axis bounds when the **values** of the domain
+    // prop change, rather than when the object reference changes. This allows
+    // a user of the chart to specify a tuple-literal as the ranges, rather than
+    // forcing the user of the chart to create a ref and use that ref.
+    //
+    // This behavior is important when allowing the axes to scroll in time, as
+    // is done in the scatter plot or the raster plot. In this case, if the user
+    // of the raster chart specifies the axis domain as a tuple-literal, then
+    // the bounds will get reset to their original value with each render.
+    //
+    // However, for charts that don't scroll, such as the iterates chart, but where
+    // the user would like to change axis-bounds, say for a different iterates
+    // function, we would like the axis bounds to be reset based on a change to
+    // the object ref instead. In this case, we can set this property to false.
+    updateAxisBasedOnDomainValues?: boolean
+}
+
+/**
+ * Represents a continuous numeric axis (x or y) that can be place on the top, bottom,
+ * left, or right of the chart. The domain (axis range) can be managed by this axis
+ *  component or managed externally (i.e. deferred). This component returns null, meaning
+ * 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 {
+        chartId,
+        container,
+        axes,
+        color
+    } = useChart<Datum, any, any, ContinuousAxisRange, ContinuousNumericAxis>()
+
+    const {
+        xAxesState,
+        yAxesState,
+        addXAxis,
+        addYAxis,
+        axisRangeFor,
+        setAxisIntervalFor,
+        setAxisRangeFor,
+        addAxesRangesUpdateHandler,
+    } = axes
+
+    const {
+        plotDimensions,
+        margin
+    } = usePlotDimensions()
+
+    const {
+        axisId,
+        location,
+        scale = d3.scaleLinear(),
+        domain,
+        updateAxisBasedOnDomainValues = true,
+        label,
+    } = props
+
+    const axisRef = useRef<ContinuousNumericAxis>(undefined)
+    const rangeUpdateHandlerIdRef = useRef<string>(undefined)
+
+    const axisIdRef = useRef<string>(axisId)
+    const marginRef = useRef<Margin>(margin)
+    const domainRef = useRef<AxisInterval>(AxisInterval.as(domain))
+    useEffect(
+        () => {
+            axisIdRef.current = axisId
+            marginRef.current = margin
+        },
+        [axisId, plotDimensions, margin]
+    )
+
+    useEffect(
+        () => {
+            if (container) {
+                const svg = d3.select<SVGSVGElement, any>(container)
+                const font: AxesFont = {...defaultAxesFont(), color, ...props.font}
+
+                const handleRangeUpdates = (updates: Map<string, ContinuousAxisRange>, plotDim: Dimensions): void => {
+                    if (rangeUpdateHandlerIdRef.current && axisRef.current) {
+                        const range = updates.get(axisId)
+                        if (range) {
+                            axisRef.current.update(range.current, plotDim, marginRef.current)
+                        }
+                    }
+                }
+
+                if (axisRef.current === undefined) {
+                    switch (location) {
+                        case AxisLocation.Bottom:
+                        case AxisLocation.Top: {
+                            axisRef.current = addContinuousNumericXAxis(
+                                chartId, axisId, svg, plotDimensions, location, scale, domain,
+                                font, margin, label, setAxisIntervalFor
+                            )
+                            // add the x-axis to the chart context
+                            const [start, end] = AxisInterval.as(domain).asTuple()
+                            addXAxis(axisRef.current, axisId, ContinuousAxisRange.from(start, end))
+                            // addXAxis(axisRef.current, axisId, AxisInterval.as(domain))
+
+                            // add an update handler
+                            rangeUpdateHandlerIdRef.current = `x-axis-${chartId}-${location.valueOf()}`
+                            addAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current, handleRangeUpdates)
+
+                            break
+                        }
+
+                        case AxisLocation.Left:
+                        case AxisLocation.Right: {
+                            axisRef.current = addContinuousNumericYAxis(
+                                chartId, axisId, svg, plotDimensions, location, scale, domain,
+                                font, margin, label, setAxisIntervalFor
+                            )
+                            // add the y-axis to the chart context
+                            const [start, end] = AxisInterval.as(domain).asTuple()
+                            addYAxis(axisRef.current, axisId, ContinuousAxisRange.from(start, end))
+                            // addYAxis(axisRef.current, axisId, AxisInterval.as(domain))
+
+                            // add an update handler
+                            rangeUpdateHandlerIdRef.current = `y-axis-${chartId}-${location.valueOf()}`
+                            addAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current, handleRangeUpdates)
+                        }
+                    }
+                } else {
+                    const axisRange = axisRangeFor(axisId)
+                    const domain = axisRange
+                        .map(range => range.current)
+                        .getOrElse(AxisInterval.empty())
+                    if (domain.isNotEmpty()) {
+                        axisRef.current.update(domain, plotDimensions, margin)
+                    }
+
+                    if (
+                        (updateAxisBasedOnDomainValues && (domainRef.current.start !== domain.start || domainRef.current.end !== domain.end)) ||
+                        (!updateAxisBasedOnDomainValues && domainRef.current !== domain)
+                    ) {
+                        domainRef.current = domain
+                        axisRange.ifPresent(range => setAxisRangeFor(axisId, range.updateOriginal(domain.start, domain.end)))
+
+                    }
+
+                    svg.select(`#${labelIdFor(chartId, location)}`).attr('fill', color)
+                }
+            }
+        },
+        [
+            chartId, axisId, label, location, props.font, xAxesState, yAxesState, addXAxis, addYAxis, domain,
+            scale, container, margin, plotDimensions, setAxisIntervalFor,
+            axisRangeFor,
+            addAxesRangesUpdateHandler,
+            setAxisRangeFor,
+            color, updateAxisBasedOnDomainValues
+        ]
+    )
+
+    return null
+}

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

@@ -0,0 +1,55 @@
+import {ContinuousAxisRange} from "./ContinuousAxisRange";
+
+
+test('creates a time-range', () => {
+    const timeRange = ContinuousAxisRange.from(10, 100);
+    expect(timeRange.current).toEqual({start: 10, end: 100});
+    expect(timeRange.scaleFactor).toBe(1);
+});
+
+test('scaling a time-range', () => {
+    const timeRange = ContinuousAxisRange.from(0, 100).scale(2, 50);
+    // the midpoint must remain at 50, so the new range will be 50 - 2 * (50 - 0) to
+    // 50 + 2 * (100 - 50) => (-50, 150)
+    expect(timeRange.current).toEqual({start: -50, end: 150})
+    expect(timeRange.scaleFactor).toBe(2);
+
+    // setting the scale factor back to 1, from its current value of 2 should
+    // return the original time-range (this may be a bit unintuitive, because it
+    // may seem like we should pass in a factor of 0.5 to shrink the scale back, but
+    // that would mean the new interval has a scale factor 4 times smaller.)
+    // this behavior is implemented so that zooming in at out from a point seems
+    // natural to the user.
+    const original = timeRange.scale(1, 50);
+    expect(original.current).toEqual({start: 0, end: 100});
+    expect(original.scaleFactor).toBe(1);
+    // the original shouldn't be changed
+    expect(timeRange.current).toEqual({start: -50, end: 150});
+    expect(timeRange.scaleFactor).toBe(2);
+});
+
+test('translating a time-range', () => {
+    const timeRange = ContinuousAxisRange.from(0, 100).translate(50);
+    expect(timeRange.current).toEqual({start: 50, end: 150});
+    expect(timeRange.scaleFactor).toBe(1);
+});
+
+test('scaling and translating', () => {
+    const original = ContinuousAxisRange.from(0, 100);
+    const scaled = original.scale(2, 50);
+    const translated = scaled.translate(50);
+
+    expect(translated.current).toEqual({start: 0, end: 200});
+    expect(translated.scaleFactor).toBe(2);
+
+    // after the translation, the time-range should shrink around the new time
+    const rescaled = translated.scale(1, 100);
+    expect(rescaled.current).toEqual({start: 50, end: 150});
+    expect(rescaled.scaleFactor).toBe(1);
+
+    // the original interval, maintained by each new time-range, should not change
+    expect(original.matchesOriginal(0, 100)).toEqual(true);
+    expect(scaled.matchesOriginal(0, 100)).toEqual(true);
+    expect(translated.matchesOriginal(0, 100)).toEqual(true);
+    expect(rescaled.matchesOriginal(0, 100)).toEqual(true);
+});

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

@@ -0,0 +1,96 @@
+import {BaseAxisRange} from "./BaseAxisRange";
+
+/**
+ * An immutable continuous-axis range that holds the current range and the original (no zoom) range.
+ * Create an instance using the {@link ContinuousAxisRange.from} factory method.
+ */
+export class ContinuousAxisRange extends BaseAxisRange {
+
+    private constructor(start: number, end: number, originalStart: number = start, originalEnd: number = end) {
+        super(start, end, originalStart, originalEnd)
+    }
+
+    /**
+     * Factory function for creating a new continuous-axis range instance.
+     * @param start The start of the axis-range.
+     * @param end The end of the axis-range.
+     * @param [originalStart=start] The optional original start of the axis-range (e.g. before any zooming or panning.
+     * Defaults to the start value if not specified.)
+     * @param [originalEnd=end] The optional original end of the axis-range (e.g. before any zooming or panning.
+     * Defaults to the end value if not specified.)
+     * @return A new continuous-axis range instance.
+     */
+    static from(start: number, end: number, originalStart: number = start, originalEnd: number = end): ContinuousAxisRange {
+        return new ContinuousAxisRange(start, end, originalStart, originalEnd)
+    }
+
+    /**
+     * Scales the axis-range by the specified scale factor from the specified value. The equations
+     * are written so that the zooming (scaling) occurs at the specified value and expands/contracts equally
+     * from that value.
+     * @param factor The scale factor
+     * @param value The value from which to scale the interval
+     * @return A new continuous-axis range with updated values
+     */
+    scale(factor: number, value: number): ContinuousAxisRange {
+        const scaledInterval = this.scaledRange(factor, value)
+        return new ContinuousAxisRange(scaledInterval.start, scaledInterval.end, this.original.start, this.original.end)
+    }
+
+    /**
+     * Scales the axis-range by the specified scale factor from the specified value, while keeping
+     * the range within the constraints (start, end). The equations are written so that the zooming
+     * (scaling) occurs at the specified value, and expands/contracts equally from that value.
+     * @param factor The scale factor
+     * @param value The value from which to scale the interval
+     * @param constraint The minimum and maximum values that range bounds can be
+     * @return A new continuous-axis range with updated values
+     */
+    constrainedScale(factor: number, value: number, constraint: [min: number, max: number]): BaseAxisRange {
+        const scaledInterval = this.scaledRange(factor, value)
+        const [min, max] = constraint
+        return new ContinuousAxisRange(
+            Math.max(min, scaledInterval.start),
+            Math.min(max, scaledInterval.end),
+            this.original.start,
+            this.original.end
+        )
+    }
+
+    /**
+     * Translates the axis-range by the specified amount
+     * @param amount The amount by which to translate the axis-range
+     * @param [constraint=[-Infinity, Infinity]] Optional constraint interval in which the axis range must be within
+     * @return An updated {@link ContinuousAxisRange} that has been translated by the specified amount
+     */
+    translate(amount: number, constraint: [start: number, end: number] = [-Infinity, Infinity]): ContinuousAxisRange {
+        const [cs, ce] = constraint
+        // when either of the constraints is infinite, or the pan keeps the new axis range
+        // within the origin axis range (i.e. zoomed in and the panned), then allow the pan,
+        // otherwise don't update
+        if ((!isFinite(cs) && !isFinite(ce)) || (this.current.start + amount >= cs && this.current.end + amount <= ce)) {
+            return new ContinuousAxisRange(this.current.start + amount, this.current.end + amount, this.original.start, this.original.end)
+        }
+        return new ContinuousAxisRange(this.current.start, this.current.end, this.original.start, this.original.end)
+    }
+
+    /**
+     * Updates the axis-range with the new start and end values, leaving the original range unchanged.
+     * @param start The new start of the axis-range
+     * @param end The new end of the axis range
+     * @return The updated axis-range type, with all other values unchanged.
+     */
+    update(start: number, end: number): ContinuousAxisRange {
+        return new ContinuousAxisRange(start, end, this.original.start, this.original.end)
+    }
+
+    /**
+     * Updates the original range with the new start and end values.
+     * @param start The new value for the start of the original range
+     * @param end The new value for the end of the original range
+     * @return The updated original range.
+     */
+    updateOriginal(start: number, end: number): BaseAxisRange {
+        return new ContinuousAxisRange(this.current.start, this.current.end, start, end)
+    }
+}

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

@@ -0,0 +1,223 @@
+import {
+    addOrdinalStringAxis,
+    AxesFont,
+    AxisLocation,
+    AxisTickStyle, ContinuousNumericAxis,
+    defaultAxesFont,
+    defaultAxisTickStyle,
+    labelIdFor,
+    OrdinalStringAxis
+} from "./axes"
+import * as d3 from "d3";
+import {ScaleBand} from "d3";
+import {useChart} from "../hooks/useChart";
+import {useEffect, useRef} from "react";
+import {Dimensions} from "../styling/margins";
+import {usePlotDimensions} from "../hooks/usePlotDimensions";
+import {OrdinalAxisRange} from "./OrdinalAxisRange";
+import {Datum} from "../series/timeSeries";
+import {AxisInterval} from "./AxisInterval";
+
+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,
+    // for x-axis, must be either top or bottom.
+    location: AxisLocation
+    // category axes
+    scale?: ScaleBand<string>
+    // the min and max values for the axis
+    categories: Array<string>
+    // the font for drawing the axis ticks and labels
+    font?: Partial<AxesFont>
+    // styling for the axis ticks (e.g. font, rotation, etc)
+    axisTickStyle?: Partial<AxisTickStyle>
+    // the axis label
+    label: string
+    // The domain prop holds the axis bounds as a (min, max) tuple. The default
+    // behavior is to update the axis bounds when the **values** of the domain
+    // prop change, rather than when the object reference changes. This allows
+    // a user of the chart to specify a tuple-literal as the ranges, rather than
+    // forcing the user of the chart to create a ref and use that ref.
+    //
+    // This behavior is important when allowing the axes to scroll in time, as
+    // is done in the scatter plot or the raster plot. In this case, if the user
+    // of the raster chart specifies the axis domain as a tuple-literal, then
+    // the bounds will get reset to their original value with each render.
+    //
+    // However, for charts that don't scroll, such as the iterates chart, but where
+    // the user would like to change axis-bounds, say for a different iterates
+    // function, we would like the axis bounds to be reset based on a change to
+    // the object ref instead. In this case, we can set this property to false.
+    updateAxisBasedOnDomainValues?: boolean
+}
+
+/**
+ * Category axis that represents the x-axis when its location is either on the bottom or the top.
+ * When the axis location is left or right, then the category axis represents the y-axis. The category
+ * axis requires a set of categories that will form the axis. Generally, these categories should
+ * 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 {
+        chartId,
+        container,
+        axes,
+        color,
+    } = useChart<Datum, any, any, OrdinalAxisRange, OrdinalStringAxis>()
+
+    const {
+        xAxesState,
+        yAxesState,
+        addXAxis,
+        addYAxis,
+        setAxisIntervalFor,
+        axisRangeFor,
+        addAxesRangesUpdateHandler,
+        setOriginalAxisIntervalFor,
+    } = axes
+
+    const {
+        plotDimensions,
+        margin,
+        registerPlotDimensionChangeHandler,
+        unregisterPlotDimensionChangeHandler
+    } = usePlotDimensions()
+
+    const {
+        axisId,
+        location,
+        categories,
+        updateAxisBasedOnDomainValues = true,
+        label,
+    } = props
+
+    const rangeUpdateHandlerIdRef = useRef<string>(undefined)
+    const axis = location === AxisLocation.Top || location === AxisLocation.Bottom ?
+        xAxesState.axisFor(axisId).getOrUndefined() :
+        yAxesState.axisFor(axisId).getOrUndefined()
+
+    // handles plot size changes by updating the range of the axis and the original range of the axis
+    useEffect(
+        () => {
+            if (container) {
+                const svg = d3.select<SVGSVGElement, any>(container)
+                const font: AxesFont = {...defaultAxesFont(), color, ...props.font}
+                const axisTickStyle = {...defaultAxisTickStyle(), ...props.axisTickStyle}
+
+
+                // lambda that gets called when the axes need to be updated
+                const handleRangeUpdates = (updates: Map<string, OrdinalAxisRange>, plotDim: Dimensions): void => {
+                    if (rangeUpdateHandlerIdRef.current && axis) {
+                        const range = updates.get(axisId)
+                        if (range) {
+                            axis.update(range.current, range.original, plotDim, margin)
+                        }
+                    }
+                }
+
+                if (axis === undefined) {
+                    // add the x-axis or y-axis to the chart context depending on its
+                    // location
+                    switch (location) {
+                        case AxisLocation.Top:
+                        case AxisLocation.Bottom: {
+                            const xAxis = addOrdinalStringAxis(
+                                chartId, axisId, svg, location, categories,
+                                label, font, axisTickStyle, plotDimensions, margin,
+                                setAxisIntervalFor, setOriginalAxisIntervalFor
+                            )
+
+                            // add the x-axis to the chart context
+                            const [start, end] = AxisInterval.as(xAxis.scale.range()).asTuple()
+                            addXAxis(xAxis, axisId, OrdinalAxisRange.from(start, end))
+
+                            // add an update handler
+                            rangeUpdateHandlerIdRef.current = `x-axis-${chartId}-${location.valueOf()}`
+                            addAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current, handleRangeUpdates)
+                            break
+                        }
+
+                        case AxisLocation.Left:
+                        case AxisLocation.Right: {
+                            const yAxis = addOrdinalStringAxis(
+                                chartId, axisId, svg, location, categories,
+                                label, font, axisTickStyle, plotDimensions, margin,
+                                setAxisIntervalFor, setOriginalAxisIntervalFor
+                            )
+                            // add the y-axis to the chart context
+                            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()}`
+                            addAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current, handleRangeUpdates)
+                        }
+                    }
+                } else {
+                    const [range, originalRange] = axisRangeFor(axisId)
+                        .map(range => ([range.current, range.original]))
+                        .getOrElse([AxisInterval.empty(), AxisInterval.empty()])
+                    if (range && originalRange) {
+                        axis.update(range, originalRange, plotDimensions, margin)
+                    }
+
+                    svg.select(`#${labelIdFor(chartId, location)}`).attr('fill', color)
+                }
+            }
+        },
+        [
+            container,
+            axis,
+            addXAxis, addYAxis,
+            addAxesRangesUpdateHandler,
+            setAxisIntervalFor, setOriginalAxisIntervalFor, axisRangeFor,
+            xAxesState, yAxesState,
+            updateAxisBasedOnDomainValues,
+            chartId, axisId,
+            categories,
+            color, label, location, margin, plotDimensions, props.axisTickStyle, props.font,
+        ]
+    )
+
+    useEffect(
+        () => {
+            const handlerId = registerPlotDimensionChangeHandler((oldDimension, newDimension) => {
+                if (axis !== undefined) {
+                    if (location === AxisLocation.Top || location === AxisLocation.Bottom) {
+                        const [start, end] = axisRangeFor(axisId)
+                            .map(range => range.current.asTuple())
+                            .getOrElse(AxisInterval.empty().asTuple())
+                        const {current, original} = OrdinalAxisRange
+                            .from(start, end, 0, oldDimension.width)
+                            .zoom(oldDimension.width, newDimension.width)
+                        axis.update(current, original, plotDimensions, margin)
+                    }
+                    if (location === AxisLocation.Left || location === AxisLocation.Right) {
+                        const [start, end] = axisRangeFor(axisId)
+                            .map(range => range.current.asTuple())
+                            .getOrElse(AxisInterval.empty().asTuple())
+                        const {current, original} = OrdinalAxisRange
+                            .from(start, end, 0, oldDimension.height)
+                            .zoom(oldDimension.height, newDimension.height)
+                        axis.update(current, original, plotDimensions, margin)
+                    }
+                }
+            })
+            return () => {
+                unregisterPlotDimensionChangeHandler(handlerId)
+            }
+        },
+        [
+            axis,
+            axisRangeFor, setAxisIntervalFor, setOriginalAxisIntervalFor,
+            axisId, location, margin,
+            plotDimensions, registerPlotDimensionChangeHandler, unregisterPlotDimensionChangeHandler,
+        ]
+    );
+
+    return null
+}
+

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

@@ -0,0 +1,55 @@
+import {OrdinalAxisRange} from './OrdinalAxisRange';
+
+describe('scaleOrdinalBounds', () => {
+    function validateRanges(actualRanges: OrdinalAxisRange, expectedRanges: OrdinalAxisRange): void {
+        const {current: actualRange, original: actualOriginal} = actualRanges
+
+        expect(actualRange.start).toBeCloseTo(expectedRanges.current.start)
+        expect(actualRange.end).toBeCloseTo(expectedRanges.current.end)
+        expect(actualOriginal.start).toBe(expectedRanges.original.start)
+        expect(actualOriginal.end).toBe(expectedRanges.original.end)
+    }
+
+    function calculateScale(ranges: OrdinalAxisRange): number {
+        return ranges.currentDistance / ranges.originalDistance
+    }
+
+    /**
+     * Ranges before and after zoom should have the same scale as calculated by the
+     * measure of the zoomed range divided by the measure of the original range.
+     * @param previousRanges The ranges before the zoom
+     * @param currentRanges The ranges after the zoom
+     */
+    function validateScale(previousRanges: OrdinalAxisRange, currentRanges: OrdinalAxisRange): void {
+        expect(Math.abs(calculateScale(previousRanges) - calculateScale(currentRanges))).toBeLessThan(1e-10)
+    }
+
+    it('should scale bounds and original bounds the same when they are both the same', () => {
+        const expectedRange = OrdinalAxisRange.from(0, 200, 0, 200)
+        const range = OrdinalAxisRange.from(0, 100, 0, 100)
+        const zoomedRange = range.zoom(100, 200)
+        validateRanges(zoomedRange, expectedRange)
+        validateScale(range, zoomedRange)
+    })
+
+    it('should scale bounds and original bounds when ordinal axis is zoomed by 10 percent', () => {
+        const expectedRange = OrdinalAxisRange.from(-55, 220, 0, 110)
+        const range = OrdinalAxisRange.from(-50, 200, 0, 100)
+        const zoomedRange = range.zoom(100, 110)
+        validateRanges(zoomedRange, expectedRange)
+    })
+
+    it('should scale bounds and original bounds when ordinal axis is zoomed by 500 percent', () => {
+        const expectedRange = OrdinalAxisRange.from(-250, 1000, 0, 500)
+        const range = OrdinalAxisRange.from(-50, 200, 0, 100)
+        const zoomedRange = range.zoom(100, 500)
+        validateRanges(zoomedRange, expectedRange)
+    })
+
+    it('should scale bounds and original bounds when ordinal axis is zoomed by 10 percent and ends are same', () => {
+        const expectedRange = OrdinalAxisRange.from(-750, 500, 0, 500)
+        const range = OrdinalAxisRange.from(-150, 100, 0, 100)
+        const zoomedRange = range.zoom(100, 500)
+        validateRanges(zoomedRange, expectedRange)
+    })
+});