@mui/x-charts 6.0.0-alpha.9 → 6.18.0

package/esm/context/CartesianContextProvider.js

@@ -10,9 +10,10 @@ 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 { getTickNumber } from '../hooks/useTicks';
 import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
 
 // TODO: those might be better placed in a distinct file
 const xExtremumGetters = {
@@ -31,6 +32,12 @@ export const CartesianContext = /*#__PURE__*/React.createContext({
   xAxisIds: [],
   yAxisIds: []
 });
+
+/**
+ * API:
+ *
+ * - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
+ */
 function CartesianContextProvider({
   xAxis: inXAxis,
   yAxis: inYAxis,
@@ -104,20 +111,21 @@ function CartesianContextProvider({
       const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis);
       const range = [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
-        var _axis$categoryGapRati;
+        var _axis$categoryGapRati, _axis$barGapRatio;
         const categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
+        const barGapRatio = (_axis$barGapRatio = axis.barGapRatio) != null ? _axis$barGapRatio : DEFAULT_BAR_GAP_RATIO;
         completedXAxis[axis.id] = _extends({
           categoryGapRatio,
-          barGapRatio: 0
+          barGapRatio
         }, axis, {
           scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (isPointScaleConfig(axis)) {
         completedXAxis[axis.id] = _extends({}, axis, {
           scale: scalePoint(axis.data, range),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -126,17 +134,17 @@ function CartesianContextProvider({
       }
       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, {
+      const tickNumber = getTickNumber(_extends({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [(_axis$min2 = axis.min) != null ? _axis$min2 : niceDomain[0], (_axis$max2 = axis.max) != null ? _axis$max2 : niceDomain[1]];
       completedXAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     const allYAxis = [...((_yAxis$map = yAxis == null ? void 0 : yAxis.map((axis, index) => _extends({
@@ -161,13 +169,13 @@ function CartesianContextProvider({
           barGapRatio: 0
         }, axis, {
           scale: scaleBand(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (isPointScaleConfig(axis)) {
         completedYAxis[axis.id] = _extends({}, axis, {
           scale: scalePoint(axis.data, [range[1], range[0]]),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -176,17 +184,17 @@ function CartesianContextProvider({
       }
       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, {
+      const tickNumber = getTickNumber(_extends({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [(_axis$min4 = axis.min) != null ? _axis$min4 : niceDomain[0], (_axis$max4 = axis.max) != null ? _axis$max4 : niceDomain[1]];
       completedYAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     return {
@@ -226,6 +234,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -234,6 +243,9 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -252,6 +264,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -260,6 +273,9 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/esm/context/DrawingProvider.js

@@ -9,12 +9,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const DrawingContext = /*#__PURE__*/React.createContext({
   top: 0,
   left: 0,
+  bottom: 0,
+  right: 0,
   height: 300,
   width: 400
 });
 export const SVGContext = /*#__PURE__*/React.createContext({
   current: null
 });
+
+/**
+ * API:
+ *
+ * - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/)
+ */
 function DrawingProvider({
   width,
   height,

package/esm/hooks/useChartDimensions.js

@@ -6,6 +6,8 @@ const useChartDimensions = (width, height, margin) => {
   const drawingArea = React.useMemo(() => ({
     left: defaultizedMargin.left,
     top: defaultizedMargin.top,
+    right: defaultizedMargin.right,
+    bottom: defaultizedMargin.bottom,
     width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right),
     height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom)
   }), [width, height, defaultizedMargin.top, defaultizedMargin.bottom, defaultizedMargin.left, defaultizedMargin.right]);

package/esm/hooks/useMounted.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+export function useMounted(defer = false) {
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    if (!defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  React.useEffect(() => {
+    if (defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  return mountedState;
+}

package/esm/hooks/useReducedMotion.js

@@ -0,0 +1,27 @@
+import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
+
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * 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
+ */
+export const useReducedMotion = () => {
+  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+
+  useIsomorphicLayoutEffect(() => {
+    const mql = window.matchMedia('(prefers-reduced-motion)');
+    const handleMediaChange = e => {
+      Globals.assign({
+        // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+        skipAnimation: e.matches || undefined
+      });
+    };
+    handleMediaChange(mql);
+    mql.addEventListener('change', handleMediaChange);
+    return () => {
+      mql.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+};

package/esm/hooks/useTicks.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
-export function getTicksNumber(params) {
+export function getTickNumber(params) {
   const {
     tickMaxStep,
     tickMinStep,
@@ -16,8 +16,9 @@ export function getTicksNumber(params) {
 function useTicks(options) {
   const {
     scale,
-    ticksNumber,
-    valueFormatter
+    tickNumber,
+    valueFormatter,
+    tickInterval
   } = options;
   return React.useMemo(() => {
     // band scale
@@ -28,7 +29,8 @@ function useTicks(options) {
         return [...domain.map(value => {
           var _valueFormatter;
           return {
-            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
+            value,
+            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : `${value}`,
             offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
             labelOffset: scale.step() / 2
           };
@@ -40,23 +42,27 @@ function useTicks(options) {
       }
 
       // scale type = 'point'
-      return domain.map(value => {
+      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+      return filteredDomain.map(value => {
         var _valueFormatter2;
         return {
-          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : value,
+          value,
+          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : `${value}`,
           offset: scale(value),
           labelOffset: 0
         };
       });
     }
-    return scale.ticks(ticksNumber).map(value => {
+    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(value => {
       var _valueFormatter3;
       return {
-        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(ticksNumber)(value),
+        value,
+        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(tickNumber)(value),
         offset: scale(value),
         labelOffset: 0
       };
     });
-  }, [ticksNumber, scale, valueFormatter]);
+  }, [tickNumber, scale, valueFormatter, tickInterval]);
 }
 export default useTicks;

package/esm/internals/components/AxisSharedComponents.js

@@ -5,77 +5,22 @@ export const AxisRoot = styled('g', {
   name: 'MuiChartsAxis',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})({
-  [`&.${axisClasses.directionY}`]: {
-    [`.${axisClasses.tickLabel}`]: {
-      dominantBaseline: 'middle'
-    },
-    [`.${axisClasses.label}`]: {
-      dominantBaseline: 'auto',
-      textAnchor: 'middle'
-    }
-  },
-  [`&.${axisClasses.left}`]: {
-    [`.${axisClasses.tickLabel}`]: {
-      dominantBaseline: 'central',
-      textAnchor: 'end'
-    }
-  },
-  [`&.${axisClasses.right}`]: {
-    [`.${axisClasses.tickLabel}`]: {
-      dominantBaseline: 'central',
-      textAnchor: 'start'
-    }
-  },
-  [`&.${axisClasses.bottom}`]: {
-    [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      dominantBaseline: 'hanging',
-      textAnchor: 'middle'
-    }
-  },
-  [`&.${axisClasses.top}`]: {
-    [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      dominantBaseline: 'baseline',
-      textAnchor: 'middle'
-    }
-  }
-});
-export const ChartsLine = styled('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
-})(({
-  theme
-}) => ({
-  stroke: theme.palette.text.primary,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));
-export const ChartsTick = styled('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Tick',
-  overridesResolver: (props, styles) => styles.tick
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
-  shapeRendering: 'crispEdges'
-}));
-export const ChartsTickLabel = styled('text', {
-  name: 'MuiChartsAxis',
-  slot: 'TickLabel',
-  overridesResolver: (props, styles) => styles.tickLabel
-})(({
-  theme
-}) => _extends({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
-}));
-export const ChartsLabel = styled('text', {
-  name: 'MuiChartsAxis',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
-})(({
-  theme
-}) => _extends({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
+  [`& .${axisClasses.tickLabel}`]: _extends({}, theme.typography.caption, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${axisClasses.label}`]: _extends({}, theme.typography.body1, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${axisClasses.line}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1
+  },
+  [`& .${axisClasses.tick}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges'
+  }
 }));

package/esm/internals/components/ChartsText.js

@@ -0,0 +1,77 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["x", "y", "style", "text", "ownerState"],
+  _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
+import * as React from 'react';
+import { getStringSize } from '../domUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getWordsByLines({
+  style,
+  needsComputation,
+  text
+}) {
+  return text.split('\n').map(subText => _extends({
+    text: subText
+  }, needsComputation ? getStringSize(subText, style) : {
+    width: 0,
+    height: 0
+  }));
+}
+export function ChartsText(props) {
+  const {
+      x,
+      y,
+      style: styleProps,
+      text
+    } = props,
+    textProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const _ref = styleProps != null ? styleProps : {},
+    {
+      angle,
+      textAnchor,
+      dominantBaseline
+    } = _ref,
+    style = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  const wordsByLines = React.useMemo(() => getWordsByLines({
+    style,
+    needsComputation: text.includes('\n'),
+    text
+  }), [style, text]);
+  let startDy;
+  switch (dominantBaseline) {
+    case 'hanging':
+      startDy = 0;
+      break;
+    case 'central':
+      startDy = (wordsByLines.length - 1) / 2 * -wordsByLines[0].height;
+      break;
+    default:
+      startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
+      break;
+  }
+  const transforms = [];
+  // if (scaleToFit) {
+  //   const lineWidth = wordsByLines[0].width;
+  //   transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`);
+  // }
+  if (angle) {
+    transforms.push(`rotate(${angle}, ${x}, ${y})`);
+  }
+  if (transforms.length) {
+    textProps.transform = transforms.join(' ');
+  }
+  return /*#__PURE__*/_jsx("text", _extends({}, textProps, {
+    x: x,
+    y: y,
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline,
+    style: style,
+    children: wordsByLines.map((line, index) => /*#__PURE__*/_jsx("tspan", {
+      x: x,
+      dy: `${index === 0 ? startDy : wordsByLines[0].height}px`,
+      dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+      ,
+      children: line.text
+    }, index))
+  }));
+}

package/esm/internals/domUtils.js

@@ -0,0 +1,113 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// DOM utils taken from
+// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
+
+const isSsr = () => !(typeof window !== 'undefined' && window.document && window.setTimeout);
+const stringCache = {
+  widthCache: {},
+  cacheCount: 0
+};
+const MAX_CACHE_NUM = 2000;
+const SPAN_STYLE = {
+  position: 'absolute',
+  top: '-20000px',
+  left: 0,
+  padding: 0,
+  margin: 0,
+  border: 'none',
+  whiteSpace: 'pre'
+};
+const STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
+const MEASUREMENT_SPAN_ID = 'mui_measurement_span';
+
+/**
+ *
+ * @param name CSS property name
+ * @param value
+ * @returns add 'px' for distance properties
+ */
+function autoCompleteStyle(name, value) {
+  if (STYLE_LIST.indexOf(name) >= 0 && value === +value) {
+    return `${value}px`;
+  }
+  return value;
+}
+
+/**
+ *
+ * @param text camelcase css property
+ * @returns css property
+ */
+function camelToMiddleLine(text) {
+  const strs = text.split('');
+  const formatStrs = strs.reduce((result, entry) => {
+    if (entry === entry.toUpperCase()) {
+      return [...result, '-', entry.toLowerCase()];
+    }
+    return [...result, entry];
+  }, []);
+  return formatStrs.join('');
+}
+
+/**
+ *
+ * @param style React style object
+ * @returns CSS styling string
+ */
+export const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
+
+/**
+ *
+ * @param text The string to estimate
+ * @param style The style applied
+ * @returns width and height of the text
+ */
+export const getStringSize = (text, style = {}) => {
+  if (text === undefined || text === null || isSsr()) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  const str = `${text}`;
+  const styleString = getStyleString(style);
+  const cacheKey = `${str}-${styleString}`;
+  if (stringCache.widthCache[cacheKey]) {
+    return stringCache.widthCache[cacheKey];
+  }
+  try {
+    let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+    if (measurementSpan === null) {
+      measurementSpan = document.createElement('span');
+      measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
+      measurementSpan.setAttribute('aria-hidden', 'true');
+      document.body.appendChild(measurementSpan);
+    }
+    // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
+    // https://en.wikipedia.org/wiki/Content_Security_Policy
+    const measurementSpanStyle = _extends({}, SPAN_STYLE, style);
+    Object.keys(measurementSpanStyle).map(styleKey => {
+      measurementSpan.style[camelToMiddleLine(styleKey)] = autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);
+      return styleKey;
+    });
+    measurementSpan.textContent = str;
+    const rect = measurementSpan.getBoundingClientRect();
+    const result = {
+      width: rect.width,
+      height: rect.height
+    };
+    stringCache.widthCache[cacheKey] = result;
+    if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) {
+      stringCache.cacheCount = 0;
+      stringCache.widthCache = {};
+    } else {
+      stringCache.cacheCount += 1;
+    }
+    return result;
+  } catch (e) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+};

package/esm/internals/geometry.js

@@ -0,0 +1,36 @@
+const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
+
+let warnedOnce = false;
+
+/**
+ * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
+ * This assumes that all rectangles have the same height and angle between -90 and 90.
+ * Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
+ * @param width the side along the x axis.
+ * @param height the side along the y axis.
+ * @param angle the rotation in degrees.
+ */
+export function getMinXTranslation(width, height, angle = 0) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce && angle > 90 && angle < -90) {
+      warnedOnce = true;
+      console.warn([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
+    }
+  }
+  const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]
+
+  if (standardAngle < ANGLE_APPROX) {
+    // It's nearly horizontal
+    return width;
+  }
+  if (standardAngle > 90 - ANGLE_APPROX) {
+    // It's nearly vertical
+    return height;
+  }
+  const radAngle = standardAngle * Math.PI / 180;
+  const angleSwich = Math.atan2(height, width);
+  if (radAngle < angleSwich) {
+    return width / Math.cos(radAngle);
+  }
+  return height / Math.sin(radAngle);
+}

package/hooks/useAxisEvents.js

@@ -9,8 +9,8 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 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 _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 && Object.prototype.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 useAxisEvents = disableAxisListener => {
   const svgRef = React.useContext(_DrawingProvider.SVGContext);
   const {

package/hooks/useChartDimensions.d.ts

@@ -2,6 +2,8 @@ import { LayoutConfig } from '../models/layout';
 declare const useChartDimensions: (width: number, height: number, margin: LayoutConfig['margin']) => {
     left: number;
     top: number;
+    right: number;
+    bottom: number;
     width: number;
     height: number;
 };

package/hooks/useChartDimensions.js

@@ -8,17 +8,18 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _constants = require("../constants");
-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 _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 && Object.prototype.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 useChartDimensions = (width, height, margin) => {
   const defaultizedMargin = (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, margin);
   const drawingArea = React.useMemo(() => ({
     left: defaultizedMargin.left,
     top: defaultizedMargin.top,
+    right: defaultizedMargin.right,
+    bottom: defaultizedMargin.bottom,
     width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right),
     height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom)
   }), [width, height, defaultizedMargin.top, defaultizedMargin.bottom, defaultizedMargin.left, defaultizedMargin.right]);
   return drawingArea;
 };
-var _default = useChartDimensions;
-exports.default = _default;
+var _default = exports.default = useChartDimensions;