@mui/x-charts 7.7.1 → 7.9.0

package/LineChart/LineChart.d.ts

@@ -14,9 +14,9 @@ import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from './LineHighli
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
-export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
+export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'line'>, ChartsOverlaySlots {
 }
-export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
+export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'line'>, ChartsOverlaySlotProps {
 }
 export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
@@ -29,7 +29,7 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
      * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
      * @default { trigger: 'item' }
      */
-    tooltip?: ChartsTooltipProps;
+    tooltip?: ChartsTooltipProps<'line'>;
     /**
      * Option to display a cartesian grid in the background.
      */

package/LineChart/MarkPlot.js

@@ -17,6 +17,7 @@ var _constants = require("../constants");
 var _utils = require("../internals/utils");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -42,6 +43,10 @@ function MarkPlot(props) {
   const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = (0, _CartesianProvider.useCartesianContext)();
   const chartId = (0, _useChartId.useChartId)();
+  const {
+    left,
+    width
+  } = (0, _useDrawingArea.useDrawingArea)();
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -76,13 +81,12 @@ function MarkPlot(props) {
         const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        const xRange = xAxis[xAxisKey].scale.range();
         const yRange = yScale.range();
         const isInRange = ({
           x,
           y
         }) => {
-          if (x < Math.min(...xRange) || x > Math.max(...xRange)) {
+          if (x < left || x > left + width) {
             return false;
           }
           if (y < Math.min(...yRange) || y > Math.max(...yRange)) {

package/LineChart/useLineChartProps.d.ts

@@ -1,5 +1,17 @@
-/// <reference types="react" />
 import type { LineChartProps } from './LineChart';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsClipPathProps } from '../ChartsClipPath';
+import { AreaPlotProps } from './AreaPlot';
+import { LinePlotProps } from './LinePlot';
+import { MarkPlotProps } from './MarkPlot';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { LineHighlightPlotProps } from './LineHighlightPlot';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsTooltipProps } from '../ChartsTooltip';
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -8,110 +20,21 @@ import type { LineChartProps } from './LineChart';
  * @returns An object with props for the children components of LineChart
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
-    chartContainerProps: {
-        series: {
-            color?: string | undefined;
-            area?: boolean | undefined;
-            data?: (number | null)[] | undefined;
-            label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-            id?: import("../internals").SeriesId | undefined;
-            dataKey?: string | undefined;
-            stackOffset?: import("..").StackOffsetType | undefined;
-            valueFormatter?: import("../internals").SeriesValueFormatter<number | null> | undefined;
-            highlightScope?: Partial<import("..").HighlightScope> | undefined;
-            xAxisKey?: string | undefined;
-            yAxisKey?: string | undefined;
-            stack?: string | undefined;
-            stackOrder?: import("..").StackOrderType | undefined;
-            curve?: import("..").CurveType | undefined;
-            showMark?: boolean | ((params: import("..").ShowMarkParams<number | Date>) => boolean) | undefined;
-            disableHighlight: boolean;
-            connectNulls?: boolean | undefined;
-            type: "line";
-        }[];
-        width: number | undefined;
-        height: number | undefined;
-        margin: Partial<import("..").CardinalDirections<number>> | undefined;
-        colors: import("..").ChartsColorPalette | undefined;
-        dataset: import("../internals").DatasetType | undefined;
-        xAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[];
-        yAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[] | undefined;
-        sx: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-        highlightedItem: import("..").HighlightItemData | null | undefined;
-        onHighlightChange: ((highlightedItem: import("..").HighlightItemData | null) => void) | undefined;
-        disableAxisListener: boolean;
-    };
-    axisClickHandlerProps: {
-        onAxisClick: ((event: MouseEvent, data: {
-            dataIndex: number;
-            axisValue?: string | number | Date | undefined;
-            seriesValues: Record<string, number | null | undefined>;
-        } | null) => void) | undefined;
-    };
-    gridProps: {
-        vertical: boolean | undefined;
-        horizontal: boolean | undefined;
-    };
-    clipPathProps: {
-        id: string;
-    };
+    chartContainerProps: ResponsiveChartContainerProps;
+    axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
+    gridProps: ChartsGridProps;
+    clipPathProps: ChartsClipPathProps;
     clipPathGroupProps: {
         clipPath: string;
     };
-    areaPlotProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        onAreaClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
-        skipAnimation: boolean | undefined;
-    };
-    linePlotProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        onLineClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
-        skipAnimation: boolean | undefined;
-    };
-    markPlotProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        onMarkClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
-        skipAnimation: boolean | undefined;
-    };
-    overlayProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        loading: boolean | undefined;
-    };
-    chartsAxisProps: {
-        topAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        leftAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        rightAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        bottomAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-    };
-    axisHighlightProps: {
-        x: "none" | "line" | "band";
-        y?: ("none" | "line" | "band") | undefined;
-    };
-    lineHighlightPlotProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-    };
-    legendProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        position?: import("..").AnchorPosition | undefined;
-        classes?: Partial<import("..").ChartsLegendClasses> | undefined;
-        hidden?: boolean | undefined;
-        direction?: import("..").Direction | undefined;
-    };
-    tooltipProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        trigger?: import("../ChartsTooltip/utils").TriggerOptions | undefined;
-        itemContent?: import("react").ElementType<import("..").ChartsItemContentProps<any>, keyof import("react").JSX.IntrinsicElements> | undefined;
-        axisContent?: import("react").ElementType<import("..").ChartsAxisContentProps, keyof import("react").JSX.IntrinsicElements> | undefined;
-        classes?: Partial<import("..").ChartsTooltipClasses> | undefined;
-    };
+    areaPlotProps: AreaPlotProps;
+    linePlotProps: LinePlotProps;
+    markPlotProps: MarkPlotProps;
+    overlayProps: ChartsOverlayProps;
+    chartsAxisProps: ChartsAxisProps;
+    axisHighlightProps: ChartsAxisHighlightProps;
+    lineHighlightPlotProps: LineHighlightPlotProps;
+    legendProps: ChartsLegendProps;
+    tooltipProps: ChartsTooltipProps<"line">;
     children: import("react").ReactNode;
 };

