@mui/x-charts 8.21.0 → 8.22.0

package/models/timeTicks.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Definition of a tick frequency for time ordinal axes.
+ */
+export type TickFrequencyDefinition = {
+  /**
+   * Returns the number of ticks in the given date range for this tick frequency.
+   * @param {Date} from The first date of the range.
+   * @param {Date} to The last date of the range.
+   * @returns {number} The number of ticks in the [from, to] range.
+   */
+  getTickNumber: (from: Date, to: Date) => number;
+  /**
+   * Decides if the current date should be shown as a tick.
+   * @param {Date} prev The date before the current date.
+   * @param {Date} value The current date to check.
+   * @returns {boolean} Whether the current date is a tick or not.
+   */
+  isTick: (prev: Date, value: Date) => boolean;
+  /**
+   * Format the tick value for display.
+   * @param {Date} date The tick value to format.
+   * @returns {string} The formatted date string.
+   */
+  format: (date: Date) => string;
+};
+/**
+ * The predefined tick frequencies for time ordinal axes.
+ * - 'years': displays the year, placing ticks at the start of each year
+ * - 'quarterly': displays the month, placing ticks at the start of each quarter
+ * - 'months': displays the month, placing ticks at the start of each month
+ * - 'biweekly': displays the day, placing ticks every two weeks
+ * - 'weeks': displays the day, placing ticks at the start of each week
+ * - 'days': displays the day, placing ticks at the start of each day
+ * - 'hours': displays the hour and minutes, placing ticks at the start of each hour
+ */
+export type TickFrequency = 'years' | 'quarterly' | 'months' | 'biweekly' | 'weeks' | 'days' | 'hours';
+export type OrdinalTimeTicks = (TickFrequencyDefinition | TickFrequency)[];

package/models/timeTicks.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/z-axis.d.ts

