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

The community edition of MUI X Charts components.

import * as React from 'react';
import { warnOnce } from '@mui/x-internals/warning';
import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
import { isBandScale } from "../internals/isBandScale.js";
import { getCurveFactory } from "../internals/getCurve.js";
import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
export function useLinePlotData(xAxes, yAxes) {
  const seriesData = useLineSeriesContext();
  const defaultXAxisId = useXAxes().xAxisIds[0];
  const defaultYAxisId = useYAxes().yAxisIds[0];
  const getGradientId = 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 = 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 === 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) {
            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 && 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 = d3Line().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(getCurveFactory(curve))(d3Data) || '';
        linePlotData.push({
          color: series[seriesId].color,
          gradientId,
          d,
          seriesId
        });
      }
    }
    return linePlotData;
  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
  return allData;
}