package/LineChart/useLineChartProps.js

@@ -88,19 +88,19 @@ const useLineChartProps = props => {
   const areaPlotProps = {
     slots,
     slotProps,
-    onAreaClick,
+    onItemClick: onAreaClick,
     skipAnimation
   };
   const linePlotProps = {
     slots,
     slotProps,
-    onLineClick,
+    onItemClick: onLineClick,
     skipAnimation
   };
   const markPlotProps = {
     slots,
     slotProps,
-    onMarkClick,
+    onItemClick: onMarkClick,
     skipAnimation
   };
   const overlayProps = {

package/PieChart/PieArc.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { PieItemId } from '../models';

package/PieChart/PieArcLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { PieItemId } from '../models/seriesType/pie';

package/PieChart/PieChart.d.ts

@@ -10,9 +10,9 @@ import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
-export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
+export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'pie'>, ChartsOverlaySlots {
 }
-export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
+export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'pie'>, ChartsOverlaySlotProps {
 }
 export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     /**
@@ -37,7 +37,7 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
      * @default { trigger: 'item' }
      */
-    tooltip?: ChartsTooltipProps;
+    tooltip?: ChartsTooltipProps<'pie'>;
     /**
      * The configuration of axes highlight.
      * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.

package/PieChart/dataTransform/transition.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import { UseTransitionProps } from '@react-spring/web';
 import { ValueWithHighlight } from './useTransformData';
 export declare const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight>;

package/ResponsiveChartContainer/ResizableContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 /**
  * Wrapping div that take the shape of its parent.
@@ -6,5 +5,5 @@ import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
  * @ignore - do not document.
  */
 export declare const ResizableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'>;
+    ownerState: Pick<ResponsiveChartContainerProps, "width" | "height">;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -238,6 +238,8 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
   }))
 } : void 0;

package/ScatterChart/Scatter.js

