@mui/x-charts 6.0.0-alpha.0

package/ChartsLegend/ChartsLegend.js

@@ -0,0 +1,202 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsLegend = ChartsLegend;
+exports.ChartsSeriesLegendGroup = exports.ChartsLegendRoot = exports.ChartsLegendMark = exports.ChartsLegendLabel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
+var _styles = require("@mui/material/styles");
+var _DrawingProvider = require("../context/DrawingProvider");
+var _utils2 = require("./utils");
+var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _chartsLegendClasses = require("./chartsLegendClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    direction
+  } = ownerState;
+  const slots = {
+    root: ['root', direction],
+    mark: ['mark'],
+    label: ['label'],
+    series: ['series']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _chartsLegendClasses.getChartsLegendUtilityClass, classes);
+};
+function getTranslePosition({
+  position,
+  drawingArea
+}) {
+  let xValue;
+  switch (position.horizontal) {
+    case 'left':
+      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left}px - var(--ChartsLegend-rootWidth))`;
+      break;
+    case 'middle':
+      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left + drawingArea.width / 2}px - 0.5 * var(--ChartsLegend-rootWidth))`;
+      break;
+    default:
+      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left + drawingArea.width}px)`;
+      break;
+  }
+  let yValue;
+  switch (position.vertical) {
+    case 'top':
+      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top}px - var(--ChartsLegend-rootHeight))`;
+      break;
+    case 'middle':
+      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top + drawingArea.height / 2}px - 0.5 * var(--ChartsLegend-rootHeight))`;
+      break;
+    default:
+      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top + drawingArea.height}px)`;
+      break;
+  }
+  return {
+    transform: `translate(${xValue}, ${yValue})`
+  };
+}
+const ChartsLegendRoot = (0, _styles.styled)('g', {
+  name: 'MuiChartsLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => {
+  const {
+    direction,
+    drawingArea,
+    offsetX,
+    offsetY,
+    seriesNumber,
+    position
+  } = ownerState;
+  return (0, _extends2.default)({
+    '--ChartsLegend-rootOffsetX': typeof offsetX === 'number' ? `${offsetX}px` : undefined,
+    '--ChartsLegend-rootOffsetY': typeof offsetY === 'number' ? `${offsetY}px` : undefined,
+    '--ChartsLegend-rootWidth': direction === 'row' ? `calc(var(--ChartsLegend-itemWidth) * ${seriesNumber} + var(--ChartsLegend-rootSpacing) * ${seriesNumber - 1} )` : 'var(--ChartsLegend-itemWidth)',
+    '--ChartsLegend-rootHeight': direction === 'row' ? 'var(--ChartsLegend-itemMarkSize)' : `calc(var(--ChartsLegend-itemMarkSize) * ${seriesNumber} + var(--ChartsLegend-rootSpacing) * ${seriesNumber - 1} )`
+  }, getTranslePosition({
+    position,
+    drawingArea,
+    offsetX,
+    offsetY
+  }));
+});
+exports.ChartsLegendRoot = ChartsLegendRoot;
+const ChartsSeriesLegendGroup = (0, _styles.styled)('g', {
+  name: 'MuiChartsLegend',
+  slot: 'ChartsSeriesLegendGroup',
+  overridesResolver: (props, styles) => styles.series
+})(({
+  ownerState
+}) => {
+  const {
+    direction,
+    seriesIndex
+  } = ownerState;
+  if (direction === 'row') {
+    return {
+      transform: `translate(calc(${seriesIndex} * (var(--ChartsLegend-itemWidth) + var(--ChartsLegend-rootSpacing))), 0)`
+    };
+  }
+  return {
+    transform: `translate(0, calc(${seriesIndex} * (var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-rootSpacing))))`
+  };
+});
+exports.ChartsSeriesLegendGroup = ChartsSeriesLegendGroup;
+const ChartsLegendMark = (0, _styles.styled)('rect', {
+  name: 'MuiChartsLegend',
+  slot: 'Mark',
+  overridesResolver: (props, styles) => styles.mark
+})(({
+  ownerState
+}) => ({
+  x: 0,
+  y: 0,
+  width: 'var(--ChartsLegend-itemMarkSize)',
+  height: 'var(--ChartsLegend-itemMarkSize)',
+  fill: ownerState.color
+}));
+exports.ChartsLegendMark = ChartsLegendMark;
+const ChartsLegendLabel = (0, _styles.styled)('text', {
+  name: 'MuiChartsLegend',
+  slot: 'Label',
+  overridesResolver: (props, styles) => styles.label
+})(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.body1, {
+  color: 'inherit',
+  transform: `translate(
+      calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),
+      calc(0.5 * var(--ChartsLegend-itemMarkSize))
+      )`,
+  fill: theme.palette.text.primary,
+  alignmentBaseline: 'central'
+}));
+exports.ChartsLegendLabel = ChartsLegendLabel;
+const defaultProps = {
+  position: {
+    horizontal: 'middle',
+    vertical: 'top'
+  },
+  direction: 'row',
+  markSize: 20,
+  itemWidth: 100,
+  spacing: 2
+};
+function ChartsLegend(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({}, defaultProps, inProps),
+    name: 'MuiChartsLegend'
+  });
+  const {
+    position,
+    direction,
+    offset
+  } = props;
+  const theme = (0, _styles.useTheme)();
+  const classes = useUtilityClasses((0, _extends2.default)({}, props, {
+    theme
+  }));
+  const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
+  const series = React.useContext(_SeriesContextProvider.SeriesContext);
+  const seriesToDisplay = (0, _utils2.getSeriesToDisplay)(series);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
+    ownerState: {
+      direction,
+      offsetX: offset?.x,
+      offsetY: offset?.y,
+      seriesNumber: seriesToDisplay.length,
+      position,
+      drawingArea
+    },
+    className: classes.root,
+    children: seriesToDisplay.map(({
+      id,
+      label,
+      color
+    }, seriesIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSeriesLegendGroup, {
+      ownerState: (0, _extends2.default)({
+        direction,
+        seriesIndex
+      }, series),
+      className: classes.series,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendMark, {
+        ownerState: {
+          color
+        },
+        className: classes.mark
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendLabel, {
+        className: classes.label,
+        children: label
+      })]
+    }, id))
+  });
+}

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -0,0 +1,17 @@
+export interface ChartsLegendClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to a series element. */
+    series: string;
+    /** Styles applied to series mark element. */
+    mark: string;
+    /** Styles applied to the series label. */
+    label: string;
+    /** Styles applied to the legend with column layout. */
+    column: string;
+    /** Styles applied to the legend with row layout. */
+    row: string;
+}
+export type ChartsLegendClassKey = keyof ChartsLegendClasses;
+export declare function getChartsLegendUtilityClass(slot: string): string;
+export declare const legendClasses: ChartsLegendClasses;

