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

package/LineChart/MarkElement.mjs

@@ -8,8 +8,10 @@ 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 { 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', {
@@ -52,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,
@@ -68,7 +72,7 @@ function MarkElement(props) {
     skipAnimation,
     classes: innerClasses
   });
-  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`
@@ -78,8 +82,7 @@ function MarkElement(props) {
     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,

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;
+}

package/LineChart/seriesConfig/curveEvaluation.mjs

@@ -0,0 +1,129 @@
+import { getCurveFactory } from "../../internals/getCurve.mjs";
+
+/**
+ * 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.
+ */
+export 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 = 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;
+}

package/LineChart/seriesConfig/descriptionGetter.d.mts

@@ -0,0 +1,3 @@
+import type { DescriptionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+declare const descriptionGetter: DescriptionGetter<'line'>;
+export default descriptionGetter;

package/LineChart/seriesConfig/descriptionGetter.d.ts

@@ -0,0 +1,3 @@
+import type { DescriptionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+declare const descriptionGetter: DescriptionGetter<'line'>;
+export default descriptionGetter;

package/LineChart/seriesConfig/descriptionGetter.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _getLabel = require("../../internals/getLabel");
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    xAxis,
+    localeText
+  } = params;
+  const label = (0, _getLabel.getLabel)(series.label, 'tooltip');
+  const dataIndex = identifier.dataIndex;
+  if (dataIndex === undefined) {
+    return '';
+  }
+  const xValue = xAxis.data?.[dataIndex] ?? null;
+  const yValue = series.data[dataIndex] ?? null;
+  const formattedXValue = xAxis.valueFormatter?.(xValue, {
+    location: 'tooltip',
+    scale: xAxis.scale
+  });
+  const formattedYValue = series.valueFormatter(yValue, {
+    dataIndex
+  });
+  return localeText.lineDescription({
+    x: xValue,
+    y: yValue,
+    formattedXValue: formattedXValue ?? '',
+    formattedYValue: formattedYValue ?? '',
+    seriesLabel: label
+  });
+};
+var _default = exports.default = descriptionGetter;

package/LineChart/seriesConfig/descriptionGetter.mjs

@@ -0,0 +1,31 @@
+import { getLabel } from "../../internals/getLabel.mjs";
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    xAxis,
+    localeText
+  } = params;
+  const label = getLabel(series.label, 'tooltip');
+  const dataIndex = identifier.dataIndex;
+  if (dataIndex === undefined) {
+    return '';
+  }
+  const xValue = xAxis.data?.[dataIndex] ?? null;
+  const yValue = series.data[dataIndex] ?? null;
+  const formattedXValue = xAxis.valueFormatter?.(xValue, {
+    location: 'tooltip',
+    scale: xAxis.scale
+  });
+  const formattedYValue = series.valueFormatter(yValue, {
+    dataIndex
+  });
+  return localeText.lineDescription({
+    x: xValue,
+    y: yValue,
+    formattedXValue: formattedXValue ?? '',
+    formattedYValue: formattedYValue ?? '',
+    seriesLabel: label
+  });
+};
+export default descriptionGetter;

package/LineChart/seriesConfig/getItemAtPosition.d.mts

@@ -0,0 +1,7 @@
+import type { UseChartCartesianAxisSignature } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+import type { ChartState } from "../../internals/plugins/models/chart.mjs";
+import type { SeriesItemIdentifierWithType } from "../../models/seriesType/index.mjs";
+export default function getItemAtPosition(state: ChartState<[UseChartCartesianAxisSignature]>, point: {
+  x: number;
+  y: number;
+}): SeriesItemIdentifierWithType<'line'> | undefined;

package/LineChart/seriesConfig/getItemAtPosition.d.ts

@@ -0,0 +1,7 @@
+import type { UseChartCartesianAxisSignature } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import type { ChartState } from "../../internals/plugins/models/chart.js";
+import type { SeriesItemIdentifierWithType } from "../../models/seriesType/index.js";
+export default function getItemAtPosition(state: ChartState<[UseChartCartesianAxisSignature]>, point: {
+  x: number;
+  y: number;
+}): SeriesItemIdentifierWithType<'line'> | undefined;