@mui/x-charts 6.0.0-alpha.0

package/LineChart/LineChart.js

@@ -0,0 +1,266 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineChart = LineChart;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _AreaPlot = require("./AreaPlot");
+var _LinePlot = require("./LinePlot");
+var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
+var _MarkPlot = require("./MarkPlot");
+var _ChartsAxis = require("../ChartsAxis/ChartsAxis");
+var _constants = require("../constants");
+var _ChartsTooltip = require("../ChartsTooltip");
+var _ChartsLegend = require("../ChartsLegend");
+var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
+var _ChartsClipPath = require("../ChartsClipPath");
+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 LineChart(props) {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    sx,
+    tooltip,
+    axisHighlight = {
+      x: 'line'
+    },
+    legend,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    children
+  } = props;
+  const id = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+    series: series.map(s => (0, _extends2.default)({
+      type: 'line'
+    }, s)),
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: xAxis ?? [{
+      id: _constants.DEFAULT_X_AXIS_KEY,
+      scaleType: 'point',
+      data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
+    }],
+    yAxis: yAxis,
+    colors: colors,
+    sx: sx,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+      clipPath: `url(#${clipPathId})`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+      id: clipPathId
+    }), children]
+  });
+}
+process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  axisHighlight: _propTypes.default.shape({
+    x: _propTypes.default.oneOf(['band', 'line', 'none']),
+    y: _propTypes.default.oneOf(['line', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the the bottom of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * @default xAxisIds[0] The id of the first provided axis
+   */
+  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
+    axisId: _propTypes.default.string.isRequired,
+    classes: _propTypes.default.object,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'top']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number
+  }), _propTypes.default.string]),
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  desc: _propTypes.default.string,
+  disableAxisListener: _propTypes.default.bool,
+  height: _propTypes.default.number,
+  /**
+   * Indicate which axis to display the the left of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * @default yAxisIds[0] The id of the first provided axis
+   */
+  leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
+    axisId: _propTypes.default.string.isRequired,
+    classes: _propTypes.default.object,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'right']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number
+  }), _propTypes.default.string]),
+  legend: _propTypes.default.shape({
+    classes: _propTypes.default.object,
+    direction: _propTypes.default.oneOf(['column', 'row']),
+    itemWidth: _propTypes.default.number,
+    markSize: _propTypes.default.number,
+    offset: _propTypes.default.shape({
+      x: _propTypes.default.number,
+      y: _propTypes.default.number
+    }),
+    position: _propTypes.default.shape({
+      horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
+      vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
+    }),
+    spacing: _propTypes.default.number
+  }),
+  margin: _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  }),
+  /**
+   * Indicate which axis to display the the right of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * @default null
+   */
+  rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
+    axisId: _propTypes.default.string.isRequired,
+    classes: _propTypes.default.object,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'right']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number
+  }), _propTypes.default.string]),
+  series: _propTypes.default.arrayOf(_propTypes.default.shape({
+    area: _propTypes.default.bool,
+    color: _propTypes.default.string,
+    curve: _propTypes.default.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
+    data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+    highlightScope: _propTypes.default.shape({
+      faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+      highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
+    }),
+    id: _propTypes.default.string,
+    label: _propTypes.default.string,
+    stack: _propTypes.default.string,
+    stackOffset: _propTypes.default.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
+    stackOrder: _propTypes.default.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
+    type: _propTypes.default.oneOf(['line']),
+    valueFormatter: _propTypes.default.func,
+    xAxisKey: _propTypes.default.string,
+    yAxisKey: _propTypes.default.string
+  })).isRequired,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  title: _propTypes.default.string,
+  tooltip: _propTypes.default.shape({
+    axisContent: _propTypes.default.elementType,
+    classes: _propTypes.default.object,
+    itemContent: _propTypes.default.elementType,
+    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the the top of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * @default null
+   */
+  topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
+    axisId: _propTypes.default.string.isRequired,
+    classes: _propTypes.default.object,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'top']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number
+  }), _propTypes.default.string]),
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  }),
+  width: _propTypes.default.number,
+  xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.string,
+    classes: _propTypes.default.object,
+    data: _propTypes.default.array,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    id: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    max: _propTypes.default.number,
+    maxTicks: _propTypes.default.number,
+    min: _propTypes.default.number,
+    minTicks: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
+  })),
+  yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.string,
+    classes: _propTypes.default.object,
+    data: _propTypes.default.array,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    id: _propTypes.default.string,
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    max: _propTypes.default.number,
+    maxTicks: _propTypes.default.number,
+    min: _propTypes.default.number,
+    minTicks: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
+  }))
+} : void 0;

