@mui/x-charts 8.0.0-alpha.12 → 8.0.0-alpha.14

package/esm/hooks/useTicks.js

@@ -29,12 +29,13 @@ export function useTicks(options) {
     valueFormatter,
     tickInterval,
     tickPlacement = 'extremities',
-    tickLabelPlacement = 'middle'
+    tickLabelPlacement: tickLabelPlacementProp
   } = options;
   return React.useMemo(() => {
     // band scale
     if (isBandScale(scale)) {
       const domain = scale.domain();
+      const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
         const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
@@ -71,15 +72,20 @@ export function useTicks(options) {
     if (domain.some(isInfinity)) {
       return [];
     }
+    const tickLabelPlacement = tickLabelPlacementProp;
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
-    return ticks.map(value => ({
-      value,
-      formattedValue: valueFormatter?.(value, {
-        location: 'tick',
-        scale
-      }) ?? scale.tickFormat(tickNumber)(value),
-      offset: scale(value),
-      labelOffset: 0
-    }));
-  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacement]);
+    return ticks.map((value, i) => {
+      return {
+        value,
+        formattedValue: valueFormatter?.(value, {
+          location: 'tick',
+          scale
+        }) ?? scale.tickFormat(tickNumber)(value),
+        offset: scale(value),
+        // Allowing the label to be placed in the middle of a continuous scale is weird.
+        // But it is useful in some cases, like funnel categories with a linear scale.
+        labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (scale(value) + scale(ticks[i - 1] ?? 0)) / 2 : 0
+      };
+    });
+  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacementProp]);
 }

package/esm/index.d.ts

@@ -20,6 +20,7 @@ export * from "./PieChart/index.js";
 export * from "./ScatterChart/index.js";
 export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
+export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
 export * from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.12
+ * @mui/x-charts v8.0.0-alpha.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -27,6 +27,7 @@ export * from "./PieChart/index.js";
 export * from "./ScatterChart/index.js";
 export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
+export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
 export * from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";

package/esm/internals/clampAngle.d.ts

@@ -0,0 +1,2 @@
+/** Clamp angle to [0, 360[. */
+export declare function clampAngle(angle: number): number;

package/esm/internals/clampAngle.js

@@ -0,0 +1,4 @@
+/** Clamp angle to [0, 360[. */
+export function clampAngle(angle) {
+  return (angle % 360 + 360) % 360;
+}

package/esm/internals/components/AxisSharedComponents.js

