@mui/x-charts 9.0.0-alpha.0 → 9.0.0-alpha.2

package/internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs

@@ -0,0 +1,18 @@
+'use client';
+
+import { useStore } from "../../../store/useStore.mjs";
+import { selectorChartZoomIsInteracting } from "./useChartCartesianAxisRendering.selectors.mjs";
+/**
+ * Check if the zoom is interacting.
+ *
+ * This should probably be moved/merged to the AnimationContext when we move it to the new API.
+ *
+ * @ignore Internal hook, similar to the PRO one.
+ *
+ * @returns {boolean} Inform the zoom is interacting.
+ */
+export function useInternalIsZoomInteracting() {
+  const store = useStore();
+  const isInteracting = store.use(selectorChartZoomIsInteracting);
+  return isInteracting;
+}

package/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.mts

@@ -0,0 +1,109 @@
+import { type AxisId } from "../../../../models/axis.mjs";
+import type { ExtremumFilter } from "./useChartCartesianAxis.types.mjs";
+export type ZoomData = {
+  /**
+   * The id of the zoomed axis.
+   */
+  axisId: AxisId;
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   */
+  start: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   */
+  end: number;
+};
+export type ZoomFilterMode = 'keep' | 'discard';
+export type ZoomSliderShowTooltip = 'always' | 'hover' | 'never';
+export interface ZoomOptions {
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   *
+   * @default 0
+   */
+  minStart?: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   *
+   * @default 100
+   */
+  maxEnd?: number;
+  /**
+   * The step size of the zooming function. Defines the granularity of the zoom.
+   *
+   * @default 5
+   */
+  step?: number;
+  /**
+   * Restricts the minimum span size in the range of 0 to 100.
+   *
+   * If the span size is smaller than the minSpan, the span will be resized to the minSpan.
+   *
+   * @default 10
+   */
+  minSpan?: number;
+  /**
+   * Restricts the maximum span size in the range of 0 to 100.
+   *
+   * If the span size is larger than the maxSpan, the span will be resized to the maxSpan.
+   *
+   * @default 100
+   */
+  maxSpan?: number;
+  /**
+   * Set to `false` to disable panning. Useful when you want to pan programmatically,
+   * or to show only a specific section of the chart.
+   *
+   * @default true
+   */
+  panning?: boolean;
+  /**
+   * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+   *
+   * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+   * - `discard`: The data outside the zoomed range is discarded for the other axes.
+   *    The other axes will be adjusted to fit the zoomed range.
+   *
+   * @default 'keep'
+   */
+  filterMode?: ZoomFilterMode;
+  /**
+   * Configures the zoom slider. The slider is an element that shows the zoomed range and allows its manipulation.
+   */
+  slider?: ZoomSliderOptions;
+}
+export interface ZoomSliderOptions {
+  /**
+   * If `true`, the slider will be shown.
+   */
+  enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   *
+   * @default 48 if preview is enabled, 28 otherwise.
+   */
+  size?: number;
+  /**
+   * Defines when the tooltip with the zoom values should be shown.
+   * - 'always': The tooltip is always shown.
+   * - 'hover': The tooltip is shown when hovering over the track or thumb.
+   * - 'never': The tooltip is never shown.
+   * @default 'hover'
+   */
+  showTooltip?: ZoomSliderShowTooltip;
+  /**
+   * If `true`, a preview of the chart will be shown in the slider.
+   */
+  preview?: boolean;
+}
+export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
+export type ZoomMap = Map<AxisId, ZoomData>;
+export type GetZoomAxisFilters = (params: {
+  currentAxisId: AxisId | undefined;
+  seriesXAxisId?: AxisId;
+  seriesYAxisId?: AxisId;
+  isDefaultAxis: boolean;
+}) => ExtremumFilter;

package/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.d.mts

@@ -0,0 +1,4 @@
+import { type ScatterValueType } from "../../../../models/seriesType/scatter.mjs";
+import { type Flatbush } from "../../../Flatbush.mjs";
+import { type D3Scale } from "../../../../models/axis.mjs";
+export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number): number[];

