@mui/x-charts 8.0.0-alpha.12 → 8.0.0-alpha.13

package/modern/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -1,25 +1,26 @@
 import { createSelector } from "../../utils/selectors.js";
+import { selectorChartBottomAxisSize, selectorChartLeftAxisSize, selectorChartRightAxisSize, selectorChartTopAxisSize } from "../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js";
 export const selectorChartDimensionsState = state => state.dimensions;
-export const selectorChartDrawingArea = createSelector(selectorChartDimensionsState, dimensionsState => ({
-  width: dimensionsState.width,
-  left: dimensionsState.left,
-  right: dimensionsState.right,
-  height: dimensionsState.height,
-  top: dimensionsState.top,
-  bottom: dimensionsState.bottom
+const selectorChartMargin = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.margin);
+const selectorChartWidth = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.width);
+const selectorChartHeight = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.height);
+const selectorChartTopMargin = createSelector(selectorChartMargin, margin => margin.top);
+const selectorChartRightMargin = createSelector(selectorChartMargin, margin => margin.right);
+const selectorChartBottomMargin = createSelector(selectorChartMargin, margin => margin.bottom);
+const selectorChartLeftMargin = createSelector(selectorChartMargin, margin => margin.left);
+export const selectorChartDrawingArea = createSelector(selectorChartWidth, selectorChartHeight, selectorChartTopMargin, selectorChartRightMargin, selectorChartBottomMargin, selectorChartLeftMargin, selectorChartTopAxisSize, selectorChartRightAxisSize, selectorChartBottomAxisSize, selectorChartLeftAxisSize, (width, height, marginTop, marginRight, marginBottom, marginLeft, axisSizeTop, axisSizeRight, axisSizeBottom, axisSizeLeft) => ({
+  width: width - marginLeft - marginRight - axisSizeLeft - axisSizeRight,
+  left: marginLeft + axisSizeLeft,
+  right: marginRight + axisSizeRight,
+  height: height - marginTop - marginBottom - axisSizeTop - axisSizeBottom,
+  top: marginTop + axisSizeTop,
+  bottom: marginBottom + axisSizeBottom
 }));
 export const selectorChartPropsSize = createSelector(selectorChartDimensionsState, dimensionsState => ({
   width: dimensionsState.propsWidth,
   height: dimensionsState.propsHeight
 }));
-export const selectorChartContainerSize = createSelector(selectorChartDimensionsState, dimensionsState => ({
-  width: dimensionsState.width + dimensionsState.left + dimensionsState.right,
-  height: dimensionsState.height + dimensionsState.top + dimensionsState.bottom
-}));
-
-/**
- * Get the id attribute of the chart.
- * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
- * @returns {string} The id attribute of the chart.
- */
-export const selectorChartHasIntrinsicSize = createSelector(selectorChartContainerSize, svgSize => svgSize.width > 0 && svgSize.height > 0);
+export const selectorChartContainerSize = createSelector(selectorChartWidth, selectorChartHeight, (width, height) => ({
+  width,
+  height
+}));

package/modern/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -1,4 +1,5 @@
 import { ChartPluginSignature } from "../../models/index.js";
