@mui/x-charts-premium 9.0.3 → 9.1.0

package/RadialLineChart/seriesConfig/getSeriesWithDefaultValues.mjs

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => _extends({}, seriesData, {
   id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-  color: seriesData.color ?? colors[seriesIndex % colors.length]
+  color: seriesData.color ?? colors[seriesIndex % colors.length],
+  curve: seriesData.curve ?? 'linear'
 });
 export default getSeriesWithDefaultValues;

package/RadialLineChart/seriesConfig/index.js

@@ -16,6 +16,7 @@ var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWit
 var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 var _extremums = require("./extremums");
 var _tooltip = _interopRequireDefault(require("./tooltip"));
+var _getItemAtPosition = _interopRequireDefault(require("./getItemAtPosition"));
 _internals.polarSeriesTypes.addType('radialLine');
 const radialLineSeriesConfig = exports.radialLineSeriesConfig = {
   colorProcessor: _getColor.default,
@@ -27,7 +28,7 @@ const radialLineSeriesConfig = exports.radialLineSeriesConfig = {
   rotationExtremumGetter: _extremums.rotationExtremumGetter,
   radiusExtremumGetter: _extremums.radiusExtremumGetter,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
-  // getItemAtPosition,
+  getItemAtPosition: _getItemAtPosition.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
   identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
   identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,

package/RadialLineChart/seriesConfig/index.mjs

@@ -9,6 +9,7 @@ import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
 import descriptionGetter from "./descriptionGetter.mjs";
 import { radiusExtremumGetter, rotationExtremumGetter } from "./extremums.mjs";
 import tooltipGetter from "./tooltip.mjs";
+import getItemAtPosition from "./getItemAtPosition.mjs";
 polarSeriesTypes.addType('radialLine');
 export const radialLineSeriesConfig = {
   colorProcessor,
@@ -20,7 +21,7 @@ export const radialLineSeriesConfig = {
   rotationExtremumGetter,
   radiusExtremumGetter,
   getSeriesWithDefaultValues,
-  // getItemAtPosition,
+  getItemAtPosition,
   keyboardFocusHandler,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,

package/RadialLineChart/seriesConfig/seriesProcessor.js

@@ -51,12 +51,16 @@ function seriesProcessor(params, dataset, isItemVisible) {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Radial line series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : (0, _formatErrorMessage2.default)(258, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
         if (!dataKey && !series[id].valueGetter) {
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
           throw new Error(`MUI X Charts: Radial line series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
         if (dataKey) {

package/RadialLineChart/seriesConfig/seriesProcessor.mjs

@@ -44,12 +44,16 @@ function seriesProcessor(params, dataset, isItemVisible) {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Radial line series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : _formatErrorMessage(258, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
         if (!dataKey && !series[id].valueGetter) {
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
           throw new Error(`MUI X Charts: Radial line series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
         if (dataKey) {

package/RadialLineChart/useRadialLineChartProps.d.mts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type ChartsClipPathProps } from "../ChartsClipPath/index.mjs";
 import { type ChartsRadialGridProps } from "../ChartsRadialGrid/index.mjs";
+import { type ChartsRadialAxisHighlightProps } from "../ChartsRadialAxisHighlight/index.mjs";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.mjs";
 import { type ChartsOverlayProps } from "../ChartsOverlay/index.mjs";
 import { type ChartsRadialDataProviderProps } from "../ChartsRadialDataProvider/index.mjs";
@@ -18,6 +19,7 @@ export declare const useRadialLineChartProps: (props: RadialLineChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsContainerProps: ChartsRadialDataProviderProps<"radialLine", RadialLineChartPluginSignatures>;
   gridProps: ChartsRadialGridProps | undefined;
+  axisHighlightProps: ChartsRadialAxisHighlightProps;
   clipPathProps: ChartsClipPathProps;
   clipPathGroupProps: {
     clipPath: string;

package/RadialLineChart/useRadialLineChartProps.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
 import { type ChartsRadialGridProps } from "../ChartsRadialGrid/index.js";
+import { type ChartsRadialAxisHighlightProps } from "../ChartsRadialAxisHighlight/index.js";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { type ChartsRadialDataProviderProps } from "../ChartsRadialDataProvider/index.js";
@@ -18,6 +19,7 @@ export declare const useRadialLineChartProps: (props: RadialLineChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsContainerProps: ChartsRadialDataProviderProps<"radialLine", RadialLineChartPluginSignatures>;
   gridProps: ChartsRadialGridProps | undefined;
+  axisHighlightProps: ChartsRadialAxisHighlightProps;
   clipPathProps: ChartsClipPathProps;
   clipPathGroupProps: {
     clipPath: string;

package/RadialLineChart/useRadialLineChartProps.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _RadialLineChart = require("./RadialLineChart.plugins");
 var _constants = require("../constants");
-const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar"];
+const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "disableLineItemHighlight", "hideLegend", "grid", "axisHighlight", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar"];
 /**
  * A helper function that extracts RadialLineChartProps from the input props
  * and returns an object with props for the children components of RadialLineChart.
@@ -33,6 +33,7 @@ const useRadialLineChartProps = props => {
       dataset,
       disableLineItemHighlight,
       grid,
+      axisHighlight,
       children,
       slots,
       slotProps,
@@ -46,6 +47,15 @@ const useRadialLineChartProps = props => {
     disableHighlight: !!disableLineItemHighlight,
     type: 'radialLine'
   }, s)), [disableLineItemHighlight, series]);
+  const defaultRotationAxis = React.useMemo(() => {
+    return [{
+      id: _constants.DEFAULT_ROTATION_AXIS_KEY,
+      scaleType: 'point',
+      data: Array.from({
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+      }, (_, index) => index)
+    }];
+  }, [series, dataset]);
   const chartsContainerProps = (0, _extends2.default)({}, other, {
     series: seriesWithDefault,
     width,
@@ -53,18 +63,15 @@ const useRadialLineChartProps = props => {
     margin,
     colors,
     dataset,
-    rotationAxis: rotationAxis ?? [{
-      id: _constants.DEFAULT_ROTATION_AXIS_KEY,
-      scaleType: 'point',
-      data: Array.from({
-        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-      }, (_, index) => index)
-    }],
+    rotationAxis: rotationAxis ?? defaultRotationAxis,
     radiusAxis,
     skipAnimation,
     plugins: _RadialLineChart.RADIAL_LINE_CHART_PLUGINS
   });
   const gridProps = grid;
+  const axisHighlightProps = (0, _extends2.default)({
+    rotation: 'line'
+  }, axisHighlight);
   const clipPathGroupProps = {
     clipPath: `url(#${clipPathId})`
   };
@@ -89,6 +96,7 @@ const useRadialLineChartProps = props => {
     chartsWrapperProps,
     chartsContainerProps,
     gridProps,
+    axisHighlightProps,
     clipPathProps,
     clipPathGroupProps,
     overlayProps,

package/RadialLineChart/useRadialLineChartProps.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar"];
+const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "disableLineItemHighlight", "hideLegend", "grid", "axisHighlight", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { RADIAL_LINE_CHART_PLUGINS } from "./RadialLineChart.plugins.mjs";
@@ -27,6 +27,7 @@ export const useRadialLineChartProps = props => {
       dataset,
       disableLineItemHighlight,
       grid,
+      axisHighlight,
       children,
       slots,
       slotProps,
@@ -40,6 +41,15 @@ export const useRadialLineChartProps = props => {
     disableHighlight: !!disableLineItemHighlight,
     type: 'radialLine'
   }, s)), [disableLineItemHighlight, series]);
+  const defaultRotationAxis = React.useMemo(() => {
+    return [{
+      id: DEFAULT_ROTATION_AXIS_KEY,
+      scaleType: 'point',
+      data: Array.from({
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+      }, (_, index) => index)
+    }];
+  }, [series, dataset]);
   const chartsContainerProps = _extends({}, other, {
     series: seriesWithDefault,
     width,
@@ -47,18 +57,15 @@ export const useRadialLineChartProps = props => {
     margin,
     colors,
     dataset,
-    rotationAxis: rotationAxis ?? [{
-      id: DEFAULT_ROTATION_AXIS_KEY,
-      scaleType: 'point',
-      data: Array.from({
-        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-      }, (_, index) => index)
-    }],
+    rotationAxis: rotationAxis ?? defaultRotationAxis,
     radiusAxis,
     skipAnimation,
     plugins: RADIAL_LINE_CHART_PLUGINS
   });
   const gridProps = grid;
+  const axisHighlightProps = _extends({
+    rotation: 'line'
+  }, axisHighlight);
   const clipPathGroupProps = {
     clipPath: `url(#${clipPathId})`
   };
@@ -83,6 +90,7 @@ export const useRadialLineChartProps = props => {
     chartsWrapperProps,
     chartsContainerProps,
     gridProps,
+    axisHighlightProps,
     clipPathProps,
     clipPathGroupProps,
     overlayProps,

package/RadialLineChart/useRadialLinePlotData.d.mts

@@ -1,4 +1,4 @@
-import { type CurveType, type SeriesId } from '@mui/x-charts/models';
+import { type CurveType, type MarkShape, type SeriesId } from '@mui/x-charts/models';
 export interface RadialLinePoint {
   x: number;
   y: number;
@@ -12,6 +12,8 @@ interface RadialLinePlotDataPoint {
   seriesId: SeriesId;
   color: string;
   hidden: boolean;
+  showMark: boolean;
+  shape: MarkShape;
   area?: boolean;
   curve?: CurveType;
 }

package/RadialLineChart/useRadialLinePlotData.d.ts

@@ -1,4 +1,4 @@
-import { type CurveType, type SeriesId } from '@mui/x-charts/models';
+import { type CurveType, type MarkShape, type SeriesId } from '@mui/x-charts/models';
 export interface RadialLinePoint {
   x: number;
   y: number;
@@ -12,6 +12,8 @@ interface RadialLinePlotDataPoint {
   seriesId: SeriesId;
   color: string;
   hidden: boolean;
+  showMark: boolean;
+  shape: MarkShape;
   area?: boolean;
   curve?: CurveType;
 }

package/RadialLineChart/useRadialLinePlotData.js

@@ -39,11 +39,13 @@ function useRadialLinePlotData() {
           hidden,
           area = false,
           curve,
+          shape,
           rotationAxisId = rotationAxisIds[0],
           radiusAxisId = radiusAxisIds[0]
         } = series[seriesId];
         const radiusAxis = radiusAxisMap[radiusAxisId];
         const rotationAxis = rotationAxisMap[rotationAxisId];
+        const rotationPosition = (0, _hooks.getValueToPositionMapper)(rotationAxis.scale);
         const points = [];
         for (let dataIndex = 0; dataIndex < data.length; dataIndex += 1) {
           if (data[dataIndex] == null) {
@@ -53,7 +55,7 @@ function useRadialLinePlotData() {
           const baseValue = stackedData[dataIndex]?.[0] ?? radiusAxis.scale.domain()[0];
           const radius = radiusAxis.scale(value);
           const baseRadius = radiusAxis.scale(baseValue);
-          const angle = rotationAxis.scale(rotationAxis.data[dataIndex]);
+          const angle = rotationPosition(rotationAxis.data[dataIndex]);
           const [x, y] = instance.polar2svg(radius, angle);
           points.push({
             x,
@@ -69,6 +71,8 @@ function useRadialLinePlotData() {
           points,
           seriesId,
           hidden,
+          showMark: Boolean(series[seriesId].showMark),
+          shape: shape ?? 'circle',
           area,
           curve
         });

package/RadialLineChart/useRadialLinePlotData.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRadiusAxes, useRotationAxes } from '@mui/x-charts/hooks';
+import { getValueToPositionMapper, useRadiusAxes, useRotationAxes } from '@mui/x-charts/hooks';
 import { useChartsContext } from '@mui/x-charts/internals';
 import { useRadialLineSeriesContext } from "../hooks/useRadialLineSeries.mjs";
 export function useRadialLinePlotData() {
@@ -32,11 +32,13 @@ export function useRadialLinePlotData() {
           hidden,
           area = false,
           curve,
+          shape,
           rotationAxisId = rotationAxisIds[0],
           radiusAxisId = radiusAxisIds[0]
         } = series[seriesId];
         const radiusAxis = radiusAxisMap[radiusAxisId];
         const rotationAxis = rotationAxisMap[rotationAxisId];
+        const rotationPosition = getValueToPositionMapper(rotationAxis.scale);
         const points = [];
         for (let dataIndex = 0; dataIndex < data.length; dataIndex += 1) {
           if (data[dataIndex] == null) {
@@ -46,7 +48,7 @@ export function useRadialLinePlotData() {
           const baseValue = stackedData[dataIndex]?.[0] ?? radiusAxis.scale.domain()[0];
           const radius = radiusAxis.scale(value);
           const baseRadius = radiusAxis.scale(baseValue);
-          const angle = rotationAxis.scale(rotationAxis.data[dataIndex]);
+          const angle = rotationPosition(rotationAxis.data[dataIndex]);
           const [x, y] = instance.polar2svg(radius, angle);
           points.push({
             x,
@@ -62,6 +64,8 @@ export function useRadialLinePlotData() {
           points,
           seriesId,
           hidden,
+          showMark: Boolean(series[seriesId].showMark),
+          shape: shape ?? 'circle',
           area,
           curve
         });

package/ScatterChartPremium/ScatterChartPremium.d.mts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type ScatterChartProps, type ScatterChartSlots, type ScatterChartSlotProps } from '@mui/x-charts/ScatterChart';
+import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsToolbarProSlotProps, type ChartsToolbarProSlots } from '@mui/x-charts-pro/ChartsToolbarPro';
+import { type ChartsSlotPropsPro, type ChartsSlotsPro } from '@mui/x-charts-pro/internals';
+import { type ChartsContainerPremiumProps } from "../ChartsContainerPremium/index.mjs";
+import { type ScatterChartPremiumPluginSignatures } from "./ScatterChartPremium.plugins.mjs";
+export interface ScatterChartPremiumSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface ScatterChartPremiumSlotProps extends Omit<ScatterChartSlotProps, 'toolbar' | 'tooltip'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+}
+export interface ScatterChartPremiumProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig' | 'renderer'>, Omit<ChartsContainerPremiumProps<'scatter', ScatterChartPremiumPluginSignatures>, 'series' | 'onItemClick' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
+  /**
+   * The renderer to use for drawing the scatter points.
+   * - `svg-single`: Renders each point as its own SVG element (full interactivity).
+   * - `svg-batch`: Renders points in a batched SVG path (faster, reduced interactivity).
+   * - `webgl`: Renders points into a WebGL canvas (fastest, no per-item SVG interactivity).
+   * @default 'svg-single'
+   */
+  renderer?: 'svg-single' | 'svg-batch' | 'webgl';
+  slots?: ScatterChartPremiumSlots;
+  slotProps?: ScatterChartPremiumSlotProps;
+}
+declare const ScatterChartPremium: React.ForwardRefExoticComponent<ScatterChartPremiumProps & React.RefAttributes<HTMLDivElement>>;
+export { ScatterChartPremium };

package/ScatterChartPremium/ScatterChartPremium.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type ScatterChartProps, type ScatterChartSlots, type ScatterChartSlotProps } from '@mui/x-charts/ScatterChart';
+import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsToolbarProSlotProps, type ChartsToolbarProSlots } from '@mui/x-charts-pro/ChartsToolbarPro';
+import { type ChartsSlotPropsPro, type ChartsSlotsPro } from '@mui/x-charts-pro/internals';
+import { type ChartsContainerPremiumProps } from "../ChartsContainerPremium/index.js";
+import { type ScatterChartPremiumPluginSignatures } from "./ScatterChartPremium.plugins.js";
+export interface ScatterChartPremiumSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface ScatterChartPremiumSlotProps extends Omit<ScatterChartSlotProps, 'toolbar' | 'tooltip'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+}
+export interface ScatterChartPremiumProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig' | 'renderer'>, Omit<ChartsContainerPremiumProps<'scatter', ScatterChartPremiumPluginSignatures>, 'series' | 'onItemClick' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
+  /**
+   * The renderer to use for drawing the scatter points.
+   * - `svg-single`: Renders each point as its own SVG element (full interactivity).
+   * - `svg-batch`: Renders points in a batched SVG path (faster, reduced interactivity).
+   * - `webgl`: Renders points into a WebGL canvas (fastest, no per-item SVG interactivity).
+   * @default 'svg-single'
+   */
+  renderer?: 'svg-single' | 'svg-batch' | 'webgl';
+  slots?: ScatterChartPremiumSlots;
+  slotProps?: ScatterChartPremiumSlotProps;
+}
+declare const ScatterChartPremium: React.ForwardRefExoticComponent<ScatterChartPremiumProps & React.RefAttributes<HTMLDivElement>>;
+export { ScatterChartPremium };