package/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.mjs

@@ -0,0 +1,33 @@
+import { isOrdinalScale } from "../../../scaleGuards.mjs";
+export function findClosestPoints(flatbush, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1) {
+  const originalXScale = xScale.copy();
+  const originalYScale = yScale.copy();
+  originalXScale.range([0, 1]);
+  originalYScale.range([0, 1]);
+  const excludeIfOutsideDrawingArea = function excludeIfOutsideDrawingArea(index) {
+    const x = originalXScale(seriesData[index].x);
+    const y = originalYScale(seriesData[index].y);
+    return x >= xZoomStart && x <= xZoomEnd && y >= yZoomStart && y <= yZoomEnd;
+  };
+
+  // We need to convert the distance from the original range [0, 1] to the current drawing area
+  // so the comparison is done on pixels instead of normalized values.
+  // fx and fy are the factors to convert the distance from [0, 1] to the current drawing area.
+  const fx = xScale.range()[1] - xScale.range()[0];
+  const fy = yScale.range()[1] - yScale.range()[0];
+  const fxSq = fx * fx;
+  const fySq = fy * fy;
+  function sqDistFn(dx, dy) {
+    return fxSq * dx * dx + fySq * dy * dy;
+  }
+  const pointX = originalXScale(invertScale(xScale, svgPointX, dataIndex => seriesData[dataIndex]?.x));
+  const pointY = originalYScale(invertScale(yScale, svgPointY, dataIndex => seriesData[dataIndex]?.y));
+  return flatbush.neighbors(pointX, pointY, maxResults, maxRadius != null ? maxRadius * maxRadius : Infinity, excludeIfOutsideDrawingArea, sqDistFn);
+}
+function invertScale(scale, value, getDataPoint) {
+  if (isOrdinalScale(scale)) {
+    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    return getDataPoint(dataIndex);
+  }
+  return scale.invert(value);
+}

package/internals/plugins/featurePlugins/useChartClosestPoint/index.d.mts

@@ -0,0 +1,3 @@
+export { useChartClosestPoint } from "./useChartClosestPoint.mjs";
+export * from "./useChartClosestPoint.selectors.mjs";
+export type { UseChartClosestPointSignature } from "./useChartClosestPoint.types.mjs";

package/internals/plugins/featurePlugins/useChartClosestPoint/index.mjs

@@ -0,0 +1,2 @@
+export { useChartClosestPoint } from "./useChartClosestPoint.mjs";
+export * from "./useChartClosestPoint.selectors.mjs";

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.d.mts

