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

package/modern/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/modern/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.0.0-alpha.9",
+  "version": "6.18.1",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -27,7 +27,10 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.11",
+    "@babel/runtime": "^7.23.2",
+    "@mui/base": "^5.0.0-beta.22",
+    "@react-spring/rafz": "^9.7.3",
+    "@react-spring/web": "^9.7.3",
     "clsx": "^2.0.0",
     "d3-color": "^3.1.0",
     "d3-scale": "^4.0.2",
@@ -53,13 +56,13 @@
   "exports": {
     ".": {
       "types": "./index.d.ts",
-      "require": "./index.js",
-      "import": "./esm/index.js"
+      "import": "./esm/index.js",
+      "default": "./esm/index.js"
     },
     "./*": {
       "types": "./*/index.d.ts",
-      "require": "./*/index.js",
-      "import": "./esm/*/index.js"
+      "import": "./esm/*/index.js",
+      "default": "./esm/*/index.js"
     }
   },
   "setupFiles": [

package/themeAugmentation/components.d.ts

@@ -13,6 +13,7 @@ export interface ChartsComponents {
   };
   MuiChartsAxisHighlight?: {
     defaultProps?: ComponentsProps['MuiChartsAxisHighlight'];
+    styleOverrides?: ComponentsOverrides['MuiChartsAxisHighlight'];
   };
   MuiChartsClipPath?: {
     defaultProps?: ComponentsProps['MuiChartsClipPath'];

package/themeAugmentation/overrides.d.ts

@@ -1,11 +1,13 @@
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisClassKey } from '../ChartsAxis';
+import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
 import { ChartsLegendClassKey } from '../ChartsLegend';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
 
 // prettier-ignore
 export interface PickersComponentNameToClassKey {
   MuiChartsAxis: ChartsAxisClassKey;
+  MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
 
   // BarChart components