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

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
import PropTypes from 'prop-types';
import * as React from 'react';
import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
import { CircleMarkElement } from "./CircleMarkElement.js";
import { MarkElement } from "./MarkElement.js";
import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.js";
import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
import { useChartContext } from "../context/ChartProvider/index.js";
import { useMarkPlotData } from "./useMarkPlotData.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * 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 = _objectWithoutPropertiesLoose(props, _excluded);
  const isZoomInteracting = useInternalIsZoomInteracting();
  const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
  const {
    xAxis
  } = useXAxes();
  const {
    yAxis
  } = useYAxes();
  const {
    store
  } = useChartContext();
  const {
    isFaded,
    isHighlighted
  } = useItemHighlightedGetter();
  const xAxisHighlightIndexes = store.use(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 = useMarkPlotData(xAxis, yAxis);
  return /*#__PURE__*/_jsx("g", _extends({}, other, {
    children: completedData.map(({
      seriesId,
      clipId,
      shape,
      xAxisId,
      marks,
      hidden
    }) => {
      const Mark = slots?.mark ?? (shape === 'circle' ? CircleMarkElement : MarkElement);
      const isSeriesHighlighted = isHighlighted({
        seriesId
      });
      const isSeriesFaded = !isSeriesHighlighted && isFaded({
        seriesId
      });
      return /*#__PURE__*/_jsx("g", {
        clipPath: `url(#${clipId})`,
        "data-series": seriesId,
        children: marks.map(({
          x,
          y,
          index,
          color
        }) => {
          return /*#__PURE__*/_jsx(Mark, _extends({
            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.func,
  /**
   * If `true`, animations are skipped.
   */
  skipAnimation: PropTypes.bool,
  /**
   * The props used for each component slot.
   * @default {}
   */
  slotProps: PropTypes.object,
  /**
   * Overridable component slots.
   * @default {}
   */
  slots: PropTypes.object
} : void 0;
export { MarkPlot };