@mui/x-charts-premium 8.26.0 → 9.0.0-alpha.0

package/index.d.ts

@@ -22,6 +22,8 @@ export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export * from '@mui/x-charts-pro/Heatmap';
+export { ChartsContainerPro } from '@mui/x-charts-pro/ChartsContainerPro';
+export type { ChartsContainerProProps } from '@mui/x-charts-pro/ChartsContainerPro';
 export { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
 export type { ChartContainerProProps } from '@mui/x-charts-pro/ChartContainerPro';
 export * from '@mui/x-charts-pro/ChartDataProviderPro';
@@ -41,5 +43,7 @@ export * from "./models/index.js";
 export * from "./plugins/index.js";
 export * from "./ChartsRenderer/index.js";
 export * from "./ChartDataProviderPremium/index.js";
+export * from "./ChartsContainerPremium/index.js";
 export * from "./ChartContainerPremium/index.js";
-export * from "./BarChartPremium/index.js";
+export * from "./BarChartPremium/index.js";
+export * from "./HeatmapPremium/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-premium v8.26.0
+ * @mui/x-charts-premium v9.0.0-alpha.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  ChartsContainerPro: true,
   ChartContainerPro: true
 };
 Object.defineProperty(exports, "ChartContainerPro", {
@@ -19,6 +20,12 @@ Object.defineProperty(exports, "ChartContainerPro", {
     return _ChartContainerPro.ChartContainerPro;
   }
 });
+Object.defineProperty(exports, "ChartsContainerPro", {
+  enumerable: true,
+  get: function () {
+    return _ChartsContainerPro.ChartsContainerPro;
+  }
+});
 require("@mui/x-charts-pro/typeOverloads");
 require("./typeOverloads/modules");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
@@ -285,6 +292,7 @@ Object.keys(_Heatmap).forEach(function (key) {
     }
   });
 });
+var _ChartsContainerPro = require("@mui/x-charts-pro/ChartsContainerPro");
 var _ChartContainerPro = require("@mui/x-charts-pro/ChartContainerPro");
 var _ChartDataProviderPro = require("@mui/x-charts-pro/ChartDataProviderPro");
 Object.keys(_ChartDataProviderPro).forEach(function (key) {
@@ -490,6 +498,18 @@ Object.keys(_ChartDataProviderPremium).forEach(function (key) {
     }
   });
 });
+var _ChartsContainerPremium = require("./ChartsContainerPremium");
+Object.keys(_ChartsContainerPremium).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsContainerPremium[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsContainerPremium[key];
+    }
+  });
+});
 var _ChartContainerPremium = require("./ChartContainerPremium");
 Object.keys(_ChartContainerPremium).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -513,4 +533,16 @@ Object.keys(_BarChartPremium).forEach(function (key) {
       return _BarChartPremium[key];
     }
   });
+});
+var _HeatmapPremium = require("./HeatmapPremium");
+Object.keys(_HeatmapPremium).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HeatmapPremium[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HeatmapPremium[key];
+    }
+  });
 });

package/internals/plugins/allPlugins.d.ts

@@ -1,6 +1,6 @@
 import { type ChartSeriesType, type ConvertSignaturesIntoPlugins, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartZAxisSignature, type UseChartHighlightSignature, type UseChartPolarAxisSignature, type UseChartBrushSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature, type UseChartProZoomSignature } from '@mui/x-charts-pro/plugins';
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<TSeries>, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
 export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartTooltipSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartVisibilityManagerSignature<any>>)[];
 export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature];

package/models/seriesType/rangeBar.d.ts