@@ -0,0 +1,3 @@
+import { type ChartPlugin } from "../../models/index.mjs";
+import { type UseChartClosestPointSignature } from "./useChartClosestPoint.types.mjs";
+export declare const useChartClosestPoint: ChartPlugin<UseChartClosestPointSignature>;

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -21,7 +21,7 @@ const useChartClosestPoint = ({
   instance
 }) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const {
     disableVoronoi,
@@ -50,10 +50,10 @@ const useChartClosestPoint = ({
     });
   }, [store, disableVoronoi]);
   React.useEffect(() => {
-    if (svgRef.current === null || disableVoronoi) {
+    if (chartsLayerContainerRef.current === null || disableVoronoi) {
       return undefined;
     }
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getChartPoint.getChartPoint)(element, event);
@@ -150,6 +150,7 @@ const useChartClosestPoint = ({
       });
       instance.setLastUpdateSource?.('pointer');
       instance.setHighlight?.({
+        type: 'scatter',
         seriesId,
         dataIndex
       });
@@ -180,7 +181,7 @@ const useChartClosestPoint = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
+  }, [chartsLayerContainerRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
 
   // Instance implementation
   const enableVoronoiCallback = (0, _useEventCallback.default)(() => {

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.mjs

@@ -0,0 +1,211 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { getChartPoint } from "../../../getChartPoint.mjs";
+import { selectorChartAxisZoomData, selectorChartSeriesEmptyFlatbushMap, selectorChartSeriesFlatbushMap, selectorChartXAxis, selectorChartYAxis, selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.mjs";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.mjs";
+import { findClosestPoints } from "./findClosestPoints.mjs";
+export const useChartClosestPoint = ({
+  params,
+  store,
+  instance
+}) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const {
+    disableVoronoi,
+    voronoiMaxRadius,
+    onItemClick
+  } = params;
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = store.use(selectorChartXAxis);
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = store.use(selectorChartYAxis);
+  const zoomIsInteracting = store.use(selectorChartZoomIsInteracting);
+  const {
+    series,
+    seriesOrder
+  } = store.use(selectorChartSeriesProcessed)?.scatter ?? {};
+  const flatbushMap = store.use(zoomIsInteracting ? selectorChartSeriesEmptyFlatbushMap : selectorChartSeriesFlatbushMap);
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  useEnhancedEffect(() => {
+    store.set('voronoi', {
+      isVoronoiEnabled: !disableVoronoi
+    });
+  }, [store, disableVoronoi]);
+  React.useEffect(() => {
+    if (chartsLayerContainerRef.current === null || disableVoronoi) {
+      return undefined;
+    }
+    const element = chartsLayerContainerRef.current;
+    function getClosestPoint(event) {
+      // Get mouse coordinate in global SVG space
+      const svgPoint = getChartPoint(element, event);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
+        return 'outside-chart';
+      }
+      let closestPoint = undefined;
+      for (const seriesId of seriesOrder ?? []) {
+        const aSeries = (series ?? {})[seriesId];
+        const flatbush = flatbushMap.get(seriesId);
+        if (!flatbush) {
+          continue;
+        }
+        const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
+        const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
+        const xAxisZoom = selectorChartAxisZoomData(store.state, xAxisId);
+        const yAxisZoom = selectorChartAxisZoomData(store.state, yAxisId);
+        const maxRadius = voronoiMaxRadius === 'item' ? aSeries.markerSize : voronoiMaxRadius;
+        const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
+        const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
+        const yZoomStart = (yAxisZoom?.start ?? 0) / 100;
+        const yZoomEnd = (yAxisZoom?.end ?? 100) / 100;
+        const xScale = xAxis[xAxisId].scale;
+        const yScale = yAxis[yAxisId].scale;
+        const closestPointIndex = findClosestPoints(flatbush, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius)[0];
+        if (closestPointIndex === undefined) {
+          continue;
+        }
+        const point = aSeries.data[closestPointIndex];
+        const scaledX = xScale(point.x);
+        const scaledY = yScale(point.y);
+        const distSq = (scaledX - svgPoint.x) ** 2 + (scaledY - svgPoint.y) ** 2;
+        if (closestPoint === undefined || distSq < closestPoint.distanceSq) {
+          closestPoint = {
+            dataIndex: closestPointIndex,
+            seriesId,
+            distanceSq: distSq
+          };
+        }
+      }
+      if (closestPoint === undefined) {
+        return 'no-point-found';
+      }
+      return {
+        seriesId: closestPoint.seriesId,
+        dataIndex: closestPoint.dataIndex
+      };
+    }
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+        instance.removeTooltipItem?.();
+      }
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+        instance.removeTooltipItem?.();
+      }
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+        instance.removeTooltipItem?.();
+      }
+    });
+    const gestureHandler = event => {
+      const closestPoint = getClosestPoint(event.detail.srcEvent);
+      if (closestPoint === 'outside-chart') {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+        instance.removeTooltipItem?.();
+        return;
+      }
+      if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
+        instance.removeTooltipItem?.();
+        instance.clearHighlight?.();
+        instance.removeTooltipItem?.();
+        return;
+      }
+      const {
+        seriesId,
+        dataIndex
+      } = closestPoint;
+      instance.setTooltipItem?.({
+        type: 'scatter',
+        seriesId,
+        dataIndex
+      });
+      instance.setLastUpdateSource?.('pointer');
+      instance.setHighlight?.({
+        type: 'scatter',
+        seriesId,
+        dataIndex
+      });
+    };
+    const tapHandler = instance.addInteractionListener('tap', event => {
+      const closestPoint = getClosestPoint(event.detail.srcEvent);
+      if (typeof closestPoint !== 'string' && onItemClick) {
+        const {
+          seriesId,
+          dataIndex
+        } = closestPoint;
+        onItemClick(event.detail.srcEvent, {
+          type: 'scatter',
+          seriesId,
+          dataIndex
+        });
+      }
+    });
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
+    return () => {
+      tapHandler.cleanup();
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
+    };
+  }, [chartsLayerContainerRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
+
+  // Instance implementation
+  const enableVoronoiCallback = useEventCallback(() => {
+    store.set('voronoi', {
+      isVoronoiEnabled: true
+    });
+  });
+  const disableVoronoiCallback = useEventCallback(() => {
+    store.set('voronoi', {
+      isVoronoiEnabled: false
+    });
+  });
+  return {
+    instance: {
+      enableVoronoi: enableVoronoiCallback,
+      disableVoronoi: disableVoronoiCallback
+    }
+  };
+};
+useChartClosestPoint.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
+  disableVoronoi: params.disableVoronoi ?? !params.series.some(item => item.type === 'scatter')
+});
+useChartClosestPoint.getInitialState = params => ({
+  voronoi: {
+    isVoronoiEnabled: !params.disableVoronoi
+  }
+});
+useChartClosestPoint.params = {
+  disableVoronoi: true,
+  voronoiMaxRadius: true,
+  onItemClick: true
+};

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.selectors.d.mts