@@ -12,6 +12,7 @@ var _useScale = require("../hooks/useScale");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _context = require("../context");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -35,6 +36,10 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
+  const {
+    left,
+    width
+  } = (0, _useDrawingArea.useDrawingArea)();
   const {
     useVoronoiInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
@@ -47,10 +52,7 @@ function Scatter(props) {
   const cleanData = React.useMemo(() => {
     const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
     const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-    const xRange = xScale.range();
     const yRange = yScale.range();
-    const minXRange = Math.min(...xRange);
-    const maxXRange = Math.max(...xRange);
     const minYRange = Math.min(...yRange);
     const maxYRange = Math.max(...yRange);
     const temp = [];
@@ -58,7 +60,7 @@ function Scatter(props) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = x >= minXRange && x <= maxXRange && y >= minYRange && y <= maxYRange;
+      const isInRange = x >= left && x <= left + width && y >= minYRange && y <= maxYRange;
       const pointCtx = {
         type: 'scatter',
         seriesId: series.id,
@@ -83,7 +85,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, series.data, series.id, getInteractionItemProps, color, colorGetter, isFaded, isHighlighted]);
+  }, [xScale, yScale, left, width, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,

package/ScatterChart/ScatterChart.d.ts

@@ -12,9 +12,9 @@ import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
-export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'scatter'>, ChartsOverlaySlots {
 }
-export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'scatter'>, ChartsOverlaySlotProps {
 }
 export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
     /**
@@ -27,7 +27,7 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
      * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
      * @default { trigger: 'item' }
      */
-    tooltip?: ChartsTooltipProps;
+    tooltip?: ChartsTooltipProps<'scatter'>;
     /**
      * The configuration of axes highlight.
      * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.

package/ScatterChart/ScatterChart.js

@@ -348,6 +348,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
   }))
 } : void 0;

package/ScatterChart/useScatterChartProps.d.ts

@@ -1,5 +1,14 @@
-/// <reference types="react" />
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsTooltipProps } from '../ChartsTooltip';
+import type { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ZAxisContextProviderProps } from '../context';
 import type { ScatterChartProps } from './ScatterChart';
+import type { ScatterPlotProps } from './ScatterPlot';
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -8,79 +17,15 @@ import type { ScatterChartProps } from './ScatterChart';
  * @returns An object with props for the children components of ScatterChart
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
-    chartContainerProps: {
-        series: {
-            color?: string | undefined;
-            data: import("..").ScatterValueType[];
-            label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-            id?: import("../internals").SeriesId | undefined;
-            valueFormatter?: import("../internals").SeriesValueFormatter<import("..").ScatterValueType> | undefined;
-            highlightScope?: Partial<import("..").HighlightScope> | undefined;
-            xAxisKey?: string | undefined;
-            yAxisKey?: string | undefined;
-            markerSize?: number | undefined;
-            disableHover?: boolean | undefined;
-            zAxisKey?: string | undefined;
-            type: "scatter";
-        }[];
-        width: number | undefined;
-        height: number | undefined;
-        margin: Partial<import("..").CardinalDirections<number>> | undefined;
-        colors: import("..").ChartsColorPalette | undefined;
-        xAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[] | undefined;
-        yAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[] | undefined;
-        sx: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-        highlightedItem: import("..").HighlightItemData | null | undefined;
-        onHighlightChange: ((highlightedItem: import("..").HighlightItemData | null) => void) | undefined;
-    };
-    zAxisProps: {
-        zAxis: import("../internals").MakeOptional<import("../internals").ZAxisConfig<any>, "id">[] | undefined;
-    };
-    voronoiHandlerProps: {
-        voronoiMaxRadius: number | undefined;
-        onItemClick: ((event: MouseEvent, scatterItemIdentifier: import("..").ScatterItemIdentifier) => void) | undefined;
-    };
-    chartsAxisProps: {
-        topAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        leftAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        rightAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        bottomAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-    };
-    gridProps: {
-        vertical: boolean | undefined;
-        horizontal: boolean | undefined;
-    };
-    scatterPlotProps: {
-        onItemClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: import("..").ScatterItemIdentifier) => void) | undefined;
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-    };
-    overlayProps: {
-        loading: boolean | undefined;
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-    };
-    legendProps: {
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-        position?: import("..").AnchorPosition | undefined;
-        classes?: Partial<import("..").ChartsLegendClasses> | undefined;
-        hidden?: boolean | undefined;
-        direction?: import("..").Direction | undefined;
-    };
-    axisHighlightProps: {
-        x: "none" | "line" | "band";
-        y: "none" | "line" | "band";
-    };
-    tooltipProps: {
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-        trigger: import("../ChartsTooltip/utils").TriggerOptions;
-        itemContent?: import("react").ElementType<import("..").ChartsItemContentProps<any>, keyof import("react").JSX.IntrinsicElements> | undefined;
-        axisContent?: import("react").ElementType<import("..").ChartsAxisContentProps, keyof import("react").JSX.IntrinsicElements> | undefined;
-        classes?: Partial<import("..").ChartsTooltipClasses> | undefined;
-    };
+    chartContainerProps: ResponsiveChartContainerProps;
+    zAxisProps: Omit<ZAxisContextProviderProps, "children">;
+    voronoiHandlerProps: ChartsVoronoiHandlerProps;
+    chartsAxisProps: ChartsAxisProps;
+    gridProps: ChartsGridProps;
+    scatterPlotProps: ScatterPlotProps;
+    overlayProps: ChartsOverlayProps;
+    legendProps: ChartsLegendProps;
+    axisHighlightProps: ChartsAxisHighlightProps;
+    tooltipProps: ChartsTooltipProps<"scatter">;
     children: import("react").ReactNode;
 };

package/SparkLineChart/SparkLineChart.d.ts

@@ -11,9 +11,9 @@ import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot';
 import { MarkPlotSlots, MarkPlotSlotProps } from '../LineChart/MarkPlot';
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from '../LineChart/LineHighlightPlot';
 import { BarPlotSlots, BarPlotSlotProps } from '../BarChart/BarPlot';
-export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {
+export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots<'line' | 'bar'> {
 }
-export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {
+export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps<'line' | 'bar'> {
 }
 export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
     /**
@@ -26,7 +26,7 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
      * Notice it is a single [[AxisConfig]] object, not an array of configuration.
      */
     yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>;
-    tooltip?: ChartsTooltipProps;
+    tooltip?: ChartsTooltipProps<'line' | 'bar'>;
     axisHighlight?: ChartsAxisHighlightProps;
     /**
      * Type of plot used.

package/context/CartesianProvider/computeValue.d.ts

@@ -7,13 +7,13 @@ import { FormattedSeries } from '../SeriesContextProvider';
 import { MakeOptional } from '../../models/helpers';
 export declare function computeValue(drawingArea: DrawingArea, formattedSeries: FormattedSeries, axis: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined, extremumGetters: {
     [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
-}, axisName: 'y'): {
+}, axisName: 'y', zoomRange?: [number, number]): {
     axis: DefaultizedAxisConfig<ChartsYAxisProps>;
     axisIds: string[];
 };
 export declare function computeValue(drawingArea: DrawingArea, formattedSeries: FormattedSeries, inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[] | undefined, extremumGetters: {
     [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
-}, axisName: 'x'): {
+}, axisName: 'x', zoomRange?: [number, number]): {
     axis: DefaultizedAxisConfig<ChartsAxisProps>;
     axisIds: string[];
 };

package/context/CartesianProvider/computeValue.js

@@ -17,9 +17,26 @@ const getRange = (drawingArea, axisName, isReverse) => {
   const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
+const zoomedScaleRange = (scaleRange, zoomRange) => {
+  const rangeGap = scaleRange[1] - scaleRange[0];
+  const zoomGap = zoomRange[1] - zoomRange[0];
+
+  // If current zoom show the scale between p1 and p2 percents
+  // The range should be extended by adding [0, p1] and [p2, 100] segments
+  const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
+  const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
+  return [min, max];
+};
+const isDateData = data => data?.[0] instanceof Date;
+function createDateFormatter(axis, range) {
+  const timeScale = (0, _d3Scale.scaleTime)(axis.data, range);
+  return (v, {
+    location
+  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+}
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
+function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName, zoomRange = [0, 100]) {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
   const allAxis = [...(inAxis?.map((axis, index) => (0, _extends2.default)({
     id: `defaultized-${axisName}-axis-${index}`
@@ -39,26 +56,36 @@ function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axi
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
+      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = (0, _extends2.default)({
         categoryGapRatio,
         barGapRatio
       }, axis, {
-        scale: (0, _d3Scale.scaleBand)(axis.data, scaleRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+        scale: (0, _d3Scale.scaleBand)(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
           values: axis.data
         }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
     }
     if ((0, _axis.isPointScaleConfig)(axis)) {
       const scaleRange = axisName === 'x' ? range : [...range].reverse();
+      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
-        scale: (0, _d3Scale.scalePoint)(axis.data, scaleRange),
+        scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
           values: axis.data
         }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
     }
     if (axis.scaleType === 'band' || axis.scaleType === 'point') {
       // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
@@ -66,11 +93,15 @@ function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axi
     }
     const scaleType = axis.scaleType ?? 'linear';
     const extremums = [axis.min ?? minData, axis.max ?? maxData];
-    const tickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
+    const rawTickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
       range,
       domain: extremums
     }));
-    const scale = (0, _getScale.getScale)(scaleType, extremums, range).nice(tickNumber);
+    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
+    const zoomedRange = zoomedScaleRange(range, zoomRange);
+
+    // TODO: move nice to prop? Disable when there is zoom?
+    const scale = (0, _getScale.getScale)(scaleType, extremums, zoomedRange).nice(rawTickNumber);
     const [minDomain, maxDomain] = scale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = (0, _extends2.default)({}, axis, {

package/context/CartesianProvider/normalizeAxis.d.ts

@@ -2,4 +2,4 @@ import type { AxisConfig, ScaleName } from '../../models';
 import { ChartsAxisProps } from '../../models/axis';
 import { MakeOptional } from '../../models/helpers';
 import { DatasetType } from '../../models/seriesType/config';
-export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: 'x' | 'y') => R[] | undefined;
+export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: "x" | "y") => R[] | undefined;

package/context/ZAxisContextProvider.js

@@ -47,7 +47,10 @@ function ZAxisContextProvider(props) {
       completedZAxis[axis.id] = (0, _extends2.default)({}, axis, {
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' && axis.data ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
           values: axis.data
-        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
+        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap.type === 'continuous' ? (0, _extends2.default)({
+          min: axis.min,
+          max: axis.max
+        }, axis.colorMap) : axis.colorMap))
       });
     });
     return {
@@ -93,6 +96,8 @@ process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
   }))
 } : void 0;