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

The community edition of MUI X Charts components.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useLinePlotData = useLinePlotData;
var React = _interopRequireWildcard(require("react"));
var _warning = require("@mui/x-internals/warning");
var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
var _useChartGradientId = require("../hooks/useChartGradientId");
var _isBandScale = require("../internals/isBandScale");
var _getCurve = require("../internals/getCurve");
var _hooks = require("../hooks");
var _constants = require("../constants");
function useLinePlotData(xAxes, yAxes) {
  const seriesData = (0, _hooks.useLineSeriesContext)();
  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();

  // This memo prevents odd line chart behavior when hydrating.
  const allData = React.useMemo(() => {
    if (seriesData === undefined) {
      return [];
    }
    const {
      series,
      stackingGroups
    } = seriesData;
    const linePlotData = [];
    for (const stackingGroup of stackingGroups) {
      const groupIds = stackingGroup.ids;
      for (const seriesId of groupIds) {
        const {
          xAxisId = defaultXAxisId,
          yAxisId = defaultYAxisId,
          stackedData,
          data,
          connectNulls,
          curve,
          strictStepCurve
        } = series[seriesId];
        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
          continue;
        }
        const xScale = xAxes[xAxisId].scale;
        const xPosition = (0, _hooks.getValueToPositionMapper)(xScale);
        const yScale = yAxes[yAxisId].scale;
        const xData = xAxes[xAxisId].data;
        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
        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.`);
          }
          if (xData.length < stackedData.length) {
            (0, _warning.warnOnce)(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
          }
        }
        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
        const formattedData = xData?.flatMap((x, index) => {
          const nullData = data[index] == null;
          if (shouldExpand) {
            const rep = [{
              x,
              y: stackedData[index],
              nullData,
              isExtension: false
            }];
            if (!nullData && (index === 0 || data[index - 1] == null)) {
              rep.unshift({
                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
                y: stackedData[index],
                nullData,
                isExtension: true
              });
            }
            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
              rep.push({
                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
                y: stackedData[index],
                nullData,
                isExtension: true
              });
            }
            return rep;
          }
          return {
            x,
            y: stackedData[index],
            nullData
          };
        }) ?? [];
        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
        const linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
        const d = linePath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
        linePlotData.push({
          color: series[seriesId].color,
          gradientId,
          d,
          seriesId
        });
      }
    }
    return linePlotData;
  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
  return allData;
}