@mui/x-charts 8.8.0 → 8.9.0

package/models/axis.d.ts

@@ -281,11 +281,37 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    * - `'legend'` The value is displayed in the legend when using color legend.
    * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
    */
-  location: 'tick' | 'tooltip' | 'zoom-slider-tooltip';
+  location: 'tooltip' | 'zoom-slider-tooltip';
   /**
    * The d3-scale instance associated to the axis.
    */
   scale: AxisScaleConfig[S]['scale'];
+} | {
+  /**
+   * Location indicates where the value will be displayed.
+   * - `'tick'` The value is displayed on the axis ticks.
+   * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+   * - `'legend'` The value is displayed in the legend when using color legend.
+   * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
+   */
+  location: 'tick';
+  /**
+   * The d3-scale instance associated to the axis.
+   */
+  scale: AxisScaleConfig[S]['scale'];
+  /**
+   * The tick label shown by default if the value isn't formatted.
+   * This value might be an empty string if no tick label should be displayed, which is particularly useful in log
+   * scales where we want to show ticks to demonstrate it's a log scale, but not labels to avoid them overlapping.
+   * @see See {@link https://d3js.org/d3-scale/log#log_tickFormat D3 log scale docs} for more details.
+   */
+  defaultTickLabel: string;
+  /**
+   * A suggestion of the number of ticks to show.
+   * Can be provided to the scale's `ticks` method to compute the ticks, or to `tickFormat` to format the ticks.
+   * Can be `undefined` if the scale doesn't support it, e.g., band, point scales.
+   */
+  tickNumber?: number;
 };
 /**
  * Config that is shared between cartesian and polar axes.

package/models/seriesType/bar.d.ts

@@ -25,6 +25,16 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
    * @default 'diverging'
    */
   stackOffset?: StackOffsetType;
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   *
+   * @default 0px
+   */
+  minBarSize?: number;
 }
 /**
  * An object that allows to identify a single bar.
@@ -35,4 +45,4 @@ export type BarItemIdentifier = {
   seriesId: SeriesId;
   dataIndex: number;
 };
-export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout'> {}
+export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout' | 'minBarSize'> {}

package/models/seriesType/common.d.ts

@@ -1,6 +1,6 @@
-import type { ChartsLabelMarkProps } from "../../ChartsLabel/index.js";
 import { HighlightScope } from "../../internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js";
 import type { StackOffsetType, StackOrderType } from "../stacking.js";
+import type { ChartsLabelMarkType } from "../../ChartsLabel/ChartsLabelMark.js";
 export type SeriesId = number | string;
 export type SeriesValueFormatterContext = {
   /**
@@ -10,7 +10,13 @@ export type SeriesValueFormatterContext = {
 };
 export type SeriesValueFormatter<TValue> = (value: TValue, context: SeriesValueFormatterContext) => string | null;
 export type CommonSeriesType<TValue> = {
+  /**
+   * The id of this series.
+   */
   id?: SeriesId;
+  /**
+   * Color to use when displaying the series.
+   */
   color?: string;
   /**
    * Formatter used to render values in tooltip or other data display.
@@ -22,13 +28,13 @@ export type CommonSeriesType<TValue> = {
   /**
    * The scope to apply when the series is highlighted.
    */
-  highlightScope?: Partial<HighlightScope>;
+  highlightScope?: HighlightScope;
   /**
    * Defines the mark type for the series.
    *
    * There is a default mark type for each series type.
    */
-  labelMarkType?: ChartsLabelMarkProps['type'];
+  labelMarkType?: ChartsLabelMarkType;
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {

package/models/seriesType/line.d.ts

@@ -34,7 +34,9 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
    * The key used to retrieve data from the dataset.
    */
   dataKey?: string;
-  stack?: string;
+  /**
+   * If `true`, the series is rendered as an area instead of a line.
+   */
   area?: boolean;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.

package/models/seriesType/scatter.d.ts

@@ -12,6 +12,9 @@ export type ScatterValueType = {
 export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null>, CartesianSeriesType {
   type: 'scatter';
   data?: readonly ScatterValueType[];
+  /**
+   * Size of the markers in the scatter plot, in pixels.
+   */
   markerSize?: number;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.
@@ -52,7 +55,7 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
   };
   preview?: {
     /**
-     * The size of the preview marker.
+     * The size of the preview marker in pixels.
      * @default 1
      */
     markerSize?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -36,9 +36,9 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-charts-vendor": "8.5.3",
-    "@mui/x-internals": "8.8.0",
-    "@mui/x-internal-gestures": "0.2.1"
+    "@mui/x-charts-vendor": "8.6.0",
+    "@mui/x-internal-gestures": "0.2.1",
+    "@mui/x-internals": "8.8.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/tests/web-components.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reactToWebComponent = reactToWebComponent;
+const renderSymbol = Symbol.for('render');
+const connectedSymbol = Symbol.for('connected');
+const contextSymbol = Symbol.for('context');
+const propsSymbol = Symbol.for('props');
+
+// This function creates a custom web component that wraps a React component.
+// Adapted from https://github.com/bitovi/react-to-web-component/blob/b1372bfd7bc67fe49920db840f1ed9cf736b2724/packages/core/src/core.ts
+function reactToWebComponent(ReactComponent, options, renderer) {
+  class ReactWebComponent extends HTMLElement {
+    static get observedAttributes() {
+      return [];
+    }
+    constructor() {
+      super();
+      this[connectedSymbol] = true;
+      this[contextSymbol] = void 0;
+      this[propsSymbol] = {};
+      this.container = void 0;
+      if (options.shadow) {
+        this.container = this.attachShadow({
+          mode: options.shadow
+        });
+      } else {
+        this.container = this;
+      }
+      this[propsSymbol].container = this.container;
+    }
+    connectedCallback() {
+      this[connectedSymbol] = true;
+      this[renderSymbol]();
+    }
+    disconnectedCallback() {
+      this[connectedSymbol] = false;
+      if (this[contextSymbol]) {
+        renderer.unmount(this[contextSymbol]);
+      }
+      delete this[contextSymbol];
+    }
+    [renderSymbol]() {
+      if (!this[connectedSymbol]) {
+        return;
+      }
+      if (!this[contextSymbol]) {
+        this[contextSymbol] = renderer.mount(this.container, ReactComponent, this[propsSymbol]);
+      }
+    }
+  }
+  return ReactWebComponent;
+}