@mui/x-charts 9.0.4 → 9.2.0

package/ScatterChart/FocusedScatterMark.mjs

@@ -7,8 +7,8 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { useTheme } from '@mui/material/styles';
 import { useFocusedItem } from "../hooks/useFocusedItem.mjs";
-import { getValueToPositionMapper, useScatterSeriesContext, useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useUtilityClasses } from "./scatterClasses.mjs";
+import { useScatterItemPosition } from "./useScatterItemPosition.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FocusedScatterMark(_ref) {
   let {
@@ -17,38 +17,24 @@ export function FocusedScatterMark(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const focusedItem = useFocusedItem();
-  const scatterSeries = useScatterSeriesContext();
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
   const classes = useUtilityClasses();
-  if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
+  const resolved = useScatterItemPosition(focusedItem?.type === 'scatter' ? focusedItem : null);
+  if (!resolved) {
     return null;
   }
-  const series = scatterSeries?.series[focusedItem.seriesId];
-  if (!series || series.hidden) {
-    return null;
-  }
-  const xAxisId = series.xAxisId ?? xAxisIds[0];
-  const yAxisId = series.yAxisId ?? yAxisIds[0];
-  const getXPosition = getValueToPositionMapper(xAxis[xAxisId].scale);
-  const getYPosition = getValueToPositionMapper(yAxis[yAxisId].scale);
-  const scatterPoint = series.data[focusedItem.dataIndex];
-  const x = getXPosition(scatterPoint.x);
-  const y = getYPosition(scatterPoint.y);
+  const {
+    cx,
+    cy,
+    series
+  } = resolved;
   const size = series.markerSize + 3;
   return /*#__PURE__*/_jsx("rect", _extends({
     className: clsx(classes.focusedMark, className),
     fill: "none",
     stroke: (theme.vars ?? theme).palette.text.primary,
     strokeWidth: 2,
-    x: x - size,
-    y: y - size,
+    x: cx - size,
+    y: cy - size,
     width: 2 * size,
     height: 2 * size,
     rx: 3,

package/ScatterChart/HighlightedScatterMark.d.mts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * Draws an SVG ring around the currently highlighted scatter point.
+ * Used by renderers where the point itself is rasterized off the SVG tree
+ * (for example WebGL or `svg-batch`), so the highlight has to be drawn in SVG
+ * and positioned via the same axis scales the underlying renderer uses.
+ */
+export declare function HighlightedScatterMark({
+  className,
+  ...props
+}: React.SVGAttributes<SVGCircleElement>): import("react/jsx-runtime").JSX.Element | null;

package/ScatterChart/HighlightedScatterMark.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * Draws an SVG ring around the currently highlighted scatter point.
+ * Used by renderers where the point itself is rasterized off the SVG tree
+ * (for example WebGL or `svg-batch`), so the highlight has to be drawn in SVG
+ * and positioned via the same axis scales the underlying renderer uses.
+ */
+export declare function HighlightedScatterMark({
+  className,
+  ...props
+}: React.SVGAttributes<SVGCircleElement>): import("react/jsx-runtime").JSX.Element | null;

package/ScatterChart/HighlightedScatterMark.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightedScatterMark = HighlightedScatterMark;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
+var _useStore = require("../internals/store/useStore");
+var _scatterClasses = require("./scatterClasses");
+var _useScatterItemPosition = require("./useScatterItemPosition");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
+/**
+ * Draws an SVG ring around the currently highlighted scatter point.
+ * Used by renderers where the point itself is rasterized off the SVG tree
+ * (for example WebGL or `svg-batch`), so the highlight has to be drawn in SVG
+ * and positioned via the same axis scales the underlying renderer uses.
+ */
+function HighlightedScatterMark(_ref) {
+  let {
+      className
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const theme = (0, _styles.useTheme)();
+  const store = (0, _useStore.useStore)();
+  const highlightedItem = store.use(_useChartHighlight.selectorChartsHighlightedItem);
+  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
+  const classes = (0, _scatterClasses.useUtilityClasses)();
+  const isHighlightedScatter = highlightedItem?.type === 'scatter' && highlightedItem.dataIndex !== undefined;
+  const resolved = (0, _useScatterItemPosition.useScatterItemPosition)(isHighlightedScatter ? {
+    seriesId: highlightedItem.seriesId,
+    dataIndex: highlightedItem.dataIndex
+  } : null);
+  if (!resolved) {
+    return null;
+  }
+  const {
+    cx,
+    cy,
+    series
+  } = resolved;
+
+  // Allow a markerSize margin around the drawing area so the highlight ring stays
+  // visible at the edges (e.g. during keyboard navigation) without needing a clip-path.
+  const margin = series.markerSize;
+  if (cx < drawingArea.left - margin || cx > drawingArea.left + drawingArea.width + margin || cy < drawingArea.top - margin || cy > drawingArea.top + drawingArea.height + margin) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.highlightedMark, className),
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 1,
+    cx: cx,
+    cy: cy,
+    r: series.markerSize,
+    pointerEvents: "none"
+  }, props));
+}

package/ScatterChart/HighlightedScatterMark.mjs

@@ -0,0 +1,62 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { useTheme } from '@mui/material/styles';
+import { selectorChartsHighlightedItem } from "../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
+import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/index.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { useUtilityClasses } from "./scatterClasses.mjs";
+import { useScatterItemPosition } from "./useScatterItemPosition.mjs";
+
+/**
+ * Draws an SVG ring around the currently highlighted scatter point.
+ * Used by renderers where the point itself is rasterized off the SVG tree
+ * (for example WebGL or `svg-batch`), so the highlight has to be drawn in SVG
+ * and positioned via the same axis scales the underlying renderer uses.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HighlightedScatterMark(_ref) {
+  let {
+      className
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const store = useStore();
+  const highlightedItem = store.use(selectorChartsHighlightedItem);
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const classes = useUtilityClasses();
+  const isHighlightedScatter = highlightedItem?.type === 'scatter' && highlightedItem.dataIndex !== undefined;
+  const resolved = useScatterItemPosition(isHighlightedScatter ? {
+    seriesId: highlightedItem.seriesId,
+    dataIndex: highlightedItem.dataIndex
+  } : null);
+  if (!resolved) {
+    return null;
+  }
+  const {
+    cx,
+    cy,
+    series
+  } = resolved;
+
+  // Allow a markerSize margin around the drawing area so the highlight ring stays
+  // visible at the edges (e.g. during keyboard navigation) without needing a clip-path.
+  const margin = series.markerSize;
+  if (cx < drawingArea.left - margin || cx > drawingArea.left + drawingArea.width + margin || cy < drawingArea.top - margin || cy > drawingArea.top + drawingArea.height + margin) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("circle", _extends({
+    className: clsx(classes.highlightedMark, className),
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 1,
+    cx: cx,
+    cy: cy,
+    r: series.markerSize,
+    pointerEvents: "none"
+  }, props));
+}

package/ScatterChart/ScatterChart.d.mts

@@ -4,7 +4,6 @@ import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar
 import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.mjs";
 import { type ScatterPlotProps, type ScatterPlotSlotProps, type ScatterPlotSlots } from "./ScatterPlot.mjs";
 import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
-import { type ChartsAxisProps } from "../ChartsAxis/index.mjs";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.mjs";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.mjs";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.mjs";
@@ -24,7 +23,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
+export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.

package/ScatterChart/ScatterChart.d.ts

@@ -4,7 +4,6 @@ import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar
 import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.js";
 import { type ScatterPlotProps, type ScatterPlotSlotProps, type ScatterPlotSlots } from "./ScatterPlot.js";
 import { type ChartsContainerProps } from "../ChartsContainer/index.js";
-import { type ChartsAxisProps } from "../ChartsAxis/index.js";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.js";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
@@ -24,7 +23,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
+export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.