@mui/x-charts 9.0.0-alpha.3 → 9.0.0-beta.0

package/LineChart/LineHighlightElement.d.ts

@@ -1,31 +1,11 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
-/**
- * @deprecated Use `LineClasses` from `./lineClasses` instead.
- */
-export interface LineHighlightElementClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
-/**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
- */
-export type HighlightElementClassKey = keyof LineHighlightElementClasses;
 interface LineHighlightElementCommonProps {
   seriesId: SeriesId;
   color: string;
   x: number;
   y: number;
-  classes?: Partial<LineHighlightElementClasses>;
 }
-/**
- * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
- */
-export declare function getHighlightElementUtilityClass(slot: string): string;
-/**
- * @deprecated Use `lineClasses` from `./lineClasses` instead.
- */
-export declare const lineHighlightElementClasses: LineHighlightElementClasses;
 export type LineHighlightElementProps = (LineHighlightElementCommonProps & {
   shape: 'circle';
 } & Omit<React.SVGProps<SVGCircleElement>, 'ref'>) | (LineHighlightElementCommonProps & {

package/LineChart/LineHighlightElement.js

@@ -7,52 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LineHighlightElement = LineHighlightElement;
-exports.getHighlightElementUtilityClass = getHighlightElementUtilityClass;
-exports.lineHighlightElementClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _getSymbol = require("../internals/getSymbol");
 var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "seriesId", "classes", "color", "shape"];
-/**
- * @deprecated Use `LineClasses` from `./lineClasses` instead.
- */
-/**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
- */
-/**
- * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
- */
-function getHighlightElementUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
-}
-
-/**
- * @deprecated Use `lineClasses` from `./lineClasses` instead.
- */
-const lineHighlightElementClasses = exports.lineHighlightElementClasses = (0, _generateUtilityClasses.default)('MuiHighlightElement', ['root']);
-
-/**
- * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
- */
-const useDeprecatedUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`]
-  };
-  return (0, _composeClasses.default)(slots, getHighlightElementUtilityClass, classes);
-};
+const _excluded = ["x", "y", "seriesId", "color", "shape"];
 /**
  * Demos:
  *
@@ -72,7 +36,6 @@ function LineHighlightElement(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const classes = (0, _lineClasses.useUtilityClasses)();
-  const deprecatedClasses = useDeprecatedUtilityClasses(props);
   const Element = shape === 'circle' ? 'circle' : 'path';
   const additionalProps = shape === 'circle' ? {
     cx: 0,
@@ -90,7 +53,7 @@ function LineHighlightElement(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
     pointerEvents: "none",
-    className: `${classes.highlight} ${deprecatedClasses.root}`,
+    className: classes.highlight,
     transform: `translate(${x} ${y})`,
     fill: color
   }, transformOrigin, additionalProps, other));

package/LineChart/LineHighlightElement.mjs

@@ -2,50 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "seriesId", "classes", "color", "shape"];
+const _excluded = ["x", "y", "seriesId", "color", "shape"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import reactMajor from '@mui/x-internals/reactMajor';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { getSymbol } from "../internals/getSymbol.mjs";
 import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
-
-/**
- * @deprecated Use `LineClasses` from `./lineClasses` instead.
- */
-
-/**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
- */
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
- */
-export function getHighlightElementUtilityClass(slot) {
-  return generateUtilityClass('MuiHighlightElement', slot);
-}
-
-/**
- * @deprecated Use `lineClasses` from `./lineClasses` instead.
- */
-export const lineHighlightElementClasses = generateUtilityClasses('MuiHighlightElement', ['root']);
-
-/**
- * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
- */
-const useDeprecatedUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`]
-  };
-  return composeClasses(slots, getHighlightElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -65,7 +29,6 @@ function LineHighlightElement(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useLineUtilityClasses();
-  const deprecatedClasses = useDeprecatedUtilityClasses(props);
   const Element = shape === 'circle' ? 'circle' : 'path';
   const additionalProps = shape === 'circle' ? {
     cx: 0,
@@ -83,7 +46,7 @@ function LineHighlightElement(props) {
   };
   return /*#__PURE__*/_jsx(Element, _extends({
     pointerEvents: "none",
-    className: `${classes.highlight} ${deprecatedClasses.root}`,
+    className: classes.highlight,
     transform: `translate(${x} ${y})`,
     fill: color
   }, transformOrigin, additionalProps, other));

package/LineChart/LineHighlightPlot.js

@@ -18,7 +18,7 @@ var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _constants = require("../constants");
 var _useLineSeries = require("../hooks/useLineSeries");
 var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -50,7 +50,7 @@ function LineHighlightPlot(props) {
   } = (0, _useAxis.useYAxes)();
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const store = (0, _useStore.useStore)();
   const highlightedIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
   if (highlightedIndexes.length === 0) {

package/LineChart/LineHighlightPlot.mjs

@@ -12,7 +12,7 @@ import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs"
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.mjs";
 import { useLineSeriesContext } from "../hooks/useLineSeries.mjs";
 import getColor from "./seriesConfig/getColor.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { useXAxes, useYAxes } from "../hooks/useAxis.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,7 +43,7 @@ function LineHighlightPlot(props) {
   } = useYAxes();
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const store = useStore();
   const highlightedIndexes = store.use(selectorChartsHighlightXAxisIndex);
   if (highlightedIndexes.length === 0) {

package/LineChart/MarkElement.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MarkElementOwnerState } from "./markElementClasses.mjs";
+import { type MarkElementOwnerState } from "./lineClasses.mjs";
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
   /**
    * If `true`, the marker is hidden.

package/LineChart/MarkElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MarkElementOwnerState } from "./markElementClasses.js";
+import { type MarkElementOwnerState } from "./lineClasses.js";
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
   /**
    * If `true`, the marker is hidden.

package/LineChart/MarkElement.js

@@ -14,9 +14,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _animation = require("../internals/animation/animation");
-var _getSymbol = require("../internals/getSymbol");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _markElementClasses = require("./markElementClasses");
+var _useChartExperimentalFeature = require("../internals/plugins/corePlugins/useChartExperimentalFeature");
+var _useStore = require("../internals/store/useStore");
+var _getSymbol = require("../internals/getSymbol");
 var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "seriesId", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "hidden", "style"];
@@ -27,7 +28,7 @@ const MarkElementPath = (0, _styles.styled)('path', {
   theme
 }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  [`&.${_markElementClasses.markElementClasses.animate}`]: {
+  [`&.${_lineClasses.lineClasses.markAnimate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'transform, transform-origin, opacity',
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
@@ -60,6 +61,8 @@ function MarkElement(props) {
       style
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const store = (0, _useStore.useStore)();
+  const enablePositionBasedPointerInteraction = store.use(_useChartExperimentalFeature.selectorChartExperimentalFeaturesState)?.enablePositionBasedPointerInteraction;
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'line',
     seriesId,
@@ -76,22 +79,21 @@ function MarkElement(props) {
     skipAnimation,
     classes: innerClasses
   });
-  const deprecatedClasses = (0, _markElementClasses.useUtilityClasses)(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
     style: (0, _extends2.default)({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
     }),
     ownerState: ownerState,
-    className: `${classes.mark} ${deprecatedClasses.root}`,
+    className: classes.mark,
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
-    pointerEvents: hidden ? 'none' : undefined
-  }, interactionProps, {
+    pointerEvents: hidden ? 'none' : undefined,
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
     "data-series-id": seriesId,
+    "data-series": seriesId,
     "data-index": dataIndex,
     opacity: hidden ? 0 : 1,
     strokeWidth: 2,

package/LineChart/MarkElement.mjs

@@ -8,10 +8,11 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
-import { getSymbol } from "../internals/getSymbol.mjs";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
-import { markElementClasses, useUtilityClasses as useDeprecatedUtilityClasses } from "./markElementClasses.mjs";
-import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
+import { selectorChartExperimentalFeaturesState } from "../internals/plugins/corePlugins/useChartExperimentalFeature/index.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { getSymbol } from "../internals/getSymbol.mjs";
+import { lineClasses, useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
@@ -20,7 +21,7 @@ const MarkElementPath = styled('path', {
   theme
 }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  [`&.${markElementClasses.animate}`]: {
+  [`&.${lineClasses.markAnimate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'transform, transform-origin, opacity',
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
@@ -53,6 +54,8 @@ function MarkElement(props) {
       style
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const store = useStore();
+  const enablePositionBasedPointerInteraction = store.use(selectorChartExperimentalFeaturesState)?.enablePositionBasedPointerInteraction;
   const interactionProps = useInteractionItemProps({
     type: 'line',
     seriesId,
@@ -69,22 +72,21 @@ function MarkElement(props) {
     skipAnimation,
     classes: innerClasses
   });
-  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
+  return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
     style: _extends({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
     }),
     ownerState: ownerState,
-    className: `${classes.mark} ${deprecatedClasses.root}`,
+    className: classes.mark,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
-    pointerEvents: hidden ? 'none' : undefined
-  }, interactionProps, {
+    pointerEvents: hidden ? 'none' : undefined,
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
     "data-series-id": seriesId,
+    "data-series": seriesId,
     "data-index": dataIndex,
     opacity: hidden ? 0 : 1,
     strokeWidth: 2,

package/LineChart/MarkPlot.js

@@ -19,7 +19,7 @@ var _MarkElement = require("./MarkElement");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _useMarkPlotData = require("./useMarkPlotData");
 var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -58,7 +58,7 @@ function MarkPlot(props) {
   } = (0, _hooks.useYAxes)();
   const {
     store
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const getHighlightState = (0, _hooks.useItemHighlightStateGetter)();
   const xAxisHighlightIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
   const highlightedItems = React.useMemo(() => {

package/LineChart/MarkPlot.mjs

@@ -13,7 +13,7 @@ import { MarkElement } from "./MarkElement.mjs";
 import { useItemHighlightStateGetter, useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { useMarkPlotData } from "./useMarkPlotData.mjs";
 import { useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -51,7 +51,7 @@ function MarkPlot(props) {
   } = useYAxes();
   const {
     store
-  } = useChartContext();
+  } = useChartsContext();
   const getHighlightState = useItemHighlightStateGetter();
   const xAxisHighlightIndexes = store.use(selectorChartsHighlightXAxisIndex);
   const highlightedItems = React.useMemo(() => {

package/LineChart/index.d.mts

@@ -11,7 +11,5 @@ export * from "./MarkElement.mjs";
 export * from "./FocusedLineMark.mjs";
 export * from "./LineHighlightElement.mjs";
 export * from "./LineChart.plugins.mjs";
-export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.mjs";
-export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.mjs";
 export { lineClasses } from "./lineClasses.mjs";
 export type { LineClassKey, LineClasses } from "./lineClasses.mjs";

package/LineChart/index.d.ts

@@ -11,7 +11,5 @@ export * from "./MarkElement.js";
 export * from "./FocusedLineMark.js";
 export * from "./LineHighlightElement.js";
 export * from "./LineChart.plugins.js";
-export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";
-export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";
 export { lineClasses } from "./lineClasses.js";
 export type { LineClassKey, LineClasses } from "./lineClasses.js";

package/LineChart/index.js

@@ -4,28 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  getMarkElementUtilityClass: true,
-  markElementClasses: true,
   lineClasses: true
 };
-Object.defineProperty(exports, "getMarkElementUtilityClass", {
-  enumerable: true,
-  get: function () {
-    return _markElementClasses.getMarkElementUtilityClass;
-  }
-});
 Object.defineProperty(exports, "lineClasses", {
   enumerable: true,
   get: function () {
     return _lineClasses.lineClasses;
   }
 });
-Object.defineProperty(exports, "markElementClasses", {
-  enumerable: true,
-  get: function () {
-    return _markElementClasses.markElementClasses;
-  }
-});
 var _LineChart = require("./LineChart");
 Object.keys(_LineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -182,5 +168,4 @@ Object.keys(_LineChart2).forEach(function (key) {
     }
   });
 });
-var _markElementClasses = require("./markElementClasses");
 var _lineClasses = require("./lineClasses");

package/LineChart/index.mjs

@@ -11,5 +11,4 @@ export * from "./MarkElement.mjs";
 export * from "./FocusedLineMark.mjs";
 export * from "./LineHighlightElement.mjs";
 export * from "./LineChart.plugins.mjs";
-export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.mjs";
 export { lineClasses } from "./lineClasses.mjs";

package/LineChart/seriesConfig/curveEvaluation.d.mts

@@ -0,0 +1,11 @@
+import type { CurveType } from "../../models/curve.mjs";
+/**
+ * Build the curve segments for a set of pixel-coordinate points
+ * using d3's curve factory, then evaluate y at the given pixel x.
+ *
+ * Returns null if targetX is outside the curve's x range.
+ */
+export declare function evaluateCurveY(points: Array<{
+  x: number;
+  y: number;
+}>, targetX: number, curveType?: CurveType): number | null;

package/LineChart/seriesConfig/curveEvaluation.d.ts

@@ -0,0 +1,11 @@
+import type { CurveType } from "../../models/curve.js";
+/**
+ * Build the curve segments for a set of pixel-coordinate points
+ * using d3's curve factory, then evaluate y at the given pixel x.
+ *
+ * Returns null if targetX is outside the curve's x range.
+ */
+export declare function evaluateCurveY(points: Array<{
+  x: number;
+  y: number;
+}>, targetX: number, curveType?: CurveType): number | null;

package/LineChart/seriesConfig/curveEvaluation.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.evaluateCurveY = evaluateCurveY;
+var _getCurve = require("../../internals/getCurve");
+/**
+ * A straight line segment.
+ */
+
+/**
+ * A cubic bezier segment with control points.
+ */
+
+function isBezierSegment(segment) {
+  return 'cpx1' in segment;
+}
+
+/**
+ * A minimal d3 path context that captures line/bezier segments
+ * instead of producing an SVG path string.
+ */
+class SegmentCapture {
+  segments = [];
+  cx = 0;
+  cy = 0;
+  moveTo(x, y) {
+    this.cx = x;
+    this.cy = y;
+  }
+  lineTo(x, y) {
+    this.segments.push({
+      x0: this.cx,
+      y0: this.cy,
+      x1: x,
+      y1: y
+    });
+    this.cx = x;
+    this.cy = y;
+  }
+  bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) {
+    this.segments.push({
+      x0: this.cx,
+      y0: this.cy,
+      cpx1,
+      cpy1,
+      cpx2,
+      cpy2,
+      x1: x,
+      y1: y
+    });
+    this.cx = x;
+    this.cy = y;
+  }
+  closePath() {}
+}
+
+/** Evaluate a cubic Bezier at parameter t. */
+function cubicBezier(t, p0, p1, p2, p3) {
+  const mt = 1 - t;
+  return mt * mt * mt * p0 + 3 * mt * mt * t * p1 + 3 * mt * t * t * p2 + t * t * t * p3;
+}
+
+/**
+ * Find parameter t such that the segment's x(t) ≈ targetX using bisection.
+ * 20 iterations gives ~1e-6 precision relative to the segment's x range.
+ */
+function findTForX(segment, targetX) {
+  if (!isBezierSegment(segment)) {
+    // Linear segment.
+    const dx = segment.x1 - segment.x0;
+    return dx === 0 ? 0 : (targetX - segment.x0) / dx;
+  }
+
+  // Cubic bezier — bisect.
+  let lo = 0;
+  let hi = 1;
+  for (let iter = 0; iter < 20; iter += 1) {
+    const mid = (lo + hi) / 2;
+    const x = cubicBezier(mid, segment.x0, segment.cpx1, segment.cpx2, segment.x1);
+    if (x < targetX) {
+      lo = mid;
+    } else {
+      hi = mid;
+    }
+    if (Math.abs(x - targetX) < 1) {
+      return (lo + hi) / 2;
+    }
+  }
+  return (lo + hi) / 2;
+}
+
+/** Evaluate the segment's y at parameter t. */
+function evaluateSegmentY(segment, t) {
+  if (!isBezierSegment(segment)) {
+    return segment.y0 + t * (segment.y1 - segment.y0);
+  }
+  return cubicBezier(t, segment.y0, segment.cpy1, segment.cpy2, segment.y1);
+}
+
+/**
+ * Build the curve segments for a set of pixel-coordinate points
+ * using d3's curve factory, then evaluate y at the given pixel x.
+ *
+ * Returns null if targetX is outside the curve's x range.
+ */
+function evaluateCurveY(points, targetX, curveType) {
+  if (points.length === 0) {
+    return null;
+  }
+  if (points.length === 1) {
+    return points[0].y;
+  }
+  const capture = new SegmentCapture();
+  const factory = (0, _getCurve.getCurveFactory)(curveType);
+  const curveInstance = factory(capture);
+  curveInstance.lineStart();
+  for (const p of points) {
+    curveInstance.point(p.x, p.y);
+  }
+  curveInstance.lineEnd();
+
+  // Find the segment containing targetX.
+  for (const segment of capture.segments) {
+    const xMin = Math.min(segment.x0, segment.x1);
+    const xMax = Math.max(segment.x0, segment.x1);
+    if (targetX >= xMin - 0.5 && targetX <= xMax + 0.5) {
+      const t = findTForX(segment, targetX);
+      return evaluateSegmentY(segment, t);
+    }
+  }
+  return null;
+}