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

package/ScatterChart/useScatterChartProps.js

@@ -64,7 +64,6 @@ const useScatterChartProps = props => {
     disableVoronoi,
     voronoiMaxRadius,
     onItemClick: useVoronoiOnItemClick ? onItemClick : undefined,
-    className,
     plugins: _ScatterChart.SCATTER_CHART_PLUGINS,
     slots,
     slotProps,
@@ -101,7 +100,8 @@ const useScatterChartProps = props => {
     sx,
     legendPosition: props.slotProps?.legend?.position,
     legendDirection: props.slotProps?.legend?.direction,
-    hideLegend: props.hideLegend ?? false
+    hideLegend: props.hideLegend ?? false,
+    className
   };
   return {
     chartsWrapperProps,

package/ScatterChart/useScatterChartProps.mjs

@@ -0,0 +1,110 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
+import * as React from 'react';
+import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.mjs";
+/**
+ * A helper function that extracts ScatterChartProps from the input props
+ * and returns an object with props for the children components of ScatterChart.
+ *
+ * @param props The input props for ScatterChart
+ * @returns An object with props for the children components of ScatterChart
+ */
+export const useScatterChartProps = props => {
+  const {
+      xAxis,
+      yAxis,
+      zAxis,
+      series,
+      axisHighlight,
+      voronoiMaxRadius,
+      disableVoronoi,
+      width,
+      height,
+      margin,
+      colors,
+      sx,
+      grid,
+      onItemClick,
+      children,
+      slots,
+      slotProps,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className,
+      renderer,
+      brushConfig
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
+    type: 'scatter'
+  }, s)), [series]);
+  const useVoronoiOnItemClick = disableVoronoi !== true || renderer === 'svg-batch';
+  const chartContainerProps = _extends({}, other, {
+    series: seriesWithDefault,
+    width,
+    height,
+    margin,
+    colors,
+    xAxis,
+    yAxis,
+    zAxis,
+    highlightedItem,
+    onHighlightChange,
+    disableVoronoi,
+    voronoiMaxRadius,
+    onItemClick: useVoronoiOnItemClick ? onItemClick : undefined,
+    plugins: SCATTER_CHART_PLUGINS,
+    slots,
+    slotProps,
+    brushConfig
+  });
+  const chartsAxisProps = {
+    slots,
+    slotProps
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const scatterPlotProps = {
+    onItemClick: useVoronoiOnItemClick ? undefined : onItemClick,
+    slots,
+    slotProps,
+    renderer
+  };
+  const overlayProps = {
+    loading,
+    slots,
+    slotProps
+  };
+  const legendProps = {
+    slots,
+    slotProps
+  };
+  const axisHighlightProps = _extends({
+    y: 'none',
+    x: 'none'
+  }, axisHighlight);
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false,
+    className
+  };
+  return {
+    chartsWrapperProps,
+    chartContainerProps,
+    chartsAxisProps,
+    gridProps,
+    scatterPlotProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    children
+  };
+};

package/ScatterChart/useScatterPlotData.d.mts

@@ -0,0 +1,8 @@
+import { type SeriesId } from "../models/seriesType/common.mjs";
+import { type D3Scale } from "../models/axis.mjs";
+import { type DefaultizedScatterSeriesType, type ScatterValueType } from "../models/index.mjs";
+export declare function useScatterPlotData(series: DefaultizedScatterSeriesType, xScale: D3Scale, yScale: D3Scale, isPointInside: (x: number, y: number) => boolean): (ScatterValueType & {
+  dataIndex: number;
+  seriesId: SeriesId;
+  type: "scatter";
+})[];

package/ScatterChart/useScatterPlotData.mjs

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { getValueToPositionMapper } from "../hooks/index.mjs";
+export function useScatterPlotData(series, xScale, yScale, isPointInside) {
+  return React.useMemo(() => {
+    const getXPosition = getValueToPositionMapper(xScale);
+    const getYPosition = getValueToPositionMapper(yScale);
+    const temp = [];
+    for (let i = 0; i < series.data.length; i += 1) {
+      const scatterPoint = series.data[i];
+      const x = getXPosition(scatterPoint.x);
+      const y = getYPosition(scatterPoint.y);
+      const isInRange = isPointInside(x, y);
+      if (isInRange) {
+        temp.push({
+          x,
+          y,
+          id: scatterPoint.id,
+          seriesId: series.id,
+          type: 'scatter',
+          dataIndex: i
+        });
+      }
+    }
+    return temp;
+  }, [xScale, yScale, series.data, series.id, isPointInside]);
+}