@@ -2,7 +2,7 @@ import { type CartesianSeriesType, type CommonDefaultizedProps, type CommonSerie
 import { type DefaultizedProps } from '@mui/x-internals/types';
 /** [start, end] */
 export type RangeBarValueType = [number, number];
-export interface RangeBarSeriesType extends CommonSeriesType<RangeBarValueType | null>, CartesianSeriesType {
+export interface RangeBarSeriesType extends CommonSeriesType<RangeBarValueType | null, 'rangeBar'>, CartesianSeriesType {
   type: 'rangeBar';
   /**
    * Data associated to each range bar.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-premium",
-  "version": "8.26.0",
+  "version": "9.0.0-alpha.0",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -27,15 +27,15 @@
     "directory": "packages/x-charts-premium"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
-    "@mui/utils": "^7.3.5",
+    "@babel/runtime": "^7.28.6",
+    "@mui/utils": "^7.3.7",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-pro": "8.26.0",
-    "@mui/x-charts": "8.26.0",
-    "@mui/x-charts-vendor": "8.26.0",
-    "@mui/x-internals": "8.26.0",
-    "@mui/x-license": "8.26.0"
+    "@mui/x-charts": "9.0.0-alpha.0",
+    "@mui/x-charts-pro": "9.0.0-alpha.0",
+    "@mui/x-internals": "9.0.0-alpha.0",
+    "@mui/x-charts-vendor": "9.0.0-alpha.0",
+    "@mui/x-license": "9.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -54,7 +54,7 @@
     }
   },
   "optionalDependencies": {
-    "rasterizehtml": "^1.4.0"
+    "rasterizehtml": "^1.4.1"
   },
   "engines": {
     "node": ">=14.0.0"

package/typeOverloads/modules.d.ts

@@ -1,5 +1,5 @@
 import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
-import type { SeriesColor } from '@mui/x-charts/internals';
+import type { CommonHighlightScope, SeriesColor } from '@mui/x-charts/internals';
 import type { RangeBarValueType, RangeBarSeriesType } from "../models/index.js";
 import type { DefaultizedRangeBarSeriesType, RangeBarItemIdentifier } from "../models/seriesType/rangeBar.js";
 import type { BarSeries } from "../BarChart/index.js";
@@ -17,6 +17,7 @@ declare module '@mui/x-charts/internals' {
       itemIdentifierWithData: RangeBarItemIdentifier;
       valueType: RangeBarValueType | null;
       axisType: 'cartesian';
+      highlightScope: CommonHighlightScope;
     };
   }
 }

package/utils/webgl/parseColor.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Parse color string to RGBA object. Each channel is normalized to [0, 1].
+ * This function does not work in SSR.
+ */
+export declare function parseColor(color: string): [number, number, number, number];

package/utils/webgl/parseColor.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseColor = parseColor;
+const colorCache = new Map();
+
+/**
+ * Parse color string to RGBA object. Each channel is normalized to [0, 1].
+ * This function does not work in SSR.
+ */
+function parseColor(color) {
+  const cached = colorCache.get(color);
+  if (cached) {
+    return cached;
+  }
+  let result = parseColorUsingRegex(color);
+  if (result == null) {
+    result = parseRgbaColor(color);
+  }
+  if (result == null) {
+    result = parseColorUsingCanvas(color);
+  }
+  colorCache.set(color, result);
+  return result;
+}
+
+// Validates hex color formats (#RGB, #RRGGBB, #RRGGBBAA)
+const hexRegex = /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$|^[0-9A-Fa-f]{8}$/;
+function parseColorUsingRegex(color) {
+  if (color.startsWith('#')) {
+    color = color.slice(1);
+  }
+  if (!hexRegex.test(color)) {
+    return null; // Invalid hex color
+  }
+  if (color.length === 3) {
+    color = color.split('').map(char => char + char).join('');
+  }
+  const r = parseInt(color.slice(0, 2), 16) / 255;
+  const g = parseInt(color.slice(2, 4), 16) / 255;
+  const b = parseInt(color.slice(4, 6), 16) / 255;
+  const a = color.length === 8 ? parseInt(color.substring(6, 8), 16) / 255 : 1;
+  return [r, g, b, a];
+}
+
+// Parses rgb() and rgba() formats
+const rgbaRegex = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/i;
+function parseRgbaColor(color) {
+  const match = color.match(rgbaRegex);
+  if (!match) {
+    return null;
+  }
+  const r = parseInt(match[1], 10);
+  const g = parseInt(match[2], 10);
+  const b = parseInt(match[3], 10);
+  const a = match[4] !== undefined ? parseFloat(match[4]) : 1;
+  if (r > 255 || g > 255 || b > 255) {
+    return null;
+  }
+  if (a < 0 || a > 1) {
+    return null;
+  }
+  return [r / 255, g / 255, b / 255, a];
+}
+let canvas;
+function parseColorUsingCanvas(color) {
+  if (!canvas) {
+    if ('OffscreenCanvas' in window) {
+      canvas = new OffscreenCanvas(1, 1);
+    } else {
+      canvas = document.createElement('canvas');
+      canvas.width = 1;
+      canvas.height = 1;
+    }
+  }
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+  const result = [r / 255, g / 255, b / 255, a / 255];
+  return result;
+}

package/utils/webgl/useWebGLResizeObserver.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This hook calls the provided `onResize` callback whenever the WebGL canvas is resized.
+ * It detects size changes when the element is resized, the browser zoom updates or the device pixel ratio changes.
+ * These last two conditions aren't supported by Safari, so `onResize` won't be called in these cases on Safari.
+ * @param onResize
+ */
+export declare function useWebGLResizeObserver(onResize: () => void): void;

package/utils/webgl/useWebGLResizeObserver.js

@@ -0,0 +1,70 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWebGLResizeObserver = useWebGLResizeObserver;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+function getDevicePixelContentBoxSize(entry) {
+  // Safari does not support devicePixelContentBoxSize
+  if (entry.devicePixelContentBoxSize) {
+    return {
+      width: entry.devicePixelContentBoxSize[0].inlineSize,
+      height: entry.devicePixelContentBoxSize[0].blockSize
+    };
+  }
+  // These values not correct, but they're as close as you can get in Safari
+  return {
+    width: entry.contentBoxSize[0].inlineSize * devicePixelRatio,
+    height: entry.contentBoxSize[0].blockSize * devicePixelRatio
+  };
+}
+
+/**
+ * This hook calls the provided `onResize` callback whenever the WebGL canvas is resized.
+ * It detects size changes when the element is resized, the browser zoom updates or the device pixel ratio changes.
+ * These last two conditions aren't supported by Safari, so `onResize` won't be called in these cases on Safari.
+ * @param onResize
+ */
+function useWebGLResizeObserver(onResize) {
+  const gl = (0, _internals.useWebGLContext)();
+  React.useEffect(() => {
+    const canvas = gl?.canvas;
+    if (!(canvas instanceof HTMLCanvasElement)) {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const {
+          width,
+          height
+        } = getDevicePixelContentBoxSize(entry);
+        canvas.width = Math.max(1, width);
+        canvas.height = Math.max(1, height);
+
+        // Update WebGL viewport
+        gl?.viewport(0, 0, width, height);
+        onResize();
+      }
+    });
+    try {
+      /* We use 'device-pixel-content-box' to observe the size of the canvas in device pixels, rather than CSS pixels.
+       * This ensures that we correctly handle high-DPI displays and browser zoom.
+       * However, this is not supported in Safari, which throws, so we fall back to 'content-box'.
+       * WebKit Bug: https://www2.webkit.org/show_bug.cgi?id=219005 */
+      observer.observe(canvas, {
+        box: 'device-pixel-content-box'
+      });
+    } catch {
+      observer.observe(canvas, {
+        box: 'content-box'
+      });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [gl, gl?.canvas, onResize]);
+}