@@ -0,0 +1,3 @@
+export declare const selectorChartsIsVoronoiEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & import("./useChartClosestPoint.types.mjs").UseChartVoronoiState & Partial<{}> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => boolean | undefined;

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.types.d.mts

@@ -0,0 +1,60 @@
+import type { ScatterItemIdentifier } from "../../../../models/seriesType/index.mjs";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.mjs";
+import { type ChartPluginSignature } from "../../models/index.mjs";
+import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.mjs";
+import { type UseChartHighlightSignature } from "../useChartHighlight/index.mjs";
+import { type UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
+import { type UseChartTooltipSignature } from "../useChartTooltip/index.mjs";
+export interface UseChartVoronoiInstance {
+  /**
+   * Enable the voronoi computation.
+   */
+  enableVoronoi: () => void;
+  /**
+   * Disable the voronoi computation.
+   */
+  disableVoronoi: () => void;
+}
+export interface UseChartVoronoiState {
+  voronoi: {
+    /**
+     * Set to `true` when `VoronoiHandler` is active.
+     * Used to prevent collision with mouseEnter events.
+     */
+    isVoronoiEnabled?: boolean;
+  };
+}
+export interface UseChartVoronoiParameters {
+  /**
+   * If true, the voronoi interaction are ignored.
+   */
+  disableVoronoi?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  voronoiMaxRadius?: 'item' | number | undefined;
+  /**
+   * Callback fired when clicking close to an item.
+   * This is only available for scatter plot for now.
+   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
+   */
+  onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
+}
+export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'voronoiMaxRadius' | 'onItemClick'> & {
+  /**
+   * If true, the voronoi plugin is disabled.
+   */
+  disableVoronoi: boolean;
+};
+export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+  instance: UseChartVoronoiInstance;
+  state: UseChartVoronoiState;
+  params: UseChartVoronoiParameters;
+  defaultizedParams: UseChartVoronoiDefaultizedParameters;
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature];
+}>;

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.types.d.ts

