@mui/x-charts 9.0.3 → 9.1.0

package/ScatterChart/index.d.mts

@@ -4,6 +4,7 @@ export * from "./Scatter.mjs";
 export * from "./ScatterMarker.types.mjs";
 export * from "./ScatterMarker.mjs";
 export * from "./FocusedScatterMark.mjs";
+export * from "./HighlightedScatterMark.mjs";
 export * from "./ScatterChart.plugins.mjs";
 export { scatterClasses } from "./scatterClasses.mjs";
 export type { ScatterClassKey, ScatterClasses } from "./scatterClasses.mjs";

package/ScatterChart/index.d.ts

@@ -4,6 +4,7 @@ export * from "./Scatter.js";
 export * from "./ScatterMarker.types.js";
 export * from "./ScatterMarker.js";
 export * from "./FocusedScatterMark.js";
+export * from "./HighlightedScatterMark.js";
 export * from "./ScatterChart.plugins.js";
 export { scatterClasses } from "./scatterClasses.js";
 export type { ScatterClassKey, ScatterClasses } from "./scatterClasses.js";

package/ScatterChart/index.js

@@ -84,6 +84,18 @@ Object.keys(_FocusedScatterMark).forEach(function (key) {
     }
   });
 });
+var _HighlightedScatterMark = require("./HighlightedScatterMark");
+Object.keys(_HighlightedScatterMark).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HighlightedScatterMark[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedScatterMark[key];
+    }
+  });
+});
 var _ScatterChart2 = require("./ScatterChart.plugins");
 Object.keys(_ScatterChart2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/ScatterChart/index.mjs

@@ -4,5 +4,6 @@ export * from "./Scatter.mjs";
 export * from "./ScatterMarker.types.mjs";
 export * from "./ScatterMarker.mjs";
 export * from "./FocusedScatterMark.mjs";
+export * from "./HighlightedScatterMark.mjs";
 export * from "./ScatterChart.plugins.mjs";
 export { scatterClasses } from "./scatterClasses.mjs";

package/ScatterChart/scatterClasses.d.mts

@@ -10,6 +10,8 @@ export interface ScatterClasses {
   marker: string;
   /** Styles applied to the focused scatter mark element. */
   focusedMark: string;
+  /** Styles applied to the highlighted scatter mark element. */
+  highlightedMark: string;
 }
 export type ScatterClassKey = keyof ScatterClasses;
 export declare function getScatterUtilityClass(slot: string): string;
@@ -17,4 +19,4 @@ export declare const scatterClasses: ScatterClasses;
 export interface UseUtilityClassesOptions {
   classes?: Partial<ScatterClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark" | "highlightedMark", string>;

package/ScatterChart/scatterClasses.d.ts

@@ -10,6 +10,8 @@ export interface ScatterClasses {
   marker: string;
   /** Styles applied to the focused scatter mark element. */
   focusedMark: string;
+  /** Styles applied to the highlighted scatter mark element. */
+  highlightedMark: string;
 }
 export type ScatterClassKey = keyof ScatterClasses;
 export declare function getScatterUtilityClass(slot: string): string;
@@ -17,4 +19,4 @@ export declare const scatterClasses: ScatterClasses;
 export interface UseUtilityClassesOptions {
   classes?: Partial<ScatterClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark" | "highlightedMark", string>;

package/ScatterChart/scatterClasses.js

@@ -12,7 +12,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getScatterUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiScatterChart', slot);
 }
-const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatterChart', ['root', 'series', 'marker', 'focusedMark']);
+const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatterChart', ['root', 'series', 'marker', 'focusedMark', 'highlightedMark']);
 const useUtilityClasses = options => {
   const {
     classes
@@ -21,7 +21,8 @@ const useUtilityClasses = options => {
     root: ['root'],
     series: ['series'],
     marker: ['marker'],
-    focusedMark: ['focusedMark']
+    focusedMark: ['focusedMark'],
+    highlightedMark: ['highlightedMark']
   };
   return (0, _composeClasses.default)(slots, getScatterUtilityClass, classes);
 };

package/ScatterChart/scatterClasses.mjs

@@ -4,7 +4,7 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getScatterUtilityClass(slot) {
   return generateUtilityClass('MuiScatterChart', slot);
 }
-export const scatterClasses = generateUtilityClasses('MuiScatterChart', ['root', 'series', 'marker', 'focusedMark']);
+export const scatterClasses = generateUtilityClasses('MuiScatterChart', ['root', 'series', 'marker', 'focusedMark', 'highlightedMark']);
 export const useUtilityClasses = options => {
   const {
     classes
@@ -13,7 +13,8 @@ export const useUtilityClasses = options => {
     root: ['root'],
     series: ['series'],
     marker: ['marker'],
-    focusedMark: ['focusedMark']
+    focusedMark: ['focusedMark'],
+    highlightedMark: ['highlightedMark']
   };
   return composeClasses(slots, getScatterUtilityClass, classes);
 };

package/ScatterChart/useScatterChartProps.js

@@ -50,7 +50,9 @@ const useScatterChartProps = props => {
     type: 'scatter'
   }, s)), [series]);
   const resolvedDisableHitArea = disableHitArea;
-  const useVoronoiOnItemClick = resolvedDisableHitArea !== true || renderer === 'svg-batch';
+  // 'svg-single' (and the undefined default) is the only renderer with per-item DOM events.
+  // Every other renderer needs voronoi-based click handling regardless of disableHitArea.
+  const useVoronoiOnItemClick = resolvedDisableHitArea !== true || renderer !== undefined && renderer !== 'svg-single';
   const chartsContainerProps = (0, _extends2.default)({}, other, {
     series: seriesWithDefault,
     width,

package/ScatterChart/useScatterChartProps.mjs

@@ -43,7 +43,9 @@ export const useScatterChartProps = props => {
     type: 'scatter'
   }, s)), [series]);
   const resolvedDisableHitArea = disableHitArea;
