@mui/x-charts 8.0.0-alpha.8 → 8.0.0-beta.0

package/esm/ScatterChart/seriesConfig/index.js

@@ -0,0 +1,15 @@
+import { getExtremumX, getExtremumY } from "./extremums.js";
+import seriesProcessor from "./seriesProcessor.js";
+import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
+import tooltipGetter from "./tooltip.js";
+import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+export const seriesConfig = {
+  seriesProcessor,
+  colorProcessor: getColor,
+  legendGetter,
+  tooltipGetter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues
+};

package/esm/ScatterChart/seriesConfig/legend.d.ts

@@ -0,0 +1,3 @@
+import { LegendGetter } from "../../internals/plugins/models/index.js";
+declare const legendGetter: LegendGetter<'scatter'>;
+export default legendGetter;

package/esm/ScatterChart/seriesConfig/legend.js

@@ -0,0 +1,22 @@
+import { getLabel } from "../../internals/getLabel.js";
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = getLabel(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      markType: series[seriesId].labelMarkType,
+      id: seriesId,
+      seriesId,
+      color: series[seriesId].color,
+      label: formattedLabel
+    });
+    return acc;
+  }, []);
+};
+export default legendGetter;

package/esm/ScatterChart/seriesConfig/seriesProcessor.d.ts

@@ -0,0 +1,3 @@
+import { SeriesProcessor } from "../../internals/plugins/models/index.js";
+declare const seriesProcessor: SeriesProcessor<'scatter'>;
+export default seriesProcessor;

package/esm/ScatterChart/seriesConfig/seriesProcessor.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const seriesProcessor = ({
+  series,
+  seriesOrder
+}, dataset) => {
+  const completeSeries = Object.fromEntries(Object.entries(series).map(([seriesId, seriesData]) => {
+    const datasetKeys = seriesData?.datasetKeys;
+    const missingKeys = ['x', 'y', 'id'].filter(key => typeof datasetKeys?.[key] !== 'string');
+    if (seriesData?.datasetKeys && missingKeys.length > 0) {
+      throw new Error([`MUI X: scatter series with id='${seriesId}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
+    }
+    const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
+      return {
+        x: d[datasetKeys.x] ?? null,
+        y: d[datasetKeys.y] ?? null,
+        z: datasetKeys.z && d[datasetKeys.z],
+        id: datasetKeys.id && d[datasetKeys.id]
+      };
+    }) ?? [];
+    return [seriesId, _extends({
+      labelMarkType: 'circle',
+      markerSize: 4
+    }, seriesData, {
+      data,
+      valueFormatter: seriesData.valueFormatter ?? (v => v && `(${v.x}, ${v.y})`)
+    })];
+  }));
+  return {
+    series: completeSeries,
+    seriesOrder
+  };
+};
+export default seriesProcessor;

package/esm/ScatterChart/seriesConfig/tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipGetter } from '../../internals/plugins/models';
+declare const tooltipGetter: TooltipGetter<'scatter'>;
+export default tooltipGetter;

package/esm/ScatterChart/seriesConfig/tooltip.js

@@ -0,0 +1,25 @@
+import { getLabel } from "../../internals/getLabel.js";
+const tooltipGetter = params => {
+  const {
+    series,
+    getColor,
+    identifier
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const label = getLabel(series.label, 'tooltip');
+  const value = series.data[identifier.dataIndex];
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  return {
+    identifier,
+    color: getColor(identifier.dataIndex),
+    label,
+    value,
+    formattedValue,
+    markType: series.labelMarkType
+  };
+};
+export default tooltipGetter;

package/esm/ScatterChart/useScatterChartProps.d.ts

@@ -0,0 +1,28 @@
+import { ChartsAxisProps } from "../ChartsAxis/index.js";
+import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { ChartsGridProps } from "../ChartsGrid/index.js";
+import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
+import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
+import { ChartContainerProps } from "../ChartContainer/index.js";
+import type { ScatterChartProps } from './ScatterChart';
+import type { ScatterPlotProps } from './ScatterPlot';
+import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
+/**
+ * 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 declare const useScatterChartProps: (props: ScatterChartProps) => {
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginsSignatures>;
+  chartsAxisProps: ChartsAxisProps;
+  gridProps: ChartsGridProps;
+  scatterPlotProps: ScatterPlotProps;
+  overlayProps: ChartsOverlayProps;
+  legendProps: ChartsLegendSlotExtension;
+  axisHighlightProps: ChartsAxisHighlightProps;
+  children: import("react").ReactNode;
+};

package/esm/ScatterChart/useScatterChartProps.js

@@ -0,0 +1,100 @@
+'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"];
+import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
+/**
+ * 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
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const chartContainerProps = _extends({}, other, {
+    series: series.map(s => _extends({
+      type: 'scatter'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    xAxis,
+    yAxis,
+    zAxis,
+    highlightedItem,
+    onHighlightChange,
+    disableVoronoi,
+    voronoiMaxRadius,
+    onItemClick: disableVoronoi ? undefined : onItemClick,
+    className,
+    plugins: SCATTER_CHART_PLUGINS
+  });
+  const chartsAxisProps = {
+    slots,
+    slotProps
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const scatterPlotProps = {
+    onItemClick: disableVoronoi ? onItemClick : undefined,
+    slots,
+    slotProps
+  };
+  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
+  };
+  return {
+    chartsWrapperProps,
+    chartContainerProps,
+    chartsAxisProps,
+    gridProps,
+    scatterPlotProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    children
+  };
+};

package/esm/SparkLineChart/SparkLineChart.d.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsColor } from "../colorPalettes/index.js";
+import { ChartContainerProps } from "../ChartContainer/index.js";
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from "../models/axis.js";
+import { LineSeriesType } from "../models/seriesType/index.js";
+import { AreaPlotSlots, AreaPlotSlotProps } from "../LineChart/AreaPlot.js";
+import { LinePlotSlots, LinePlotSlotProps } from "../LineChart/LinePlot.js";
+import { MarkPlotSlots, MarkPlotSlotProps } from "../LineChart/MarkPlot.js";
+import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "../LineChart/LineHighlightPlot.js";
+import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
+import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
+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 extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors'> {
+  /**
+   * The xAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>;
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>;
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType?: 'line' | 'bar';
+  /**
+   * 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?: LineSeriesType['area'];
+  /**
+   * @default 'linear'
+   */
+  curve?: LineSeriesType['curve'];
+  /**
+   * 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;
+}
+/**
+ * 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 & React.RefAttributes<SVGSVGElement>>;
+export { SparkLineChart };