package/ChartsLegend/chartsLegendClasses.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getChartsLegendUtilityClass = getChartsLegendUtilityClass;
+exports.legendClasses = void 0;
+var _utils = require("@mui/utils");
+function getChartsLegendUtilityClass(slot) {
+  return (0, _utils.unstable_generateUtilityClass)('MuiChartsLegend', slot);
+}
+const legendClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);
+exports.legendClasses = legendClasses;

package/ChartsLegend/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChartsLegend';
+export * from './chartsLegendClasses';

package/ChartsLegend/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsLegend = require("./ChartsLegend");
+Object.keys(_ChartsLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLegend[key];
+    }
+  });
+});
+var _chartsLegendClasses = require("./chartsLegendClasses");
+Object.keys(_chartsLegendClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsLegendClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsLegendClasses[key];
+    }
+  });
+});

package/ChartsLegend/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/ChartsLegend/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ChartsLegend/utils.d.ts

@@ -0,0 +1,14 @@
+import { FormattedSeries } from '../context/SeriesContextProvider';
+export type AnchorX = 'left' | 'right' | 'middle';
+export type AnchorY = 'top' | 'bottom' | 'middle';
+export type AnchorPosition = {
+    horizontal: AnchorX;
+    vertical: AnchorY;
+};
+export type SizingParams = {
+    direction?: 'row' | 'column';
+    markSize?: number;
+    itemWidth?: number;
+    spacing?: number;
+};
+export declare function getSeriesToDisplay(series: FormattedSeries): (import("../models/seriesType/config").ChartSeriesDefaultized<"bar"> | import("../models/seriesType/config").ChartSeriesDefaultized<"scatter"> | import("../models/seriesType/config").ChartSeriesDefaultized<"line">)[];

package/ChartsLegend/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSeriesToDisplay = getSeriesToDisplay;
+function getSeriesToDisplay(series) {
+  return Object.values(series).flatMap(s => s.seriesOrder.map(seriesId => s.series[seriesId])).filter(s => s.label !== undefined);
+}

package/ChartsSurface.d.ts

