@mui/x-charts 8.9.0 → 8.10.0

package/internals/symlogScale.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scaleSymlog = scaleSymlog;
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+function scaleSymlog(_domain, _range) {
+  const scale = (0, _d3Scale.scaleSymlog)(_domain, _range);
+  const originalTicks = scale.ticks;
+  const {
+    negativeScale,
+    linearScale,
+    positiveScale
+  } = generateScales(scale);
+
+  // Workaround for https://github.com/d3/d3-scale/issues/162
+  scale.ticks = count => {
+    const ticks = originalTicks(count);
+    const constant = scale.constant();
+    let negativeLogTickCount = 0;
+    let linearTickCount = 0;
+    let positiveLogTickCount = 0;
+    ticks.forEach(tick => {
+      if (tick > -constant && tick < constant) {
+        linearTickCount += 1;
+      }
+      if (tick <= -constant) {
+        negativeLogTickCount += 1;
+      }
+      if (tick >= constant) {
+        positiveLogTickCount += 1;
+      }
+    });
+    const finalTicks = [];
+    if (negativeLogTickCount > 0) {
+      finalTicks.push(...negativeScale.ticks(negativeLogTickCount));
+    }
+    if (linearTickCount > 0) {
+      const linearTicks = linearScale.ticks(linearTickCount);
+      if (finalTicks.at(-1) === linearTicks[0]) {
+        finalTicks.push(...linearTicks.slice(1));
+      } else {
+        finalTicks.push(...linearTicks);
+      }
+    }
+    if (positiveLogTickCount > 0) {
+      const positiveTicks = positiveScale.ticks(positiveLogTickCount);
+      if (finalTicks.at(-1) === positiveTicks[0]) {
+        finalTicks.push(...positiveTicks.slice(1));
+      } else {
+        finalTicks.push(...positiveTicks);
+      }
+    }
+    return finalTicks;
+  };
+  scale.tickFormat = (count = 10, specifier) => {
+    // Calculates the proportion of the domain that each scale occupies, and use that ratio to determine the number of ticks for each scale.
+    const constant = scale.constant();
+    const [start, end] = scale.domain();
+    const extent = end - start;
+    const negativeScaleDomain = negativeScale.domain();
+    const negativeScaleExtent = negativeScaleDomain[1] - negativeScaleDomain[0];
+    const negativeScaleRatio = extent === 0 ? 0 : negativeScaleExtent / extent;
+    const negativeScaleTickCount = negativeScaleRatio * count;
+    const linearScaleDomain = linearScale.domain();
+    const linearScaleExtent = linearScaleDomain[1] - linearScaleDomain[0];
+    const linearScaleRatio = extent === 0 ? 0 : linearScaleExtent / extent;
+    const linearScaleTickCount = linearScaleRatio * count;
+    const positiveScaleDomain = positiveScale.domain();
+    const positiveScaleExtent = positiveScaleDomain[1] - positiveScaleDomain[0];
+    const positiveScaleRatio = extent === 0 ? 0 : positiveScaleExtent / extent;
+    const positiveScaleTickCount = positiveScaleRatio * count;
+    const negativeTickFormat = negativeScale.tickFormat(negativeScaleTickCount, specifier);
+    const linearTickFormat = linearScale.tickFormat(linearScaleTickCount, specifier);
+    const positiveTickFormat = positiveScale.tickFormat(positiveScaleTickCount, specifier);
+    return tick => {
+      const tickFormat =
+      // eslint-disable-next-line no-nested-ternary
+      tick.valueOf() <= -constant ? negativeTickFormat : tick.valueOf() >= constant ? positiveTickFormat : linearTickFormat;
+      return tickFormat(tick);
+    };
+  };
+  return scale;
+}
+function generateScales(scale) {
+  const constant = scale.constant();
+  const domain = scale.domain();
+  const negativeDomain = [domain[0], Math.min(domain[1], -constant)];
+  const negativeLogScale = (0, _d3Scale.scaleLog)(negativeDomain, scale.range());
+  const linearDomain = [Math.max(domain[0], -constant), Math.min(domain[1], constant)];
+  const linearScale = (0, _d3Scale.scaleLinear)(linearDomain, scale.range());
+  const positiveDomain = [Math.max(domain[0], constant), domain[1]];
+  const positiveLogScale = (0, _d3Scale.scaleLog)(positiveDomain, scale.range());
+  return {
+    negativeScale: negativeLogScale,
+    linearScale,
+    positiveScale: positiveLogScale
+  };
+}

