@mui/x-charts/LineChart/MarkPlot.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MarkPlot = MarkPlot;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _useSkipAnimation = require("../hooks/useSkipAnimation");
var _CircleMarkElement = require("./CircleMarkElement");
var _MarkElement = require("./MarkElement");
var _hooks = require("../hooks");
var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
var _ChartProvider = require("../context/ChartProvider");
var _useMarkPlotData = require("./useMarkPlotData");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
/**
 * Demos:
 *
 * - [Lines](https://mui.com/x/react-charts/lines/)
 * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
 *
 * API:
 *
 * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
 */
function MarkPlot(props) {
  const {
      slots,
      slotProps,
      skipAnimation: inSkipAnimation,
      onItemClick
    } = props,
    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
  const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
  const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
  const {
    xAxis
  } = (0, _hooks.useXAxes)();
  const {
    yAxis
  } = (0, _hooks.useYAxes)();
  const {
    store
  } = (0, _ChartProvider.useChartContext)();
  const {
    isFaded,
    isHighlighted
  } = (0, _hooks.useItemHighlightedGetter)();
  const xAxisHighlightIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
  const highlightedItems = React.useMemo(() => {
    const rep = {};
    for (const {
      dataIndex,
      axisId
    } of xAxisHighlightIndexes) {
      if (rep[axisId] === undefined) {
        rep[axisId] = new Set([dataIndex]);
      } else {
        rep[axisId].add(dataIndex);
      }
    }
    return rep;
  }, [xAxisHighlightIndexes]);
  const completedData = (0, _useMarkPlotData.useMarkPlotData)(xAxis, yAxis);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
    children: completedData.map(({
      seriesId,
      clipId,
      shape,
      xAxisId,
      marks,
      hidden
    }) => {
      const Mark = slots?.mark ?? (shape === 'circle' ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
      const isSeriesHighlighted = isHighlighted({
        seriesId
      });
      const isSeriesFaded = !isSeriesHighlighted && isFaded({
        seriesId
      });
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
        clipPath: `url(#${clipId})`,
        "data-series": seriesId,
        children: marks.map(({
          x,
          y,
          index,
          color
        }) => {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
            id: seriesId,
            dataIndex: index,
            shape: shape,
            color: color,
            x: x,
            y: y,
            skipAnimation: skipAnimation,
            onClick: onItemClick && (event => onItemClick(event, {
              type: 'line',
              seriesId,
              dataIndex: index
            })),
            isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
            isFaded: isSeriesFaded,
            hidden: hidden
          }, slotProps?.mark), `${seriesId}-${index}`);
        })
      }, seriesId);
    })
  }));
}
process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * Callback fired when a line mark item is clicked.
   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
   */
  onItemClick: _propTypes.default.func,
  /**
   * If `true`, animations are skipped.
   */
  skipAnimation: _propTypes.default.bool,
  /**
   * The props used for each component slot.
   * @default {}
   */
  slotProps: _propTypes.default.object,
  /**
   * Overridable component slots.
   * @default {}
   */
  slots: _propTypes.default.object
} : void 0;