merge master

docs/data/charts/scatter/scatter.md

@@ -11,7 +11,8 @@ components: ScatterChart, ScatterChartPro, ScatterPlot, ChartsVoronoiHandler, Ch
 ## Basics
 
 Scatter chart series should contain a `data` property containing an array of objects.
-Those objects require `x`, `y`, and `id` properties.
+Those objects require the `x` and `y` properties.
+With an optional `id` property if more optimization is needed.
 
 {{"demo": "BasicScatter.js"}}
 
@@ -22,8 +23,8 @@ It accepts an array of objects such as `dataset={[{a: 1, b: 32, c: 873}, {a: 2,
 
 You can reuse this data when defining the series.
 The scatter series work a bit differently than in other charts.
-You need to specify the `datasetKeys` properties which is an object that requires `x`, `y`, and `id` keys.
-With an optional `z` key if needed.
+You need to specify the `datasetKeys` properties which is an object that requires the `x` and `y` keys.
+With an optional `id` and `z` keys if needed.
 
 {{"demo": "ScatterDataset.js"}}
 

docs/pages/x/api/charts/scatter-series-type.json

@@ -10,7 +10,7 @@
     "data": { "type": { "description": "ScatterValueType[]" } },
     "datasetKeys": {
       "type": {
-        "description": "{<br />  /**<br />   * The key used to retrieve data from the dataset for the X axis.<br />   */<br />  x: string<br />  /**<br />   * The key used to retrieve data from the dataset for the Y axis.<br />   */<br />  y: string<br />  /**<br />   * The key used to retrieve data from the dataset for the Z axis.<br />   */<br />  z?: string<br />  /**<br />   * The key used to retrieve data from the dataset for the id.<br />   */<br />  id: string<br />}"
+        "description": "{<br />  /**<br />   * The key used to retrieve data from the dataset for the X axis.<br />   */<br />  x: string<br />  /**<br />   * The key used to retrieve data from the dataset for the Y axis.<br />   */<br />  y: string<br />  /**<br />   * The key used to retrieve data from the dataset for the Z axis.<br />   */<br />  z?: string<br />  /**<br />   * The key used to retrieve data from the dataset for the id.<br />   */<br />  id?: string<br />}"
       }
     },
     "disableHover": { "type": { "description": "boolean" }, "default": "false" },

packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts

@@ -2,14 +2,14 @@ import { AxisId, DefaultizedZoomOptions } from '@mui/x-charts/internals';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '@mui/x-charts/models';
 import { defaultizeZoom } from './defaultizeZoom';
 
-export const creatZoomLookup = (
-  axes: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[],
-) =>
-  axes.reduce<Record<AxisId, DefaultizedZoomOptions>>((acc, v) => {
-    const { zoom, id: axisId } = v;
-    const defaultizedZoom = defaultizeZoom(zoom, axisId, 'x');
-    if (defaultizedZoom) {
-      acc[axisId] = defaultizedZoom;
-    }
-    return acc;
-  }, {});
+export const creatZoomLookup =
+  (axisDirection: 'x' | 'y') =>
+  (axes: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[]) =>
+    axes.reduce<Record<AxisId, DefaultizedZoomOptions>>((acc, v) => {
+      const { zoom, id: axisId } = v;
+      const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection);
+      if (defaultizedZoom) {
+        acc[axisId] = defaultizedZoom;
+      }
+      return acc;
+    }, {});

packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts

@@ -10,9 +10,9 @@ import { creatZoomLookup } from './creatZoomLookup';
 export const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature> = (state) =>
   state.zoom;
 
-const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup);
+const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup('x'));
 
-const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup);
+const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup('y'));
 
 export const selectorChartZoomOptionsLookup = createSelector(
   [selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup],

packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts

@@ -373,8 +373,8 @@ useChartProZoom.params = {
 
 useChartProZoom.getDefaultizedParams = ({ params }) => {
   const optionsLookup = {
-    ...creatZoomLookup(params.defaultizedXAxis),
-    ...creatZoomLookup(params.defaultizedYAxis),
+    ...creatZoomLookup('x')(params.defaultizedXAxis),
+    ...creatZoomLookup('y')(params.defaultizedYAxis),
   };
 
   return {

packages/x-charts/src/PieChart/PieArcLabelPlot.tsx

@@ -203,7 +203,7 @@ PieArcLabelPlot.propTypes = {
       color: PropTypes.string.isRequired,
       endAngle: PropTypes.number.isRequired,
       formattedValue: PropTypes.string.isRequired,
-      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
       index: PropTypes.number.isRequired,
       label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
       labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),

packages/x-charts/src/PieChart/PieArcPlot.tsx

@@ -165,7 +165,7 @@ PieArcPlot.propTypes = {
       color: PropTypes.string.isRequired,
       endAngle: PropTypes.number.isRequired,
       formattedValue: PropTypes.string.isRequired,
-      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
       index: PropTypes.number.isRequired,
       label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
       labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),

packages/x-charts/src/PieChart/dataTransform/transition.ts

@@ -4,7 +4,7 @@ import { ValueWithHighlight } from './useTransformData';
 export const getDefaultTransitionConfig = (
   skipAnimation?: boolean,
 ): UseTransitionProps<ValueWithHighlight> => ({
-  keys: (item) => item.id,
+  keys: (item) => item.id ?? item.dataIndex,
   from: skipAnimation
     ? undefined
     : ({
@@ -67,7 +67,7 @@ export const getDefaultTransitionConfig = (
 export const getDefaultLabelTransitionConfig = (
   skipAnimation?: boolean,
 ): UseTransitionProps<ValueWithHighlight> => ({
-  keys: (item) => item.id,
+  keys: (item) => item.id ?? item.dataIndex,
   from: skipAnimation
     ? undefined
     : ({

packages/x-charts/src/PieChart/dataTransform/useTransformData.ts

@@ -18,6 +18,7 @@ export interface AnimatedObject {
 }
 
 export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObject {
+  dataIndex: number;
   isFaded: boolean;
   isHighlighted: boolean;
 }
@@ -77,6 +78,7 @@ export function useTransformData(
         return {
           ...item,
           ...attributesOverride,
+          dataIndex: itemIndex,
           isFaded,
           isHighlighted,
           paddingAngle,

packages/x-charts/src/PieChart/legend.ts

@@ -5,7 +5,7 @@ import { LegendGetter } from '../internals/plugins/models';
 const legendGetter: LegendGetter<'pie'> = (params) => {
   const { seriesOrder, series } = params;
   return seriesOrder.reduce((acc, seriesId) => {
-    series[seriesId].data.forEach((item) => {
+    series[seriesId].data.forEach((item, dataIndex) => {
       const formattedLabel = getLabel(item.label, 'legend');
 
       if (formattedLabel === undefined) {
@@ -14,11 +14,11 @@ const legendGetter: LegendGetter<'pie'> = (params) => {
 
       acc.push({
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
-        id: item.id,
+        id: item.id ?? dataIndex,
         seriesId,
         color: item.color,
         label: formattedLabel,
-        itemId: item.id,
+        itemId: item.id ?? dataIndex,
       });
     });
     return acc;

packages/x-charts/src/ScatterChart/Scatter.tsx

@@ -113,7 +113,7 @@ function Scatter(props: ScatterProps) {
     <g>
       {cleanData.map((dataPoint) => (
         <circle
-          key={dataPoint.id}
+          key={dataPoint.id ?? dataPoint.dataIndex}
           cx={0}
           cy={0}
           r={(dataPoint.isHighlighted ? 1.2 : 1) * markerSize}

packages/x-charts/src/ScatterChart/formatter.ts

@@ -26,7 +26,7 @@ const formatter: SeriesProcessor<'scatter'> = ({ series, seriesOrder }, dataset)
               x: d[datasetKeys.x] ?? null,
               y: d[datasetKeys.y] ?? null,
               z: datasetKeys.z && d[datasetKeys.z],
-              id: d[datasetKeys.id],
+              id: datasetKeys.id && d[datasetKeys.id],
             } as ScatterValueType;
           }) ?? []);
 

packages/x-charts/src/colorPalettes/colorPalettes.ts

@@ -1,6 +1,29 @@
 export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
 export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
 
+export const rainbowSurgePaletteLight = [
+  '#4254FB',
+  '#FFB219',
+  '#54C690',
+  '#FF5463',
+  '#F287B3',
+  '#2EAFFF',
+  '#FD8731',
+];
+
+export const rainbowSurgePaletteDark = [
+  '#273DFF',
+  '#FAC04E',
+  '#32ae6a',
+  '#F3616E',
+  '#F286B3',
+  '#2EAFFF',
+  '#FD8731',
+];
+
+export const rainbowSurgePalette: ChartsColorPaletteCallback = (mode) =>
+  mode === 'dark' ? rainbowSurgePaletteDark : rainbowSurgePaletteLight;
+
 export const blueberryTwilightPaletteLight = [
   '#02B2AF',
   '#2E96FF',

packages/x-charts/src/internals/defaultizeColor.ts

@@ -1,23 +1,6 @@
 import { AllSeriesType } from '../models/seriesType';
 
-const DEFAULT_COLORS = [
-  '#1f77b4',
-  '#ff7f0e',
-  '#2ca02c',
-  '#d62728',
-  '#9467bd',
-  '#8c564b',
-  '#e377c2',
-  '#7f7f7f',
-  '#bcbd22',
-  '#17becf',
-];
-
-export function defaultizeColor(
-  series: AllSeriesType,
-  seriesIndex: number,
-  colors = DEFAULT_COLORS,
-) {
+export function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors: string[]) {
   if (series.type === 'pie') {
     return {
       ...series,

packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { ChartPlugin } from '../../models';
 import { UseChartSeriesSignature } from './useChartSeries.types';
-import { blueberryTwilightPalette } from '../../../../colorPalettes';
+import { rainbowSurgePalette } from '../../../../colorPalettes';
 import { preprocessSeries } from './processSeries';
 
 export const useChartSeries: ChartPlugin<UseChartSeriesSignature> = ({
@@ -51,7 +51,7 @@ const EMPTY_ARRAY: any[] = [];
 useChartSeries.getDefaultizedParams = ({ params }) => ({
   series: EMPTY_ARRAY,
   ...params,
-  colors: params.colors ?? blueberryTwilightPalette,
+  colors: params.colors ?? rainbowSurgePalette,
   theme: params.theme ?? 'light',
 });
 

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts

@@ -4,7 +4,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { ChartPlugin } from '../../models';
 import { ChartSeriesType } from '../../../../models/seriesType/config';
 import { UseChartCartesianAxisSignature } from './useChartCartesianAxis.types';
-import { blueberryTwilightPalette } from '../../../../colorPalettes';
+import { rainbowSurgePalette } from '../../../../colorPalettes';
 import { useSelector } from '../../../store/useSelector';
 import { selectorChartDrawingArea } from '../../corePlugins/useChartDimensions/useChartDimensions.selectors';
 import { selectorChartSeriesState } from '../../corePlugins/useChartSeries/useChartSeries.selectors';
@@ -65,7 +65,7 @@ useChartCartesianAxis.params = {
 useChartCartesianAxis.getDefaultizedParams = ({ params }) => {
   return {
     ...params,
-    colors: params.colors ?? blueberryTwilightPalette,
+    colors: params.colors ?? rainbowSurgePalette,
     theme: params.theme ?? 'light',
     defaultizedXAxis: defaultizeAxis(params.xAxis, params.dataset, 'x'),
     defaultizedYAxis: defaultizeAxis(params.yAxis, params.dataset, 'y'),

packages/x-charts/src/models/seriesType/pie.ts

@@ -9,7 +9,7 @@ export type PieValueType = {
   /**
    * A unique identifier of the pie slice.
    */
-  id: PieItemId;
+  id?: PieItemId;
   value: number;
   /**
    * The label to display on the tooltip, arc, or the legend. It can be a string or a function.

packages/x-charts/src/models/seriesType/scatter.ts

@@ -8,7 +8,7 @@ export type ScatterValueType = {
   /**
    * A unique identifier for the scatter point
    */
-  id: string | number;
+  id?: string | number;
 };
 
 export interface ScatterSeriesType
@@ -53,7 +53,7 @@ export interface ScatterSeriesType
     /**
      * The key used to retrieve data from the dataset for the id.
      */
-    id: string;
+    id?: string;
   };
 }
 

packages/x-data-grid-generator/src/hooks/useMockServer.ts

@@ -42,6 +42,7 @@ type UseMockServerResponse = {
   getChildrenCount?: (row: GridRowModel) => number;
   fetchRows: (url: string) => Promise<GridGetRowsResponse>;
   loadNewData: () => void;
+  isReady: boolean;
 };
 
 type DataSet = 'Commodity' | 'Employee' | 'Movies';
@@ -367,5 +368,6 @@ export const useMockServer = (
     loadNewData: () => {
       setIndex((oldIndex) => oldIndex + 1);
     },
+    isReady: Boolean(data?.rows?.length),
   };
 };

packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx

@@ -153,8 +153,8 @@ export const useDataGridPremiumComponent = (
   useGridRowGrouping(apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
-  useGridDataSource(apiRef, props);
   useGridAggregation(apiRef, props);
+  useGridDataSource(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridCellSelection(apiRef, props);