@mui/x-charts 6.0.0-alpha.2 → 6.0.0-alpha.4

package/esm/ScatterChart/ScatterChart.js

@@ -9,7 +9,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function ScatterChart(props) {
+const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -29,6 +29,7 @@ function ScatterChart(props) {
     children
   } = props;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => _extends({
       type: 'scatter'
     }, s)),
@@ -51,7 +52,7 @@ function ScatterChart(props) {
       trigger: "item"
     }, tooltip)), children]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/context/CartesianContextProvider.js

@@ -5,12 +5,15 @@ import PropTypes from 'prop-types';
 import { getExtremumX as getBarExtremumX, getExtremumY as getBarExtremumY } from '../BarChart/extremums';
 import { getExtremumX as getScatterExtremumX, getExtremumY as getScatterExtremumY } from '../ScatterChart/extremums';
 import { getExtremumX as getLineExtremumX, getExtremumY as getLineExtremumY } from '../LineChart/extremums';
-import { getScale } from '../hooks/useScale';
+import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
+import { getScale } from '../internals/getScale';
 import { DrawingContext } from './DrawingProvider';
 import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { getTicksNumber } from '../hooks/useTicks';
 import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+
 // TODO: those might be better placed in a distinct file
 const xExtremumGetters = {
   bar: getBarExtremumX,
@@ -74,24 +77,29 @@ function CartesianContextProvider({
       var _axis$scaleType, _axis$min, _axis$max, _axis$min2, _axis$max2;
       const isDefaultAxis = axisIndex === 0;
       const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis);
-      const scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       const range = [drawingArea.left, drawingArea.left + drawingArea.width];
-      if (scaleType === 'band') {
-        completedXAxis[axis.id] = _extends({}, axis, {
-          scaleType,
-          scale: scaleBand(axis.data, range),
+      if (isBandScaleConfig(axis)) {
+        var _axis$categoryGapRati;
+        const categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
+        completedXAxis[axis.id] = _extends({
+          categoryGapRatio,
+          barGapRatio: 0
+        }, axis, {
+          scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
-        return;
       }
-      if (scaleType === 'point') {
+      if (isPointScaleConfig(axis)) {
         completedXAxis[axis.id] = _extends({}, axis, {
-          scaleType,
           scale: scalePoint(axis.data, range),
           ticksNumber: axis.data.length
         });
+      }
+      if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+        // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
         return;
       }
+      const scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       const extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
       const ticksNumber = getTicksNumber(_extends({}, axis, {
         range
@@ -119,23 +127,28 @@ function CartesianContextProvider({
       const isDefaultAxis = axisIndex === 0;
       const [minData, maxData] = getAxisExtremum(axis, yExtremumGetters, isDefaultAxis);
       const range = [drawingArea.top + drawingArea.height, drawingArea.top];
-      const scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
-      if (scaleType === 'band') {
-        completedYAxis[axis.id] = _extends({}, axis, {
-          scaleType,
-          scale: scaleBand(axis.data, range),
+      if (isBandScaleConfig(axis)) {
+        var _axis$categoryGapRati2;
+        const categoryGapRatio = (_axis$categoryGapRati2 = axis.categoryGapRatio) != null ? _axis$categoryGapRati2 : DEFAULT_CATEGORY_GAP_RATIO;
+        completedXAxis[axis.id] = _extends({
+          categoryGapRatio,
+          barGapRatio: 0
+        }, axis, {
+          scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
-        return;
       }
-      if (scaleType === 'point') {
-        completedYAxis[axis.id] = _extends({}, axis, {
-          scaleType,
+      if (isPointScaleConfig(axis)) {
+        completedXAxis[axis.id] = _extends({}, axis, {
           scale: scalePoint(axis.data, range),
           ticksNumber: axis.data.length
         });
+      }
+      if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+        // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
         return;
       }
+      const scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
       const extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
       const ticksNumber = getTicksNumber(_extends({}, axis, {
         range

package/esm/context/SeriesContextProvider.js

@@ -16,8 +16,8 @@ const seriesTypeFormatter = {
   pie: pieSeriesFormatter
 };
 /**
- * This methods is the interface between what the developper is providing and what compoenents receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if soe line data are modified
+ * This methods is the interface between what the developer is providing and what components receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
  * It also add defaultized values such as the ids, colors
  * @param series The array of series provided by devs
  * @param colors The color palette used to defaultize series colors

package/esm/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useDrawingArea';
+export * from './useScale';

package/esm/hooks/useAxisEvents.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SVGContext, DrawingContext } from '../context/DrawingProvider';
-import { isBandScale } from './useScale';
+import { isBandScale } from '../internals/isBandScale';
 export const useAxisEvents = disableAxisListener => {
   const svgRef = React.useContext(SVGContext);
   const {
@@ -109,12 +109,17 @@ export const useAxisEvents = disableAxisListener => {
       });
     };
     const handleMouseMove = event => {
+      // Get mouse coordinate in global SVG space
+      const pt = svgRef.current.createSVGPoint();
+      pt.x = event.clientX;
+      pt.y = event.clientY;
+      const svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
       mousePosition.current = {
-        x: event.offsetX,
-        y: event.offsetY
+        x: svgPt.x,
+        y: svgPt.y
       };
-      const outsideX = event.offsetX < left || event.offsetX > left + width;
-      const outsideY = event.offsetY < top || event.offsetY > top + height;
+      const outsideX = svgPt.x < left || svgPt.x > left + width;
+      const outsideY = svgPt.y < top || svgPt.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
           type: 'updateAxis',
@@ -125,8 +130,8 @@ export const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdateX(event.offsetX);
-      const newStateY = getUpdateY(event.offsetY);
+      const newStateX = getUpdateX(svgPt.x);
+      const newStateY = getUpdateY(svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/esm/hooks/useDrawingArea.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { DrawingContext } from '../context/DrawingProvider';
+export function useDrawingArea() {
+  const {
+    left,
+    top,
+    width,
+    height
+  } = React.useContext(DrawingContext);
+  return React.useMemo(() => ({
+    left,
+    top,
+    width,
+    height
+  }), [height, left, top, width]);
+}

package/esm/hooks/useScale.js

@@ -1,24 +1,6 @@
-import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from 'd3-scale';
-export function getScale(scaleType, domain, range) {
-  switch (scaleType) {
-    case 'log':
-      return scaleLog(domain, range);
-    case 'pow':
-      return scalePow(domain, range);
-    case 'sqrt':
-      return scaleSqrt(domain, range);
-    case 'time':
-      return scaleTime(domain, range);
-    case 'utc':
-      return scaleUtc(domain, range);
-    default:
-      return scaleLinear(domain, range);
-  }
-}
-export function isBandScale(scale) {
-  return scale.bandwidth !== undefined;
-}
-
+import * as React from 'react';
+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.
@@ -30,4 +12,20 @@ export function getValueToPositionMapper(scale) {
     return value => scale(value) + scale.bandwidth() / 2;
   }
   return value => scale(value);
+}
+export function useXScale(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = React.useContext(CartesianContext);
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier != null ? identifier : 0];
+  return xAxis[id].scale;
+}
+export function useYScale(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = React.useContext(CartesianContext);
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier != null ? identifier : 0];
+  return yAxis[id].scale;
 }

package/esm/hooks/useTicks.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isBandScale } from './useScale';
+import { isBandScale } from '../internals/isBandScale';
 export function getTicksNumber(params) {
   const {
     maxTicks = 999,
@@ -20,23 +20,36 @@ function useTicks(options) {
     // band scale
     if (isBandScale(scale)) {
       const domain = scale.domain();
-      return [...domain.map(value => {
-        var _valueFormatter, _scale;
+      if (scale.bandwidth() > 0) {
+        // scale type = 'band'
+        return [...domain.map((value, index) => {
+          var _valueFormatter;
+          return {
+            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
+            offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+            labelOffset: scale.step() / 2
+          };
+        }), {
+          formattedValue: undefined,
+          offset: scale.range()[1],
+          labelOffset: 0
+        }];
+      }
+
+      // scale type = 'point'
+      return domain.map(value => {
+        var _valueFormatter2;
         return {
-          formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
-          offset: (_scale = scale(value)) != null ? _scale : 0,
-          labelOffset: scale.bandwidth() / 2
+          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : value,
+          offset: scale(value),
+          labelOffset: 0
         };
-      }), ...(scale.bandwidth() > 0 ? [{
-        formattedValue: undefined,
-        offset: scale.range()[1],
-        labelOffset: 0
-      }] : [])];
+      });
     }
     return scale.ticks(ticksNumber).map(value => {
-      var _valueFormatter2;
+      var _valueFormatter3;
       return {
-        formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : scale.tickFormat(ticksNumber)(value),
+        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(ticksNumber)(value),
         offset: scale(value),
         labelOffset: 0
       };

package/esm/index.js

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './context';
+export * from './hooks';
 export * from './colorPalettes';
 export * from './models';
 export * from './ChartsClipPath';

package/esm/internals/getScale.js

@@ -0,0 +1,17 @@
+import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from 'd3-scale';
+export function getScale(scaleType, domain, range) {
+  switch (scaleType) {
+    case 'log':
+      return scaleLog(domain, range);
+    case 'pow':
+      return scalePow(domain, range);
+    case 'sqrt':
+      return scaleSqrt(domain, range);
+    case 'time':
+      return scaleTime(domain, range);
+    case 'utc':
+      return scaleUtc(domain, range);
+    default:
+      return scaleLinear(domain, range);
+  }
+}

package/esm/internals/isBandScale.js

@@ -0,0 +1,3 @@
+export function isBandScale(scale) {
+  return scale.bandwidth !== undefined;
+}

package/esm/models/axis.js

@@ -1 +1,6 @@
-export {};
+export function isBandScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType === 'band';
+}
+export function isPointScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType === 'point';
+}

package/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDrawingArea';
+export * from './useScale';

package/hooks/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useDrawingArea = require("./useDrawingArea");
+Object.keys(_useDrawingArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useDrawingArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useDrawingArea[key];
+    }
+  });
+});
+var _useScale = require("./useScale");
+Object.keys(_useScale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useScale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useScale[key];
+    }
+  });
+});

package/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/hooks/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/hooks/useAxisEvents.js

@@ -8,7 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
-var _useScale = require("./useScale");
+var _isBandScale = require("../internals/isBandScale");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useAxisEvents = disableAxisListener => {
@@ -49,7 +49,7 @@ const useAxisEvents = disableAxisListener => {
         scale: yScale,
         data: yAxisData
       } = yAxis[usedYAxis];
-      if (!(0, _useScale.isBandScale)(yScale)) {
+      if (!(0, _isBandScale.isBandScale)(yScale)) {
         return {
           value: yScale.invert(y)
         };
@@ -71,7 +71,7 @@ const useAxisEvents = disableAxisListener => {
         scale: xScale,
         data: xAxisData
       } = xAxis[usedXAxis];
-      if (!(0, _useScale.isBandScale)(xScale)) {
+      if (!(0, _isBandScale.isBandScale)(xScale)) {
         const value = xScale.invert(x);
         const closestIndex = xAxisData?.findIndex((v, index) => {
           if (v > value) {
@@ -117,12 +117,17 @@ const useAxisEvents = disableAxisListener => {
       });
     };
     const handleMouseMove = event => {
+      // Get mouse coordinate in global SVG space
+      const pt = svgRef.current.createSVGPoint();
+      pt.x = event.clientX;
+      pt.y = event.clientY;
+      const svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
       mousePosition.current = {
-        x: event.offsetX,
-        y: event.offsetY
+        x: svgPt.x,
+        y: svgPt.y
       };
-      const outsideX = event.offsetX < left || event.offsetX > left + width;
-      const outsideY = event.offsetY < top || event.offsetY > top + height;
+      const outsideX = svgPt.x < left || svgPt.x > left + width;
+      const outsideY = svgPt.y < top || svgPt.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
           type: 'updateAxis',
@@ -133,8 +138,8 @@ const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdateX(event.offsetX);
-      const newStateY = getUpdateY(event.offsetY);
+      const newStateX = getUpdateX(svgPt.x);
+      const newStateY = getUpdateY(svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/hooks/useDrawingArea.d.ts

@@ -0,0 +1,6 @@
+export declare function useDrawingArea(): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};

package/hooks/useDrawingArea.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDrawingArea = useDrawingArea;
+var React = _interopRequireWildcard(require("react"));
+var _DrawingProvider = require("../context/DrawingProvider");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function useDrawingArea() {
+  const {
+    left,
+    top,
+    width,
+    height
+  } = React.useContext(_DrawingProvider.DrawingContext);
+  return React.useMemo(() => ({
+    left,
+    top,
+    width,
+    height
+  }), [height, left, top, width]);
+}

package/hooks/useScale.d.ts

@@ -1,9 +1,4 @@
-import type { ScaleBand, ScaleLogarithmic, ScalePoint, ScalePower, ScaleTime, ScaleLinear } from 'd3-scale';
-import { ContinuouseScaleName } from '../models/axis';
-export type D3Scale = ScaleBand<any> | ScaleLogarithmic<any, any> | ScalePoint<any> | ScalePower<any, any> | ScaleTime<any, any> | ScaleLinear<any, any>;
-export type D3ContinuouseScale = ScaleLogarithmic<any, any> | ScalePower<any, any> | ScaleTime<any, any> | ScaleLinear<any, any>;
-export declare function getScale(scaleType: ContinuouseScaleName, domain: any[], range: any[]): D3ContinuouseScale;
-export declare function isBandScale(scale: D3Scale): scale is ScaleBand<any> | ScalePoint<any>;
+import { D3Scale } from '../models/axis';
 /**
  * For a given scale return a function that map value to their position.
  * Usefull when dealing with specific scale such as band.
@@ -11,3 +6,5 @@ export declare function isBandScale(scale: D3Scale): scale is ScaleBand<any> | S
  * @returns (value: any) => number
  */
 export declare function getValueToPositionMapper(scale: D3Scale): (value: any) => number;
+export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLinear<any, any, never>;
+export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLinear<any, any, never>;

package/hooks/useScale.js

@@ -3,30 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getScale = getScale;
 exports.getValueToPositionMapper = getValueToPositionMapper;
-exports.isBandScale = isBandScale;
-var _d3Scale = require("d3-scale");
-function getScale(scaleType, domain, range) {
-  switch (scaleType) {
-    case 'log':
-      return (0, _d3Scale.scaleLog)(domain, range);
-    case 'pow':
-      return (0, _d3Scale.scalePow)(domain, range);
-    case 'sqrt':
-      return (0, _d3Scale.scaleSqrt)(domain, range);
-    case 'time':
-      return (0, _d3Scale.scaleTime)(domain, range);
-    case 'utc':
-      return (0, _d3Scale.scaleUtc)(domain, range);
-    default:
-      return (0, _d3Scale.scaleLinear)(domain, range);
-  }
-}
-function isBandScale(scale) {
-  return scale.bandwidth !== undefined;
-}
-
+exports.useXScale = useXScale;
+exports.useYScale = useYScale;
+var React = _interopRequireWildcard(require("react"));
+var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _isBandScale = require("../internals/isBandScale");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * For a given scale return a function that map value to their position.
  * Usefull when dealing with specific scale such as band.
@@ -34,8 +18,24 @@ function isBandScale(scale) {
  * @returns (value: any) => number
  */
 function getValueToPositionMapper(scale) {
-  if (isBandScale(scale)) {
+  if ((0, _isBandScale.isBandScale)(scale)) {
     return value => scale(value) + scale.bandwidth() / 2;
   }
   return value => scale(value);
+}
+function useXScale(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id].scale;
+}
+function useYScale(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id].scale;
 }

package/hooks/useTicks.d.ts

@@ -1,4 +1,4 @@
-import { D3Scale } from './useScale';
+import { D3Scale } from '../models/axis';
 export type TickParams = {
     maxTicks?: number;
     minTicks?: number;

package/hooks/useTicks.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getTicksNumber = getTicksNumber;
 var React = _interopRequireWildcard(require("react"));
-var _useScale = require("./useScale");
+var _isBandScale = require("../internals/isBandScale");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function getTicksNumber(params) {
@@ -27,17 +27,27 @@ function useTicks(options) {
   } = options;
   return React.useMemo(() => {
     // band scale
-    if ((0, _useScale.isBandScale)(scale)) {
+    if ((0, _isBandScale.isBandScale)(scale)) {
       const domain = scale.domain();
-      return [...domain.map(value => ({
+      if (scale.bandwidth() > 0) {
+        // scale type = 'band'
+        return [...domain.map((value, index) => ({
+          formattedValue: valueFormatter?.(value) ?? value,
+          offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+          labelOffset: scale.step() / 2
+        })), {
+          formattedValue: undefined,
+          offset: scale.range()[1],
+          labelOffset: 0
+        }];
+      }
+
+      // scale type = 'point'
+      return domain.map(value => ({
         formattedValue: valueFormatter?.(value) ?? value,
-        offset: scale(value) ?? 0,
-        labelOffset: scale.bandwidth() / 2
-      })), ...(scale.bandwidth() > 0 ? [{
-        formattedValue: undefined,
-        offset: scale.range()[1],
+        offset: scale(value),
         labelOffset: 0
-      }] : [])];
+      }));
     }
     return scale.ticks(ticksNumber).map(value => ({
       formattedValue: valueFormatter?.(value) ?? scale.tickFormat(ticksNumber)(value),

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './context';
+export * from './hooks';
 export * from './colorPalettes';
 export * from './models';
 export * from './ChartsClipPath';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.2
+ * @mui/x-charts v6.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -32,6 +32,17 @@ Object.keys(_context).forEach(function (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;

package/internals/getScale.d.ts

@@ -0,0 +1,2 @@
+import { ContinuouseScaleName, D3ContinuouseScale } from '../models/axis';
+export declare function getScale(scaleType: ContinuouseScaleName, domain: any[], range: any[]): D3ContinuouseScale;