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

The community edition of MUI X Charts components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useMarkPlotData = useMarkPlotData;
var React = _interopRequireWildcard(require("react"));
var _useChartId = require("../hooks/useChartId");
var _hooks = require("../hooks");
var _cleanId = require("../internals/cleanId");
var _constants = require("../constants");
var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
var _ChartProvider = require("../context/ChartProvider");
function useMarkPlotData(xAxes, yAxes) {
  const seriesData = (0, _hooks.useLineSeriesContext)();
  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
  const chartId = (0, _useChartId.useChartId)();
  const {
    instance
  } = (0, _ChartProvider.useChartContext)();
  const allData = React.useMemo(() => {
    if (seriesData === undefined) {
      return [];
    }
    const {
      series,
      stackingGroups
    } = seriesData;
    const markPlotData = [];
    for (const stackingGroup of stackingGroups) {
      const groupIds = stackingGroup.ids;
      for (const seriesId of groupIds) {
        const {
          xAxisId = defaultXAxisId,
          yAxisId = defaultYAxisId,
          visibleStackedData,
          data,
          showMark = true,
          shape = 'circle',
          hidden
        } = series[seriesId];
        if (showMark === false) {
          continue;
        }
        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
          continue;
        }
        const xScale = (0, _hooks.getValueToPositionMapper)(xAxes[xAxisId].scale);
        const yScale = yAxes[yAxisId].scale;
        const xData = xAxes[xAxisId].data;
        if (process.env.NODE_ENV !== 'production') {
          if (xData === undefined) {
            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
          }
        }
        const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`);
        const colorGetter = (0, _getColor.default)(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
        const marks = [];
        if (xData) {
          for (let index = 0; index < xData.length; index += 1) {
            const x = xData[index];
            const value = data[index] == null ? null : visibleStackedData[index][1];
            if (value === null) {
              continue;
            }

            // The line fade animation move all the values to the min.
            // So we need to do the same with mark in order for it to look nice.
            const y = yScale(hidden ? yScale.domain()[0] : value);
            const xPos = xScale(x);
            if (!instance.isPointInside(xPos, y)) {
              continue;
            }
            if (showMark !== true) {
              const shouldInclude = showMark({
                x: xPos,
                y,
                index,
                position: x,
                value
              });
              if (!shouldInclude) {
                continue;
              }
            }
            marks.push({
              x: xPos,
              y,
              index,
              color: colorGetter(index)
            });
          }
        }
        markPlotData.push({
          seriesId,
          clipId,
          shape,
          xAxisId,
          marks,
          hidden
        });
      }
    }
    return markPlotData;
  }, [seriesData, defaultXAxisId, defaultYAxisId, chartId, xAxes, yAxes, instance]);
  return allData;
}