@mui/x-charts-pro 8.0.0-alpha.11 → 8.0.0-alpha.12

package/modern/Heatmap/HeatmapPlot.js

@@ -3,14 +3,14 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
-import { useHeatmapSeries } from "../hooks/useSeries.js";
+import { useHeatmapSeriesContext } from "../hooks/useHeatmapSeries.js";
 import { HeatmapItem } from "./HeatmapItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function HeatmapPlot(props) {
   const xScale = useXScale();
   const yScale = useYScale();
   const colorScale = useZColorScale();
-  const series = useHeatmapSeries();
+  const series = useHeatmapSeriesContext();
   const xDomain = xScale.domain();
   const yDomain = yScale.domain();
   if (!series || series.seriesOrder.length === 0) {

package/modern/Heatmap/HeatmapTooltip.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
+export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {}
+declare function HeatmapTooltip(props: HeatmapTooltipProps): React.JSX.Element;
+declare namespace HeatmapTooltip {
+  var propTypes: any;
+}
+export { HeatmapTooltip };

package/modern/Heatmap/HeatmapTooltip.js

@@ -9,7 +9,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
 import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals';
-import { useHeatmapSeries } from "../hooks/useSeries.js";
+import { useHeatmapSeriesContext } from "../hooks/useHeatmapSeries.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -34,7 +34,7 @@ function DefaultHeatmapTooltipContent(props) {
   } = props;
   const xAxis = useXAxis();
   const yAxis = useYAxis();
-  const heatmapSeries = useHeatmapSeries();
+  const heatmapSeries = useHeatmapSeriesContext();
   const tooltipData = useItemTooltip();
   if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
     return null;
@@ -52,10 +52,12 @@ function DefaultHeatmapTooltipContent(props) {
   } = tooltipData;
   const [xIndex, yIndex] = value;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
-    location: 'tooltip'
+    location: 'tooltip',
+    scale: xAxis.scale
   }) ?? xAxis.data[xIndex].toLocaleString();
   const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
-    location: 'tooltip'
+    location: 'tooltip',
+    scale: yAxis.scale
   }) ?? yAxis.data[yIndex].toLocaleString();
   const formattedValue = series[seriesId].valueFormatter(value, {
     dataIndex: identifier.dataIndex

package/modern/Heatmap/heatmapClasses.d.ts

@@ -0,0 +1,11 @@
+export interface HeatmapClasses {
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /** Styles applied to the cell element if highlighted. */
+  highlighted: string;
+  /** Styles applied to the cell element if faded. */
+  faded: string;
+}
+export type HeatmapClassKey = keyof HeatmapClasses;
+export declare function getHeatmapUtilityClass(slot: string): string;
+export declare const heatmapClasses: HeatmapClasses;

package/modern/Heatmap/index.d.ts

@@ -0,0 +1,4 @@
+export { Heatmap } from "./Heatmap.js";
+export { HeatmapPlot } from "./HeatmapPlot.js";
+export * from "./HeatmapTooltip.js";
+export * from "./heatmapClasses.js";

package/modern/Heatmap/seriesConfig/extremums.d.ts

@@ -0,0 +1,2 @@
+import { CartesianExtremumGetter } from '@mui/x-charts/internals';
+export declare const getBaseExtremum: CartesianExtremumGetter<'heatmap'>;

package/modern/Heatmap/seriesConfig/getColor.d.ts

@@ -0,0 +1,3 @@
+import { ColorProcessor } from '@mui/x-charts/internals';
+declare const getColor: ColorProcessor<'heatmap'>;
+export default getColor;

package/modern/Heatmap/seriesConfig/index.d.ts

@@ -0,0 +1,2 @@
+import { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
+export declare const seriesConfig: ChartSeriesTypeConfig<'heatmap'>;

package/modern/Heatmap/{plugin.js → seriesConfig/index.js}

@@ -1,9 +1,9 @@
 import { getBaseExtremum } from "./extremums.js";
-import formatter from "./formatter.js";
+import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
 import tooltipGetter from "./tooltip.js";
-export const plugin = {
-  seriesProcessor: formatter,
+export const seriesConfig = {
+  seriesProcessor,
   colorProcessor: getColor,
   legendGetter: () => [],
   tooltipGetter,

package/modern/Heatmap/seriesConfig/seriesProcessor.d.ts

@@ -0,0 +1,3 @@
+import { SeriesProcessor } from '@mui/x-charts/internals';
+declare const seriesProcessor: SeriesProcessor<'heatmap'>;
+export default seriesProcessor;

package/modern/Heatmap/{formatter.js → seriesConfig/seriesProcessor.js}

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-const formatter = params => {
+const seriesProcessor = params => {
   const {
     series,
     seriesOrder
@@ -18,4 +18,4 @@ const formatter = params => {
     seriesOrder
   };
 };
-export default formatter;
+export default seriesProcessor;

package/modern/Heatmap/seriesConfig/tooltip.d.ts

@@ -0,0 +1,3 @@
+import { TooltipGetter } from '@mui/x-charts/internals';
+declare const tooltipGetter: TooltipGetter<'heatmap'>;
+export default tooltipGetter;

package/modern/LineChartPro/LineChartPro.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { LineChartProps } from '@mui/x-charts/LineChart';
+import { ChartContainerProProps } from "../ChartContainerPro/index.js";
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line'>, 'series' | 'plugins' | 'seriesConfig'> {}
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
+ */
+declare const LineChartPro: React.ForwardRefExoticComponent<LineChartProProps & React.RefAttributes<SVGSVGElement>>;
+export { LineChartPro };

package/modern/LineChartPro/LineChartPro.plugins.d.ts

@@ -0,0 +1,4 @@
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
+export type LineChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature];
+export declare const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<LineChartProPluginsSignatures>;

package/modern/LineChartPro/index.d.ts

@@ -0,0 +1 @@
+export * from "./LineChartPro.js";

package/modern/ScatterChartPro/ScatterChartPro.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ScatterChartProps } from '@mui/x-charts/ScatterChart';
+import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
+import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick'> {}
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+ */
+declare const ScatterChartPro: React.ForwardRefExoticComponent<ScatterChartProProps & React.RefAttributes<SVGSVGElement>>;
+export { ScatterChartPro };

package/modern/ScatterChartPro/ScatterChartPro.js

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ScatterPlot } from '@mui/x-charts/ScatterChart';
-import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
@@ -44,7 +43,6 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
   const {
     chartsWrapperProps,
     chartContainerProps,
-    voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,
@@ -66,7 +64,7 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+        children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
         }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props?.slotProps?.tooltip, {

package/modern/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -0,0 +1,4 @@
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
+export type ScatterChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, UseChartProZoomSignature];
+export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginsSignatures>;

package/modern/ScatterChartPro/ScatterChartPro.plugins.js

@@ -1,3 +1,3 @@
-import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi } from '@mui/x-charts/internals';
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom];
+export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi, useChartProZoom];

package/modern/ScatterChartPro/index.d.ts

@@ -0,0 +1 @@
+export * from "./ScatterChartPro.js";

package/modern/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useHeatmapSeries } from "./useHeatmapSeries.js";
+export * from "./zoom/index.js";

