@mui/x-charts 7.3.0 → 7.3.2

package/modern/context/ZAxisContextProvider.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { getColorScale, getOrdinalColorScale } from '../internals/colorScale';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ZAxisContext = /*#__PURE__*/React.createContext({
+  zAxis: {},
+  zAxisIds: []
+});
+if (process.env.NODE_ENV !== 'production') {
+  ZAxisContext.displayName = 'ZAxisContext';
+}
+function ZAxisContextProvider(props) {
+  const {
+    zAxis: inZAxis,
+    dataset,
+    children
+  } = props;
+  const zAxis = React.useMemo(() => inZAxis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error('MUI X Charts: z-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  }), [inZAxis, dataset]);
+  const value = React.useMemo(() => {
+    const allZAxis = zAxis?.map((axis, index) => _extends({
+      id: `defaultized-z-axis-${index}`
+    }, axis)) ?? [];
+    const completedZAxis = {};
+    allZAxis.forEach(axis => {
+      completedZAxis[axis.id] = _extends({}, axis, {
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' && axis.data ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+    });
+    return {
+      zAxis: completedZAxis,
+      zAxisIds: allZAxis.map(({
+        id
+      }) => id)
+    };
+  }, [zAxis]);
+  return /*#__PURE__*/_jsx(ZAxisContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string
+  }))
+} : void 0;
+export { ZAxisContextProvider };

package/modern/context/index.js

@@ -1 +1 @@
-export {};
+export { ZAxisContextProvider } from './ZAxisContextProvider';

package/modern/hooks/useReducedMotion.js

@@ -5,7 +5,7 @@ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
  * set skipAnimations to the value of the user's
  * `prefers-reduced-motion` query.
  *
- * The return value, post-effect, is the value of their prefered setting
+ * The return value, post-effect, is the value of their preferred setting
  */
 export const useReducedMotion = () => {
   // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13

package/modern/hooks/useScale.js

@@ -3,7 +3,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { isBandScale } from '../internals/isBandScale';
 /**
  * For a given scale return a function that map value to their position.
- * Usefull when dealing with specific scale such as band.
+ * Useful when dealing with specific scale such as band.
  * @param scale The scale to use
  * @returns (value: any) => number
  */

package/modern/hooks/useTicks.js

@@ -59,6 +59,10 @@ export function useTicks(options) {
         labelOffset: 0
       }));
     }
+    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
+      // The axis should not be visible, so ticks should also be hidden.
+      return [];
+    }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
     return ticks.map(value => ({
       value,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.3.0
+ * @mui/x-charts v7.3.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/colorGetter.js

@@ -2,7 +2,7 @@ import getBarColor from '../BarChart/getColor';
 import getLineColor from '../LineChart/getColor';
 import getScatterColor from '../ScatterChart/getColor';
 import getPieColor from '../PieChart/getColor';
-function getColor(series, xAxis, yAxis) {
+function getColor(series, xAxis, yAxis, zAxis) {
   if (xAxis !== undefined && yAxis !== undefined) {
     if (series.type === 'bar') {
       return getBarColor(series, xAxis, yAxis);
@@ -11,7 +11,7 @@ function getColor(series, xAxis, yAxis) {
       return getLineColor(series, xAxis, yAxis);
     }
     if (series.type === 'scatter') {
-      return getScatterColor(series, xAxis, yAxis);
+      return getScatterColor(series, xAxis, yAxis, zAxis);
     }
   }
   if (series.type === 'pie') {

package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -4,13 +4,12 @@ import { DrawingContext } from '../../../context/DrawingProvider';
 import { useDrawingArea } from '../../../hooks';
 import ChartsPiecewiseGradient from './ChartsPiecewiseGradient';
 import ChartsContinuousGradient from './ChartsContinuousGradient';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
   const {
     chartId
   } = React.useContext(DrawingContext);
-  return React.useCallback((axisId, direction) => `${chartId}-graient-${direction}-${axisId}`, [chartId]);
+  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 export function ChartsAxesGradients() {
   const {
@@ -41,7 +40,7 @@ export function ChartsAxesGradients() {
       } = yAxis[axisId];
       if (colorMap?.type === 'piecewise') {
         return /*#__PURE__*/_jsx(ChartsPiecewiseGradient, {
-          isReveresed: !reverse,
+          isReversed: !reverse,
           scale: scale,
           colorMap: colorMap,
           size: svgHeight,
@@ -51,7 +50,7 @@ export function ChartsAxesGradients() {
       }
       if (colorMap?.type === 'continuous') {
         return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReveresed: !reverse,
+          isReversed: !reverse,
           scale: scale,
           colorScale: colorScale,
           colorMap: colorMap,
@@ -71,7 +70,7 @@ export function ChartsAxesGradients() {
       } = xAxis[axisId];
       if (colorMap?.type === 'piecewise') {
         return /*#__PURE__*/_jsx(ChartsPiecewiseGradient, {
-          isReveresed: reverse,
+          isReversed: reverse,
           scale: scale,
           colorMap: colorMap,
           size: svgWidth,
@@ -81,7 +80,7 @@ export function ChartsAxesGradients() {
       }
       if (colorMap?.type === 'continuous') {
         return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReveresed: reverse,
+          isReversed: reverse,
           scale: scale,
           colorScale: colorScale,
           colorMap: colorMap,

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

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;
 export default function ChartsContinuousGradient(props) {
   const {
-    isReveresed,
+    isReversed,
     gradientId,
     size,
     direction,
@@ -26,7 +26,7 @@ export default function ChartsContinuousGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReveresed ? 1 : 2}`]: `${size}px`,
+    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
     gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
     ,
     children: Array.from({
@@ -40,7 +40,7 @@ export default function ChartsContinuousGradient(props) {
       if (x === undefined) {
         return null;
       }
-      const offset = isReveresed ? 1 - x / size : x / size;
+      const offset = isReversed ? 1 - x / size : x / size;
       const color = colorScale(value);
       if (color === null) {
         return null;

package/modern/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ChartsPiecewiseGradient(props) {
   const {
-    isReveresed,
+    isReversed,
     gradientId,
     size,
     direction,
@@ -16,7 +15,7 @@ export default function ChartsPiecewiseGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReveresed ? 1 : 2}`]: `${size}px`,
+    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
     gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
     ,
     children: colorMap.thresholds.map((threshold, index) => {
@@ -24,7 +23,7 @@ export default function ChartsPiecewiseGradient(props) {
       if (x === undefined) {
         return null;
       }
-      const offset = isReveresed ? 1 - x / size : x / size;
+      const offset = isReversed ? 1 - x / size : x / size;
       return /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx("stop", {
           offset: offset,

package/modern/internals/utils.js

@@ -4,7 +4,7 @@ export function getSymbol(shape) {
   return symbolNames.indexOf(shape) || 0;
 }
 /**
- * Transform mouse event position to corrdinates inside the SVG.
+ * Transform mouse event position to coordinates inside the SVG.
  * @param svg The SVG element
  * @param event The mouseEvent to transform
  */

package/modern/models/z-axis.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -11,7 +11,8 @@
   "homepage": "https://mui.com/x/react-charts/",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "build"
   },
   "keywords": [
     "react",
@@ -69,9 +70,6 @@
       "default": "./esm/*/index.js"
     }
   },
-  "setupFiles": [
-    "<rootDir>/src/setupTests.js"
-  ],
   "engines": {
     "node": ">=14.0.0"
   },