package/models/axis.d.ts

@@ -1,4 +1,4 @@
-import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleSequential, ScaleThreshold, ScaleTime } from '@mui/x-charts-vendor/d3-scale';
+import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleSequential, ScaleThreshold, ScaleTime, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
 import { SxProps } from '@mui/system/styleFunctionSx';
 import { type MakeOptional, MakeRequired } from '@mui/x-internals/types';
 import type { DefaultizedZoomOptions } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
@@ -9,8 +9,8 @@ import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from
 export type AxisId = string | number;
 export type D3Scale<Domain extends {
   toString(): string;
-} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
-export type D3ContinuousScale<Range = number, Output = number> = ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+export type D3ContinuousScale<Range = number, Output = number> = ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export interface ChartsAxisSlots {
   /**
    * Custom component for the axis main line.
@@ -179,7 +179,22 @@ export interface ChartsRadiusAxisProps extends ChartsAxisProps {
   maxRadius?: number;
 }
 export type ScaleName = keyof AxisScaleConfig;
-export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
+export type ContinuousScaleName = 'linear' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc';
+export type AxisGroup = {
+  /**
+   * The function used to return the value for this group.
+   *
+   * @param {any} value The value of the axis item.
+   * @param {number} dataIndex  The index of the data item.
+   * @returns {string | number | Date} The value that will be used to group the axis items.
+   */
+  getValue: (value: any, dataIndex: number) => string | number | Date;
+  /**
+   * The size of the tick in pixels.
+   * @default 6
+   */
+  tickSize?: number;
+};
 export interface AxisScaleConfig {
   band: {
     scaleType: 'band';
@@ -197,17 +212,73 @@ export interface AxisScaleConfig {
      */
     barGapRatio: number;
     colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+    /**
+     * Each group will have a label that is the stringified value of the group.
+     *
+     * @example
+     * If the axis is grouped by day, month and year.
+     *
+     * ```tsx
+     * [
+     *   { getValue: getDate },
+     *   { getValue: getMonth },
+     *   { getValue: getFullYear }
+     * ]
+     * ```
+     *
+     * Then the axis will have three rows, one for each group.
+     *
+     * ```bash
+     * | 31   | 1    | 2    |
+     * | Jan  | Feb         |
+     * | 2021               |
+     * ```
+     */
+    groups?: AxisGroup[];
   } & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
   point: {
     scaleType: 'point';
     scale: ScalePoint<number | Date | string>;
     colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+    /**
+     * Each group will have a label that is the stringified value of the group.
+     *
+     * @example
+     * If the axis is grouped by day, month and year.
+     *
+     * ```tsx
+     * [
+     *   { getValue: getDate },
+     *   { getValue: getMonth },
+     *   { getValue: getFullYear }
+     * ]
+     * ```
+     *
+     * Then the axis will have three rows, one for each group.
+     *
+     * ```bash
+     * | 31   | 1    | 2    |
+     * | Jan  | Feb         |
+     * | 2021               |
+     * ```
+     */
+    groups?: AxisGroup[];
   };
   log: {
     scaleType: 'log';
     scale: ScaleLogarithmic<number, number>;
     colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
   };
+  symlog: {
+    scaleType: 'symlog';
+    scale: ScaleSymLog<number, number>;
+    colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+    /**
+     * The constant used to define the zero point of the symlog scale.
+     * @default 1
+     */
+    constant?: number;
+  };
   pow: {
     scaleType: 'pow';
     scale: ScalePower<number, number>;
@@ -248,6 +319,9 @@ export interface AxisScaleComputedConfig {
   log: {
     colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
   };
+  symlog: {
+    colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+  };
   pow: {
     colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
   };
@@ -417,6 +491,9 @@ export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): s
 export declare function isPointScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'point'> & {
   scaleType: 'point';
 };
+export declare function isSymlogScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'symlog'> & {
+  scaleType: 'symlog';
+};
 /**
  * The data format returned by onAxisClick.
  */

package/models/axis.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isBandScaleConfig = isBandScaleConfig;
 exports.isPointScaleConfig = isPointScaleConfig;
+exports.isSymlogScaleConfig = isSymlogScaleConfig;
 /**
  * Use this type instead of `AxisScaleConfig` when the values
  * shouldn't be provided by the user.
@@ -24,6 +25,9 @@ function isBandScaleConfig(scaleConfig) {
 function isPointScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'point';
 }
+function isSymlogScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType === 'symlog';
+}
 
 /**
  * The data format returned by onAxisClick.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.9.0",
+  "version": "8.10.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -11,8 +11,7 @@
   "homepage": "https://mui.com/x/react-charts/",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public",
-    "directory": "build"
+    "access": "public"
   },
   "keywords": [
     "react",
@@ -29,7 +28,7 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
+    "@babel/runtime": "^7.28.2",
     "@mui/utils": "^7.2.0",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
@@ -37,8 +36,8 @@
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
     "@mui/x-charts-vendor": "8.6.0",
-    "@mui/x-internal-gestures": "0.2.1",
-    "@mui/x-internals": "8.8.0"
+    "@mui/x-internal-gestures": "0.2.3",
+    "@mui/x-internals": "8.10.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -60,7 +59,6 @@
     "node": ">=14.0.0"
   },
   "private": false,
-  "module": "./esm/index.js",
   "exports": {
     "./package.json": "./package.json",
     ".": {

package/BarChart/getRadius.d.ts

@@ -1,20 +0,0 @@
-export type GetRadiusData = {
-  hasNegative: boolean;
-  hasPositive: boolean;
-  borderRadius?: number;
-  layout?: 'vertical' | 'horizontal';
-};
-type GetRadiusCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
-/**
- * Returns if the corner should have a radius or not based on the layout and the data.
- * @param {GetRadiusCorner} corner The corner to check.
- * @param {GetRadiusData} cornerData The data for the corner.
- * @returns {number} The radius for the corner.
- */
-export declare const getRadius: (corner: GetRadiusCorner, {
-  hasNegative,
-  hasPositive,
-  borderRadius,
-  layout
-}: GetRadiusData) => number;
-export {};

package/BarChart/getRadius.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getRadius = void 0;
-/**
- * Returns if the corner should have a radius or not based on the layout and the data.
- * @param {GetRadiusCorner} corner The corner to check.
- * @param {GetRadiusData} cornerData The data for the corner.
- * @returns {number} The radius for the corner.
- */
-const getRadius = (corner, {
-  hasNegative,
-  hasPositive,
-  borderRadius,
-  layout
-}) => {
-  if (!borderRadius) {
-    return 0;
-  }
-  const isVertical = layout === 'vertical';
-  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
-    return borderRadius;
-  }
-  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
-    return borderRadius;
-  }
-  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
-    return borderRadius;
-  }
-  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
-    return borderRadius;
-  }
-  return 0;
-};
-exports.getRadius = getRadius;