package/LineChart/LineElement.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { HighlightScope } from '../context/HighlightProvider';
+export interface LineElementClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when higlighted. */
+    highlighted: string;
+    /** Styles applied to the root element when faded. */
+    faded: string;
+}
+export type LineElementClassKey = keyof LineElementClasses;
+export interface LineElementOwnerState {
+    id: string;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    classes?: Partial<LineElementClasses>;
+}
+export declare function getLineElementUtilityClass(slot: string): string;
+export declare const lineElementClasses: LineElementClasses;
+export type LineElementProps = Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & {
+    highlightScope?: Partial<HighlightScope>;
+};
+declare function LineElement(props: LineElementProps): React.JSX.Element;
+declare namespace LineElement {
+    var propTypes: any;
+}
+export { LineElement };

package/LineChart/LineElement.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineElement = LineElement;
+exports.getLineElementUtilityClass = getLineElementUtilityClass;
+exports.lineElementClasses = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _d3Color = require("d3-color");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _styles = require("@mui/material/styles");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "classes", "color", "highlightScope"];
+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 getLineElementUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiLineElement', slot);
+}
+const lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded']);
+exports.lineElementClasses = lineElementClasses;
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return (0, _composeClasses.default)(slots, getLineElementUtilityClass, classes);
+};
+const LineElementPath = (0, _styles.styled)('path', {
+  name: 'MuiLineElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  strokeWidth: 2,
+  strokeLinejoin: 'round',
+  fill: 'none',
+  stroke: ownerState.isHighlighted ? (0, _d3Color.color)(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
+  transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
+  opacity: ownerState.isFaded ? 0.3 : 1
+}));
+LineElementPath.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  as: _propTypes.default.elementType,
+  ownerState: _propTypes.default.shape({
+    classes: _propTypes.default.object,
+    color: _propTypes.default.string.isRequired,
+    id: _propTypes.default.string.isRequired,
+    isFaded: _propTypes.default.bool.isRequired,
+    isHighlighted: _propTypes.default.bool.isRequired
+  }).isRequired,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+};
+function LineElement(props) {
+  const {
+      id,
+      classes: innerClasses,
+      color,
+      highlightScope
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const {
+    item
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
+    type: 'line',
+    seriesId: id
+  }, highlightScope);
+  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
+    type: 'line',
+    seriesId: id
+  }, highlightScope);
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LineElementPath, (0, _extends2.default)({}, other, {
+    ownerState: ownerState,
+    className: classes.root
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id
+  })));
+}
+process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
+  highlightScope: _propTypes.default.shape({
+    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
+  })
+} : void 0;

package/LineChart/LinePlot.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function LinePlot(): React.JSX.Element | null;

