@mui/x-charts 7.13.0 → 7.15.0

package/{esm → node}/hooks/useSeries.js

@@ -1,17 +1,28 @@
-import * as React from 'react';
-import { SeriesContext } from '../context/SeriesProvider';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBarSeries = useBarSeries;
+exports.useLineSeries = useLineSeries;
+exports.usePieSeries = usePieSeries;
+exports.useScatterSeries = useScatterSeries;
+exports.useSeries = useSeries;
+var React = _interopRequireWildcard(require("react"));
+var _SeriesProvider = require("../context/SeriesProvider");
+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; }
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
  * { seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: [id1, ...] } }
  * @returns FormattedSeries series
  */
-export function useSeries() {
+function useSeries() {
   const {
     isInitialized,
     data
-  } = React.useContext(SeriesContext);
+  } = React.useContext(_SeriesProvider.SeriesContext);
   if (!isInitialized) {
     throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
@@ -25,7 +36,7 @@ export function useSeries() {
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined pieSeries
  */
-export function usePieSeries() {
+function usePieSeries() {
   const series = useSeries();
   return React.useMemo(() => series.pie, [series.pie]);
 }
@@ -37,7 +48,7 @@ export function usePieSeries() {
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined lineSeries
  */
-export function useLineSeries() {
+function useLineSeries() {
   const series = useSeries();
   return React.useMemo(() => series.line, [series.line]);
 }
@@ -49,7 +60,7 @@ export function useLineSeries() {
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined barSeries
  */
-export function useBarSeries() {
+function useBarSeries() {
   const series = useSeries();
   return React.useMemo(() => series.bar, [series.bar]);
 }
@@ -61,7 +72,7 @@ export function useBarSeries() {
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined scatterSeries
  */
-export function useScatterSeries() {
+function useScatterSeries() {
   const series = useSeries();
   return React.useMemo(() => series.scatter, [series.scatter]);
 }

package/node/hooks/useSvgRef.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSvgRef = useSvgRef;
+var React = _interopRequireWildcard(require("react"));
+var _DrawingProvider = require("../context/DrawingProvider");
+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; }
+function useSvgRef() {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(_DrawingProvider.SvgContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return data;
+}

package/{esm → node}/hooks/useTicks.js

@@ -1,7 +1,16 @@
-import * as React from 'react';
-import { isBandScale } from '../internals/isBandScale';
-import { isInfinity } from '../internals/isInfinity';
-export function getTickNumber(params) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTickNumber = getTickNumber;
+exports.useTicks = useTicks;
+var React = _interopRequireWildcard(require("react"));
+var _isBandScale = require("../internals/isBandScale");
+var _isInfinity = require("../internals/isInfinity");
+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; }
+function getTickNumber(params) {
   const {
     tickMaxStep,
     tickMinStep,
@@ -20,7 +29,7 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
-export function useTicks(options) {
+function useTicks(options) {
   const {
     scale,
     tickNumber,
@@ -31,7 +40,7 @@ export function useTicks(options) {
   } = options;
   return React.useMemo(() => {
     // band scale
-    if (isBandScale(scale)) {
+    if ((0, _isBandScale.isBandScale)(scale)) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
@@ -64,7 +73,7 @@ export function useTicks(options) {
     const domain = scale.domain();
     // Skip axis rendering if no data is available
     // - The domains contains Infinity for continuous scales.
-    if (domain.some(isInfinity)) {
+    if (domain.some(_isInfinity.isInfinity)) {
       return [];
     }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);

package/node/index.js

@@ -0,0 +1,298 @@
+/**
+ * @mui/x-charts v7.15.0
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
+});
+var _context = require("./context");
+Object.keys(_context).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _context[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _context[key];
+    }
+  });
+});
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});
+var _colorPalettes = require("./colorPalettes");
+Object.keys(_colorPalettes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorPalettes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _colorPalettes[key];
+    }
+  });
+});
+var _models = require("./models");
+Object.keys(_models).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _models[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _models[key];
+    }
+  });
+});
+var _ChartsClipPath = require("./ChartsClipPath");
+Object.keys(_ChartsClipPath).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsClipPath[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsClipPath[key];
+    }
+  });
+});
+var _ChartsReferenceLine = require("./ChartsReferenceLine");
+Object.keys(_ChartsReferenceLine).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsReferenceLine[key];
+    }
+  });
+});
+var _ChartsAxis = require("./ChartsAxis");
+Object.keys(_ChartsAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsAxis[key];
+    }
+  });
+});
+var _ChartsXAxis = require("./ChartsXAxis");
+Object.keys(_ChartsXAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsXAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsXAxis[key];
+    }
+  });
+});
+var _ChartsYAxis = require("./ChartsYAxis");
+Object.keys(_ChartsYAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsYAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsYAxis[key];
+    }
+  });
+});
+var _ChartsGrid = require("./ChartsGrid");
+Object.keys(_ChartsGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsGrid[key];
+    }
+  });
+});
+var _ChartsText = require("./ChartsText");
+Object.keys(_ChartsText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsText[key];
+    }
+  });
+});
+var _ChartsTooltip = require("./ChartsTooltip");
+Object.keys(_ChartsTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsTooltip[key];
+    }
+  });
+});
+var _ChartsLegend = require("./ChartsLegend");
+Object.keys(_ChartsLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLegend[key];
+    }
+  });
+});
+var _ChartsAxisHighlight = require("./ChartsAxisHighlight");
+Object.keys(_ChartsAxisHighlight).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsAxisHighlight[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsAxisHighlight[key];
+    }
+  });
+});
+var _ChartsVoronoiHandler = require("./ChartsVoronoiHandler");
+Object.keys(_ChartsVoronoiHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsVoronoiHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsVoronoiHandler[key];
+    }
+  });
+});
+var _ChartsOnAxisClickHandler = require("./ChartsOnAxisClickHandler");
+Object.keys(_ChartsOnAxisClickHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsOnAxisClickHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsOnAxisClickHandler[key];
+    }
+  });
+});
+var _BarChart = require("./BarChart");
+Object.keys(_BarChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BarChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BarChart[key];
+    }
+  });
+});
+var _LineChart = require("./LineChart");
+Object.keys(_LineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LineChart[key];
+    }
+  });
+});
+var _PieChart = require("./PieChart");
+Object.keys(_PieChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PieChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieChart[key];
+    }
+  });
+});
+var _ScatterChart = require("./ScatterChart");
+Object.keys(_ScatterChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScatterChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScatterChart[key];
+    }
+  });
+});
+var _SparkLineChart = require("./SparkLineChart");
+Object.keys(_SparkLineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SparkLineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SparkLineChart[key];
+    }
+  });
+});
+var _Gauge = require("./Gauge");
+Object.keys(_Gauge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Gauge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Gauge[key];
+    }
+  });
+});
+var _ChartContainer = require("./ChartContainer");
+Object.keys(_ChartContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartContainer[key];
+    }
+  });
+});
+var _ChartsSurface = require("./ChartsSurface");
+Object.keys(_ChartsSurface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsSurface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsSurface[key];
+    }
+  });
+});
+var _ResponsiveChartContainer = require("./ResponsiveChartContainer");
+Object.keys(_ResponsiveChartContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ResponsiveChartContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ResponsiveChartContainer[key];
+    }
+  });
+});

package/node/internals/SlotComponentPropsFromProps.js

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

package/node/internals/cleanId.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cleanId = cleanId;
+/**
+ * Remove spaces to have viable ids
+ */
+function cleanId(id) {
+  return id.replace(' ', '_');
+}

package/node/internals/colorScale.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColorScale = getColorScale;
+exports.getOrdinalColorScale = getOrdinalColorScale;
+exports.getSequentialColorScale = getSequentialColorScale;
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+function getSequentialColorScale(config) {
+  if (config.type === 'piecewise') {
+    return (0, _d3Scale.scaleThreshold)(config.thresholds, config.colors);
+  }
+  return (0, _d3Scale.scaleSequential)([config.min ?? 0, config.max ?? 100], config.color);
+}
+function getOrdinalColorScale(config) {
+  if (config.values) {
+    return (0, _d3Scale.scaleOrdinal)(config.values, config.colors).unknown(config.unknownColor ?? null);
+  }
+  return (0, _d3Scale.scaleOrdinal)(config.colors.map((_, index) => index), config.colors).unknown(config.unknownColor ?? null);
+}
+function getColorScale(config) {
+  return config.type === 'ordinal' ? getOrdinalColorScale(config) : getSequentialColorScale(config);
+}

package/node/internals/components/AxisSharedComponents.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AxisRoot = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _axisClasses = require("../../ChartsAxis/axisClasses");
+const AxisRoot = exports.AxisRoot = (0, _styles.styled)('g', {
+  name: 'MuiChartsAxis',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  [`& .${_axisClasses.axisClasses.tickLabel}`]: (0, _extends2.default)({}, theme.typography.caption, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${_axisClasses.axisClasses.label}`]: (0, _extends2.default)({}, theme.typography.body1, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${_axisClasses.axisClasses.line}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1
+  },
+  [`& .${_axisClasses.axisClasses.tick}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges'
+  }
+}));

package/node/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAxesGradients = ChartsAxesGradients;
+exports.useChartGradient = useChartGradient;
+var React = _interopRequireWildcard(require("react"));
+var _CartesianProvider = require("../../../context/CartesianProvider");
+var _DrawingProvider = require("../../../context/DrawingProvider");
+var _hooks = require("../../../hooks");
+var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
+var _ChartsContinuousGradient = _interopRequireDefault(require("./ChartsContinuousGradient"));
+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; }
+function useChartGradient() {
+  const {
+    chartId
+  } = React.useContext(_DrawingProvider.DrawingContext);
+  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
+}
+function ChartsAxesGradients() {
+  const {
+    top,
+    height,
+    bottom,
+    left,
+    width,
+    right
+  } = (0, _hooks.useDrawingArea)();
+  const svgHeight = top + height + bottom;
+  const svgWidth = left + width + right;
+  const getGradientId = useChartGradient();
+  const {
+    xAxisIds,
+    xAxis,
+    yAxisIds,
+    yAxis
+  } = (0, _CartesianProvider.useCartesianContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
+    children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
+      const gradientId = getGradientId(axisId, 'y');
+      const {
+        colorMap,
+        scale,
+        colorScale,
+        reverse
+      } = yAxis[axisId];
+      if (colorMap?.type === 'piecewise') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsPiecewiseGradient.default, {
+          isReversed: !reverse,
+          scale: scale,
+          colorMap: colorMap,
+          size: svgHeight,
+          gradientId: gradientId,
+          direction: "y"
+        }, gradientId);
+      }
+      if (colorMap?.type === 'continuous') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
+          isReversed: !reverse,
+          scale: scale,
+          colorScale: colorScale,
+          colorMap: colorMap,
+          size: svgHeight,
+          gradientId: gradientId,
+          direction: "y"
+        }, gradientId);
+      }
+      return null;
+    }), xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined).map(axisId => {
+      const gradientId = getGradientId(axisId, 'x');
+      const {
+        colorMap,
+        scale,
+        reverse,
+        colorScale
+      } = xAxis[axisId];
+      if (colorMap?.type === 'piecewise') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsPiecewiseGradient.default, {
+          isReversed: reverse,
+          scale: scale,
+          colorMap: colorMap,
+          size: svgWidth,
+          gradientId: gradientId,
+          direction: "x"
+        }, gradientId);
+      }
+      if (colorMap?.type === 'continuous') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
+          isReversed: reverse,
+          scale: scale,
+          colorScale: colorScale,
+          colorMap: colorMap,
+          size: svgWidth,
+          gradientId: gradientId,
+          direction: "x"
+        }, gradientId);
+      }
+      return null;
+    })]
+  });
+}

package/node/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChartsContinuousGradient;
+var React = _interopRequireWildcard(require("react"));
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+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; }
+const PX_PRECISION = 10;
+function ChartsContinuousGradient(props) {
+  const {
+    gradientUnits,
+    isReversed,
+    gradientId,
+    size,
+    direction,
+    scale,
+    colorScale,
+    colorMap
+  } = props;
+  const extremValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const extremPositions = extremValues.map(scale).filter(p => p !== undefined);
+  if (extremPositions.length !== 2) {
+    return null;
+  }
+  const interpolator = typeof extremValues[0] === 'number' ? (0, _d3Interpolate.interpolateNumber)(extremValues[0], extremValues[1]) : (0, _d3Interpolate.interpolateDate)(extremValues[0], extremValues[1]);
+  const numberOfPoints = Math.round((Math.max(...extremPositions) - Math.min(...extremPositions)) / PX_PRECISION);
+  const keyPrefix = `${extremValues[0]}-${extremValues[1]}-`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", {
+    id: gradientId,
+    x1: "0",
+    x2: "0",
+    y1: "0",
+    y2: "0",
+    [`${direction}${isReversed ? 1 : 2}`]: gradientUnits === 'objectBoundingBox' ? 1 : `${size}px`,
+    gradientUnits: gradientUnits ?? 'userSpaceOnUse' // Use the SVG coordinate instead of the component ones.
+    ,
+    children: Array.from({
+      length: numberOfPoints + 1
+    }, (_, index) => {
+      const value = interpolator(index / numberOfPoints);
+      if (value === undefined) {
+        return null;
+      }
+      const x = scale(value);
+      if (x === undefined) {
+        return null;
+      }
+      const offset = isReversed ? 1 - x / size : x / size;
+      const color = colorScale(value);
+      if (color === null) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+        offset: offset,
+        stopColor: color,
+        stopOpacity: 1
+      }, keyPrefix + index);
+    })
+  });
+}