@mui/x-charts 8.15.0 → 8.17.0

package/models/seriesType/bar.d.ts

@@ -1,6 +1,7 @@
 import { DefaultizedProps } from '@mui/x-internals/types';
 import type { StackOffsetType } from "../stacking.js";
 import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType, SeriesId } from "./common.js";
+import { BarItem, BarLabelContext } from "../../BarChart/index.js";
 export interface BarSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {
   type: 'bar';
   /**
@@ -35,6 +36,14 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
    * @default 0px
    */
   minBarSize?: number;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
 }
 /**
  * An object that allows to identify a single bar.

package/models/seriesType/common.d.ts

@@ -1,6 +1,7 @@
 import { HighlightScope } from "../../internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js";
 import type { StackOffsetType, StackOrderType } from "../stacking.js";
 import type { ChartsLabelMarkType } from "../../ChartsLabel/ChartsLabelMark.js";
+import { AxisId } from "../axis.js";
 export type SeriesId = number | string;
 export type SeriesValueFormatterContext = {
   /**
@@ -9,15 +10,31 @@ export type SeriesValueFormatterContext = {
   dataIndex: number;
 };
 export type SeriesValueFormatter<TValue> = (value: TValue, context: SeriesValueFormatterContext) => string | null;
-export type CommonSeriesType<TValue> = {
-  /**
-   * The id of this series.
-   */
-  id?: SeriesId;
+export type ColorCallbackValue<TValue> = {
+  value: TValue;
+  dataIndex: number;
+};
+export interface SeriesColor<TValue> {
   /**
    * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
    */
   color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @param {ColorCallbackValue<TValue>} data  An object containing data point's `dataIndex` and `value`.
+   * @returns {string} The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<TValue>) => string;
+}
+export interface CommonSeriesType<TValue> extends SeriesColor<TValue> {
+  /**
+   * The id of this series.
+   */
+  id?: SeriesId;
   /**
    * Formatter used to render values in tooltip or other data display.
    * @param {TValue} value The series' value to render.
@@ -35,17 +52,17 @@ export type CommonSeriesType<TValue> = {
    * There is a default mark type for each series type.
    */
   labelMarkType?: ChartsLabelMarkType;
-};
+}
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {
   /**
    * The id of the x-axis used to render the series.
    */
-  xAxisId?: string;
+  xAxisId?: AxisId;
   /**
    * The id of the y-axis used to render the series.
    */
-  yAxisId?: string;
+  yAxisId?: AxisId;
 };
 export type StackableSeriesType = {
   /**

package/models/seriesType/config.d.ts

@@ -1,17 +1,16 @@
-import { DefaultizedProps, MakeOptional } from '@mui/x-internals/types';
+import { DefaultizedProps, MakeOptional, MakeRequired } from '@mui/x-internals/types';
 import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterValueType } from "./scatter.js";
 import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from "./line.js";
 import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from "./bar.js";
 import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType } from "./pie.js";
 import { DefaultizedRadarSeriesType, RadarItemIdentifier, RadarSeriesType } from "./radar.js";
+import { SeriesColor } from "./common.js";
 export interface ChartsSeriesConfig {
   bar: {
     /**
      * Series type when passed to the formatter (some ids are given default values to simplify the DX)
      */
-    seriesInput: DefaultizedProps<BarSeriesType, 'id'> & {
-      color: string;
-    };
+    seriesInput: DefaultizedProps<BarSeriesType, 'id'> & MakeRequired<SeriesColor<number | null>, 'color'>;
     /**
      * Series type when stored in the context (with all the preprocessing added))
      */
@@ -27,9 +26,7 @@ export interface ChartsSeriesConfig {
     axisType: 'cartesian';
   };
   line: {
-    seriesInput: DefaultizedProps<LineSeriesType, 'id'> & {
-      color: string;
-    };
+    seriesInput: DefaultizedProps<LineSeriesType, 'id'> & MakeRequired<SeriesColor<number | null>, 'color'>;
     series: DefaultizedLineSeriesType;
     seriesProp: LineSeriesType;
     itemIdentifier: LineItemIdentifier;
@@ -39,9 +36,7 @@ export interface ChartsSeriesConfig {
     axisType: 'cartesian';
   };
   scatter: {
-    seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & {
-      color: string;
-    };
+    seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & MakeRequired<SeriesColor<ScatterValueType | null>, 'color'>;
     series: DefaultizedScatterSeriesType;
     seriesProp: ScatterSeriesType;
     valueType: ScatterValueType;
@@ -51,9 +46,7 @@ export interface ChartsSeriesConfig {
   };
   pie: {
     seriesInput: Omit<DefaultizedProps<PieSeriesType, 'id'>, 'data'> & {
-      data: (MakeOptional<PieValueType, 'id'> & {
-        color: string;
-      })[];
+      data: Array<MakeOptional<PieValueType, 'id'> & MakeRequired<SeriesColor<PieValueType | null>, 'color'>>;
     };
     series: DefaultizedPieSeriesType;
     seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
@@ -62,9 +55,7 @@ export interface ChartsSeriesConfig {
     valueType: DefaultizedPieValueType;
   };
   radar: {
-    seriesInput: DefaultizedProps<RadarSeriesType, 'id'> & {
-      color: string;
-    };
+    seriesInput: DefaultizedProps<RadarSeriesType, 'id'> & MakeRequired<SeriesColor<number>, 'color'>;
     series: DefaultizedRadarSeriesType;
     seriesProp: RadarSeriesType;
     itemIdentifier: RadarItemIdentifier;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.15.0",
+  "version": "8.17.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
+    "@mui/x-internals": "8.17.0",
     "@mui/x-charts-vendor": "8.15.0",
-    "@mui/x-internals": "8.14.0",
     "@mui/x-internal-gestures": "0.3.4"
   },
   "peerDependencies": {

package/BarChart/seriesConfig/getColor.d.ts

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

package/BarChart/seriesConfig/getSeriesWithDefaultValues.d.ts

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

package/BarChart/seriesConfig/legend.d.ts

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

package/BarChart/seriesConfig/seriesProcessor.d.ts

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

package/BarChart/seriesConfig/tooltip.d.ts

@@ -1,4 +0,0 @@
-import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/models/index.js";
-declare const tooltipGetter: TooltipGetter<'bar'>;
-export declare const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'>;
-export default tooltipGetter;

package/esm/BarChart/seriesConfig/getColor.d.ts

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

package/esm/BarChart/seriesConfig/getSeriesWithDefaultValues.d.ts

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

package/esm/BarChart/seriesConfig/legend.d.ts

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

package/esm/BarChart/seriesConfig/seriesProcessor.d.ts

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

package/esm/BarChart/seriesConfig/tooltip.d.ts

@@ -1,4 +0,0 @@
-import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/models/index.js";
-declare const tooltipGetter: TooltipGetter<'bar'>;
-export declare const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'>;
-export default tooltipGetter;

package/esm/internals/plugins/utils/ChartStore.d.ts

@@ -1,13 +0,0 @@
-import type { ChartState } from "../models/chart.js";
-import type { ChartAnyPluginSignature } from "../models/plugin.js";
-type Listener<T> = (value: T) => void;
-export type StoreUpdater<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = (prevState: ChartState<TSignatures, TOptionalSignatures>) => ChartState<TSignatures, TOptionalSignatures>;
-export declare class ChartStore<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> {
-  value: ChartState<TSignatures, TOptionalSignatures>;
-  private listeners;
-  constructor(value: ChartState<TSignatures, TOptionalSignatures>);
-  subscribe: (fn: Listener<ChartState<TSignatures, TOptionalSignatures>>) => () => void;
-  getSnapshot: () => ChartState<TSignatures, TOptionalSignatures>;
-  update: (updater: StoreUpdater<TSignatures, TOptionalSignatures>) => void;
-}
-export {};

package/esm/internals/plugins/utils/ChartStore.js

@@ -1,22 +0,0 @@
-export class ChartStore {
-  constructor(value) {
-    this.value = value;
-    this.listeners = new Set();
-  }
-  subscribe = fn => {
-    this.listeners.add(fn);
-    return () => {
-      this.listeners.delete(fn);
-    };
-  };
-  getSnapshot = () => {
-    return this.value;
-  };
-  update = updater => {
-    const newState = updater(this.value);
-    if (newState !== this.value) {
-      this.value = newState;
-      this.listeners.forEach(l => l(newState));
-    }
-  };
-}

package/esm/internals/symlogScale.d.ts

@@ -1,2 +0,0 @@
-import { NumberValue, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
-export declare function scaleSymlog<Range, Output = Range, Unknown = never>(_domain: Iterable<NumberValue>, _range: Iterable<Range>): ScaleSymLog<Range, Output, Unknown>;

package/internals/plugins/utils/ChartStore.d.ts

@@ -1,13 +0,0 @@
-import type { ChartState } from "../models/chart.js";
-import type { ChartAnyPluginSignature } from "../models/plugin.js";
-type Listener<T> = (value: T) => void;
-export type StoreUpdater<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = (prevState: ChartState<TSignatures, TOptionalSignatures>) => ChartState<TSignatures, TOptionalSignatures>;
-export declare class ChartStore<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> {
-  value: ChartState<TSignatures, TOptionalSignatures>;
-  private listeners;
-  constructor(value: ChartState<TSignatures, TOptionalSignatures>);
-  subscribe: (fn: Listener<ChartState<TSignatures, TOptionalSignatures>>) => () => void;
-  getSnapshot: () => ChartState<TSignatures, TOptionalSignatures>;
-  update: (updater: StoreUpdater<TSignatures, TOptionalSignatures>) => void;
-}
-export {};

package/internals/plugins/utils/ChartStore.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChartStore = void 0;
-class ChartStore {
-  constructor(value) {
-    this.value = value;
-    this.listeners = new Set();
-  }
-  subscribe = fn => {
-    this.listeners.add(fn);
-    return () => {
-      this.listeners.delete(fn);
-    };
-  };
-  getSnapshot = () => {
-    return this.value;
-  };
-  update = updater => {
-    const newState = updater(this.value);
-    if (newState !== this.value) {
-      this.value = newState;
-      this.listeners.forEach(l => l(newState));
-    }
-  };
-}
-exports.ChartStore = ChartStore;

package/internals/symlogScale.d.ts

@@ -1,2 +0,0 @@
-import { NumberValue, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
-export declare function scaleSymlog<Range, Output = Range, Unknown = never>(_domain: Iterable<NumberValue>, _range: Iterable<Range>): ScaleSymLog<Range, Output, Unknown>;