package/esm/BarChart/getRadius.d.ts

@@ -1,20 +0,0 @@
-export type GetRadiusData = {
-  hasNegative: boolean;
-  hasPositive: boolean;
-  borderRadius?: number;
-  layout?: 'vertical' | 'horizontal';
-};
-type GetRadiusCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
-/**
- * Returns if the corner should have a radius or not based on the layout and the data.
- * @param {GetRadiusCorner} corner The corner to check.
- * @param {GetRadiusData} cornerData The data for the corner.
- * @returns {number} The radius for the corner.
- */
-export declare const getRadius: (corner: GetRadiusCorner, {
-  hasNegative,
-  hasPositive,
-  borderRadius,
-  layout
-}: GetRadiusData) => number;
-export {};

package/esm/BarChart/getRadius.js

@@ -1,30 +0,0 @@
-/**
- * Returns if the corner should have a radius or not based on the layout and the data.
- * @param {GetRadiusCorner} corner The corner to check.
- * @param {GetRadiusData} cornerData The data for the corner.
- * @returns {number} The radius for the corner.
- */
-export const getRadius = (corner, {
-  hasNegative,
-  hasPositive,
-  borderRadius,
-  layout
-}) => {
-  if (!borderRadius) {
-    return 0;
-  }
-  const isVertical = layout === 'vertical';
-  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
-    return borderRadius;
-  }
-  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
-    return borderRadius;
-  }
-  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
-    return borderRadius;
-  }
-  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
-    return borderRadius;
-  }
-  return 0;
-};