@mui/x-charts 6.0.0-alpha.6 → 6.0.0-alpha.8

package/modern/hooks/useAxisEvents.js

@@ -33,66 +33,49 @@ export const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdateY = y => {
-      if (usedYAxis === null) {
-        return null;
-      }
-      const {
-        scale: yScale,
-        data: yAxisData
-      } = yAxis[usedYAxis];
-      if (!isBandScale(yScale)) {
-        return {
-          value: yScale.invert(y)
-        };
-      }
-      const dataIndex = Math.floor((y - yScale.range()[0]) / yScale.step());
-      if (dataIndex < 0 || dataIndex >= yAxisData.length) {
-        return null;
-      }
-      return {
-        index: dataIndex,
-        value: yAxisData[dataIndex]
-      };
-    };
-    const getUpdateX = x => {
+    const getUpdate = (axisConfig, mouseValue) => {
       if (usedXAxis === null) {
         return null;
       }
       const {
-        scale: xScale,
-        data: xAxisData
-      } = xAxis[usedXAxis];
-      if (!isBandScale(xScale)) {
-        const value = xScale.invert(x);
-        const closestIndex = xAxisData?.findIndex((v, index) => {
+        scale,
+        data: axisData
+      } = axisConfig;
+      if (!isBandScale(scale)) {
+        const value = scale.invert(mouseValue);
+        if (axisData === undefined) {
+          return {
+            value
+          };
+        }
+        const closestIndex = axisData?.findIndex((v, index) => {
           if (v > value) {
             // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - xAxisData[index - 1])) {
+            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
               return true;
             }
           }
           if (v <= value) {
-            if (index === xAxisData.length - 1 ||
+            if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - xAxisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
               return true;
             }
           }
           return false;
         });
         return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? xAxisData[closestIndex] : value,
+          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
           index: closestIndex
         };
       }
-      const dataIndex = xScale.bandwidth() === 0 ? Math.floor((x - xScale.range()[0] + xScale.step() / 2) / xScale.step()) : Math.floor((x - xScale.range()[0]) / xScale.step());
-      if (dataIndex < 0 || dataIndex >= xAxisData.length) {
+      const dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min(...scale.range())) / scale.step());
+      if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
       return {
         index: dataIndex,
-        value: xAxisData[dataIndex]
+        value: axisData[dataIndex]
       };
     };
     const handleMouseOut = () => {
@@ -130,8 +113,8 @@ export const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdateX(svgPt.x);
-      const newStateY = getUpdateY(svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/modern/hooks/useTicks.js

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
 export function getTicksNumber(params) {
   const {
-    maxTicks = 999,
-    minTicks = 2,
-    tickSpacing = 50,
-    range
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
   } = params;
-  const estimatedTickNumber = Math.floor(Math.abs(range[1] - range[0]) / tickSpacing);
-  return Math.min(maxTicks, Math.max(minTicks, estimatedTickNumber));
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 function useTicks(options) {
   const {
@@ -22,9 +25,9 @@ function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map((value, index) => ({
+        return [...domain.map(value => ({
           formattedValue: valueFormatter?.(value) ?? value,
-          offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
           labelOffset: scale.step() / 2
         })), {
           formattedValue: undefined,

package/modern/index.js

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

package/modern/internals/components/AxisSharedComponents.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.0.0-alpha.6",
+  "version": "6.0.0-alpha.8",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -27,8 +27,8 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.6",
-    "clsx": "^1.2.1",
+    "@babel/runtime": "^7.22.11",
+    "clsx": "^2.0.0",
     "d3-color": "^3.1.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
@@ -58,8 +58,8 @@
     },
     "./*": {
       "types": "./*/index.d.ts",
-      "require": "./*",
-      "import": "./esm/*"
+      "require": "./*/index.js",
+      "import": "./esm/*/index.js"
     }
   },
   "setupFiles": [

package/themeAugmentation/components.d.ts

@@ -7,19 +7,15 @@ export interface ChartsComponents {
   };
   MuiChartsXAxis?: {
     defaultProps?: ComponentsProps['MuiChartsXAxis'];
-    styleOverrides?: ComponentsOverrides['MuiChartsXAxis'];
   };
   MuiChartsYAxis?: {
     defaultProps?: ComponentsProps['MuiChartsYAxis'];
-    styleOverrides?: ComponentsOverrides['MuiChartsYAxis'];
   };
   MuiChartsAxisHighlight?: {
     defaultProps?: ComponentsProps['MuiChartsAxisHighlight'];
-    styleOverrides?: never; // ComponentsOverrides['MuiChartsAxisHighlight'];
   };
   MuiChartsClipPath?: {
     defaultProps?: ComponentsProps['MuiChartsClipPath'];
-    styleOverrides?: never; // ComponentsOverrides['MuiChartsClipPath'];
   };
   MuiChartsLegend?: {
     defaultProps?: ComponentsProps['MuiChartsLegend'];
@@ -27,15 +23,12 @@ export interface ChartsComponents {
   };
   MuiChartsTooltip?: {
     defaultProps?: ComponentsProps['MuiChartsTooltip'];
-    styleOverrides?: never; // ComponentsOverrides['MuiChartsTooltip'];
   };
   MuiChartsSurface?: {
     defaultProps?: ComponentsProps['MuiChartsSurface'];
-    styleOverrides?: never; // ComponentsOverrides['MuiChartsSurface'];
   };
   MuiBarChart?: {
     defaultProps?: ComponentsProps['MuiBarChart'];
-    styleOverrides?: never; // ComponentsOverrides['MuiBarChart'];
   };
   MuiBarElement?: {
     defaultProps?: ComponentsProps['MuiBarElement'];
@@ -43,7 +36,6 @@ export interface ChartsComponents {
   };
   MuiLineChart?: {
     defaultProps?: ComponentsProps['MuiLineChart'];
-    styleOverrides?: never; // ComponentsOverrides['MuiLineChart'];
   };
   MuiAreaElement?: {
     defaultProps?: ComponentsProps['MuiAreaElement'];
@@ -59,11 +51,9 @@ export interface ChartsComponents {
   };
   MuiScatterChart?: {
     defaultProps?: ComponentsProps['MuiScatterChart'];
-    styleOverrides?: never; // ComponentsOverrides['MuiScatterChart'];
   };
   MuiScatter?: {
     defaultProps?: ComponentsProps['MuiScatter'];
-    styleOverrides?: never; // ComponentsOverrides['MuiScatter'];
   };
 }
 

package/themeAugmentation/overrides.d.ts

@@ -6,8 +6,6 @@ import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '.
 // prettier-ignore
 export interface PickersComponentNameToClassKey {
   MuiChartsAxis: ChartsAxisClassKey;
-  MuiChartsXAxis:  ChartsAxisClassKey;
-  MuiChartsYAxis:  ChartsAxisClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
 
   // BarChart components