@mui/x-charts 9.0.0-beta.0 → 9.0.0

package/ChartsTooltip/useAxesTooltip.mjs

@@ -116,11 +116,43 @@ export function useAxesTooltip(params) {
           dataIndex
         } = tooltipAxes[tooltipItemIndex];
         const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
-        const value = seriesToAdd.data[dataIndex] ?? null;
-        const formattedValue = seriesToAdd.valueFormatter(value, {
-          dataIndex
-        });
+        const rawValue = seriesToAdd.data[dataIndex] ?? null;
         const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
+        let value;
+        let formattedValue;
+        if (seriesType === 'ohlc' && Array.isArray(rawValue)) {
+          const [open, high, low, close] = rawValue;
+          const formatter = seriesToAdd.valueFormatter;
+          value = {
+            open,
+            high,
+            low,
+            close
+          };
+          formattedValue = {
+            open: formatter(open, {
+              dataIndex,
+              field: 'open'
+            }),
+            high: formatter(high, {
+              dataIndex,
+              field: 'high'
+            }),
+            low: formatter(low, {
+              dataIndex,
+              field: 'low'
+            }),
+            close: formatter(close, {
+              dataIndex,
+              field: 'close'
+            })
+          };
+        } else {
+          value = rawValue;
+          formattedValue = seriesToAdd.valueFormatter(rawValue, {
+            dataIndex
+          });
+        }
         tooltipAxes[tooltipItemIndex].seriesItems.push({
           seriesId,
           color,

package/ChartsTooltip/useItemTooltip.d.mts

@@ -8,7 +8,7 @@ export declare function useInternalItemTooltip<SeriesType extends ChartSeriesTyp
  * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
  * @returns The tooltip item config
  */
-export declare const useItemTooltip: <SeriesType extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<SeriesType> | null;
+export declare const useItemTooltip: <SeriesType extends Exclude<ChartSeriesType, "radar"> = Exclude<ChartSeriesType, "radar" | "ohlc">>() => UseItemTooltipReturnValue<SeriesType> | null;
 /**
  * Contains an object per value with their content and the label of the associated metric.
  * @returns The tooltip item configs

package/ChartsTooltip/useItemTooltip.d.ts

@@ -8,7 +8,7 @@ export declare function useInternalItemTooltip<SeriesType extends ChartSeriesTyp
  * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
  * @returns The tooltip item config
  */
-export declare const useItemTooltip: <SeriesType extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<SeriesType> | null;
+export declare const useItemTooltip: <SeriesType extends Exclude<ChartSeriesType, "radar"> = Exclude<ChartSeriesType, "radar" | "ohlc">>() => UseItemTooltipReturnValue<SeriesType> | null;
 /**
  * Contains an object per value with their content and the label of the associated metric.
  * @returns The tooltip item configs

package/ChartsXAxis/useAxisTicksProps.d.mts

@@ -3560,18 +3560,18 @@ export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
     onFocusCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlur?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
-    onChange?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
     onBeforeInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInput?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onReset?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onReset?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoad?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoadCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onError?: import("react").ReactEventHandler<SVGTextElement> | undefined;

package/ChartsXAxis/useAxisTicksProps.d.ts

@@ -3560,18 +3560,18 @@ export declare function useAxisTicksProps(inProps: ChartsXAxisProps): {
     onFocusCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlur?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
-    onChange?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
     onBeforeInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInput?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onReset?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onReset?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoad?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoadCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onError?: import("react").ReactEventHandler<SVGTextElement> | undefined;

package/ChartsYAxis/useAxisTicksProps.d.mts

@@ -3479,18 +3479,18 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     onFocusCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlur?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
-    onChange?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
     onBeforeInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInput?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onReset?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onReset?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoad?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoadCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onError?: import("react").ReactEventHandler<SVGTextElement> | undefined;

package/ChartsYAxis/useAxisTicksProps.d.ts

@@ -3479,18 +3479,18 @@ export declare function useAxisTicksProps(inProps: ChartsYAxisProps): {
     onFocusCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlur?: import("react").FocusEventHandler<SVGTextElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<SVGTextElement> | undefined;
-    onChange?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<SVGTextElement, Element> | undefined;
     onBeforeInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInput?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onReset?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<SVGTextElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<SVGTextElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInput?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<SVGTextElement> | undefined;
+    onReset?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<SVGTextElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<SVGTextElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoad?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onLoadCapture?: import("react").ReactEventHandler<SVGTextElement> | undefined;
     onError?: import("react").ReactEventHandler<SVGTextElement> | undefined;

package/LineChart/LineHighlightPlot.js

@@ -80,9 +80,10 @@ function LineHighlightPlot(props) {
           visibleStackedData,
           data,
           disableHighlight,
-          shape = 'circle'
+          shape = 'circle',
+          hidden
         } = series[seriesId];
-        if (disableHighlight || data[highlightedIndex] == null) {
+        if (hidden || disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         if (highlightedAxisId !== xAxisId) {

package/LineChart/LineHighlightPlot.mjs

@@ -73,9 +73,10 @@ function LineHighlightPlot(props) {
           visibleStackedData,
           data,
           disableHighlight,
-          shape = 'circle'
+          shape = 'circle',
+          hidden
         } = series[seriesId];
-        if (disableHighlight || data[highlightedIndex] == null) {
+        if (hidden || disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
         if (highlightedAxisId !== xAxisId) {

package/LineChart/useLinePlotData.js

@@ -96,7 +96,7 @@ function useLinePlotData(xAxes, yAxes) {
         const hidden = series[seriesId].hidden;
         const linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => {
           if (hidden) {
-            return yScale(yScale.domain()[0]);
+            return yScale(d.y[0]);
           }
           return yScale(d.y[1]);
         });

package/LineChart/useLinePlotData.mjs

@@ -89,7 +89,7 @@ export function useLinePlotData(xAxes, yAxes) {
         const hidden = series[seriesId].hidden;
         const linePath = d3Line().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => {
           if (hidden) {
-            return yScale(yScale.domain()[0]);
+            return yScale(d.y[0]);
           }
           return yScale(d.y[1]);
         });

package/LineChart/useMarkPlotData.js

@@ -67,9 +67,9 @@ function useMarkPlotData(xAxes, yAxes) {
               continue;
             }
 
-            // The line fade animation move all the values to the min.
+            // The line fade animation move all the values to the series baseline.
             // So we need to do the same with mark in order for it to look nice.
-            const y = yScale(hidden ? yScale.domain()[0] : value);
+            const y = yScale(hidden ? visibleStackedData[index][0] : value);
             const xPos = xScale(x);
             if (!instance.isPointInside(xPos, y)) {
               continue;

package/LineChart/useMarkPlotData.mjs

@@ -59,9 +59,9 @@ export function useMarkPlotData(xAxes, yAxes) {
               continue;
             }
 
-            // The line fade animation move all the values to the min.
+            // The line fade animation move all the values to the series baseline.
             // So we need to do the same with mark in order for it to look nice.
-            const y = yScale(hidden ? yScale.domain()[0] : value);
+            const y = yScale(hidden ? visibleStackedData[index][0] : value);
             const xPos = xScale(x);
             if (!instance.isPointInside(xPos, y)) {
               continue;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.0-beta.0
+ * @mui/x-charts v9.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.0-beta.0
+ * @mui/x-charts v9.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/configInit.mjs

@@ -2,7 +2,7 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 let cartesianInstance;
 let polarInstance;
 class CartesianSeriesTypes {
-  types = (() => new Set())();
+  types = new Set();
   constructor() {
     if (cartesianInstance) {
       throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: Only one CartesianSeriesTypes instance can be created. ' + 'This is a singleton class used internally for series type registration. ' + 'Use the existing instance instead of creating a new one.' : _formatErrorMessage(24));
@@ -17,7 +17,7 @@ class CartesianSeriesTypes {
   }
 }
 class PolarSeriesTypes {
-  types = (() => new Set())();
+  types = new Set();
   constructor() {
     if (polarInstance) {
       throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: Only one PolarSeriesTypes instance can be created. ' + 'This is a singleton class used internally for series type registration. ' + 'Use the existing instance instead of creating a new one.' : _formatErrorMessage(25));

package/internals/plugins/corePlugins/useChartSeries/processSeries.d.mts

@@ -14,10 +14,12 @@ import type { IsItemVisibleFunction } from "../../featurePlugins/useChartVisibil
 export declare const defaultizeSeries: <SeriesType extends ChartSeriesType>({
   series,
   colors,
+  theme,
   seriesConfig
 }: {
   series: Readonly<AllSeriesType<SeriesType>[]>;
   colors: readonly string[];
+  theme: "light" | "dark";
   seriesConfig: ChartSeriesConfig<SeriesType>;
 }) => {
   defaultizedSeries: DefaultizedSeriesGroups<SeriesType>;

package/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -14,10 +14,12 @@ import type { IsItemVisibleFunction } from "../../featurePlugins/useChartVisibil
 export declare const defaultizeSeries: <SeriesType extends ChartSeriesType>({
   series,
   colors,
+  theme,
   seriesConfig
 }: {
   series: Readonly<AllSeriesType<SeriesType>[]>;
   colors: readonly string[];
+  theme: "light" | "dark";
   seriesConfig: ChartSeriesConfig<SeriesType>;
 }) => {
   defaultizedSeries: DefaultizedSeriesGroups<SeriesType>;

package/internals/plugins/corePlugins/useChartSeries/processSeries.js

@@ -16,13 +16,14 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 const defaultizeSeries = ({
   series,
   colors,
+  theme,
   seriesConfig
 }) => {
   // Group series by type
   const seriesGroups = {};
   const idToType = new Map();
   series.forEach((seriesData, seriesIndex) => {
-    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors);
+    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors, theme);
     const id = seriesWithDefaultValues.id;
     if (seriesGroups[seriesData.type] === undefined) {
       seriesGroups[seriesData.type] = {

package/internals/plugins/corePlugins/useChartSeries/processSeries.mjs

@@ -9,13 +9,14 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 export const defaultizeSeries = ({
   series,
   colors,
+  theme,
   seriesConfig
 }) => {
   // Group series by type
   const seriesGroups = {};
   const idToType = new Map();
   series.forEach((seriesData, seriesIndex) => {
-    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors);
+    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors, theme);
     const id = seriesWithDefaultValues.id;
     if (seriesGroups[seriesData.type] === undefined) {
       seriesGroups[seriesData.type] = {

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -47,6 +47,7 @@ const useChartSeries = ({
     } = (0, _processSeries.defaultizeSeries)({
       series,
       colors: typeof colors === 'function' ? colors(theme) : colors,
+      theme,
       seriesConfig: store.state.seriesConfig.config
     });
     store.set('series', (0, _extends2.default)({}, store.state.series, {
@@ -90,6 +91,7 @@ useChartSeries.getInitialState = ({
   } = (0, _processSeries.defaultizeSeries)({
     series,
     colors: typeof colors === 'function' ? colors(theme) : colors,
+    theme,
     seriesConfig
   });
   return {

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.mjs

@@ -40,6 +40,7 @@ export const useChartSeries = ({
     } = defaultizeSeries({
       series,
       colors: typeof colors === 'function' ? colors(theme) : colors,
+      theme,
       seriesConfig: store.state.seriesConfig.config
     });
     store.set('series', _extends({}, store.state.series, {
@@ -82,6 +83,7 @@ useChartSeries.getInitialState = ({
   } = defaultizeSeries({
     series,
     colors: typeof colors === 'function' ? colors(theme) : colors,
+    theme,
     seriesConfig
   });
   return {

package/internals/plugins/corePlugins/useChartSeriesConfig/types/getSeriesWithDefaultValues.types.d.mts

@@ -1,3 +1,3 @@
 import type { ChartSeries, ChartSeriesType } from "../../../../../models/seriesType/config.mjs";
 import type { AllSeriesType } from "../../../../../models/seriesType/index.mjs";
-export type GetSeriesWithDefaultValues<SeriesType extends ChartSeriesType> = (series: AllSeriesType<SeriesType>, seriesIndex: number, colors: readonly string[]) => ChartSeries<SeriesType>;
+export type GetSeriesWithDefaultValues<SeriesType extends ChartSeriesType> = (series: AllSeriesType<SeriesType>, seriesIndex: number, colors: readonly string[], theme: 'light' | 'dark') => ChartSeries<SeriesType>;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/getSeriesWithDefaultValues.types.d.ts

@@ -1,3 +1,3 @@
 import type { ChartSeries, ChartSeriesType } from "../../../../../models/seriesType/config.js";
 import type { AllSeriesType } from "../../../../../models/seriesType/index.js";
-export type GetSeriesWithDefaultValues<SeriesType extends ChartSeriesType> = (series: AllSeriesType<SeriesType>, seriesIndex: number, colors: readonly string[]) => ChartSeries<SeriesType>;
+export type GetSeriesWithDefaultValues<SeriesType extends ChartSeriesType> = (series: AllSeriesType<SeriesType>, seriesIndex: number, colors: readonly string[], theme: 'light' | 'dark') => ChartSeries<SeriesType>;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/tooltipGetter.types.d.mts

@@ -12,11 +12,21 @@ export interface ItemTooltipValue<SeriesType extends ChartSeriesType> {
   /**
    * The value.
    */
-  value: SeriesType extends 'heatmap' ? number | null : ChartsSeriesConfig[SeriesType]['valueType'];
+  value: SeriesType extends 'heatmap' ? number | null : SeriesType extends 'ohlc' ? {
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+  } | null : ChartsSeriesConfig[SeriesType]['valueType'];
   /**
    * The value formatted with context set to "tooltip".
    */
-  formattedValue: string | null;
+  formattedValue: SeriesType extends 'ohlc' ? {
+    open: string | null;
+    high: string | null;
+    low: string | null;
+    close: string | null;
+  } : string | null;
   /**
    * The series mark type.
    */

package/internals/plugins/corePlugins/useChartSeriesConfig/types/tooltipGetter.types.d.ts

@@ -12,11 +12,21 @@ export interface ItemTooltipValue<SeriesType extends ChartSeriesType> {
   /**
    * The value.
    */
-  value: SeriesType extends 'heatmap' ? number | null : ChartsSeriesConfig[SeriesType]['valueType'];
+  value: SeriesType extends 'heatmap' ? number | null : SeriesType extends 'ohlc' ? {
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+  } | null : ChartsSeriesConfig[SeriesType]['valueType'];
   /**
    * The value formatted with context set to "tooltip".
    */
-  formattedValue: string | null;
+  formattedValue: SeriesType extends 'ohlc' ? {
+    open: string | null;
+    high: string | null;
+    low: string | null;
+    close: string | null;
+  } : string | null;
   /**
    * The series mark type.
    */

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.mts

@@ -2,7 +2,7 @@ import type { ChartPluginSignature } from "../../models/index.mjs";
 import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.mjs";
 import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis, AxisItemIdentifier } from "../../../../models/axis.mjs";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.mjs";
-import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.mjs";
+import type { ZoomData, ZoomOptions, ZoomSliderPreviewOptions, ZoomSliderShowTooltip } from "./zoom.types.mjs";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.mjs";
 import type { UseChartBrushSignature } from "../useChartBrush/index.mjs";
@@ -79,8 +79,9 @@ export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = Sca
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
-export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip'> {
+export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip' | 'preview'> {
   showTooltip: ZoomSliderShowTooltip;
+  preview: boolean | ZoomSliderPreviewOptions;
 }
 export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
   axisId: AxisId;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -2,7 +2,7 @@ import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
 import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis, AxisItemIdentifier } from "../../../../models/axis.js";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