@@ -0,0 +1,21 @@
+import { SxProps, Theme } from '@mui/system';
+import * as React from 'react';
+type ViewBox = {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+};
+export interface ChartsSurfaceProps {
+    width: number;
+    height: number;
+    viewBox?: ViewBox;
+    className?: string;
+    title?: string;
+    desc?: string;
+    sx?: SxProps<Theme>;
+    children?: React.ReactNode;
+    disableAxisListener?: boolean;
+}
+export declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;
+export {};

package/ChartsSurface.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsSurface = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _system = require("@mui/system");
+var React = _interopRequireWildcard(require("react"));
+var _useAxisEvents = require("./hooks/useAxisEvents");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const ChartChartsSurfaceStyles = (0, _system.styled)('svg', {
+  name: 'MuiChartsSurface',
+  slot: 'Root'
+})(() => ({}));
+const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
+  const {
+      children,
+      width,
+      height,
+      viewBox,
+      disableAxisListener = false,
+      sx
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const svgView = (0, _extends2.default)({
+    width,
+    height,
+    x: 0,
+    y: 0
+  }, viewBox);
+  (0, _useAxisEvents.useAxisEvents)(disableAxisListener);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartChartsSurfaceStyles, (0, _extends2.default)({
+    width: width,
+    height: height,
+    viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
+    ref: ref,
+    sx: [{
+      '--ChartsLegend-itemWidth': '100px',
+      '--ChartsLegend-itemMarkSize': '20px',
+      '--ChartsLegend-rootSpacing': '5px',
+      '--ChartsLegend-labelSpacing': '5px',
+      '--ChartsLegend-rootOffsetY': '-20px'
+    }, ...(Array.isArray(sx) ? sx : [sx])]
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+      children: props.title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("desc", {
+      children: props.desc
+    }), children]
+  }));
+});
+exports.ChartsSurface = ChartsSurface;

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { AxisInteractionData } from '../context/InteractionProvider';
+import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
+import { AxisDefaultized } from '../models/axis';
+import { ChartsTooltipClasses } from './tooltipClasses';
+export type ChartsAxisContentProps = {
+    /**
+     * Data identifying the triggered axis.
+     */
+    axisData: AxisInteractionData;
+    /**
+     * The series linked to the triggered axis.
+     */
+    series: ChartSeriesDefaultized<ChartSeriesType>[];
+    /**
+     * The properties of the triggered axis.
+     */
+    axis: AxisDefaultized;
+    /**
+     * The index of the data item triggered.
+     */
+    dataIndex?: null | number;
+    /**
+     * The value associated to the current mouse position.
+     */
+    axisValue: any;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes: ChartsTooltipClasses;
+    sx?: SxProps<Theme>;
+};
+export declare function DefaultChartsAxisContent(props: ChartsAxisContentProps): React.JSX.Element | null;
+export declare function ChartsAxisTooltipContent(props: {
+    axisData: AxisInteractionData;
+    content?: React.ElementType<ChartsAxisContentProps>;
+    sx?: SxProps<Theme>;
+    classes: ChartsAxisContentProps['classes'];
+}): React.JSX.Element;

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAxisTooltipContent = ChartsAxisTooltipContent;
+exports.DefaultChartsAxisContent = DefaultChartsAxisContent;
+var React = _interopRequireWildcard(require("react"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _ChartsTooltipTable = require("./ChartsTooltipTable");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function DefaultChartsAxisContent(props) {
+  const {
+    series,
+    axis,
+    dataIndex,
+    axisValue,
+    sx,
+    classes
+  } = props;
+  if (dataIndex == null) {
+    return null;
+  }
+  const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
+    sx: sx,
+    variant: "outlined",
+    className: classes.root,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
+      children: [axisValue != null && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            colSpan: 3,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: axisFormatter(axisValue)
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: series.map(({
+          color,
+          id,
+          label,
+          valueFormatter,
+          data
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: classes.markCell,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+              ownerState: {
+                color
+              },
+              boxShadow: 1
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: classes.labelCell,
+            children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: label
+            }) : null
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: classes.valueCell,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: valueFormatter(data[dataIndex])
+            })
+          })]
+        }, id))
+      })]
+    })
+  });
+}
+function ChartsAxisTooltipContent(props) {
+  const {
+    content,
+    axisData,
+    sx,
+    classes
+  } = props;
+  const dataIndex = axisData.x && axisData.x.index;
+  const axisValue = axisData.x && axisData.x.value;
+  const {
+    xAxisIds,
+    xAxis
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  const series = React.useContext(_SeriesContextProvider.SeriesContext);
+  const USED_X_AXIS_ID = xAxisIds[0];
+  const relevantSeries = React.useMemo(() => {
+    const rep = [];
+    Object.keys(series).forEach(seriesType => {
+      series[seriesType].seriesOrder.forEach(seriesId => {
+        const axisKey = series[seriesType].series[seriesId].xAxisKey;
+        if (axisKey === undefined || axisKey === USED_X_AXIS_ID) {
+          rep.push(series[seriesType].series[seriesId]);
+        }
+      });
+    });
+    return rep;
+  }, [USED_X_AXIS_ID, series]);
+  const relevantAxis = React.useMemo(() => {
+    return xAxis[USED_X_AXIS_ID];
+  }, [USED_X_AXIS_ID, xAxis]);
+  const Content = content ?? DefaultChartsAxisContent;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+    axisData: axisData,
+    series: relevantSeries,
+    axis: relevantAxis,
+    dataIndex: dataIndex,
+    axisValue: axisValue,
+    sx: sx,
+    classes: classes
+  });
+}

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ItemInteractionData } from '../context/InteractionProvider';
+import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
+import { ChartsTooltipClasses } from './tooltipClasses';
+export type ChartsItemContentProps<T extends ChartSeriesType> = {
+    /**
+     * The data used to identify the triggered item.
+     */
+    itemData: ItemInteractionData<T>;
+    /**
+     * The series linked to the triggered axis.
+     */
+    series: ChartSeriesDefaultized<T>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes: ChartsTooltipClasses;
+    sx?: SxProps<Theme>;
+};
+export declare function DefaultChartsItemContent<T extends ChartSeriesType>(props: ChartsItemContentProps<T>): React.JSX.Element | null;
+export declare function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {
+    itemData: ItemInteractionData<T>;
+    content?: React.ElementType<ChartsItemContentProps<T>>;
+    sx?: SxProps<Theme>;
+    classes: ChartsItemContentProps<T>['classes'];
+}): React.JSX.Element;

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
+exports.DefaultChartsItemContent = DefaultChartsItemContent;
+var React = _interopRequireWildcard(require("react"));
+var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _ChartsTooltipTable = require("./ChartsTooltipTable");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function DefaultChartsItemContent(props) {
+  const {
+    series,
+    itemData,
+    sx,
+    classes
+  } = props;
+  if (itemData.dataIndex === undefined) {
+    return null;
+  }
+  const displayedLabel = series.label ?? null;
+  const color = series.color;
+  // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
+  // @ts-ignore
+  const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
+    sx: sx,
+    variant: "outlined",
+    className: classes.root,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipTable, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: classes.markCell,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+              ownerState: {
+                color
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: classes.labelCell,
+            children: displayedLabel
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: classes.valueCell,
+            children: formattedValue
+          })]
+        })
+      })
+    })
+  });
+}
+function ChartsItemTooltipContent(props) {
+  const {
+    content,
+    itemData,
+    sx,
+    classes
+  } = props;
+  const series = React.useContext(_SeriesContextProvider.SeriesContext)[itemData.type].series[itemData.seriesId];
+  const Content = content ?? DefaultChartsItemContent;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+    itemData: itemData,
+    series: series,
+    sx: sx,
+    classes: classes
+  });
+}

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { TriggerOptions } from './utils';
+import { ChartsItemContentProps } from './ChartsItemTooltipContent';
+import { ChartsAxisContentProps } from './ChartsAxisTooltipContent';
+import { ChartsTooltipClasses } from './tooltipClasses';
+export type ChartsTooltipProps = {
+    /**
+     * Select the kind of tooltip to display
+     * - 'item': Shows data about the item below the mouse.
+     * - 'axis': Shows values associated with the hovered x value
+     * - 'none': Does not display tooltip
+     * @default 'item'
+     */
+    trigger?: TriggerOptions;
+    /**
+     * Component to override the tooltip content when triger is set to 'item'.
+     */
+    itemContent?: React.ElementType<ChartsItemContentProps<any>>;
+    /**
+     * Component to override the tooltip content when triger is set to 'axis'.
+     */
+    axisContent?: React.ElementType<ChartsAxisContentProps>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsTooltipClasses>;
+};
+declare function ChartsTooltip(props: ChartsTooltipProps): React.JSX.Element | null;
+declare namespace ChartsTooltip {
+    var propTypes: any;
+}
+export { ChartsTooltip };