108 lines
4.3 KiB
JavaScript
108 lines
4.3 KiB
JavaScript
"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;
|
|
} |