@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.11

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { createSelector } from "../../utils/selectors.js";
+import { computeAxisValue } from "./computeAxisValue.js";
+import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
+export const createZoomMap = zoom => {
+  const zoomItemMap = new Map();
+  zoom.forEach(zoomItem => {
+    zoomItemMap.set(zoomItem.axisId, zoomItem);
+  });
+  return zoomItemMap;
+};
+export const selectorChartCartesianAxisState = state => state.cartesianAxis;
+const selectorChartZoomState = state => state.zoom;
+export const selectorChartRawXAxis = createSelector(selectorChartCartesianAxisState, axis => axis?.x);
+export const selectorChartRawYAxis = createSelector(selectorChartCartesianAxisState, axis => axis?.y);
+
+/**
+ * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
+ */
+
+const selectorChartZoomMap = createSelector(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
+const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, () => undefined);
+const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'x'
+}));
+const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'y'
+}));
+const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+  if (xMapper === undefined || yMapper === undefined) {
+    // Early return if there is no zoom.
+    return undefined;
+  }
+  const xFilters = xAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
+    const filter = xMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  const yFilters = yAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
+    const filter = yMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
+    return undefined;
+  }
+  return createGetAxisFilters(_extends({}, xFilters, yFilters));
+});
+
+/**
+ * The only interesting selectors that merge axis data and zoom if provided.
+ */
+
+export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));
+export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));

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

@@ -0,0 +1,92 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartPluginSignature } from '../../models';
+import { ChartSeriesType, DatasetType } from '../../../../models/seriesType/config';
+import { AxisDefaultized, ScaleName, ChartsXAxisProps, ChartsYAxisProps, AxisId, AxisConfig, ChartsAxisData } from '../../../../models/axis';
+import { UseChartSeriesSignature } from '../../corePlugins/useChartSeries';
+import { ZoomData, ZoomOptions } from './zoom.types';
+import { UseChartInteractionSignature } from '../useChartInteraction';
+export type DefaultizedAxisConfig<AxisProps> = {
+    [axisId: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
+};
+export type CartesianContextState = {
+    /**
+     * Mapping from x-axis key to scaling configuration.
+     */
+    xAxis: DefaultizedAxisConfig<ChartsXAxisProps>;
+    /**
+     * Mapping from y-axis key to scaling configuration.
+     */
+    yAxis: DefaultizedAxisConfig<ChartsYAxisProps>;
+    /**
+     * The x-axes IDs sorted by order they got provided.
+     */
+    xAxisIds: AxisId[];
+    /**
+     * The y-axes IDs sorted by order they got provided.
+     */
+    yAxisIds: AxisId[];
+};
+export interface UseChartCartesianAxisParameters {
+    /**
+     * The configuration of the x-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[];
+    /**
+     * The configuration of the y-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
+    /**
+     * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+     */
+    dataset?: DatasetType;
+    /**
+     * The function called for onClick events.
+     * The second argument contains information about all line/bar elements at the current mouse position.
+     * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+     * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+     */
+    onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+    /**
+     * If `true`, the charts will not listen to the mouse move event.
+     * It might break interactive features, but will improve performance.
+     * @default false
+     */
+    disableAxisListener?: boolean;
+}
+export type UseChartCartesianAxisDefaultizedParameters = UseChartCartesianAxisParameters & {
+    defaultizedXAxis: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+    defaultizedYAxis: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+};
+export interface DefaultizedZoomOptions extends Required<ZoomOptions> {
+    axisId: AxisId;
+    axisDirection: 'x' | 'y';
+}
+export interface UseChartCartesianAxisState {
+    /**
+     * @ignore - state populated by the useChartProZoomPlugin
+     */
+    zoom?: {
+        isInteracting: boolean;
+        zoomData: ZoomData[];
+    };
+    cartesianAxis: {
+        x: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+        y: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+    };
+}
+export type ExtremumFilter = (value: {
+    x: number | Date | string | null;
+    y: number | Date | string | null;
+}, dataIndex: number) => boolean;
+export interface UseChartCartesianAxisInstance {
+}
+export type UseChartCartesianAxisSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+    params: UseChartCartesianAxisParameters;
+    defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
+    state: UseChartCartesianAxisState;
+    dependencies: [UseChartInteractionSignature, UseChartSeriesSignature<SeriesType>];
+}>;

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

