@mui/x-charts 7.0.0-beta.5 → 7.0.0-beta.6

package/modern/PieChart/PieChart.js

@@ -8,6 +8,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
+import { useIsRTL } from '../internals/useIsRTL';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
@@ -16,6 +17,12 @@ const defaultMargin = {
   left: 5,
   right: 100
 };
+const defaultRTLMargin = {
+  top: 5,
+  bottom: 5,
+  left: 100,
+  right: 5
+};
 
 /**
  * Demos:
@@ -45,13 +52,7 @@ function PieChart(props) {
       y: 'none'
     },
     skipAnimation,
-    legend = {
-      direction: 'column',
-      position: {
-        vertical: 'middle',
-        horizontal: 'right'
-      }
-    },
+    legend: legendProps,
     topAxis = null,
     leftAxis = null,
     rightAxis = null,
@@ -61,7 +62,15 @@ function PieChart(props) {
     slotProps,
     onItemClick
   } = props;
-  const margin = _extends({}, defaultMargin, marginProps);
+  const isRTL = useIsRTL();
+  const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
+  const legend = _extends({
+    direction: 'column',
+    position: {
+      vertical: 'middle',
+      horizontal: isRTL ? 'left' : 'right'
+    }
+  }, legendProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     series: series.map(s => _extends({
       type: 'pie'
@@ -131,10 +140,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -180,10 +191,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -239,10 +252,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -300,10 +315,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -344,10 +361,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
@@ -379,10 +398,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   }))

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -132,10 +132,12 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
@@ -167,10 +169,12 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   }))

package/modern/ScatterChart/ScatterChart.js

@@ -121,10 +121,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -182,10 +184,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -241,10 +245,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -297,10 +303,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -346,10 +354,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
@@ -381,10 +391,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   }))

package/modern/SparkLineChart/SparkLineChart.js

@@ -247,10 +247,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })

package/modern/hooks/useTicks.js

@@ -13,12 +13,20 @@ export function getTickNumber(params) {
   const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
+const offsetRatio = {
+  start: 0,
+  extremities: 0,
+  end: 1,
+  middle: 0.5
+};
 export function useTicks(options) {
   const {
     scale,
     tickNumber,
     valueFormatter,
-    tickInterval
+    tickInterval,
+    tickPlacement = 'extremities',
+    tickLabelPlacement = 'middle'
   } = options;
   return React.useMemo(() => {
     // band scale
@@ -28,21 +36,25 @@ export function useTicks(options) {
         // scale type = 'band'
         return [...domain.map(value => ({
           value,
-          formattedValue: valueFormatter?.(value) ?? `${value}`,
-          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
-          labelOffset: scale.step() / 2
-        })), {
+          formattedValue: valueFormatter?.(value, {
+            location: 'tick'
+          }) ?? `${value}`,
+          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
+          labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
+        })), ...(tickPlacement === 'extremities' ? [{
           formattedValue: undefined,
           offset: scale.range()[1],
           labelOffset: 0
-        }];
+        }] : [])];
       }
 
       // scale type = 'point'
       const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
       return filteredDomain.map(value => ({
         value,
-        formattedValue: valueFormatter?.(value) ?? `${value}`,
+        formattedValue: valueFormatter?.(value, {
+          location: 'tick'
+        }) ?? `${value}`,
         offset: scale(value),
         labelOffset: 0
       }));
@@ -50,9 +62,11 @@ export function useTicks(options) {
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
     return ticks.map(value => ({
       value,
-      formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value),
+      formattedValue: valueFormatter?.(value, {
+        location: 'tick'
+      }) ?? scale.tickFormat(tickNumber)(value),
       offset: scale(value),
       labelOffset: 0
     }));
-  }, [tickNumber, scale, valueFormatter, tickInterval]);
+  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacement]);
 }

package/modern/index.js

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

package/modern/internals/useIsRTL.js

@@ -0,0 +1,5 @@
+import { useTheme } from '@mui/material/styles';
+export const useIsRTL = () => {
+  const theme = useTheme();
+  return theme.direction === 'rtl';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.0.0-beta.5",
+  "version": "7.0.0-beta.6",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -28,7 +28,7 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.0",
     "@mui/base": "^5.0.0-beta.36",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",