package/modern/hooks/index.js

@@ -1,2 +1,2 @@
-export { useHeatmapSeries as unstable_useHeatmapSeries } from "./useSeries.js";
+export { useHeatmapSeries } from "./useHeatmapSeries.js";
 export * from "./zoom/index.js";

package/modern/hooks/useHeatmapSeries.d.ts

@@ -0,0 +1,33 @@
+import { ProcessedSeries, SeriesId, ChartSeriesDefaultized } from '@mui/x-charts/internals';
+export type UseHeatmapSeriesReturnValue = ChartSeriesDefaultized<'heatmap'>;
+export type UseHeatmapSeriesContextReturnValue = ProcessedSeries['heatmap'];
+/**
+ * Get access to the internal state of heatmap series.
+ *
+ * @param {SeriesId} seriesId The id of the series to get.
+ * @returns {UseHeatmapSeriesReturnValue} the heatmap series
+ */
+export declare function useHeatmapSeries(seriesId: SeriesId): UseHeatmapSeriesReturnValue | undefined;
+/**
+ * Get access to the internal state of heatmap series.
+ *
+ * When called without arguments, it returns all heatmap series.
+ *
+ * @returns {UseHeatmapSeriesReturnValue[]} the heatmap series
+ */
+export declare function useHeatmapSeries(): UseHeatmapSeriesReturnValue[];
+/**
+ * Get access to the internal state of heatmap series.
+ *
+ * @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
+ * @returns {UseHeatmapSeriesReturnValue[]} the heatmap series
+ */
+export declare function useHeatmapSeries(seriesIds: SeriesId[]): UseHeatmapSeriesReturnValue[];
+/**
+ * Get access to the internal state of heatmap series.
+ * The returned object contains:
+ * - series: a mapping from ids to series attributes.
+ * - seriesOrder: the array of series ids.
+ * @returns the heatmap series
+ */
+export declare function useHeatmapSeriesContext(): UseHeatmapSeriesContextReturnValue;

package/modern/hooks/useHeatmapSeries.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { createAllSeriesSelectorOfType, createSeriesSelectorsOfType } from '@mui/x-charts/internals';
+const useSelectorSeries = createSeriesSelectorsOfType('heatmap');
+const useSelectorSeriesContext = createAllSeriesSelectorOfType('heatmap');
+
+/**
+ * Get access to the internal state of heatmap series.
+ *
+ * @param {SeriesId} seriesId The id of the series to get.
+ * @returns {UseHeatmapSeriesReturnValue} the heatmap series
+ */
+
+/**
+ * Get access to the internal state of heatmap series.
+ *
+ * When called without arguments, it returns all heatmap series.
+ *
+ * @returns {UseHeatmapSeriesReturnValue[]} the heatmap series
+ */
+
+/**
+ * Get access to the internal state of heatmap series.
+ *
+ * @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
+ * @returns {UseHeatmapSeriesReturnValue[]} the heatmap series
+ */
+
+export function useHeatmapSeries(seriesIds) {
+  return useSelectorSeries(seriesIds);
+}
+
+/**
+ * Get access to the internal state of heatmap series.
+ * The returned object contains:
+ * - series: a mapping from ids to series attributes.
+ * - seriesOrder: the array of series ids.
+ * @returns the heatmap series
+ */
+export function useHeatmapSeriesContext() {
+  return useSelectorSeriesContext();
+}