-import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
+import type { ZoomData, ZoomOptions, ZoomSliderPreviewOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
 import type { UseChartBrushSignature } from "../useChartBrush/index.js";
@@ -79,8 +79,9 @@ export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = Sca
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
-export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip'> {
+export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip' | 'preview'> {
   showTooltip: ZoomSliderShowTooltip;
+  preview: boolean | ZoomSliderPreviewOptions;
 }
 export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
   axisId: AxisId;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.js

@@ -32,14 +32,16 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedXScales, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, normalizedXScales, axisId) {
+const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartXAxisWithDomains, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
   const scales = {};
   xAxes?.forEach(eachAxis => {
     const axis = eachAxis;
-    const scale = normalizedXScales[axis.id].copy();
+    const scale = (0, _getAxisScale.getNormalizedAxisScale)(axis, unfilteredDomains[axis.id].domain);
     const range = (0, _getAxisScale.getRange)(drawingArea, 'x', axis);
     const zoomedRange = (0, _zoom.zoomScaleRange)(range, [options.minStart, options.maxEnd]);
     scale.range(zoomedRange);
@@ -76,14 +78,16 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
   }
   return computedAxes.axis;
 });
-const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedYScales, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, normalizedYScales, axisId) {
+const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartYAxisWithDomains, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
   const scales = {};
   yAxes?.forEach(eachAxis => {
     const axis = eachAxis;
-    const scale = normalizedYScales[axis.id].copy();
+    const scale = (0, _getAxisScale.getNormalizedAxisScale)(axis, unfilteredDomains[axis.id].domain);
     let range = (0, _getAxisScale.getRange)(drawingArea, 'y', axis);
     if ((0, _scaleGuards.isOrdinalScale)(scale)) {
       range = range.reverse();

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.mjs

@@ -2,10 +2,10 @@ import { createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.mjs";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
 import { computeAxisValue } from "./computeAxisValue.mjs";
-import { selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartXAxisWithDomains, selectorChartYAxisWithDomains, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.mjs";
+import { selectorChartXAxisWithDomains, selectorChartYAxisWithDomains, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.mjs";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.mjs";
 import { ZOOM_SLIDER_PREVIEW_SIZE } from "../../../constants.mjs";
-import { getRange } from "./getAxisScale.mjs";
+import { getNormalizedAxisScale, getRange } from "./getAxisScale.mjs";
 import { zoomScaleRange } from "./zoom.mjs";
 import { isOrdinalScale } from "../../../scaleGuards.mjs";
 import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
@@ -26,14 +26,16 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-export const selectorChartPreviewXScales = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartNormalizedXScales, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, normalizedXScales, axisId) {
+export const selectorChartPreviewXScales = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartXAxisWithDomains, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
   const scales = {};
   xAxes?.forEach(eachAxis => {
     const axis = eachAxis;
-    const scale = normalizedXScales[axis.id].copy();
+    const scale = getNormalizedAxisScale(axis, unfilteredDomains[axis.id].domain);
     const range = getRange(drawingArea, 'x', axis);
     const zoomedRange = zoomScaleRange(range, [options.minStart, options.maxEnd]);
     scale.range(zoomedRange);
@@ -70,14 +72,16 @@ export const selectorChartPreviewComputedXAxis = createSelectorMemoized(selector
   }
   return computedAxes.axis;
 });
-export const selectorChartPreviewYScales = createSelectorMemoized(selectorChartRawYAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartNormalizedYScales, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, normalizedYScales, axisId) {
+export const selectorChartPreviewYScales = createSelectorMemoized(selectorChartRawYAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartYAxisWithDomains, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
   const scales = {};
   yAxes?.forEach(eachAxis => {
     const axis = eachAxis;
-    const scale = normalizedYScales[axis.id].copy();
+    const scale = getNormalizedAxisScale(axis, unfilteredDomains[axis.id].domain);
     let range = getRange(drawingArea, 'y', axis);
     if (isOrdinalScale(scale)) {
       range = range.reverse();