@@ -1,4 +1,5 @@
-import { type ScatterItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { ScatterItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
 import { type ChartPluginSignature } from "../../models/index.js";
 import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.js";
@@ -49,11 +50,11 @@ export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameter
    */
   disableVoronoi: boolean;
 };
-export type UseChartClosestPointSignature = ChartPluginSignature<{
+export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
   instance: UseChartVoronoiInstance;
   state: UseChartVoronoiState;
   params: UseChartVoronoiParameters;
   defaultizedParams: UseChartVoronoiDefaultizedParameters;
   dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
-  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature];
 }>;

package/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.d.mts

@@ -0,0 +1,7 @@
+import type { HighlightItemIdentifier, HighlightItemIdentifierWithType } from "../../../../models/seriesType/index.mjs";
+import type { ComposableChartSeriesType } from "../../../../models/seriesType/composition.mjs";
+import type { ChartSeriesType, HighlightScope } from "../../../../models/seriesType/config.mjs";
+/**
+ * The isFade logic for main charts (those that are identified by an id and a dataIndex)
+ */
+export declare function createIsFaded<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>>(highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemIdentifier<SeriesType> | null): <TestedSeriesType extends ComposableChartSeriesType<SeriesType>>(item: HighlightItemIdentifierWithType<TestedSeriesType> | null) => boolean;

package/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.d.ts

@@ -1,3 +1,7 @@
-import { type HighlightScope, type ChartSeriesType } from "../../../../models/seriesType/config.js";
-import { type HighlightItemData } from "./useChartHighlight.types.js";
-export declare function createIsFaded<SeriesType extends Exclude<ChartSeriesType, 'sankey'>>(highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemData | null): (item: HighlightItemData | null) => boolean;
+import type { HighlightItemIdentifier, HighlightItemIdentifierWithType } from "../../../../models/seriesType/index.js";
+import type { ComposableChartSeriesType } from "../../../../models/seriesType/composition.js";
+import type { ChartSeriesType, HighlightScope } from "../../../../models/seriesType/config.js";
+/**
+ * The isFade logic for main charts (those that are identified by an id and a dataIndex)
+ */
+export declare function createIsFaded<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>>(highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemIdentifier<SeriesType> | null): <TestedSeriesType extends ComposableChartSeriesType<SeriesType>>(item: HighlightItemIdentifierWithType<TestedSeriesType> | null) => boolean;

package/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.js

@@ -7,6 +7,10 @@ exports.createIsFaded = createIsFaded;
 function alwaysFalse() {
   return false;
 }
