react-plot - npm Package Compare versions

Comparing version 0.18.0 to 0.19.0

lib-esm/components/Annotations/Annotation.d.ts

 import { ReactNode } from 'react';
 import { Arrow } from './Arrow';
+import { BoxPlot } from './BoxPlot';
 import { Circle } from './Circle';
@@ -25,2 +26,3 @@ import { DirectedEllipse } from './DirectedEllipse';
     Polygon: typeof Polygon;
+    BoxPlot: typeof BoxPlot;
 };
@@ -38,2 +40,3 @@ export type { AnnotationArrowProps } from './Arrow';
 export type { AnnotationPolylineProps } from './Polyline';
+export type { AnnotationBoxPlotProps } from './BoxPlot';
 export interface AnnotationsProps {
@@ -40,0 +43,0 @@ children: ReactNode;

lib-esm/components/Annotations/Annotation.js

 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Arrow } from './Arrow';
+import { BoxPlot } from './BoxPlot';
 import { Circle } from './Circle';
@@ -25,2 +26,3 @@ import { DirectedEllipse } from './DirectedEllipse';
     Polygon,
+    BoxPlot,
 };
@@ -27,0 +29,0 @@ export function Annotations(props) {

lib-esm/components/Annotations/Arrow.d.ts

@@ -9,2 +9,4 @@ import { SVGProps } from 'react';
     y2: ScalarValue;
+    xAxis?: string;
+    yAxis?: string;
     startPoint?: AnnotationShapeList;
@@ -11,0 +13,0 @@ endPoint?: AnnotationShapeList;

lib-esm/components/Annotations/Arrow.js

@@ -5,6 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Arrow(props) {
-    const { x1: x1Old, y1: y1Old, x2: x2Old, y2: y2Old, startPoint = 'none', endPoint = 'triangle', color = 'black', strokeWidth, markerSize, ...lineProps } = props;
+    const { x1: x1Old, y1: y1Old, x2: x2Old, y2: y2Old, startPoint = 'none', endPoint = 'triangle', color = 'black', strokeWidth, markerSize, xAxis = 'x', yAxis = 'y', ...lineProps } = props;
     const { x: x1, y: y1 } = usePosition({
         x: x1Old,
         y: y1Old,
+        xAxis,
+        yAxis,
     });
@@ -14,2 +16,4 @@ const { x: x2, y: y2 } = usePosition({
         y: y2Old,
+        xAxis,
+        yAxis,
     });
@@ -16,0 +20,0 @@ const startMarker = startPoint !== 'none'

lib-esm/components/Annotations/Circle.d.ts

@@ -7,4 +7,6 @@ import { SVGProps } from 'react';
     r: ScalarValue;
+    xAxis?: string;
+    yAxis?: string;
     color?: string;
 }
 export declare function Circle(props: AnnotationCircleProps): JSX.Element;

lib-esm/components/Annotations/Circle.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEllipsePosition } from '../../hooks';
 export function Circle(props) {
-    const { x, y, r: oldR, color, ...otherProps } = props;
+    const { x, y, r: oldR, color, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
     const { cx, cy, rx: r, } = useEllipsePosition({
@@ -10,2 +10,4 @@ cx: x,
         ry: oldR,
+        xAxis,
+        yAxis,
     });
@@ -12,0 +14,0 @@ return _jsx("circle", { cx: cx, cy: cy, r: r, fill: color, ...otherProps });

lib-esm/components/Annotations/DirectedEllipse.d.ts

@@ -9,3 +9,5 @@ import { SVGProps } from 'react';
     width: ScalarValue;
+    xAxis?: string;
+    yAxis?: string;
 }
 export declare function DirectedEllipse(props: AnnotationDirectedEllipseProps): JSX.Element;

lib-esm/components/Annotations/DirectedEllipse.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDirectedEllipsePosition } from '../../hooks';
 export function DirectedEllipse(props) {
-    const { x1, y1, y2, x2, color, width, style, ...otherProps } = props;
+    const { x1, y1, y2, x2, color, width, style, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
     const { cx, cy, rx, ry, rotation } = useDirectedEllipsePosition({
@@ -11,2 +11,4 @@ x1,
         width,
+        xAxis,
+        yAxis,
     });
@@ -13,0 +15,0 @@ return (_jsx("ellipse", { cx: cx, cy: cy, rx: rx, ry: ry, transform: `rotate(${rotation} 0 0)`, style: { ...style, transformOrigin: 'center', transformBox: 'fill-box' }, fill: color, ...otherProps }));

lib-esm/components/Annotations/Ellipse.d.ts

@@ -8,3 +8,5 @@ import { SVGProps } from 'react';
     ry: ScalarValue;
+    xAxis?: string;
+    yAxis?: string;
 }
 export declare function Ellipse(props: AnnotationEllipseProps): JSX.Element;

lib-esm/components/Annotations/Ellipse.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEllipsePosition } from '../../hooks';
 export function Ellipse(props) {
-    const { x, y, rx: oldRx, ry: oldRy, color, ...otherProps } = props;
+    const { x, y, rx: oldRx, ry: oldRy, color, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
     const { cx, cy, rx, ry } = useEllipsePosition({
@@ -10,2 +10,4 @@ cx: x,
         ry: oldRy,
+        xAxis,
+        yAxis,
     });
@@ -12,0 +14,0 @@ return (_jsx("ellipse", { cx: cx, cy: cy, rx: rx, ry: ry, fill: color, ...otherProps }));

lib-esm/components/Annotations/Group.d.ts

@@ -8,2 +8,4 @@ import { CSSProperties, ReactNode } from 'react';
     children: ReactNode;
+    xAxis?: string;
+    yAxis?: string;
     horizontalAlign?: Align;
@@ -10,0 +12,0 @@ verticalAlign?: Align;

lib-esm/components/Annotations/Group.js

@@ -5,6 +5,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function Group(props) {
-    const { x: oldX, y: oldY, horizontalAlign = 'none', verticalAlign = 'none', style = {}, children, } = props;
-    const { x, y } = usePosition({ x: oldX, y: oldY });
+    const { x: oldX, y: oldY, horizontalAlign = 'none', verticalAlign = 'none', style = {}, xAxis = 'x', yAxis = 'y', children, } = props;
+    const { x, y } = usePosition({ x: oldX, y: oldY, xAxis, yAxis });
     return (_jsx(AlignGroup, { x: x, y: y, horizontalAlign: horizontalAlign, verticalAlign: verticalAlign, style: style, children: children }));
 }
 //# sourceMappingURL=Group.js.map

lib-esm/components/Annotations/Line.d.ts

@@ -8,4 +8,6 @@ import { SVGProps } from 'react';
     y2: ScalarValue;
+    xAxis?: string;
+    yAxis?: string;
     color?: string;
 }
 export declare function Line(props: AnnotationLineProps): JSX.Element;

lib-esm/components/Annotations/Line.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { usePosition } from '../../hooks';
 export function Line(props) {
-    const { x1: oldX1, x2: oldX2, y1: oldY1, y2: oldY2, color = 'black', ...lineProps } = props;
-    const { x: x1, y: y1 } = usePosition({ x: oldX1, y: oldY1 });
-    const { x: x2, y: y2 } = usePosition({ x: oldX2, y: oldY2 });
+    const { x1: oldX1, x2: oldX2, y1: oldY1, y2: oldY2, color = 'black', xAxis = 'x', yAxis = 'y', ...lineProps } = props;
+    const { x: x1, y: y1 } = usePosition({ x: oldX1, y: oldY1, xAxis, yAxis });
+    const { x: x2, y: y2 } = usePosition({ x: oldX2, y: oldY2, xAxis, yAxis });
     return _jsx("line", { x1: x1, x2: x2, y1: y1, y2: y2, stroke: color, ...lineProps });
 }
 //# sourceMappingURL=Line.js.map

lib-esm/components/Annotations/Polygon.d.ts

@@ -8,3 +8,5 @@ import { SVGProps } from 'react';
     }[];