-  const useVoronoiOnItemClick = resolvedDisableHitArea !== true || renderer === 'svg-batch';
+  // 'svg-single' (and the undefined default) is the only renderer with per-item DOM events.
+  // Every other renderer needs voronoi-based click handling regardless of disableHitArea.
+  const useVoronoiOnItemClick = resolvedDisableHitArea !== true || renderer !== undefined && renderer !== 'svg-single';
   const chartsContainerProps = _extends({}, other, {
     series: seriesWithDefault,
     width,

package/ScatterChart/useScatterItemPosition.d.mts

@@ -0,0 +1,16 @@
+import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier, type ScatterValueType } from "../models/seriesType/scatter.mjs";
+export interface ResolvedScatterItem {
+  cx: number;
+  cy: number;
+  series: DefaultizedScatterSeriesType;
+  scatterPoint: ScatterValueType;
+}
+/**
+ * Resolves a scatter item identifier to its on-screen position and the owning
+ * series. Shared by `FocusedScatterMark`, `HighlightedScatterMark`, and other
+ * overlay components that need to draw an SVG element at a specific scatter point.
+ *
+ * Returns `null` if the identifier is missing, the identifier doesn't point to
+ * a scatter series, or the referenced point can't be resolved.
+ */
+export declare function useScatterItemPosition(item: Pick<ScatterItemIdentifier, 'seriesId' | 'dataIndex'> | null | undefined): ResolvedScatterItem | null;

package/ScatterChart/useScatterItemPosition.d.ts

@@ -0,0 +1,16 @@
+import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier, type ScatterValueType } from "../models/seriesType/scatter.js";
+export interface ResolvedScatterItem {
+  cx: number;
+  cy: number;
+  series: DefaultizedScatterSeriesType;
+  scatterPoint: ScatterValueType;
+}
+/**
+ * Resolves a scatter item identifier to its on-screen position and the owning
+ * series. Shared by `FocusedScatterMark`, `HighlightedScatterMark`, and other
+ * overlay components that need to draw an SVG element at a specific scatter point.
+ *
+ * Returns `null` if the identifier is missing, the identifier doesn't point to
+ * a scatter series, or the referenced point can't be resolved.
+ */
+export declare function useScatterItemPosition(item: Pick<ScatterItemIdentifier, 'seriesId' | 'dataIndex'> | null | undefined): ResolvedScatterItem | null;

package/ScatterChart/useScatterItemPosition.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScatterItemPosition = useScatterItemPosition;
+var _hooks = require("../hooks");
+/**
+ * Resolves a scatter item identifier to its on-screen position and the owning
+ * series. Shared by `FocusedScatterMark`, `HighlightedScatterMark`, and other
+ * overlay components that need to draw an SVG element at a specific scatter point.
+ *
+ * Returns `null` if the identifier is missing, the identifier doesn't point to
+ * a scatter series, or the referenced point can't be resolved.
+ */
+function useScatterItemPosition(item) {
+  const scatterSeries = (0, _hooks.useScatterSeriesContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  if (!item || !scatterSeries) {
+    return null;
+  }
+  const series = scatterSeries.series[item.seriesId];
+  if (!series || series.hidden) {
+    return null;
+  }
+  const scatterPoint = series.data[item.dataIndex];
+  if (!scatterPoint) {
+    return null;
+  }
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const cx = (0, _hooks.getValueToPositionMapper)(xAxis[xAxisId].scale)(scatterPoint.x);
+  const cy = (0, _hooks.getValueToPositionMapper)(yAxis[yAxisId].scale)(scatterPoint.y);
+  return {
+    cx,
+    cy,
+    series,
+    scatterPoint
+  };
+}

package/ScatterChart/useScatterItemPosition.mjs

@@ -0,0 +1,41 @@
+import { getValueToPositionMapper, useScatterSeriesContext, useXAxes, useYAxes } from "../hooks/index.mjs";
+/**
+ * Resolves a scatter item identifier to its on-screen position and the owning
+ * series. Shared by `FocusedScatterMark`, `HighlightedScatterMark`, and other
+ * overlay components that need to draw an SVG element at a specific scatter point.
+ *
+ * Returns `null` if the identifier is missing, the identifier doesn't point to
+ * a scatter series, or the referenced point can't be resolved.
+ */
+export function useScatterItemPosition(item) {
+  const scatterSeries = useScatterSeriesContext();
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  if (!item || !scatterSeries) {
+    return null;
+  }
+  const series = scatterSeries.series[item.seriesId];
+  if (!series || series.hidden) {
+    return null;
+  }
+  const scatterPoint = series.data[item.dataIndex];
+  if (!scatterPoint) {
+    return null;
+  }
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const cx = getValueToPositionMapper(xAxis[xAxisId].scale)(scatterPoint.x);
+  const cy = getValueToPositionMapper(yAxis[yAxisId].scale)(scatterPoint.y);
+  return {
+    cx,
+    cy,
+    series,
+    scatterPoint
+  };
+}