+
+/**
+ * The isFade logic for main charts (those that are identified by an id and a dataIndex)
+ */
 function createIsFaded(highlightScope, highlightedItem) {
   if (!highlightScope || !highlightedItem) {
     return alwaysFalse;

package/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.mjs

@@ -0,0 +1,24 @@
+function alwaysFalse() {
+  return false;
+}
+
+/**
+ * The isFade logic for main charts (those that are identified by an id and a dataIndex)
+ */
+export function createIsFaded(highlightScope, highlightedItem) {
+  if (!highlightScope || !highlightedItem) {
+    return alwaysFalse;
+  }
+  return function isFaded(item) {
+    if (!item) {
+      return false;
+    }
+    if (highlightScope.fade === 'series') {
+      return item.seriesId === highlightedItem.seriesId && item.dataIndex !== highlightedItem.dataIndex;
+    }
+    if (highlightScope.fade === 'global') {
+      return item.seriesId !== highlightedItem.seriesId || item.dataIndex !== highlightedItem.dataIndex;
+    }
+    return false;
+  };
+}

package/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.d.mts

@@ -0,0 +1,7 @@
+import type { HighlightItemIdentifierWithType } from "../../../../models/seriesType/index.mjs";
+import type { ComposableChartSeriesType } from "../../../../models/seriesType/composition.mjs";
+import type { ChartSeriesType, HighlightScope } from "../../../../models/seriesType/config.mjs";
+/**
+ * The isHighlighted logic for main charts (those that are identified by an id and a dataIndex)
+ */
+export declare function createIsHighlighted<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>>(highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemIdentifierWithType<SeriesType> | null): <TestedSeriesType extends ComposableChartSeriesType<SeriesType>>(item: HighlightItemIdentifierWithType<TestedSeriesType> | null) => boolean;

package/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.d.ts

@@ -1,3 +1,7 @@
-import { type ChartSeriesType, type HighlightScope } from "../../../../models/seriesType/config.js";
-import { type HighlightItemData } from "./useChartHighlight.types.js";
-export declare function createIsHighlighted<SeriesType extends Exclude<ChartSeriesType, 'sankey'>>(highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemData | null): (item: HighlightItemData | null) => boolean;
+import type { HighlightItemIdentifierWithType } from "../../../../models/seriesType/index.js";
+import type { ComposableChartSeriesType } from "../../../../models/seriesType/composition.js";
+import type { ChartSeriesType, HighlightScope } from "../../../../models/seriesType/config.js";
+/**
+ * The isHighlighted logic for main charts (those that are identified by an id and a dataIndex)
+ */
+export declare function createIsHighlighted<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>>(highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemIdentifierWithType<SeriesType> | null): <TestedSeriesType extends ComposableChartSeriesType<SeriesType>>(item: HighlightItemIdentifierWithType<TestedSeriesType> | null) => boolean;

package/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.js

@@ -7,6 +7,10 @@ exports.createIsHighlighted = createIsHighlighted;
 function alwaysFalse() {
   return false;
 }
+
+/**
+ * The isHighlighted logic for main charts (those that are identified by an id and a dataIndex)
+ */
 function createIsHighlighted(highlightScope, highlightedItem) {
   if (!highlightScope || !highlightedItem) {
     return alwaysFalse;

package/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.mjs

@@ -0,0 +1,24 @@
+function alwaysFalse() {
+  return false;
+}
+
+/**
+ * The isHighlighted logic for main charts (those that are identified by an id and a dataIndex)
+ */
+export function createIsHighlighted(highlightScope, highlightedItem) {
+  if (!highlightScope || !highlightedItem) {
+    return alwaysFalse;
+  }
+  return function isHighlighted(item) {
+    if (!item) {
+      return false;
+    }
+    if (highlightScope.highlight === 'series') {
+      return item.seriesId === highlightedItem.seriesId;
+    }
+    if (highlightScope.highlight === 'item') {
+      return item.dataIndex === highlightedItem.dataIndex && item.seriesId === highlightedItem.seriesId;
+    }
+    return false;
+  };
+}

package/internals/plugins/featurePlugins/useChartHighlight/highlightCreator.types.d.mts

@@ -0,0 +1,4 @@
+import type { ComposableChartSeriesType } from "../../../../models/seriesType/composition.mjs";
+import type { HighlightItemIdentifierWithType } from "../../../../models/index.mjs";
+import type { ChartSeriesType, HighlightScope } from "../../../../models/seriesType/config.mjs";
+export type HighlightCreator<SeriesType extends ChartSeriesType> = (highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemIdentifierWithType<SeriesType> | null) => <TestedSeriesType extends ComposableChartSeriesType<SeriesType>>(item: HighlightItemIdentifierWithType<TestedSeriesType> | null) => boolean;

package/internals/plugins/featurePlugins/useChartHighlight/highlightCreator.types.d.ts

@@ -0,0 +1,4 @@
+import type { ComposableChartSeriesType } from "../../../../models/seriesType/composition.js";
+import type { HighlightItemIdentifierWithType } from "../../../../models/index.js";
+import type { ChartSeriesType, HighlightScope } from "../../../../models/seriesType/config.js";
+export type HighlightCreator<SeriesType extends ChartSeriesType> = (highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemIdentifierWithType<SeriesType> | null) => <TestedSeriesType extends ComposableChartSeriesType<SeriesType>>(item: HighlightItemIdentifierWithType<TestedSeriesType> | null) => boolean;

package/internals/plugins/featurePlugins/useChartHighlight/highlightCreator.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});