@@ -0,0 +1,18 @@
+import { AxisId } from '../../../../models/axis';
+import type { ExtremumFilter } from './useChartCartesianAxis.types';
+export type ZoomData = {
+    axisId: AxisId;
+    start: number;
+    end: number;
+};
+export type ZoomFilterMode = 'keep' | 'discard';
+export interface ZoomOptions {
+    filterMode?: ZoomFilterMode;
+}
+export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
+export type GetZoomAxisFilters = (params: {
+    currentAxisId: AxisId | undefined;
+    seriesXAxisId?: AxisId;
+    seriesYAxisId?: AxisId;
+    isDefaultAxis: boolean;
+}) => ExtremumFilter;

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

@@ -0,0 +1,3 @@
+import { HighlightScope } from './highlightConfig.types';
+import { HighlightItemData } from './useChartHighlight.types';
+export declare const createIsFaded: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (item: HighlightItemData | null) => boolean;

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

@@ -0,0 +1,12 @@
+export const createIsFaded = (highlightScope, highlightedItem) => item => {
+  if (!highlightScope || !highlightedItem || !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.ts

@@ -0,0 +1,3 @@
+import { HighlightScope } from './highlightConfig.types';
+import { HighlightItemData } from './useChartHighlight.types';
+export declare const createIsHighlighted: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (item: HighlightItemData | null) => boolean;

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

@@ -0,0 +1,12 @@
+export const createIsHighlighted = (highlightScope, highlightedItem) => item => {
+  if (!highlightScope || !highlightedItem || !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/highlightConfig.types.d.ts

@@ -0,0 +1,20 @@
+export type HighlightOptions = 'none' | 'item' | 'series';
+export type FadeOptions = 'none' | 'series' | 'global';
+export type HighlightScope = {
+    /**
+     * The scope of highlighted elements.
+     * - 'none': no highlight.
+     * - 'item': only highlight the item.
+     * - 'series': highlight all elements of the same series.
+     * @default 'none'
+     */
+    highlight?: HighlightOptions;
+    /**
+     * The scope of faded elements.
+     * - 'none': no fading.
+     * - 'series': only fade element of the same series.
+     * - 'global': fade all elements that are not highlighted.
+     * @default 'none'
+     */
+    fade?: FadeOptions;
+};

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

@@ -0,0 +1,4 @@
+export { useChartHighlight } from './useChartHighlight';
+export * from './useChartHighlight.selectors';
+export type { UseChartHighlightSignature, HighlightItemData } from './useChartHighlight.types';
+export type * from './highlightConfig.types';

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

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

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

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '../../models';
+import { UseChartHighlightSignature } from './useChartHighlight.types';
+export declare const useChartHighlight: ChartPlugin<UseChartHighlightSignature>;

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

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+export const useChartHighlight = ({
+  store,
+  params,
+  models
+}) => {
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      highlight: _extends({}, prevState.highlight, {
+        item: models.highlightedItem.value
+      })
+    }));
+  }, [store, models.highlightedItem.value]);
+  const clearHighlight = useEventCallback(() => {
+    params.onHighlightChange?.(null);
+    models.highlightedItem.setControlledValue(null);
+  });
+  const setHighlight = useEventCallback(newItem => {
+    params.onHighlightChange?.(newItem);
+    models.highlightedItem.setControlledValue(newItem);
+  });
+  return {
+    instance: {
+      clearHighlight,
+      setHighlight
+    }
+  };
+};
+useChartHighlight.models = {
+  highlightedItem: {
+    getDefaultValue: () => null
+  }
+};
+useChartHighlight.getInitialState = params => ({
+  highlight: {
+    item: params.highlightedItem ?? null
+  }
+});
+useChartHighlight.params = {
+  highlightedItem: true,
+  onHighlightChange: true
+};