@mui/x-charts-pro 8.2.0 → 8.3.1

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

@@ -1,4 +1,4 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData } from '@mui/x-charts/internals';
+import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId } from '@mui/x-charts/internals';
 export interface UseChartProZoomParameters {
   /**
    * The list of zoom data related to each axis.
@@ -42,7 +42,22 @@ export interface UseChartProZoomPublicApi {
    */
   setZoomData: (value: ZoomData[] | ((prev: ZoomData[]) => ZoomData[])) => void;
 }
-export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {}
+export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {
+  /**
+   * Translate the zoom range (i.e., both start and end) for a specific axis.
+   * @param {AxisId} axisId The id of the axis to move the zoom range for.
+   * @param {number} by The amount to move the zoom range by. Ranges from 0 to 100.
+   */
+  moveZoomRange: (axisId: AxisId, by: number) => void;
+  /**
+   * Zoom in the chart.
+   */
+  zoomIn: () => void;
+  /**
+   * Zoom out the chart.
+   */
+  zoomOut: () => void;
+}
 export type UseChartProZoomSignature = ChartPluginSignature<{
   params: UseChartProZoomParameters;
   defaultizedParams: UseChartProZoomDefaultizedParameters;

package/internals/slots/chartBaseSlotProps.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+import { ChartBaseCommonProps } from '@mui/x-charts/models';
+export type ChartBaseTooltipProps = ChartBaseCommonProps & {
+  children: React.ReactElement<any, any>;
+  enterDelay?: number;
+  title: React.ReactNode;
+};
+export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+};

package/internals/slots/chartBaseSlotProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/slots/chartsBaseSlots.d.ts

@@ -0,0 +1,6 @@
+import { ChartsBaseSlots } from '@mui/x-charts/models';
+import * as React from 'react';
+import { ChartBaseTooltipProps } from "./chartBaseSlotProps.js";
+export interface ChartsBaseSlotsPro extends ChartsBaseSlots {
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+}

package/internals/slots/chartsBaseSlots.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/slots/chartsIconSlots.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ChartBaseIconProps, ChartsIconSlots } from '@mui/x-charts/models';
+export interface ChartsIconSlotsPro extends ChartsIconSlots {
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+}

package/internals/slots/chartsIconSlots.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.2.0",
-  "description": "The Pro plan edition of the Charts components (MUI X).",
+  "version": "8.3.1",
   "author": "MUI Team",