package/LineChart/LinePlot.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinePlot = LinePlot;
+var React = _interopRequireWildcard(require("react"));
+var _d3Shape = require("d3-shape");
+var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _LineElement = require("./LineElement");
+var _useScale = require("../hooks/useScale");
+var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+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 LinePlot() {
+  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
+  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  if (seriesData === undefined) {
+    return null;
+  }
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = axisData;
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    children: stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return groupIds.flatMap(seriesId => {
+        const {
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData
+        } = series[seriesId];
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
+        const yScale = yAxis[yAxisKey].scale;
+        const xData = xAxis[xAxisKey].data;
+        if (xData === undefined) {
+          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+        }
+        const linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
+        const curve = (0, _getCurve.default)(series[seriesId].curve);
+        const d3Data = xData?.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        }));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineElement.LineElement, {
+          id: seriesId,
+          d: linePath.curve(curve)(d3Data) || undefined,
+          color: series[seriesId].color,
+          highlightScope: series[seriesId].highlightScope
+        }, seriesId);
+      });
+    })
+  });
+}

package/LineChart/MarkElement.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { HighlightScope } from '../context/HighlightProvider';
+export interface MarkElementClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when higlighted. */
+    highlighted: string;
+    /** Styles applied to the root element when faded. */
+    faded: string;
+}
+export type MarkElementClassKey = keyof MarkElementClasses;
+export interface MarkElementOwnerState {
+    id: string;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    x: number;
+    y: number;
+    classes?: Partial<MarkElementClasses>;
+}
+export declare function getMarkElementUtilityClass(slot: string): string;
+export declare const markElementClasses: MarkElementClasses;
+export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & {
+    /**
+     * The shape of the marker.
+     */
+    shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+    /**
+     * The index to the element in the series' data array.
+     */
+    dataIndex: number;
+    highlightScope?: Partial<HighlightScope>;
+};
+declare function MarkElement(props: MarkElementProps): React.JSX.Element;
+declare namespace MarkElement {
+    var propTypes: any;
+}
+export { MarkElement };

package/LineChart/MarkElement.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MarkElement = MarkElement;
+exports.getMarkElementUtilityClass = getMarkElementUtilityClass;
+exports.markElementClasses = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _styles = require("@mui/material/styles");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _d3Shape = require("d3-shape");
+var _utils = require("../internals/utils");
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope"];
+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 getMarkElementUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiMarkElement', slot);
+}
+const markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded']);
+exports.markElementClasses = markElementClasses;
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return (0, _composeClasses.default)(slots, getMarkElementUtilityClass, classes);
+};
+const MarkElementPath = (0, _styles.styled)('path', {
+  name: 'MuiMarkElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState,
+  theme
+}) => ({
+  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
+  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
+  fill: (theme.vars || theme).palette.background.paper,
+  stroke: ownerState.color,
+  strokeWidth: 2,
+  '&.MuiMarkElement-highlighted': {
+    fill: ownerState.color
+  }
+}));
+MarkElementPath.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  as: _propTypes.default.elementType,
+  ownerState: _propTypes.default.shape({
+    classes: _propTypes.default.object,
+    color: _propTypes.default.string.isRequired,
+    id: _propTypes.default.string.isRequired,
+    isFaded: _propTypes.default.bool.isRequired,
+    isHighlighted: _propTypes.default.bool.isRequired,
+    x: _propTypes.default.number.isRequired,
+    y: _propTypes.default.number.isRequired
+  }).isRequired,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+};
+function MarkElement(props) {
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color,
+      shape,
+      dataIndex,
+      highlightScope
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const {
+    item,
+    axis
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const isHighlighted = axis.x?.index === dataIndex || (0, _useInteractionItemProps.getIsHighlighted)(item, {
+    type: 'line',
+    seriesId: id
+  }, highlightScope);
+  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
+    type: 'line',
+    seriesId: id
+  }, highlightScope);
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted,
+    isFaded,
+    color,
+    x,
+    y
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
+    ownerState: ownerState,
+    className: classes.root,
+    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _utils.getSymbol)(shape)])()
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: _propTypes.default.number.isRequired,
+  highlightScope: _propTypes.default.shape({
+    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
+  }),
+  /**
+   * The shape of the marker.
+   */
+  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
+} : void 0;

package/LineChart/MarkPlot.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function MarkPlot(): React.JSX.Element | null;