@@ -1,5 +1,5 @@
 import type { ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
-import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.js";
+import { type ContinuousColorConfig, type OrdinalColorConfig, type PiecewiseColorConfig } from "./colorMapping.js";
 export interface ZAxisConfig<V = any> {
   id: string;
   data?: readonly V[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.21.0",
+  "version": "8.22.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -31,12 +31,11 @@
     "@mui/utils": "^7.3.5",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
-    "flatqueue": "^3.0.0",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-charts-vendor": "8.21.0",
-    "@mui/x-internals": "8.21.0",
+    "@mui/x-charts-vendor": "8.22.0",
+    "@mui/x-internals": "8.22.0",
     "@mui/x-internal-gestures": "0.3.6"
   },
   "peerDependencies": {

package/plugins/index.d.ts

@@ -1,5 +1,6 @@
 export { useChartCartesianAxis, type UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 export { useChartHighlight, type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export { useChartTooltip, type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 export { useChartInteraction, type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 export { useChartPolarAxis, type UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
 export { useChartClosestPoint, type UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";

package/plugins/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "useChartPolarAxis", {
     return _useChartPolarAxis.useChartPolarAxis;
   }
 });
+Object.defineProperty(exports, "useChartTooltip", {
+  enumerable: true,
+  get: function () {
+    return _useChartTooltip.useChartTooltip;
+  }
+});
 Object.defineProperty(exports, "useChartZAxis", {
   enumerable: true,
   get: function () {
@@ -41,6 +47,7 @@ Object.defineProperty(exports, "useChartZAxis", {
 });
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
 var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");

package/themeAugmentation/components.d.ts

@@ -1,4 +1,4 @@
-import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
+import { type ComponentsProps, type ComponentsOverrides } from '@mui/material/styles';
 export interface ChartsComponents<Theme = unknown> {
   MuiChartsAxis?: {
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsAxis'];

package/themeAugmentation/overrides.d.ts

@@ -1,10 +1,10 @@
-import { GaugeClassKey } from "../Gauge/index.js";
-import { BarLabelClassKey } from "../BarChart/index.js";
-import { BarElementClassKey } from "../BarChart/barElementClasses.js";
-import { ChartsAxisHighlightClassKey } from "../ChartsAxisHighlight/index.js";
-import { ChartsGridClassKey } from "../ChartsGrid/index.js";
-import { ChartsTooltipClassKey } from "../ChartsTooltip/index.js";
-import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from "../LineChart/index.js";
+import { type GaugeClassKey } from "../Gauge/index.js";
+import { type BarLabelClassKey } from "../BarChart/index.js";
+import { type BarElementClassKey } from "../BarChart/barElementClasses.js";
+import { type ChartsAxisHighlightClassKey } from "../ChartsAxisHighlight/index.js";
+import { type ChartsGridClassKey } from "../ChartsGrid/index.js";
+import { type ChartsTooltipClassKey } from "../ChartsTooltip/index.js";
+import { type AreaElementClassKey, type LineElementClassKey, type MarkElementClassKey } from "../LineChart/index.js";
 export interface ChartsComponentNameToClassKey {
   MuiChartsAxis: 'root';
   MuiChartsXAxis: 'root';

package/themeAugmentation/props.d.ts

@@ -1,15 +1,15 @@
-import { BarLabelProps } from "../BarChart/BarLabel/index.js";
-import { BarChartProps } from "../BarChart/BarChart.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsLegendProps } from "../ChartsLegend/index.js";
-import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { ChartsTooltipProps } from "../ChartsTooltip/index.js";
-import { LineChartProps } from "../LineChart/LineChart.js";
-import { ScatterChartProps } from "../ScatterChart/ScatterChart.js";
-import { PieChartProps } from "../PieChart/PieChart.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
-import { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
+import { type BarLabelProps } from "../BarChart/BarLabel/index.js";
+import { type BarChartProps } from "../BarChart/BarChart.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsLegendProps } from "../ChartsLegend/index.js";
+import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { type ChartsTooltipProps } from "../ChartsTooltip/index.js";
+import { type LineChartProps } from "../LineChart/LineChart.js";
+import { type ScatterChartProps } from "../ScatterChart/ScatterChart.js";
+import { type PieChartProps } from "../PieChart/PieChart.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/axis.js";
+import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
+import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
 export interface ChartsComponentsPropsList {
   MuiChartsXAxis: ChartsXAxisProps;
   MuiChartsYAxis: ChartsYAxisProps;

package/utils/index.d.ts

@@ -1,4 +1,5 @@
 /**
  * Exported utility functions for the x-charts library.
  */
-export * from "./niceDomain.js";
+export * from "./niceDomain.js";
+export { tickFrequencies } from "./timeTicks.js";

package/utils/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  tickFrequencies: true
+};
+Object.defineProperty(exports, "tickFrequencies", {
+  enumerable: true,
+  get: function () {
+    return _timeTicks.tickFrequencies;
+  }
+});
 var _niceDomain = require("./niceDomain");
 Object.keys(_niceDomain).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _niceDomain[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -13,4 +23,5 @@ Object.keys(_niceDomain).forEach(function (key) {
       return _niceDomain[key];
     }
   });
-});
+});
+var _timeTicks = require("./timeTicks");

package/utils/niceDomain.d.ts

@@ -1,5 +1,5 @@
-import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
-import { ContinuousScaleName } from "../models/index.js";
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type ContinuousScaleName } from "../models/index.js";
 /**
  * Returns a nice domain for the given scale type and domain.
  * Does not modify the original domain.

package/utils/timeTicks.d.ts

@@ -0,0 +1,2 @@
+import type { TickFrequency, TickFrequencyDefinition } from "../models/timeTicks.js";
+export declare const tickFrequencies: Record<TickFrequency, TickFrequencyDefinition>;

package/utils/timeTicks.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tickFrequencies = void 0;
+function yearNumber(from, to) {
+  return Math.abs(to.getFullYear() - from.getFullYear());
+}
+function monthNumber(from, to) {
+  return Math.abs(to.getFullYear() * 12 + to.getMonth() - 12 * from.getFullYear() - from.getMonth());
+}
+function dayNumber(from, to) {
+  return Math.abs(to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24);
+}
+function hourNumber(from, to) {
+  return Math.abs(to.getTime() - from.getTime()) / (1000 * 60 * 60);
+}
+const tickFrequencies = exports.tickFrequencies = {
+  years: {
+    getTickNumber: yearNumber,
+    isTick: (prev, value) => value.getFullYear() !== prev.getFullYear(),
+    format: d => d.getFullYear().toString()
+  },
+  quarterly: {
+    getTickNumber: (from, to) => Math.floor(monthNumber(from, to) / 3),
+    isTick: (prev, value) => value.getMonth() !== prev.getMonth() && value.getMonth() % 3 === 0,
+    format: new Intl.DateTimeFormat('default', {
+      month: 'short'
+    }).format
+  },
+  months: {
+    getTickNumber: monthNumber,
+    isTick: (prev, value) => value.getMonth() !== prev.getMonth(),
+    format: new Intl.DateTimeFormat('default', {
+      month: 'short'
+    }).format
+  },
+  biweekly: {
+    getTickNumber: (from, to) => dayNumber(from, to) / 14,
+    isTick: (prev, value) => (value.getDay() < prev.getDay() || dayNumber(value, prev) > 7) && Math.floor(value.getDate() / 7) % 2 === 1,
+    format: new Intl.DateTimeFormat('default', {
+      day: 'numeric'
+    }).format
+  },
+  weeks: {
+    getTickNumber: (from, to) => dayNumber(from, to) / 7,
+    isTick: (prev, value) => value.getDay() < prev.getDay() || dayNumber(value, prev) >= 7,
+    format: new Intl.DateTimeFormat('default', {
+      day: 'numeric'
+    }).format
+  },
+  days: {
+    getTickNumber: dayNumber,
+    isTick: (prev, value) => value.getDate() !== prev.getDate(),
+    format: new Intl.DateTimeFormat('default', {
+      day: 'numeric'
+    }).format
+  },
+  hours: {
+    getTickNumber: hourNumber,
+    isTick: (prev, value) => value.getHours() !== prev.getHours(),
+    format: new Intl.DateTimeFormat('default', {
+      hour: '2-digit',
+      minute: '2-digit'
+    }).format
+  }
+};

package/LineChart/FocusedMark.d.ts

@@ -1 +0,0 @@
-export declare function FocusedMark(): import("react/jsx-runtime").JSX.Element | null;

package/RadarChart/seriesConfig/formatter.d.ts

@@ -1,3 +0,0 @@
-import { SeriesProcessor } from "../../internals/plugins/models/seriesConfig/index.js";
-declare const formatter: SeriesProcessor<'radar'>;
-export default formatter;

package/RadarChart/seriesConfig/formatter.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defaultizeValueFormatter = require("../../internals/defaultizeValueFormatter");
-const formatter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return {
-    seriesOrder,
-    series: (0, _defaultizeValueFormatter.defaultizeValueFormatter)(series, v => v == null ? '' : v.toLocaleString())
-  };
-};
-var _default = exports.default = formatter;

package/esm/LineChart/FocusedMark.d.ts

@@ -1 +0,0 @@
-export declare function FocusedMark(): import("react/jsx-runtime").JSX.Element | null;

package/esm/RadarChart/seriesConfig/formatter.d.ts

@@ -1,3 +0,0 @@
-import { SeriesProcessor } from "../../internals/plugins/models/seriesConfig/index.js";
-declare const formatter: SeriesProcessor<'radar'>;
-export default formatter;

package/esm/RadarChart/seriesConfig/formatter.js

@@ -1,12 +0,0 @@
-import { defaultizeValueFormatter } from "../../internals/defaultizeValueFormatter.js";
-const formatter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return {
-    seriesOrder,
-    series: defaultizeValueFormatter(series, v => v == null ? '' : v.toLocaleString())
-  };
-};
-export default formatter;

package/esm/internals/defaultizeValueFormatter.d.ts

@@ -1,6 +0,0 @@
-import { SeriesId, SeriesValueFormatter } from "../models/seriesType/common.js";
-export declare function defaultizeValueFormatter<TValue, ISeries extends {
-  valueFormatter?: SeriesValueFormatter<TValue>;
-}>(series: Record<SeriesId, ISeries>, defaultValueFormatter: SeriesValueFormatter<TValue>): Record<SeriesId, ISeries & {
-  valueFormatter: SeriesValueFormatter<TValue>;
-}>;

package/esm/internals/defaultizeValueFormatter.js

@@ -1,10 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export function defaultizeValueFormatter(series, defaultValueFormatter) {
-  const defaultizedSeries = {};
-  Object.keys(series).forEach(seriesId => {
-    defaultizedSeries[seriesId] = _extends({}, series[seriesId], {
-      valueFormatter: series[seriesId].valueFormatter ?? defaultValueFormatter
-    });
-  });
-  return defaultizedSeries;
-}

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartTooltip.selectors.d.ts

@@ -1,12 +0,0 @@
-export declare const selectorChartsTooltipItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
-export declare const selectorChartsTooltipItemIsDefined: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => boolean;
-export declare const selectorChartsTooltipItemPosition: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, placement?: "bottom" | "left" | "right" | "top" | undefined) => {
-  x: number;
-  y: number;
-} | null;

package/internals/defaultizeValueFormatter.d.ts

@@ -1,6 +0,0 @@
-import { SeriesId, SeriesValueFormatter } from "../models/seriesType/common.js";
-export declare function defaultizeValueFormatter<TValue, ISeries extends {
-  valueFormatter?: SeriesValueFormatter<TValue>;
-}>(series: Record<SeriesId, ISeries>, defaultValueFormatter: SeriesValueFormatter<TValue>): Record<SeriesId, ISeries & {
-  valueFormatter: SeriesValueFormatter<TValue>;
-}>;

package/internals/defaultizeValueFormatter.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defaultizeValueFormatter = defaultizeValueFormatter;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-function defaultizeValueFormatter(series, defaultValueFormatter) {
-  const defaultizedSeries = {};
-  Object.keys(series).forEach(seriesId => {
-    defaultizedSeries[seriesId] = (0, _extends2.default)({}, series[seriesId], {
-      valueFormatter: series[seriesId].valueFormatter ?? defaultValueFormatter
-    });
-  });
-  return defaultizedSeries;
-}

package/internals/plugins/featurePlugins/useChartInteraction/useChartTooltip.selectors.d.ts

@@ -1,12 +0,0 @@
-export declare const selectorChartsTooltipItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
-export declare const selectorChartsTooltipItemIsDefined: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => boolean;
-export declare const selectorChartsTooltipItemPosition: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, placement?: "bottom" | "left" | "right" | "top" | undefined) => {
-  x: number;
-  y: number;
-} | null;