package/modern/hooks/zoom/index.d.ts

@@ -0,0 +1 @@
+export * from "./useIsZoomInteracting.js";

package/modern/hooks/zoom/useIsZoomInteracting.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Get access to the zoom state.
+ *
+ * @returns {boolean} Inform the zoom is interacting.
+ */
+export declare function useIsZoomInteracting(): boolean;

package/modern/index.d.ts

@@ -0,0 +1,32 @@
+import "./typeOverloads/modules.js";
+export * from '@mui/x-charts/constants';
+export * from '@mui/x-charts/context';
+export * from '@mui/x-charts/hooks';
+export * from '@mui/x-charts/colorPalettes';
+export * from '@mui/x-charts/models';
+export * from '@mui/x-charts/ChartsClipPath';
+export * from '@mui/x-charts/ChartsReferenceLine';
+export * from '@mui/x-charts/ChartsAxis';
+export * from '@mui/x-charts/ChartsXAxis';
+export * from '@mui/x-charts/ChartsYAxis';
+export * from '@mui/x-charts/ChartsGrid';
+export * from '@mui/x-charts/ChartsText';
+export * from '@mui/x-charts/ChartsTooltip';
+export * from '@mui/x-charts/ChartsLegend';
+export * from '@mui/x-charts/ChartsAxisHighlight';
+export * from '@mui/x-charts/BarChart';
+export * from '@mui/x-charts/LineChart';
+export * from '@mui/x-charts/PieChart';
+export * from '@mui/x-charts/ScatterChart';
+export * from '@mui/x-charts/SparkLineChart';
+export * from '@mui/x-charts/Gauge';
+export * from '@mui/x-charts/ChartsSurface';
+export * from '@mui/x-charts/ChartDataProvider';
+export * from '@mui/x-charts/ChartsLabel';
+export * from "./hooks/index.js";
+export * from "./Heatmap/index.js";
+export * from "./ChartContainerPro/index.js";
+export * from "./ChartDataProviderPro/index.js";
+export * from "./ScatterChartPro/index.js";
+export * from "./BarChartPro/index.js";
+export * from "./LineChartPro/index.js";

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-alpha.11
+ * @mui/x-charts-pro v8.0.0-alpha.12
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -23,7 +23,6 @@ export * from '@mui/x-charts/ChartsText';
 export * from '@mui/x-charts/ChartsTooltip';
 export * from '@mui/x-charts/ChartsLegend';
 export * from '@mui/x-charts/ChartsAxisHighlight';
-export * from '@mui/x-charts/ChartsVoronoiHandler';
 export * from '@mui/x-charts/BarChart';
 export * from '@mui/x-charts/LineChart';
 export * from '@mui/x-charts/PieChart';
@@ -35,6 +34,7 @@ export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 
 // Pro components
+export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
 export * from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";

package/modern/internals/plugins/allPlugins.d.ts

@@ -0,0 +1,5 @@
+import { ChartSeriesType, ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartZAxisSignature, UseChartHighlightSignature } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "./useChartProZoom/index.js";
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature];
+export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];

package/modern/internals/plugins/useChartProZoom/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useChartProZoom.selectors.js";
+export * from "./useChartProZoom.js";
+export * from "./useChartProZoom.types.js";

package/modern/internals/plugins/useChartProZoom/useChartProZoom.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
+export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

package/modern/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -2,10 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSelector, getSVGPoint, selectorChartDrawingArea } from '@mui/x-charts/internals';
-import { creatZoomLookup } from "./creatZoomLookup.js";
+import { useSelector, getSVGPoint, selectorChartDrawingArea, createZoomLookup, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { getDiff, getHorizontalCenterRatio, getPinchScaleRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, preventDefault, zoomAtPoint } from "./useChartProZoom.utils.js";
-import { selectorChartZoomOptionsLookup } from "./useChartProZoom.selectors.js";
 
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
 function initializeZoomData(options) {
@@ -288,15 +286,13 @@ useChartProZoom.params = {
 useChartProZoom.getDefaultizedParams = ({
   params
 }) => {
-  const optionsLookup = _extends({}, creatZoomLookup('x')(params.defaultizedXAxis), creatZoomLookup('y')(params.defaultizedYAxis));
-  return _extends({}, params, {
-    optionsLookup
-  });
+  return _extends({}, params);
 };
 useChartProZoom.getInitialState = params => {
+  const optionsLookup = _extends({}, createZoomLookup('x')(params.defaultizedXAxis), createZoomLookup('y')(params.defaultizedYAxis));
   return {
     zoom: {
-      zoomData: params.initialZoom === undefined ? initializeZoomData(params.optionsLookup) : params.initialZoom,
+      zoomData: params.initialZoom === undefined ? initializeZoomData(optionsLookup) : params.initialZoom,
       isInteracting: false
     }
   };