+  "description": "The Pro plan edition of the MUI X Charts components.",
   "main": "./index.js",
   "license": "SEE LICENSE IN LICENSE",
   "bugs": {
@@ -29,14 +29,14 @@
     "directory": "packages/x-charts-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.0",
+    "@babel/runtime": "^7.27.1",
     "@mui/utils": "^7.0.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.2.0",
-    "@mui/x-internals": "8.2.0",
-    "@mui/x-charts-vendor": "8.0.0",
-    "@mui/x-license": "8.2.0"
+    "@mui/x-internals": "8.3.1",
+    "@mui/x-charts-vendor": "8.3.1",
+    "@mui/x-license": "8.3.1",
+    "@mui/x-charts": "8.3.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/typeOverloads/modules.d.ts

@@ -1,7 +1,7 @@
 import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import { AxisId, ZoomOptions } from '@mui/x-charts/internals';
-import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
 import { DefaultizedFunnelSeriesType, FunnelItemIdentifier, FunnelSeriesType, FunnelValueType } from "../FunnelChart/funnel.types.js";
+import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
 declare module '@mui/x-charts/internals' {
   interface ChartsSeriesConfig {
     heatmap: {

package/FunnelChart/curves/funnelStep.d.ts

@@ -1,25 +0,0 @@
-import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
-/**
- * This is a custom "step" curve generator for the funnel chart.
- * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
- *
- * It takes into account the gap between the points and draws a smooth curve between them.
- *
- * It is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-export declare class FunnelStep implements CurveGenerator {
-  private context;
-  private line;
-  private x;
-  private y;
-  private currentPoint;
-  private isHorizontal;
-  private gap;
-  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
-  areaStart(): void;
-  areaEnd(): void;
-  lineStart(): void;
-  lineEnd(): void;
-  point(x: number, y: number): void;
-}

package/FunnelChart/curves/funnelStep.js

@@ -1,87 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FunnelStep = void 0;
-/**
- * This is a custom "step" curve generator for the funnel chart.
- * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
- *
- * It takes into account the gap between the points and draws a smooth curve between them.
- *
- * It is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-class FunnelStep {
-  constructor(context, isHorizontal, gap = 0) {
-    this.context = void 0;
-    this.line = NaN;
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
-    this.isHorizontal = false;
-    this.gap = 0;
-    this.context = context;
-    this.isHorizontal = isHorizontal;
-    this.gap = gap / 2;
-  }
-  areaStart() {
-    this.line = 0;
-  }
-  areaEnd() {
-    this.line = NaN;
-  }
-  lineStart() {
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
-  }
-  lineEnd() {
-    if (this.currentPoint === 2) {
-      this.context.lineTo(this.x, this.y);
-    }
-    if (this.line || this.line !== 0 && this.currentPoint === 1) {
-      this.context.closePath();
-    }
-    if (this.line >= 0) {
-      this.line = 1 - this.line;
-    }
-  }
-  point(x, y) {
-    x = +x;
-    y = +y;
-
-    // 0 is the top-left corner.
-    if (this.isHorizontal) {
-      if (this.currentPoint === 0) {
-        this.context.moveTo(x + this.gap, y);
-      } else if (this.currentPoint === 1 || this.currentPoint === 2) {
-        this.context.lineTo(x - this.gap, this.y);
-        this.context.lineTo(x - this.gap, y);
-      } else {
-        this.context.lineTo(this.x - this.gap, y);
-        this.context.lineTo(x + this.gap, y);
-      }
-      this.currentPoint += 1;
-      this.x = x;
-      this.y = y;
-      return;
-    }
-
-    // 0 is the top-right corner.
-    if (this.currentPoint === 0) {
-      this.context.moveTo(x, y + this.gap);
-    } else if (this.currentPoint === 3) {
-      this.context.lineTo(x, this.y - this.gap);
-      this.context.lineTo(x, y + this.gap);
-    } else {
-      this.context.lineTo(this.x, y - this.gap);
-      this.context.lineTo(x, y - this.gap);
-    }
-    this.currentPoint += 1;
-    this.x = x;
-    this.y = y;
-  }
-}
-exports.FunnelStep = FunnelStep;

package/esm/FunnelChart/curves/funnelStep.d.ts

@@ -1,25 +0,0 @@
-import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
-/**
- * This is a custom "step" curve generator for the funnel chart.
- * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
- *
- * It takes into account the gap between the points and draws a smooth curve between them.
- *
- * It is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-export declare class FunnelStep implements CurveGenerator {
-  private context;
-  private line;
-  private x;
-  private y;
-  private currentPoint;
-  private isHorizontal;
-  private gap;
-  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
-  areaStart(): void;
-  areaEnd(): void;
-  lineStart(): void;
-  lineEnd(): void;
-  point(x: number, y: number): void;
-}

package/esm/FunnelChart/curves/funnelStep.js

@@ -1,80 +0,0 @@
-/**
- * This is a custom "step" curve generator for the funnel chart.
- * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
- *
- * It takes into account the gap between the points and draws a smooth curve between them.
- *
- * It is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-export class FunnelStep {
-  constructor(context, isHorizontal, gap = 0) {
-    this.context = void 0;
-    this.line = NaN;
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
-    this.isHorizontal = false;
-    this.gap = 0;
-    this.context = context;
-    this.isHorizontal = isHorizontal;
-    this.gap = gap / 2;
-  }
-  areaStart() {
-    this.line = 0;
-  }
-  areaEnd() {
-    this.line = NaN;
-  }
-  lineStart() {
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
-  }
-  lineEnd() {
-    if (this.currentPoint === 2) {
-      this.context.lineTo(this.x, this.y);
-    }
-    if (this.line || this.line !== 0 && this.currentPoint === 1) {
-      this.context.closePath();
-    }
-    if (this.line >= 0) {
-      this.line = 1 - this.line;
-    }
-  }
-  point(x, y) {
-    x = +x;
-    y = +y;
-
-    // 0 is the top-left corner.
-    if (this.isHorizontal) {
-      if (this.currentPoint === 0) {
-        this.context.moveTo(x + this.gap, y);
-      } else if (this.currentPoint === 1 || this.currentPoint === 2) {
-        this.context.lineTo(x - this.gap, this.y);
-        this.context.lineTo(x - this.gap, y);
-      } else {
-        this.context.lineTo(this.x - this.gap, y);
-        this.context.lineTo(x + this.gap, y);
-      }
-      this.currentPoint += 1;
-      this.x = x;
-      this.y = y;
-      return;
-    }
-
-    // 0 is the top-right corner.
-    if (this.currentPoint === 0) {
-      this.context.moveTo(x, y + this.gap);
-    } else if (this.currentPoint === 3) {
-      this.context.lineTo(x, this.y - this.gap);
-      this.context.lineTo(x, y + this.gap);
-    } else {
-      this.context.lineTo(this.x, y - this.gap);
-      this.context.lineTo(x, y - this.gap);
-    }
-    this.currentPoint += 1;
-    this.x = x;
-    this.y = y;
-  }
-}