+    xAxis?: string;
+    yAxis?: string;
 }
 export declare function Polygon(props: AnnotationPolygonProps): JSX.Element;

lib-esm/components/Annotations/Polygon.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import { usePointPosition } from '../../hooks';
+import { usePointsPosition } from '../../hooks';
 export function Polygon(props) {
-    const { points: oldPoints, color, ...polylineProps } = props;
-    const points = usePointPosition(oldPoints);
+    const { points: oldPoints, color, xAxis = 'x', yAxis = 'y', ...polylineProps } = props;
+    const points = usePointsPosition({ points: oldPoints, xAxis, yAxis });
     return _jsx("polygon", { fill: color, points: points, ...polylineProps });
 }
 //# sourceMappingURL=Polygon.js.map

lib-esm/components/Annotations/Polyline.d.ts

@@ -8,4 +8,6 @@ import { SVGProps } from 'react';
     }[];
+    xAxis?: string;
+    yAxis?: string;
     color?: string;
 }
 export declare function Polyline(props: AnnotationPolylineProps): JSX.Element;

lib-esm/components/Annotations/Polyline.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import { usePointPosition } from '../../hooks';
+import { usePointsPosition } from '../../hooks';
 export function Polyline(props) {
-    const { points: oldPoints, color, ...polylineProps } = props;
-    const points = usePointPosition(oldPoints);
+    const { points: oldPoints, color, xAxis = 'x', yAxis = 'y', ...polylineProps } = props;
+    const points = usePointsPosition({ points: oldPoints, xAxis, yAxis });
     return (_jsx("polyline", { stroke: color, fill: "none", points: points, ...polylineProps }));
 }
 //# sourceMappingURL=Polyline.js.map

lib-esm/components/Annotations/Rectangle.d.ts

@@ -8,4 +8,6 @@ import { SVGProps } from 'react';
     y2: ScalarValue;
+    xAxis?: string;
+    yAxis?: string;
     color?: string;
 }
 export declare function Rectangle(props: AnnotationRectangleProps): JSX.Element;