@@ -11,9 +11,9 @@ export const AxisRoot = styled('g', {
   [`& .${axisClasses.tickLabel}`]: _extends({}, theme.typography.caption, {
     fill: (theme.vars || theme).palette.text.primary
   }),
-  [`& .${axisClasses.label}`]: _extends({}, theme.typography.body1, {
+  [`& .${axisClasses.label}`]: {
     fill: (theme.vars || theme).palette.text.primary
-  }),
+  },
   [`& .${axisClasses.line}`]: {
     stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',

package/esm/internals/configInit.d.ts

@@ -1,9 +1,16 @@
-import { ChartSeriesType } from "../models/seriesType/config.js";
+import { CartesianChartSeriesType, PolarChartSeriesType } from "../models/seriesType/config.js";
 declare class CartesianSeriesTypes {
-  types: Set<ChartSeriesType>;
+  types: Set<CartesianChartSeriesType>;
   constructor();
-  addType(value: ChartSeriesType): void;
-  getTypes(): Set<keyof import(".").ChartsSeriesConfig>;
+  addType(value: CartesianChartSeriesType): void;
+  getTypes(): Set<"line" | "scatter" | "bar">;
+}
+declare class PolarSeriesTypes {
+  types: Set<PolarChartSeriesType>;
+  constructor();
+  addType(value: PolarChartSeriesType): void;
+  getTypes(): Set<"radar">;
 }
 export declare const cartesianSeriesTypes: CartesianSeriesTypes;
+export declare const polarSeriesTypes: PolarSeriesTypes;
 export {};

package/esm/internals/configInit.js

@@ -1,11 +1,27 @@
-let instance;
+let cartesianInstance;
+let polarInstance;
 class CartesianSeriesTypes {
   constructor() {
     this.types = new Set();
-    if (instance) {
+    if (cartesianInstance) {
       throw new Error('You can only create one instance!');
     }
-    instance = this.types;
+    cartesianInstance = this.types;
+  }
+  addType(value) {
+    this.types.add(value);
+  }
+  getTypes() {
+    return this.types;
+  }
+}
+class PolarSeriesTypes {
+  constructor() {
+    this.types = new Set();
+    if (polarInstance) {
+      throw new Error('You can only create one instance!');
+    }
+    polarInstance = this.types;
   }
   addType(value) {
     this.types.add(value);
@@ -17,4 +33,6 @@ class CartesianSeriesTypes {
 export const cartesianSeriesTypes = new CartesianSeriesTypes();
 cartesianSeriesTypes.addType('bar');
 cartesianSeriesTypes.addType('line');
-cartesianSeriesTypes.addType('scatter');
+cartesianSeriesTypes.addType('scatter');
+export const polarSeriesTypes = new PolarSeriesTypes();
+polarSeriesTypes.addType('radar');

package/esm/internals/defaultizeMargin.d.ts

@@ -0,0 +1,3 @@
+import type { ChartMargin, UseChartDimensionsParameters } from './plugins/corePlugins/useChartDimensions/useChartDimensions.types';
+export declare function defaultizeMargin(input: UseChartDimensionsParameters['margin'], defaultMargin: ChartMargin): ChartMargin;
+export declare function defaultizeMargin(input: UseChartDimensionsParameters['margin'], defaultMargin?: ChartMargin): Partial<ChartMargin> | undefined;

package/esm/internals/defaultizeMargin.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export function defaultizeMargin(input, defaultMargin) {
+  if (typeof input === 'number') {
+    return {
+      top: input,
+      bottom: input,
+      left: input,
+      right: input
+    };
+  }
+  if (defaultMargin) {
+    return _extends({}, defaultMargin, input);
+  }
+  return input;
+}

package/esm/internals/domUtils.js

@@ -58,6 +58,7 @@ function camelToMiddleLine(text) {
  */
 export const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
 let domCleanTimeout;
+
 /**
  *
  * @param text The string to estimate

package/esm/internals/index.d.ts

@@ -15,6 +15,7 @@ export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
+export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
@@ -32,7 +33,11 @@ export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
+export * from "./stackSeries.js";
 export * from "./getCurve.js";
+export * from "./consumeSlots.js";
+export * from "./consumeThemeProps.js";
+export * from "./defaultizeMargin.js";
 export * from "../context/AnimationProvider/index.js";
 export type * from '../context/context.types';
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";

package/esm/internals/index.js

@@ -20,6 +20,7 @@ export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
+export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
@@ -42,7 +43,11 @@ export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
+export * from "./stackSeries.js";
 export * from "./getCurve.js";
+export * from "./consumeSlots.js";
+export * from "./consumeThemeProps.js";
+export * from "./defaultizeMargin.js";
 
 // contexts
 

package/esm/internals/invertTextAnchor.d.ts

@@ -0,0 +1,2 @@
+import { ChartsTextStyle } from "../ChartsText/index.js";
+export declare function invertTextAnchor(textAnchor: ChartsTextStyle['textAnchor']): ChartsTextStyle['textAnchor'];

package/esm/internals/invertTextAnchor.js

@@ -0,0 +1,10 @@
+export function invertTextAnchor(textAnchor) {
+  switch (textAnchor) {
+    case 'start':
+      return 'end';
+    case 'end':
+      return 'start';
+    default:
+      return textAnchor;
+  }
+}

package/esm/internals/isPolar.d.ts

@@ -0,0 +1,7 @@
+import { ChartSeriesType, PolarChartSeriesType, ChartSeriesDefaultized } from "../models/seriesType/config.js";
+export declare function isPolarSeriesType(seriesType: string): seriesType is PolarChartSeriesType;
+export declare function isPolarSeries(series: ChartSeriesDefaultized<ChartSeriesType> & {
+  getColor: (dataIndex: number) => string;
+}): series is ChartSeriesDefaultized<PolarChartSeriesType> & {
+  getColor: (dataIndex: number) => string;
+};

package/esm/internals/isPolar.js

@@ -0,0 +1,7 @@
+import { polarSeriesTypes } from "./configInit.js";
+export function isPolarSeriesType(seriesType) {
+  return polarSeriesTypes.getTypes().has(seriesType);
+}
+export function isPolarSeries(series) {
+  return isPolarSeriesType(series.type);
+}

package/esm/internals/plugins/allPlugins.d.ts

@@ -2,9 +2,10 @@ import { ChartSeriesType } from "../../models/seriesType/config.js";
 import { UseChartCartesianAxisSignature } from "./featurePlugins/useChartCartesianAxis/index.js";
 import { UseChartHighlightSignature } from "./featurePlugins/useChartHighlight/index.js";
 import { UseChartInteractionSignature } from "./featurePlugins/useChartInteraction/index.js";
+import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/index.js";
 import { UseChartVoronoiSignature } from "./featurePlugins/useChartVoronoi/index.js";
 import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
 import { ConvertSignaturesIntoPlugins } from "./models/helpers.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("./models").ChartPlugin<UseChartInteractionSignature> | import("./models").ChartPlugin<UseChartZAxisSignature> | import("./models").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("./models").ChartPlugin<UseChartHighlightSignature> | import("./models").ChartPlugin<UseChartVoronoiSignature>)[];
+export declare const ALL_PLUGINS: (import("./models").ChartPlugin<UseChartInteractionSignature> | import("./models").ChartPlugin<UseChartZAxisSignature> | import("./models").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("./models").ChartPlugin<UseChartHighlightSignature> | import("./models").ChartPlugin<UseChartPolarAxisSignature<any>> | import("./models").ChartPlugin<UseChartVoronoiSignature>)[];

package/esm/internals/plugins/allPlugins.js

@@ -3,6 +3,7 @@
 import { useChartCartesianAxis } from "./featurePlugins/useChartCartesianAxis/index.js";
 import { useChartHighlight } from "./featurePlugins/useChartHighlight/index.js";
 import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.js";
+import { useChartPolarAxis } from "./featurePlugins/useChartPolarAxis/index.js";
 import { useChartVoronoi } from "./featurePlugins/useChartVoronoi/index.js";
 import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.js";
-export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi];
+export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartPolarAxis, useChartInteraction, useChartHighlight, useChartVoronoi];

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.d.ts

@@ -1,3 +1,3 @@
 import { ChartPlugin } from "../../models/index.js";
-import { UseChartDimensionsSignature } from "./useChartDimensions.types.js";
+import type { UseChartDimensionsSignature } from './useChartDimensions.types';
 export declare const useChartDimensions: ChartPlugin<UseChartDimensionsSignature>;

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -6,7 +6,8 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
-import { selectorChartDimensionsState } from "./useChartDimensions.selectors.js";
+import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
+import { defaultizeMargin } from "../../../defaultizeMargin.js";
 const MAX_COMPUTE_RUN = 10;
 export const useChartDimensions = ({
   params,
@@ -32,36 +33,53 @@ export const useChartDimensions = ({
     const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
     const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
     store.update(prev => {
-      const prevWidth = prev.dimensions.width + prev.dimensions.left + prev.dimensions.right;
-      const prevHeight = prev.dimensions.height + prev.dimensions.top + prev.dimensions.bottom;
-      if (prevWidth === newWidth && prevHeight === newHeight) {
+      if (prev.dimensions.width === newWidth && prev.dimensions.height === newHeight) {
         return prev;
       }
       return _extends({}, prev, {
-        dimensions: _extends({}, prev.dimensions, {
-          width: newWidth - prev.dimensions.left - prev.dimensions.right,
-          height: newHeight - prev.dimensions.top - prev.dimensions.bottom
-        })
+        dimensions: {
+          margin: {
+            top: params.margin.top,
+            right: params.margin.right,
+            bottom: params.margin.bottom,
+            left: params.margin.left
+          },
+          width: params.width ?? newWidth,
+          height: params.height ?? newHeight,
+          propsWidth: params.width,
+          propsHeight: params.height
+        }
       });
     });
     return {
       height: newHeight,
       width: newWidth
     };
-  }, [store, svgRef]);
-  store.update(prev => {
-    if ((params.width === undefined || prev.dimensions.propsWidth === params.width) && (params.height === undefined || prev.dimensions.propsHeight === params.height)) {
-      return prev;
-    }
-    return _extends({}, prev, {
-      dimensions: _extends({}, prev.dimensions, {
-        width: params.width === undefined ? prev.dimensions.width : params.width - prev.dimensions.left - prev.dimensions.right,
-        height: params.height === undefined ? prev.dimensions.height : params.height - prev.dimensions.top - prev.dimensions.bottom,
-        propsWidth: params.width,
-        propsHeight: params.height
-      })
+  }, [store, svgRef, params.height, params.width,
+  // Margin is an object, so we need to include all the properties to prevent infinite loops.
+  params.margin.left, params.margin.right, params.margin.top, params.margin.bottom]);
+  React.useEffect(() => {
+    store.update(prev => {
+      const width = params.width ?? prev.dimensions.width;
+      const height = params.height ?? prev.dimensions.height;
+      return _extends({}, prev, {
+        dimensions: {
+          margin: {
+            top: params.margin.top,
+            right: params.margin.right,
+            bottom: params.margin.bottom,
+            left: params.margin.left
+          },
+          width,
+          height,
+          propsHeight: params.height,
+          propsWidth: params.width
+        }
+      });
     });
-  });
+  }, [store, params.height, params.width,
+  // Margin is an object, so we need to include all the properties to prevent infinite loops.
+  params.margin.left, params.margin.right, params.margin.top, params.margin.bottom]);
   React.useEffect(() => {
     // Ensure the error detection occurs after the first rendering.
     stateRef.current.displayError = true;
@@ -134,7 +152,7 @@ export const useChartDimensions = ({
     if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = selectorChartDimensionsState(store.value);
+    const drawingArea = selectorChartDrawingArea(store.value);
     const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
     const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
     if (options?.direction === 'x') {
@@ -159,17 +177,20 @@ useChartDimensions.params = {
 useChartDimensions.getDefaultizedParams = ({
   params
 }) => _extends({}, params, {
-  margin: params.margin ? _extends({}, DEFAULT_MARGINS, params.margin) : DEFAULT_MARGINS
+  margin: defaultizeMargin(params.margin, DEFAULT_MARGINS)
 });
 useChartDimensions.getInitialState = ({
   width,
   height,
   margin
-}) => ({
-  dimensions: _extends({}, margin, {
-    width: (width ?? 0) - margin.left - margin.right,
-    height: (height ?? 0) - margin.top - margin.bottom,
-    propsWidth: width,
-    propsHeight: height
-  })
-});
+}) => {
+  return {
+    dimensions: {
+      margin,
+      width: width ?? 0,
+      height: height ?? 0,
+      propsWidth: width,
+      propsHeight: height
+    }
+  };
+};