+import type { UseChartCartesianAxisSignature } from '../../featurePlugins/useChartCartesianAxis';
 export interface ChartMargin {
   /**
    * The gap between the left border of the SVG and the drawing area.
@@ -29,9 +30,10 @@ export interface UseChartDimensionsParameters {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin?: Partial<ChartMargin>;
+  margin?: Partial<ChartMargin> | number;
 }
 export type UseChartDimensionsDefaultizedParameters = UseChartDimensionsParameters & {
   margin: ChartMargin;
@@ -39,21 +41,9 @@ export type UseChartDimensionsDefaultizedParameters = UseChartDimensionsParamete
 export interface UseChartDimensionsState {
   dimensions: {
     /**
-     * The gap between the left border of the SVG and the drawing area.
+     * The drawing area's margin.
      */
-    left: number;
-    /**
-     * The gap between the top border of the SVG and the drawing area.
-     */
-    top: number;
-    /**
-     * The gap between the bottom border of the SVG and the drawing area.
-     */
-    bottom: number;
-    /**
-     * The gap between the right border of the SVG and the drawing area.
-     */
-    right: number;
+    margin: ChartMargin;
     /**
      * The width of the drawing area.
      */
@@ -96,4 +86,5 @@ export type UseChartDimensionsSignature = ChartPluginSignature<{
   defaultizedParams: UseChartDimensionsDefaultizedParameters;
   state: UseChartDimensionsState;
   instance: UseChartDimensionsInstance;
+  optionalDependencies: [UseChartCartesianAxisSignature];
 }>;

package/modern/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -16,8 +16,8 @@ export declare const preprocessSeries: <TSeriesType extends ChartSeriesType>({
   seriesConfig,
   dataset
 }: {
-  series: AllSeriesType<TSeriesType>[];
+  series: Readonly<AllSeriesType<TSeriesType>[]>;
   colors: string[];
   seriesConfig: ChartSeriesConfig<TSeriesType>;
-  dataset?: DatasetType;
+  dataset?: Readonly<DatasetType>;
 }) => { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> | undefined };

package/modern/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -46,9 +46,8 @@ useChartSeries.params = {
 const EMPTY_ARRAY = [];
 useChartSeries.getDefaultizedParams = ({
   params
-}) => _extends({
-  series: EMPTY_ARRAY
-}, params, {
+}) => _extends({}, params, {
+  series: params.series?.length ? params.series : EMPTY_ARRAY,
   colors: params.colors ?? rainbowSurgePalette,
   theme: params.theme ?? 'light'
 });

package/modern/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.d.ts

@@ -7,13 +7,13 @@ export interface UseChartSeriesParameters<T extends ChartSeriesType = ChartSerie
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
-  dataset?: DatasetType;
+  dataset?: Readonly<DatasetType>;
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series?: AllSeriesType<T>[];
+  series?: Readonly<AllSeriesType<T>[]>;
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
@@ -27,7 +27,7 @@ export type UseChartSeriesDefaultizedParameters<T extends ChartSeriesType = Char
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series: AllSeriesType<T>[];
+  series: Readonly<AllSeriesType<T>[]>;
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts

@@ -25,5 +25,5 @@ export declare function computeAxisValue<T extends ChartSeriesType>(options: Com
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
   axis?: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
   axisDirection: 'x';
-}): ComputeResult<ChartsAxisProps>;
+}): ComputeResult<ChartsXAxisProps>;
 export {};

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -54,6 +54,7 @@ export function computeAxisValue({
       const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
+        offset: 0,
         categoryGapRatio,
         barGapRatio
       }, axis, {
@@ -72,7 +73,9 @@ export function computeAxisValue({
     if (isPointScaleConfig(axis)) {
       const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
-      completeAxis[axis.id] = _extends({}, axis, {
+      completeAxis[axis.id] = _extends({
+        offset: 0
+      }, axis, {
         data,
         scale: scalePoint(axis.data, zoomedRange),
         tickNumber: axis.data.length,
@@ -110,7 +113,9 @@ export function computeAxisValue({
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
     const [minDomain, maxDomain] = finalScale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
-    completeAxis[axis.id] = _extends({}, axis, {
+    completeAxis[axis.id] = _extends({
+      offset: 0
+    }, axis, {
       data,
       scaleType: scaleType,
       scale: finalScale.domain(domain),

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.d.ts

@@ -1,24 +1,22 @@
-import type { ChartsAxisProps } from '../../../../ChartsAxis';
-import { AxisId } from "../../../../models/axis.js";
+import { AxisId, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from "../../../../models/axis.js";
 import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
-import { AxisConfig, ScaleName } from "../../../../models/index.js";
+import { AxisConfig } from "../../../../models/index.js";
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
 import { DefaultizedZoomOptions, ExtremumFilter } from "./useChartCartesianAxis.types.js";
 import { GetZoomAxisFilters, ZoomAxisFilters, ZoomData } from "./zoom.types.js";
-type CreateAxisFilterMapperParams = {
+export declare function createAxisFilterMapper(params: {
   zoomMap: Map<AxisId, ZoomData>;
   zoomOptions: Record<AxisId, DefaultizedZoomOptions>;
   seriesConfig: ChartSeriesConfig<CartesianChartSeriesType>;
   formattedSeries: ProcessedSeries;
-  direction: 'x' | 'y';
-};
-export declare const createAxisFilterMapper: ({
-  zoomMap,
-  zoomOptions,
-  seriesConfig,
-  formattedSeries,
-  direction
-}: CreateAxisFilterMapperParams) => (axis: AxisConfig<ScaleName, any, ChartsAxisProps>, axisIndex: number) => ExtremumFilter | null;
-export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;
-export {};
+  direction: 'x';
+}): (axis: AxisConfig<ScaleName, any, ChartsXAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare function createAxisFilterMapper(params: {
+  zoomMap: Map<AxisId, ZoomData>;
+  zoomOptions: Record<AxisId, DefaultizedZoomOptions>;
+  seriesConfig: ChartSeriesConfig<CartesianChartSeriesType>;
+  formattedSeries: ProcessedSeries;
+  direction: 'y';
+}): (axis: AxisConfig<ScaleName, any, ChartsYAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.js

@@ -1,49 +1,51 @@
 import { isDefined } from "../../../isDefined.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
 import { getScale } from "../../../getScale.js";
-export const createAxisFilterMapper = ({
+export function createAxisFilterMapper({
   zoomMap,
   zoomOptions,
   seriesConfig,
   formattedSeries,
   direction
-}) => (axis, axisIndex) => {
-  const zoomOption = zoomOptions[axis.id];
-  if (!zoomOption || zoomOption.filterMode !== 'discard') {
-    return null;
-  }
-  const zoom = zoomMap?.get(axis.id);
-  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
-    // No zoom, or zoom with all data visible
-    return null;
-  }
-  let extremums = [];
-  const scaleType = axis.scaleType;
-  if (scaleType === 'point' || scaleType === 'band') {
-    extremums = [0, (axis.data?.length ?? 1) - 1];
-  } else {
-    extremums = getAxisExtremum(axis, direction, seriesConfig, axisIndex, formattedSeries);
-  }
-  let min;
-  let max;
-  const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
-  [min, max] = getScale(continuousScaleType, extremums, [0, 100]).nice().domain();
-  min = min instanceof Date ? min.getTime() : min;
-  max = max instanceof Date ? max.getTime() : max;
-  const minVal = min + zoom.start * (max - min) / 100;
-  const maxVal = min + zoom.end * (max - min) / 100;
-  return (value, dataIndex) => {
-    const val = value[direction] ?? axis.data?.[dataIndex];
-    if (val == null) {
-      // If the value does not exist because of missing data point, or out of range index, we just ignore.
-      return true;
+}) {
+  return (axis, axisIndex) => {
+    const zoomOption = zoomOptions[axis.id];
+    if (!zoomOption || zoomOption.filterMode !== 'discard') {
+      return null;
+    }
+    const zoom = zoomMap?.get(axis.id);
+    if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+      // No zoom, or zoom with all data visible
+      return null;
     }
-    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
-      return dataIndex >= minVal && dataIndex <= maxVal;
+    let extremums = [];
+    const scaleType = axis.scaleType;
+    if (scaleType === 'point' || scaleType === 'band') {
+      extremums = [0, (axis.data?.length ?? 1) - 1];
+    } else {
+      extremums = getAxisExtremum(axis, direction, seriesConfig, axisIndex, formattedSeries);
     }
-    return val >= minVal && val <= maxVal;
+    let min;
+    let max;
+    const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
+    [min, max] = getScale(continuousScaleType, extremums, [0, 100]).nice().domain();
+    min = min instanceof Date ? min.getTime() : min;
+    max = max instanceof Date ? max.getTime() : max;
+    const minVal = min + zoom.start * (max - min) / 100;
+    const maxVal = min + zoom.end * (max - min) / 100;
+    return (value, dataIndex) => {
+      const val = value[direction] ?? axis.data?.[dataIndex];
+      if (val == null) {
+        // If the value does not exist because of missing data point, or out of range index, we just ignore.
+        return true;
+      }
+      if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+        return dataIndex >= minVal && dataIndex <= maxVal;
+      }
+      return val >= minVal && val <= maxVal;
+    };
   };
-};
+}
 export const createGetAxisFilters = filters => ({
   currentAxisId,
   seriesXAxisId,

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.d.ts

@@ -1,39 +1,6 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { AxisConfig, ScaleName } from "../../../../models/index.js";
-import { ChartsAxisProps } from "../../../../models/axis.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../../../../models/axis.js";
 import { DatasetType } from "../../../../models/seriesType/config.js";
-export declare function defaultizeAxis(inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, 'id'>[] | undefined, dataset: DatasetType | undefined, axisName: 'x' | 'y'): {
-  label?: string | undefined;
-  reverse?: boolean | undefined;
-  fill?: string | undefined;
-  data?: any[] | undefined;
-  slots?: Partial<import("../../..").ChartsAxisSlots> | undefined;
-  slotProps?: Partial<import("../../..").ChartsAxisSlotProps> | undefined;
-  classes?: Partial<import("../../../..").ChartsAxisClasses> | undefined;
-  stroke?: string | undefined;
-  sx?: import("@mui/system").SxProps | undefined;
-  valueFormatter?: (<TScaleName extends keyof import("../../..").AxisScaleConfig>(value: any, context: import("../../..").AxisValueFormatterContext<TScaleName>) => string) | undefined;
-  dataKey?: string | undefined;
-  min?: (number | Date) | undefined;
-  max?: (number | Date) | undefined;
-  tickMaxStep?: number | undefined;
-  tickMinStep?: number | undefined;
-  tickNumber?: number | undefined;
-  disableLine?: boolean | undefined;
-  disableTicks?: boolean | undefined;
-  tickLabelStyle?: import("../../../getWordsByLines").ChartsTextStyle | undefined;
-  labelStyle?: import("../../../getWordsByLines").ChartsTextStyle | undefined;
-  tickLabelInterval?: "auto" | ((value: any, index: number) => boolean) | undefined;
-  tickSize?: number | undefined;
-  tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[] | undefined;
-  tickPlacement?: "start" | "end" | "middle" | "extremities" | undefined;
-  tickLabelPlacement?: "middle" | "tick" | undefined;
-  scaleType?: "time" | "linear" | "band" | "point" | "log" | "pow" | "sqrt" | "utc" | undefined;
-  colorMap?: import("../../../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
-  hideTooltip?: boolean | undefined;
-  domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
-    min: number;
-    max: number;
-  }) | undefined;
-  id: import("../../..").AxisId;
-}[];
+export declare function defaultizeAxis(inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined, axisName: 'x'): AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+export declare function defaultizeAxis(inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined, axisName: 'y'): AxisConfig<ScaleName, any, ChartsYAxisProps>[];

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -1,24 +1,52 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../../../constants/index.js";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH } from "../../../../constants/index.js";
 export function defaultizeAxis(inAxis, dataset, axisName) {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
-  return [...(inAxis?.map((axis, index) => _extends({
-    id: `defaultized-${axisName}-axis-${index}`
-  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
-    id
-  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+  const offsets = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    none: 0
+  };
+  const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
     id: DEFAULT_AXIS_KEY,
     scaleType: 'linear'
-  }] : [])].map(axisConfig => {
+  }];
+  const parsedAxes = inputAxes.map((axisConfig, index) => {
     const dataKey = axisConfig.dataKey;
+    const defaultPosition = axisName === 'x' ? 'bottom' : 'left';
+    const position = axisConfig.position ?? 'none';
+    const dimension = axisName === 'x' ? 'height' : 'width';
+    const height = axisName === 'x' ? DEFAULT_AXIS_SIZE_HEIGHT : 0;
+    const width = axisName === 'y' ? DEFAULT_AXIS_SIZE_WIDTH : 0;
+    const sharedConfig = _extends({
+      id: `defaultized-${axisName}-axis-${index}`
+    }, index === 0 ? {
+      position: defaultPosition
+    } : {}, {
+      height,
+      width,
+      offset: offsets[position]
+    }, axisConfig);
+
+    // Increment the offset for the next axis
+    if (position !== 'none') {
+      offsets[position] += axisConfig[dimension] ?? (dimension === 'height' ? height : width);
+    }
+
+    // If `dataKey` is NOT provided
     if (dataKey === undefined || axisConfig.data !== undefined) {
-      return axisConfig;
+      return sharedConfig;
     }
     if (dataset === undefined) {
       throw new Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
-    return _extends({}, axisConfig, {
+
+    // If `dataKey` is provided
+    return _extends({}, sharedConfig, {
       data: dataset.map(d => d[dataKey])
     });
   });
+  return parsedAxes;
 }

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts

@@ -1,6 +1,6 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
 export type * from './useChartCartesianAxis.types';
-export * from "./useChartCartesianAxis.selectors.js";
+export * from "./useChartCartesianAxisRendering.selectors.js";
 export { defaultizeAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/index.js

@@ -1,5 +1,5 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
-export * from "./useChartCartesianAxis.selectors.js";
+export * from "./useChartCartesianAxisRendering.selectors.js";
 export { defaultizeAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";