lib-esm/components/Annotations/Rectangle.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRectanglePosition } from '../../hooks';
 export function Rectangle(props) {
-    const { x1: oldX1, y1: oldY1, x2: oldX2, y2: oldY2, color, ...otherProps } = props;
+    const { x1: oldX1, y1: oldY1, x2: oldX2, y2: oldY2, color, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
     const { x, y, width, height } = useRectanglePosition({
@@ -10,2 +10,4 @@ x1: oldX1,
         y2: oldY2,
+        xAxis,
+        yAxis,
     });
@@ -12,0 +14,0 @@ return (_jsx("rect", { x: x, y: y, width: width, height: height, fill: color, ...otherProps }));

lib-esm/components/Annotations/Shape.d.ts

@@ -9,2 +9,4 @@ import { CSSProperties, MouseEventHandler } from 'react';
     size: number;
+    xAxis?: string;
+    yAxis?: string;
     style?: CSSProperties;
@@ -11,0 +13,0 @@ color?: string;

lib-esm/components/Annotations/Shape.js

@@ -23,9 +23,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function Shape(props) {
-    const Figure = shapes[props.shape];
+    const { shape, x: xOld, y: yOld, onMouseEnter, onMouseLeave, color, size, style, xAxis = 'x', yAxis = 'y', } = props;
+    const Figure = shapes[shape];
     if (!Figure) {
-        throw new Error(`Invalid shape: "${props.shape}"`);
+        throw new Error(`Invalid shape: "${shape}"`);
     }
-    const { x, y } = usePosition({ x: props.x, y: props.y });
-    return (_jsx("g", { onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, transform: `translate(${x}, ${y})`, children: _jsx(Figure, { size: props.size, style: { fill: props.color, ...props.style } }) }));
+    const { x, y } = usePosition({ x: xOld, y: yOld, xAxis, yAxis });
+    return (_jsx("g", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, transform: `translate(${x}, ${y})`, children: _jsx(Figure, { size: size, style: { fill: color, ...style } }) }));
 }
 //# sourceMappingURL=Shape.js.map

lib-esm/components/Annotations/Text.d.ts

@@ -6,2 +6,4 @@ import { ReactNode, SVGProps } from 'react';
     y: ScalarValue;
+    xAxis?: string;
+    yAxis?: string;
     color?: string;
@@ -8,0 +10,0 @@ children: ReactNode;

lib-esm/components/Annotations/Text.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { usePosition } from '../../hooks';
 export function Text(props) {
-    const { x: xOld, y: yOld, children, color, ...otherProps } = props;
-    const { x, y } = usePosition({ x: xOld, y: yOld });
+    const { x: xOld, y: yOld, children, color, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
+    const { x, y } = usePosition({ x: xOld, y: yOld, xAxis, yAxis });
     return (_jsx("text", { x: x, y: y, fill: color, ...otherProps, children: children }));
 }
 //# sourceMappingURL=Text.js.map

lib-esm/components/Axis/HorizontalAxis.js

@@ -60,3 +60,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     }
-    const gridLinesElement = displayPrimaryGridLines ? (_jsx(HorizontalAxisGridLines, { position: position, plotHeight: plotHeight, primaryTicks: primaryTicks, style: primaryGridLineStyle, secondaryGrid: displaySecondaryGridLines, secondaryStyle: secondaryGridLineStyle, scale: scale })) : null;
+    const gridLinesElement = displayPrimaryGridLines || displaySecondaryGridLines ? (_jsx(HorizontalAxisGridLines, { position: position, plotHeight: plotHeight, primaryTicks: primaryTicks, style: primaryGridLineStyle, primaryGrid: displayPrimaryGridLines, secondaryGrid: displaySecondaryGridLines, secondaryStyle: secondaryGridLineStyle, scale: scale })) : null;
     const primaryTicksElement = !hidden && !hiddenTicks ? (_jsx(Ticks, { anchor: "middle", primaryTicks: primaryTicks, getPositions: getTickPosition, labelStyle: tickLabelStyle, style: primaryTickStyle, secondaryTickLength: secondaryTickLength, scale: scale, secondaryTickStyle: secondaryTickStyle, dominantBaseline: isBottom ? 'text-before-edge' : 'text-after-edge' })) : null;
@@ -63,0 +63,0 @@ const axisLineElement = !hidden && !hiddenLine ? (_jsx(HorizontalAxisLine, { style: lineStyle, plotWidth: plotWidth })) : null;

lib-esm/components/Axis/HorizontalAxisGridLines.d.ts

@@ -10,2 +10,3 @@ import { CSSProperties } from 'react';
     style?: CSSProperties;
+    primaryGrid?: boolean;
     secondaryGrid?: boolean;
@@ -12,0 +13,0 @@ secondaryStyle?: CSSProperties;

lib-esm/components/Axis/HorizontalAxisGridLines.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 export default function HorizontalAxisGridLines(props) {
-    const { plotHeight, style, primaryTicks, position: axisPosition, secondaryGrid, secondaryStyle, scale, } = props;
+    const { plotHeight, style, primaryTicks, position: axisPosition, primaryGrid, secondaryGrid, secondaryStyle, scale, } = props;
     const Grid = useMemo(() => {
-        const Grid = primaryTicks.map(({ position }) => (_jsx("line", { x1: position, x2: position, y1: axisPosition === 'top' ? plotHeight : -plotHeight, y2: "0", stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position)));
+        const Grid = [];
+        if (primaryGrid) {
+            primaryTicks.forEach(({ position }) => {
+                Grid.push(_jsx("line", { x1: position, x2: position, y1: axisPosition === 'top' ? plotHeight : -plotHeight, y2: "0", stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position));
+            });
+        }
         if (secondaryGrid) {
@@ -23,2 +28,3 @@ const density = 5;
         plotHeight,
+        primaryGrid,
         primaryTicks,
@@ -25,0 +31,0 @@ scale,

lib-esm/components/Axis/VerticalAxis.js

@@ -57,3 +57,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     }
-    const gridLinesElement = displayPrimaryGridLines ? (_jsx(VerticalAxisGridLines, { position: position, plotWidth: plotWidth, primaryTicks: primaryTicks, style: primaryGridLineStyle, secondaryGrid: displaySecondaryGridLines, secondaryStyle: secondaryGridLineStyle, scale: scale })) : null;
+    const gridLinesElement = displayPrimaryGridLines || displaySecondaryGridLines ? (_jsx(VerticalAxisGridLines, { position: position, plotWidth: plotWidth, primaryTicks: primaryTicks, style: primaryGridLineStyle, primaryGrid: displayPrimaryGridLines, secondaryGrid: displaySecondaryGridLines, secondaryStyle: secondaryGridLineStyle, scale: scale })) : null;
     const primaryTicksElement = !hidden && !hiddenTicks ? (_jsx(Ticks, { anchor: isRight ? 'start' : 'end', primaryTicks: primaryTicks, getPositions: getTickPosition, labelStyle: tickLabelStyle, style: primaryTickStyle, secondaryTickLength: secondaryTickLength, scale: scale, secondaryTickStyle: secondaryTickStyle })) : null;
@@ -60,0 +60,0 @@ const axisLineElement = !hidden && !hiddenLine ? (_jsx(VerticalAxisLine, { style: lineStyle, plotHeight: plotHeight })) : null;

lib-esm/components/Axis/VerticalAxisGridLines.d.ts

@@ -10,2 +10,3 @@ import { CSSProperties } from 'react';
     scale?: Scales;
+    primaryGrid?: boolean;
     secondaryGrid?: boolean;
@@ -12,0 +13,0 @@ secondaryStyle?: CSSProperties;

lib-esm/components/Axis/VerticalAxisGridLines.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 export default function VerticalAxisGridlines(props) {
-    const { plotWidth, style, primaryTicks, position: axisPosition, secondaryGrid, scale, secondaryStyle, } = props;
+    const { plotWidth, style, primaryTicks, position: axisPosition, primaryGrid, secondaryGrid, scale, secondaryStyle, } = props;
     const Grid = useMemo(() => {
-        const Grid = primaryTicks.map(({ position }) => (_jsx("line", { x1: "0", x2: axisPosition === 'left' ? plotWidth : -plotWidth, y1: position, y2: position, stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position)));
+        const Grid = [];
+        if (primaryGrid) {
+            primaryTicks.forEach(({ position }) => {
+                Grid.push(_jsx("line", { x1: "0", x2: axisPosition === 'left' ? plotWidth : -plotWidth, y1: position, y2: position, stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position));
+            });
+        }
         if (secondaryGrid) {
@@ -22,2 +27,3 @@ const density = 5;
         plotWidth,
+        primaryGrid,
         primaryTicks,
@@ -24,0 +30,0 @@ scale,

lib-esm/hooks.d.ts

@@ -5,2 +5,4 @@ import { ScalarValue } from './types';
     y: ScalarValue;
+    xAxis: string;
+    yAxis: string;
 }
@@ -11,3 +13,14 @@ export declare function usePosition(config: UsePositionConfig): {
 };
+interface UsePointsPositionConfig {
+    xAxis: string;
+    yAxis: string;
+    points: {
+        x: ScalarValue;
+        y: ScalarValue;
+    }[];
+}
+export declare function usePointsPosition(config: UsePointsPositionConfig): string;
 interface UseRectanglePositionConfig {
+    xAxis: string;
+    yAxis: string;
     x1: ScalarValue;
@@ -25,2 +38,4 @@ y1: ScalarValue;
 interface UseEllipsePositionConfig {
+    xAxis: string;
+    yAxis: string;
     cx: ScalarValue;
@@ -31,3 +46,32 @@ cy: ScalarValue;
 }
+export declare function useEllipsePosition(config: UseEllipsePositionConfig): {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+};
+interface UseBoxPlotPositionConfig {
+    xAxis: string;
+    yAxis: string;
+    min: ScalarValue;
+    max: ScalarValue;
+    q1: ScalarValue;
+    median: ScalarValue;
+    q3: ScalarValue;
+    width: ScalarValue;
+    y: ScalarValue;
+}
+export declare function useBoxPlotPosition(config: UseBoxPlotPositionConfig): {
+    min: number;
+    max: number;
+    q1: number;
+    median: number;
+    q3: number;
+    y: number;
+    width: number;
+    horizontal: boolean;
+};
 interface UseDirectedEllipsePositionConfig {
+    xAxis: string;
+    yAxis: string;
     x1: ScalarValue;
@@ -39,3 +83,3 @@ y1: ScalarValue;
 }
-export declare function useEllipsePosition(props: UseEllipsePositionConfig): {
+export declare function useDirectedEllipsePosition(config: UseDirectedEllipsePositionConfig): {
     cx: number;
@@ -45,11 +89,4 @@ cy: number;
     ry: number;
-};
-export declare function useDirectedEllipsePosition(props: UseDirectedEllipsePositionConfig): {
-    cx: number;
-    cy: number;
-    rx: number;
-    ry: number;
     rotation: number;
 };
-export declare function usePointPosition(config: UsePositionConfig[]): string;
 export declare function useIsSeriesVisible(id: string): boolean;
@@ -56,0 +93,0 @@ interface UseShiftOptions {

lib-esm/hooks.js

@@ -7,4 +7,6 @@ import { euclidean } from 'ml-distance-euclidean';
     const { axisContext, plotWidth, plotHeight } = usePlotContext();
-    const [xScale, yScale] = validateAxis(axisContext, 'x', 'y');
-    const { x, y } = config;
+    const { x, y, xAxis, yAxis } = config;
+    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     return {
@@ -15,6 +17,18 @@ x: convertValue(x, plotWidth, xScale),
 }
+export function usePointsPosition(config) {
+    const { axisContext, plotWidth, plotHeight } = usePlotContext();
+    const { points, xAxis, yAxis } = config;
+    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
+    return points
+        .map((point) => `${convertValue(point.x, plotWidth, xScale)},${convertValue(point.y, plotHeight, yScale)}`)
+        .join(' ');
+}
 export function useRectanglePosition(config) {
     const { axisContext, plotWidth, plotHeight } = usePlotContext();
-    const [xScale, yScale] = validateAxis(axisContext, 'x', 'y');
-    const { x1, y1, x2, y2 } = config;
+    const { x1, y1, x2, y2, xAxis, yAxis } = config;
+    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     return {
@@ -27,6 +41,8 @@ x: convertMinValue(x1, x2, plotWidth, xScale),
 }
-export function useEllipsePosition(props) {
+export function useEllipsePosition(config) {
     const { axisContext, plotWidth, plotHeight } = usePlotContext();
-    const [xScale, yScale] = validateAxis(axisContext, 'x', 'y');
-    const { cx, cy, rx, ry } = props;
+    const { cx, cy, rx, ry, xAxis, yAxis } = config;
+    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     return {
@@ -39,6 +55,27 @@ cx: convertValue(cx, plotWidth, xScale),
 }
-export function useDirectedEllipsePosition(props) {
+export function useBoxPlotPosition(config) {
+    var _a;
     const { axisContext, plotWidth, plotHeight } = usePlotContext();
-    const [xScale, yScale] = validateAxis(axisContext, 'x', 'y');
-    const { x1: oldX1, y1: oldY1, x2: oldX2, y2: oldY2, width } = props;
+    const { min, max, q1, median, q3, width, y, xAxis, yAxis } = config;
+    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
+    const horizontal = ['top', 'bottom'].includes((_a = axisContext[xAxis]) === null || _a === void 0 ? void 0 : _a.position);
+    return {
+        min: convertValue(min, plotWidth, xScale),
+        max: convertValue(max, plotWidth, xScale),
+        q1: convertValue(q1, plotWidth, xScale),
+        median: convertValue(median, plotWidth, xScale),
+        q3: convertValue(q3, plotWidth, xScale),
+        y: convertValue(y, plotHeight, yScale),
+        width: convertValueAbs(width, plotHeight, yScale),
+        horizontal,
+    };
+}
+export function useDirectedEllipsePosition(config) {
+    const { axisContext, plotWidth, plotHeight } = usePlotContext();
+    const { x1: oldX1, y1: oldY1, x2: oldX2, y2: oldY2, width, xAxis, yAxis, } = config;
+    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     const { x1, y1, x2, y2 } = {
@@ -50,3 +87,2 @@ x1: convertValue(oldX1, plotWidth, xScale),
     };
-    const radsToDegs = (rad) => (rad * 180) / Math.PI;
     const { cx, cy } = {
@@ -71,2 +107,6 @@ cx: (x1 + x2) / 2,
 }
+function radsToDegs(rad) {
+    return (rad * 180) / Math.PI;
+}
+// convert functions
 function convertString(value, total) {
@@ -111,10 +151,3 @@ return value.endsWith('%')
 }
-export function usePointPosition(config) {
-    const { axisContext, plotWidth, plotHeight } = usePlotContext();
-    const [xScale, yScale] = validateAxis(axisContext, 'x', 'y');
-    const points = config;
-    return points
-        .map((point) => `${convertValue(point.x, plotWidth, xScale)},${convertValue(point.y, plotHeight, yScale)}`)
-        .join(' ');
-}
+// other hooks
 export function useIsSeriesVisible(id) {
@@ -128,3 +161,5 @@ const [legendState] = useLegend();
     const { xAxis, yAxis, xShift, yShift } = options;
-    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis);
+    const [xScale, yScale] = validateAxis(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     return {
@@ -131,0 +166,0 @@ xShift: convertToPx(xShift, plotWidth, xScale),

lib-esm/utils.d.ts

@@ -14,6 +14,9 @@ import { CSSProperties } from 'react';
 export declare function validatePosition(currPosition: string, position: string, id: string): void;
+interface ValidateAxisOptions {
+    onlyOrthogonal?: boolean;
+}
 /**
  * Validates that two axes are orthogonal between them
  */
-export declare function validateAxis(axisContext: Record<string, PlotAxisContext>, xKey: string, yKey: string): [Scales, Scales] | [undefined, undefined];
+export declare function validateAxis(axisContext: Record<string, PlotAxisContext>, xKey: string, yKey: string, options?: ValidateAxisOptions): [Scales, Scales] | [undefined, undefined];
 /**
@@ -48,1 +51,2 @@ * Checks the style added to a component and if is a function, gets the resulting value
 };
+export {};

lib-esm/utils.js

@@ -31,3 +31,4 @@ import { useMemo } from 'react';
  */
-export function validateAxis(axisContext, xKey, yKey) {
+export function validateAxis(axisContext, xKey, yKey, options = {}) {
+    const { onlyOrthogonal = false } = options;
     const xAxis = axisContext[xKey];
@@ -37,5 +38,12 @@ const yAxis = axisContext[yKey];
         return [undefined, undefined];
-    if (horizontal.includes(xAxis.position)
-        ? !vertical.includes(yAxis.position)
-        : vertical.includes(xAxis.position)) {
+    if (onlyOrthogonal &&
+        ((horizontal.includes(xAxis.position) &&
+            horizontal.includes(yAxis.position)) ||
+            (vertical.includes(yAxis.position) && vertical.includes(xAxis.position)))) {
+        throw new Error(`The axis ${xKey} and ${yKey} are not orthogonal`);
+    }
+    if (!onlyOrthogonal &&
+        (horizontal.includes(xAxis.position)
+            ? !vertical.includes(yAxis.position)
+            : vertical.includes(xAxis.position))) {
         if (vertical.includes(xAxis.position) ||
@@ -42,0 +50,0 @@ horizontal.includes(yAxis.position)) {

lib/components/Annotations/Annotation.js

@@ -6,2 +6,3 @@ "use strict";
 const Arrow_1 = require("./Arrow");
+const BoxPlot_1 = require("./BoxPlot");
 const Circle_1 = require("./Circle");
@@ -29,2 +30,3 @@ const DirectedEllipse_1 = require("./DirectedEllipse");
     Polygon: Polygon_1.Polygon,
+    BoxPlot: BoxPlot_1.BoxPlot,
 };
@@ -31,0 +33,0 @@ function Annotations(props) {

lib/components/Annotations/Arrow.js

@@ -11,6 +11,8 @@ "use strict";
 function Arrow(props) {
-    const { x1: x1Old, y1: y1Old, x2: x2Old, y2: y2Old, startPoint = 'none', endPoint = 'triangle', color = 'black', strokeWidth, markerSize, ...lineProps } = props;
+    const { x1: x1Old, y1: y1Old, x2: x2Old, y2: y2Old, startPoint = 'none', endPoint = 'triangle', color = 'black', strokeWidth, markerSize, xAxis = 'x', yAxis = 'y', ...lineProps } = props;
     const { x: x1, y: y1 } = (0, hooks_1.usePosition)({
         x: x1Old,
         y: y1Old,
+        xAxis,
+        yAxis,
     });
@@ -20,2 +22,4 @@ const { x: x2, y: y2 } = (0, hooks_1.usePosition)({
         y: y2Old,
+        xAxis,
+        yAxis,
     });
@@ -22,0 +26,0 @@ const startMarker = startPoint !== 'none'

lib/components/Annotations/Circle.js

@@ -7,3 +7,3 @@ "use strict";
 function Circle(props) {
-    const { x, y, r: oldR, color, ...otherProps } = props;
+    const { x, y, r: oldR, color, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
     const { cx, cy, rx: r, } = (0, hooks_1.useEllipsePosition)({
@@ -14,2 +14,4 @@ cx: x,
         ry: oldR,
+        xAxis,
+        yAxis,
     });
@@ -16,0 +18,0 @@ return (0, jsx_runtime_1.jsx)("circle", { cx: cx, cy: cy, r: r, fill: color, ...otherProps });

lib/components/Annotations/DirectedEllipse.js

@@ -7,3 +7,3 @@ "use strict";
 function DirectedEllipse(props) {
-    const { x1, y1, y2, x2, color, width, style, ...otherProps } = props;
+    const { x1, y1, y2, x2, color, width, style, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
     const { cx, cy, rx, ry, rotation } = (0, hooks_1.useDirectedEllipsePosition)({
@@ -15,2 +15,4 @@ x1,
         width,
+        xAxis,
+        yAxis,
     });
@@ -17,0 +19,0 @@ return ((0, jsx_runtime_1.jsx)("ellipse", { cx: cx, cy: cy, rx: rx, ry: ry, transform: `rotate(${rotation} 0 0)`, style: { ...style, transformOrigin: 'center', transformBox: 'fill-box' }, fill: color, ...otherProps }));

lib/components/Annotations/Ellipse.js

@@ -7,3 +7,3 @@ "use strict";
 function Ellipse(props) {
-    const { x, y, rx: oldRx, ry: oldRy, color, ...otherProps } = props;
+    const { x, y, rx: oldRx, ry: oldRy, color, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
     const { cx, cy, rx, ry } = (0, hooks_1.useEllipsePosition)({
@@ -14,2 +14,4 @@ cx: x,
         ry: oldRy,
+        xAxis,
+        yAxis,
     });
@@ -16,0 +18,0 @@ return ((0, jsx_runtime_1.jsx)("ellipse", { cx: cx, cy: cy, rx: rx, ry: ry, fill: color, ...otherProps }));

lib/components/Annotations/Group.js

@@ -8,6 +8,6 @@ "use strict";
 function Group(props) {
-    const { x: oldX, y: oldY, horizontalAlign = 'none', verticalAlign = 'none', style = {}, children, } = props;
-    const { x, y } = (0, hooks_1.usePosition)({ x: oldX, y: oldY });
+    const { x: oldX, y: oldY, horizontalAlign = 'none', verticalAlign = 'none', style = {}, xAxis = 'x', yAxis = 'y', children, } = props;
+    const { x, y } = (0, hooks_1.usePosition)({ x: oldX, y: oldY, xAxis, yAxis });
     return ((0, jsx_runtime_1.jsx)(react_d3_utils_1.AlignGroup, { x: x, y: y, horizontalAlign: horizontalAlign, verticalAlign: verticalAlign, style: style, children: children }));
 }
 exports.Group = Group;

lib/components/Annotations/Line.js

@@ -7,7 +7,7 @@ "use strict";
 function Line(props) {
-    const { x1: oldX1, x2: oldX2, y1: oldY1, y2: oldY2, color = 'black', ...lineProps } = props;
-    const { x: x1, y: y1 } = (0, hooks_1.usePosition)({ x: oldX1, y: oldY1 });
-    const { x: x2, y: y2 } = (0, hooks_1.usePosition)({ x: oldX2, y: oldY2 });
+    const { x1: oldX1, x2: oldX2, y1: oldY1, y2: oldY2, color = 'black', xAxis = 'x', yAxis = 'y', ...lineProps } = props;
+    const { x: x1, y: y1 } = (0, hooks_1.usePosition)({ x: oldX1, y: oldY1, xAxis, yAxis });
+    const { x: x2, y: y2 } = (0, hooks_1.usePosition)({ x: oldX2, y: oldY2, xAxis, yAxis });
     return (0, jsx_runtime_1.jsx)("line", { x1: x1, x2: x2, y1: y1, y2: y2, stroke: color, ...lineProps });
 }
 exports.Line = Line;

lib/components/Annotations/Polygon.js

@@ -7,6 +7,6 @@ "use strict";
 function Polygon(props) {
-    const { points: oldPoints, color, ...polylineProps } = props;
-    const points = (0, hooks_1.usePointPosition)(oldPoints);
+    const { points: oldPoints, color, xAxis = 'x', yAxis = 'y', ...polylineProps } = props;
+    const points = (0, hooks_1.usePointsPosition)({ points: oldPoints, xAxis, yAxis });
     return (0, jsx_runtime_1.jsx)("polygon", { fill: color, points: points, ...polylineProps });
 }
 exports.Polygon = Polygon;

lib/components/Annotations/Polyline.js

@@ -7,6 +7,6 @@ "use strict";
 function Polyline(props) {
-    const { points: oldPoints, color, ...polylineProps } = props;
-    const points = (0, hooks_1.usePointPosition)(oldPoints);
+    const { points: oldPoints, color, xAxis = 'x', yAxis = 'y', ...polylineProps } = props;
+    const points = (0, hooks_1.usePointsPosition)({ points: oldPoints, xAxis, yAxis });
     return ((0, jsx_runtime_1.jsx)("polyline", { stroke: color, fill: "none", points: points, ...polylineProps }));
 }
 exports.Polyline = Polyline;

lib/components/Annotations/Rectangle.js

@@ -7,3 +7,3 @@ "use strict";
 function Rectangle(props) {
-    const { x1: oldX1, y1: oldY1, x2: oldX2, y2: oldY2, color, ...otherProps } = props;
+    const { x1: oldX1, y1: oldY1, x2: oldX2, y2: oldY2, color, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
     const { x, y, width, height } = (0, hooks_1.useRectanglePosition)({
@@ -14,2 +14,4 @@ x1: oldX1,
         y2: oldY2,
+        xAxis,
+        yAxis,
     });
@@ -16,0 +18,0 @@ return ((0, jsx_runtime_1.jsx)("rect", { x: x, y: y, width: width, height: height, fill: color, ...otherProps }));

lib/components/Annotations/Shape.js

@@ -26,9 +26,10 @@ "use strict";
 function Shape(props) {
-    const Figure = shapes[props.shape];
+    const { shape, x: xOld, y: yOld, onMouseEnter, onMouseLeave, color, size, style, xAxis = 'x', yAxis = 'y', } = props;
+    const Figure = shapes[shape];
     if (!Figure) {
-        throw new Error(`Invalid shape: "${props.shape}"`);
+        throw new Error(`Invalid shape: "${shape}"`);
     }
-    const { x, y } = (0, hooks_1.usePosition)({ x: props.x, y: props.y });
-    return ((0, jsx_runtime_1.jsx)("g", { onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, transform: `translate(${x}, ${y})`, children: (0, jsx_runtime_1.jsx)(Figure, { size: props.size, style: { fill: props.color, ...props.style } }) }));
+    const { x, y } = (0, hooks_1.usePosition)({ x: xOld, y: yOld, xAxis, yAxis });
+    return ((0, jsx_runtime_1.jsx)("g", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, transform: `translate(${x}, ${y})`, children: (0, jsx_runtime_1.jsx)(Figure, { size: size, style: { fill: color, ...style } }) }));
 }
 exports.Shape = Shape;

lib/components/Annotations/Text.js

@@ -7,6 +7,6 @@ "use strict";
 function Text(props) {
-    const { x: xOld, y: yOld, children, color, ...otherProps } = props;
-    const { x, y } = (0, hooks_1.usePosition)({ x: xOld, y: yOld });
+    const { x: xOld, y: yOld, children, color, xAxis = 'x', yAxis = 'y', ...otherProps } = props;
+    const { x, y } = (0, hooks_1.usePosition)({ x: xOld, y: yOld, xAxis, yAxis });
     return ((0, jsx_runtime_1.jsx)("text", { x: x, y: y, fill: color, ...otherProps, children: children }));
 }
 exports.Text = Text;

lib/components/Axis/HorizontalAxis.js

@@ -65,3 +65,3 @@ "use strict";
     }
-    const gridLinesElement = displayPrimaryGridLines ? ((0, jsx_runtime_1.jsx)(HorizontalAxisGridLines_1.default, { position: position, plotHeight: plotHeight, primaryTicks: primaryTicks, style: primaryGridLineStyle, secondaryGrid: displaySecondaryGridLines, secondaryStyle: secondaryGridLineStyle, scale: scale })) : null;
+    const gridLinesElement = displayPrimaryGridLines || displaySecondaryGridLines ? ((0, jsx_runtime_1.jsx)(HorizontalAxisGridLines_1.default, { position: position, plotHeight: plotHeight, primaryTicks: primaryTicks, style: primaryGridLineStyle, primaryGrid: displayPrimaryGridLines, secondaryGrid: displaySecondaryGridLines, secondaryStyle: secondaryGridLineStyle, scale: scale })) : null;
     const primaryTicksElement = !hidden && !hiddenTicks ? ((0, jsx_runtime_1.jsx)(Ticks_1.Ticks, { anchor: "middle", primaryTicks: primaryTicks, getPositions: getTickPosition, labelStyle: tickLabelStyle, style: primaryTickStyle, secondaryTickLength: secondaryTickLength, scale: scale, secondaryTickStyle: secondaryTickStyle, dominantBaseline: isBottom ? 'text-before-edge' : 'text-after-edge' })) : null;
@@ -68,0 +68,0 @@ const axisLineElement = !hidden && !hiddenLine ? ((0, jsx_runtime_1.jsx)(HorizontalAxisLine_1.default, { style: lineStyle, plotWidth: plotWidth })) : null;

lib/components/Axis/HorizontalAxisGridLines.js

@@ -6,5 +6,10 @@ "use strict";
 function HorizontalAxisGridLines(props) {
-    const { plotHeight, style, primaryTicks, position: axisPosition, secondaryGrid, secondaryStyle, scale, } = props;
+    const { plotHeight, style, primaryTicks, position: axisPosition, primaryGrid, secondaryGrid, secondaryStyle, scale, } = props;
     const Grid = (0, react_1.useMemo)(() => {
-        const Grid = primaryTicks.map(({ position }) => ((0, jsx_runtime_1.jsx)("line", { x1: position, x2: position, y1: axisPosition === 'top' ? plotHeight : -plotHeight, y2: "0", stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position)));
+        const Grid = [];
+        if (primaryGrid) {
+            primaryTicks.forEach(({ position }) => {
+                Grid.push((0, jsx_runtime_1.jsx)("line", { x1: position, x2: position, y1: axisPosition === 'top' ? plotHeight : -plotHeight, y2: "0", stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position));
+            });
+        }
         if (secondaryGrid) {
@@ -26,2 +31,3 @@ const density = 5;
         plotHeight,
+        primaryGrid,
         primaryTicks,
@@ -28,0 +34,0 @@ scale,

lib/components/Axis/VerticalAxis.js

@@ -62,3 +62,3 @@ "use strict";
     }
-    const gridLinesElement = displayPrimaryGridLines ? ((0, jsx_runtime_1.jsx)(VerticalAxisGridLines_1.default, { position: position, plotWidth: plotWidth, primaryTicks: primaryTicks, style: primaryGridLineStyle, secondaryGrid: displaySecondaryGridLines, secondaryStyle: secondaryGridLineStyle, scale: scale })) : null;
+    const gridLinesElement = displayPrimaryGridLines || displaySecondaryGridLines ? ((0, jsx_runtime_1.jsx)(VerticalAxisGridLines_1.default, { position: position, plotWidth: plotWidth, primaryTicks: primaryTicks, style: primaryGridLineStyle, primaryGrid: displayPrimaryGridLines, secondaryGrid: displaySecondaryGridLines, secondaryStyle: secondaryGridLineStyle, scale: scale })) : null;
     const primaryTicksElement = !hidden && !hiddenTicks ? ((0, jsx_runtime_1.jsx)(Ticks_1.Ticks, { anchor: isRight ? 'start' : 'end', primaryTicks: primaryTicks, getPositions: getTickPosition, labelStyle: tickLabelStyle, style: primaryTickStyle, secondaryTickLength: secondaryTickLength, scale: scale, secondaryTickStyle: secondaryTickStyle })) : null;
@@ -65,0 +65,0 @@ const axisLineElement = !hidden && !hiddenLine ? ((0, jsx_runtime_1.jsx)(VerticalAxisLine_1.default, { style: lineStyle, plotHeight: plotHeight })) : null;

lib/components/Axis/VerticalAxisGridLines.js

@@ -6,5 +6,10 @@ "use strict";
 function VerticalAxisGridlines(props) {
-    const { plotWidth, style, primaryTicks, position: axisPosition, secondaryGrid, scale, secondaryStyle, } = props;
+    const { plotWidth, style, primaryTicks, position: axisPosition, primaryGrid, secondaryGrid, scale, secondaryStyle, } = props;
     const Grid = (0, react_1.useMemo)(() => {
-        const Grid = primaryTicks.map(({ position }) => ((0, jsx_runtime_1.jsx)("line", { x1: "0", x2: axisPosition === 'left' ? plotWidth : -plotWidth, y1: position, y2: position, stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position)));
+        const Grid = [];
+        if (primaryGrid) {
+            primaryTicks.forEach(({ position }) => {
+                Grid.push((0, jsx_runtime_1.jsx)("line", { x1: "0", x2: axisPosition === 'left' ? plotWidth : -plotWidth, y1: position, y2: position, stroke: "black", strokeDasharray: "2,2", strokeOpacity: 0.5, style: style }, position));
+            });
+        }
         if (secondaryGrid) {
@@ -25,2 +30,3 @@ const density = 5;
         plotWidth,
+        primaryGrid,
         primaryTicks,
@@ -27,0 +33,0 @@ scale,

lib/hooks.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useShift = exports.useIsSeriesVisible = exports.usePointPosition = exports.useDirectedEllipsePosition = exports.useEllipsePosition = exports.useRectanglePosition = exports.usePosition = void 0;
+exports.useShift = exports.useIsSeriesVisible = exports.useDirectedEllipsePosition = exports.useBoxPlotPosition = exports.useEllipsePosition = exports.useRectanglePosition = exports.usePointsPosition = exports.usePosition = void 0;
 const ml_distance_euclidean_1 = require("ml-distance-euclidean");
@@ -10,4 +10,6 @@ const legendContext_1 = require("./contexts/legendContext");
     const { axisContext, plotWidth, plotHeight } = (0, plotContext_1.usePlotContext)();
-    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, 'x', 'y');
-    const { x, y } = config;
+    const { x, y, xAxis, yAxis } = config;
+    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     return {
@@ -19,6 +21,19 @@ x: convertValue(x, plotWidth, xScale),
 exports.usePosition = usePosition;
+function usePointsPosition(config) {
+    const { axisContext, plotWidth, plotHeight } = (0, plotContext_1.usePlotContext)();
+    const { points, xAxis, yAxis } = config;
+    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
+    return points
+        .map((point) => `${convertValue(point.x, plotWidth, xScale)},${convertValue(point.y, plotHeight, yScale)}`)
+        .join(' ');
+}
+exports.usePointsPosition = usePointsPosition;
 function useRectanglePosition(config) {
     const { axisContext, plotWidth, plotHeight } = (0, plotContext_1.usePlotContext)();
-    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, 'x', 'y');
-    const { x1, y1, x2, y2 } = config;
+    const { x1, y1, x2, y2, xAxis, yAxis } = config;
+    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     return {
@@ -32,6 +47,8 @@ x: convertMinValue(x1, x2, plotWidth, xScale),
 exports.useRectanglePosition = useRectanglePosition;
-function useEllipsePosition(props) {
+function useEllipsePosition(config) {
     const { axisContext, plotWidth, plotHeight } = (0, plotContext_1.usePlotContext)();
-    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, 'x', 'y');
-    const { cx, cy, rx, ry } = props;
+    const { cx, cy, rx, ry, xAxis, yAxis } = config;
+    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     return {
@@ -45,6 +62,28 @@ cx: convertValue(cx, plotWidth, xScale),
 exports.useEllipsePosition = useEllipsePosition;
-function useDirectedEllipsePosition(props) {
+function useBoxPlotPosition(config) {
+    var _a;
     const { axisContext, plotWidth, plotHeight } = (0, plotContext_1.usePlotContext)();
-    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, 'x', 'y');
-    const { x1: oldX1, y1: oldY1, x2: oldX2, y2: oldY2, width } = props;
+    const { min, max, q1, median, q3, width, y, xAxis, yAxis } = config;
+    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
+    const horizontal = ['top', 'bottom'].includes((_a = axisContext[xAxis]) === null || _a === void 0 ? void 0 : _a.position);
+    return {
+        min: convertValue(min, plotWidth, xScale),
+        max: convertValue(max, plotWidth, xScale),
+        q1: convertValue(q1, plotWidth, xScale),
+        median: convertValue(median, plotWidth, xScale),
+        q3: convertValue(q3, plotWidth, xScale),
+        y: convertValue(y, plotHeight, yScale),
+        width: convertValueAbs(width, plotHeight, yScale),
+        horizontal,
+    };
+}
+exports.useBoxPlotPosition = useBoxPlotPosition;
+function useDirectedEllipsePosition(config) {
+    const { axisContext, plotWidth, plotHeight } = (0, plotContext_1.usePlotContext)();
+    const { x1: oldX1, y1: oldY1, x2: oldX2, y2: oldY2, width, xAxis, yAxis, } = config;
+    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     const { x1, y1, x2, y2 } = {
@@ -56,3 +95,2 @@ x1: convertValue(oldX1, plotWidth, xScale),
     };
-    const radsToDegs = (rad) => (rad * 180) / Math.PI;
     const { cx, cy } = {
@@ -78,2 +116,6 @@ cx: (x1 + x2) / 2,
 exports.useDirectedEllipsePosition = useDirectedEllipsePosition;
+function radsToDegs(rad) {
+    return (rad * 180) / Math.PI;
+}
+// convert functions
 function convertString(value, total) {
@@ -118,11 +160,3 @@ return value.endsWith('%')
 }
-function usePointPosition(config) {
-    const { axisContext, plotWidth, plotHeight } = (0, plotContext_1.usePlotContext)();
-    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, 'x', 'y');
-    const points = config;
-    return points
-        .map((point) => `${convertValue(point.x, plotWidth, xScale)},${convertValue(point.y, plotHeight, yScale)}`)
-        .join(' ');
-}
-exports.usePointPosition = usePointPosition;
+// other hooks
 function useIsSeriesVisible(id) {
@@ -137,3 +171,5 @@ const [legendState] = (0, legendContext_1.useLegend)();
     const { xAxis, yAxis, xShift, yShift } = options;
-    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, xAxis, yAxis);
+    const [xScale, yScale] = (0, utils_1.validateAxis)(axisContext, xAxis, yAxis, {
+        onlyOrthogonal: true,
+    });
     return {
@@ -140,0 +176,0 @@ xShift: convertToPx(xShift, plotWidth, xScale),

lib/utils.js

@@ -37,3 +37,4 @@ "use strict";
  */
-function validateAxis(axisContext, xKey, yKey) {
+function validateAxis(axisContext, xKey, yKey, options = {}) {
+    const { onlyOrthogonal = false } = options;
     const xAxis = axisContext[xKey];
@@ -43,5 +44,12 @@ const yAxis = axisContext[yKey];
         return [undefined, undefined];
-    if (horizontal.includes(xAxis.position)
-        ? !vertical.includes(yAxis.position)
-        : vertical.includes(xAxis.position)) {
+    if (onlyOrthogonal &&
+        ((horizontal.includes(xAxis.position) &&
+            horizontal.includes(yAxis.position)) ||
+            (vertical.includes(yAxis.position) && vertical.includes(xAxis.position)))) {
+        throw new Error(`The axis ${xKey} and ${yKey} are not orthogonal`);
+    }
+    if (!onlyOrthogonal &&
+        (horizontal.includes(xAxis.position)
+            ? !vertical.includes(yAxis.position)
+            : vertical.includes(xAxis.position))) {
         if (vertical.includes(xAxis.position) ||
@@ -48,0 +56,0 @@ horizontal.includes(yAxis.position)) {

package.json

 {
   "name": "react-plot",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Library of React components to render SVG 2D plots.",
@@ -67,6 +67,6 @@ "main": "lib/index.js",
     "@types/point-in-polygon": "^1.1.1",
-    "@types/react": "^17.0.44",
+    "@types/react": "^17.0.45",
     "@zakodium/eslint-config": "^5.1.1",
-    "eslint": "^8.10.0",
-    "isotopic-distribution": "^1.4.10",
+    "eslint": "^8.15.0",
+    "isotopic-distribution": "^1.4.11",
     "iv-analysis": "^0.1.3",
@@ -77,10 +77,10 @@ "ml-dataset-iris": "^1.2.1",
     "ml-regression-simple-linear": "^2.0.3",
+    "ml-spectra-processing": "^11.6.0",
+    "ms-spectrum": "^1.6.4",
     "point-in-polygon": "^1.1.0",
-    "ml-spectra-processing": "^11.0.0",
-    "ms-spectrum": "^1.6.3",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.5.5",
-    "webpack": "^5.69.1"
+    "typescript": "^4.6.4",
+    "webpack": "^5.72.1"
   },
@@ -92,3 +92,3 @@ "dependencies": {
     "d3-shape": "^3.1.0",
-    "immer": "^9.0.12",
+    "immer": "^9.0.14",
     "ml-distance-euclidean": "^2.0.0",
@@ -95,0 +95,0 @@ "react-d3-utils": "^0.5.0"

No alert changes

Improved metrics

Total package byte prevSize

481528

increased by3.8%

Number of package files

279

increased by1.45%

Lines of code

7751

increased by3.54%

Dependency changes

• Updatedimmer@^9.0.14