package/SparkLineChart/SparkLineChart.d.mts

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { type ChartsColor } from "../colorPalettes/index.mjs";
+import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import type { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.mjs";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.mjs";
+import type { XAxis, YAxis } from "../models/axis.mjs";
+import type { LineSeriesType } from "../models/seriesType/index.mjs";
+import type { AreaPlotSlots, AreaPlotSlotProps } from "../LineChart/AreaPlot.mjs";
+import type { LinePlotSlots, LinePlotSlotProps } from "../LineChart/LinePlot.mjs";
+import type { MarkPlotSlots, MarkPlotSlotProps } from "../LineChart/MarkPlot.mjs";
+import type { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "../LineChart/LineHighlightPlot.mjs";
+import type { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.mjs";
+import type { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.mjs";
+export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
+export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
+export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'axesGap' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
+  /**
+   * The xAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  xAxis?: XAxis;
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis?: YAxis;
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType?: PlotType;
+  /**
+   * Data to plot.
+   */
+  data: number[];
+  /**
+   * Formatter used by the tooltip.
+   * @param {number} value The value to format.
+   * @returns {string} the formatted value.
+   * @default (value: number | null) => (value === null ? '' : value.toString())
+   */
+  valueFormatter?: (value: number | null) => string;
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip?: boolean;
+  /**
+   * Set to `true` to highlight the value.
+   * With line, it shows a point.
+   * With bar, it shows a highlight band.
+   * @default false
+   */
+  showHighlight?: boolean;
+  /**
+   * Set to `true` to fill spark line area.
+   * Has no effect if plotType='bar'.
+   * @default false
+   */
+  area?: PlotType extends 'line' ? LineSeriesType['area'] : never;
+  /**
+   * @default 'linear'
+   */
+  curve?: PlotType extends 'line' ? LineSeriesType['curve'] : never;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   *
+   * @default 0
+   */
+  baseline?: PlotType extends 'line' ? LineSeriesType['baseline'] : never;
+  /**
+   * 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 a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SparkLineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SparkLineChartSlotProps;
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color?: ChartsColor;
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   *
+   * @default false
+   */
+  disableClipping?: boolean;
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   *
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+}
+/**
+ * Demos:
+ *
+ * - [SparkLine](https://mui.com/x/react-charts/sparkline/)
+ *
+ * API:
+ *
+ * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+ */
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"line" | "bar"> & React.RefAttributes<HTMLDivElement>>;
+export { SparkLineChart };

package/SparkLineChart/SparkLineChart.d.ts

@@ -125,5 +125,5 @@ export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' |
  *
  * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
  */
-declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"line" | "bar"> & React.RefAttributes<SVGSVGElement>>;
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"line" | "bar"> & React.RefAttributes<HTMLDivElement>>;
 export { SparkLineChart };

package/SparkLineChart/SparkLineChart.js

@@ -270,24 +270,44 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['line']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['scatter']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['pie']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['radar']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })]).isRequired),
   /**
    * The controlled axis highlight.
@@ -301,10 +321,30 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The highlighted item.
    * Used when the highlight is controlled.
    */
-  highlightedItem: _propTypes.default.shape({
+  highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
+  }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired
-  }),
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar']).isRequired
+  })]),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -333,24 +373,44 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['line']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['scatter']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['pie']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['radar']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })]).isRequired),
   /**
    * Localized text for chart components.
@@ -378,13 +438,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   onAxisClick: _propTypes.default.func,
   /**
    * Callback fired when any hidden identifiers change.
-   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   * @param {VisibilityIdentifierWithType[]} hiddenItems The new list of hidden identifiers.
    */
   onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   * @param {HighlightItemIdentifierWithType<SeriesType> | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
   /**
@@ -402,6 +462,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -443,6 +511,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
@@ -451,10 +527,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     dataIndex: _propTypes.default.number.isRequired,
     seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['bar']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number.isRequired,
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['line']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
     seriesId: _propTypes.default.string.isRequired,