@mui/x-charts
Version:
The community edition of the charts components (MUI X).
335 lines (332 loc) • 12.2 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _extends from "@babel/runtime/helpers/esm/extends";
var _excluded = ["scale", "tickNumber"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { useSlotProps } from '@mui/base/utils';
import { unstable_composeClasses as composeClasses } from '@mui/utils';
import { useThemeProps, useTheme } from '@mui/material/styles';
import { CartesianContext } from '../context/CartesianContextProvider';
import { DrawingContext } from '../context/DrawingProvider';
import useTicks from '../hooks/useTicks';
import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
import { AxisRoot } from '../internals/components/AxisSharedComponents';
import { ChartsText } from '../ChartsText';
import { getMinXTranslation } from '../internals/geometry';
import { useMounted } from '../hooks/useMounted';
import { getWordsByLines } from '../internals/getWordsByLines';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useUtilityClasses = function useUtilityClasses(ownerState) {
var classes = ownerState.classes,
position = ownerState.position;
var slots = {
root: ['root', 'directionX', position],
line: ['line'],
tickContainer: ['tickContainer'],
tick: ['tick'],
tickLabel: ['tickLabel'],
label: ['label']
};
return composeClasses(slots, getAxisUtilityClass, classes);
};
function addLabelDimension(xTicks, _ref) {
var style = _ref.tickLabelStyle,
tickLabelInterval = _ref.tickLabelInterval,
isMounted = _ref.isMounted;
var withDimension = xTicks.map(function (tick) {
if (!isMounted || tick.formattedValue === undefined) {
return _extends({}, tick, {
width: 0,
height: 0
});
}
var tickSizes = getWordsByLines({
style: style,
needsComputation: true,
text: tick.formattedValue
});
return _extends({}, tick, {
width: Math.max.apply(Math, _toConsumableArray(tickSizes.map(function (size) {
return size.width;
}))),
height: Math.max(tickSizes.length * tickSizes[0].height)
});
});
if (typeof tickLabelInterval === 'function') {
return withDimension.map(function (item, index) {
return _extends({}, item, {
skipLabel: !tickLabelInterval(item.value, index)
});
});
}
// Filter label to avoid overlap
var textStart = 0;
var textEnd = 0;
return withDimension.map(function (item, labelIndex) {
var width = item.width,
offset = item.offset,
labelOffset = item.labelOffset,
height = item.height;
var distance = getMinXTranslation(width, height, style == null ? void 0 : style.angle);
var textPosition = offset + labelOffset;
var gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
textStart = textPosition - gapRatio * distance / 2;
if (labelIndex > 0 && textStart < textEnd) {
// Except for the first label, we skip all label that overlap with the last accepted.
// Notice that the early return prevents `textEnd` from being updated.
return _extends({}, item, {
skipLabel: true
});
}
textEnd = textPosition + gapRatio * distance / 2;
return item;
});
}
var defaultProps = {
position: 'bottom',
disableLine: false,
disableTicks: false,
tickSize: 6
};
/**
* Demos:
*
* - [Axis](https://mui.com/x/react-charts/axis/)
*
* API:
*
* - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
*/
function ChartsXAxis(inProps) {
var _props$axisId, _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
var props = useThemeProps({
props: _extends({}, defaultProps, inProps),
name: 'MuiChartsXAxis'
});
var _React$useContext = React.useContext(CartesianContext),
xAxisIds = _React$useContext.xAxisIds;
var _React$useContext2 = React.useContext(CartesianContext),
_React$useContext2$xA = _React$useContext2.xAxis[(_props$axisId = props.axisId) != null ? _props$axisId : xAxisIds[0]],
xScale = _React$useContext2$xA.scale,
tickNumber = _React$useContext2$xA.tickNumber,
settings = _objectWithoutProperties(_React$useContext2$xA, _excluded);
var isMounted = useMounted();
var defaultizedProps = _extends({}, defaultProps, settings, props);
var position = defaultizedProps.position,
disableLine = defaultizedProps.disableLine,
disableTicks = defaultizedProps.disableTicks,
tickLabelStyle = defaultizedProps.tickLabelStyle,
label = defaultizedProps.label,
labelStyle = defaultizedProps.labelStyle,
tickFontSize = defaultizedProps.tickFontSize,
labelFontSize = defaultizedProps.labelFontSize,
tickSizeProp = defaultizedProps.tickSize,
valueFormatter = defaultizedProps.valueFormatter,
slots = defaultizedProps.slots,
slotProps = defaultizedProps.slotProps,
tickInterval = defaultizedProps.tickInterval,
tickLabelInterval = defaultizedProps.tickLabelInterval;
var theme = useTheme();
var classes = useUtilityClasses(_extends({}, defaultizedProps, {
theme: theme
}));
var _React$useContext3 = React.useContext(DrawingContext),
left = _React$useContext3.left,
top = _React$useContext3.top,
width = _React$useContext3.width,
height = _React$useContext3.height;
var tickSize = disableTicks ? 4 : tickSizeProp;
var positionSign = position === 'bottom' ? 1 : -1;
var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
var axisTickLabelProps = useSlotProps({
elementType: TickLabel,
externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
additionalProps: {
style: _extends({
textAnchor: 'middle',
dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
fontSize: tickFontSize != null ? tickFontSize : 12
}, tickLabelStyle),
className: classes.tickLabel
},
className: classes.tickLabel,
ownerState: {}
});
var xTicks = useTicks({
scale: xScale,
tickNumber: tickNumber,
valueFormatter: valueFormatter,
tickInterval: tickInterval
});
var xTicksWithDimension = addLabelDimension(xTicks, {
tickLabelStyle: axisTickLabelProps.style,
tickLabelInterval: tickLabelInterval,
isMounted: isMounted
});
var labelRefPoint = {
x: left + width / 2,
y: positionSign * (tickSize + 22)
};
var axisLabelProps = useSlotProps({
elementType: Label,
externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
additionalProps: {
style: _extends({
fontSize: labelFontSize != null ? labelFontSize : 14,
textAnchor: 'middle',
dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
}, labelStyle)
},
ownerState: {}
});
return /*#__PURE__*/_jsxs(AxisRoot, {
transform: "translate(0, ".concat(position === 'bottom' ? top + height : top, ")"),
className: classes.root,
children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
x1: xScale.range()[0],
x2: xScale.range()[1],
className: classes.line
}, slotProps == null ? void 0 : slotProps.axisLine)), xTicksWithDimension.map(function (_ref2, index) {
var formattedValue = _ref2.formattedValue,
offset = _ref2.offset,
labelOffset = _ref2.labelOffset,
skipLabel = _ref2.skipLabel;
var xTickLabel = labelOffset != null ? labelOffset : 0;
var yTickLabel = positionSign * (tickSize + 3);
return /*#__PURE__*/_jsxs("g", {
transform: "translate(".concat(offset, ", 0)"),
className: classes.tickContainer,
children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
y2: positionSign * tickSize,
className: classes.tick
}, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
x: xTickLabel,
y: yTickLabel
}, axisTickLabelProps, {
text: formattedValue.toString()
}))]
}, index);
}), label && /*#__PURE__*/_jsx("g", {
className: classes.label,
children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
text: label
}))
})]
});
}
process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The id of the axis to render.
* If undefined, it will be the first defined axis.
*/
axisId: PropTypes.string,
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* If true, the axis line is disabled.
* @default false
*/
disableLine: PropTypes.bool,
/**
* If true, the ticks are disabled.
* @default false
*/
disableTicks: PropTypes.bool,
/**
* The fill color of the axis text.
* @default 'currentColor'
*/
fill: PropTypes.string,
/**
* The label of the axis.
*/
label: PropTypes.string,
/**
* The font size of the axis label.
* @default 14
* @deprecated Consider using `labelStyle.fontSize` instead.
*/
labelFontSize: PropTypes.number,
/**
* The style applied to the axis label.
*/
labelStyle: PropTypes.object,
/**
* Position of the axis.
*/
position: PropTypes.oneOf(['bottom', 'top']),
/**
* The props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* Overridable component slots.
* @default {}
*/
slots: PropTypes.object,
/**
* The stroke color of the axis line.
* @default 'currentColor'
*/
stroke: PropTypes.string,
/**
* The font size of the axis ticks text.
* @default 12
* @deprecated Consider using `tickLabelStyle.fontSize` instead.
*/
tickFontSize: PropTypes.number,
/**
* Defines which ticks are displayed. Its value can be:
* - 'auto' In such case the ticks are computed based on axis scale and other parameters.
* - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
* - an array containing the values where ticks should be displayed.
* @default 'auto'
*/
tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
/**
* Defines which ticks get its label displayed. Its value can be:
* - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
* - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
* @default 'auto'
*/
tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
/**
* The style applied to ticks text.
*/
tickLabelStyle: PropTypes.object,
/**
* Maximal step between two ticks.
* When using time data, the value is assumed to be in ms.
* Not supported by categorical axis (band, points).
*/
tickMaxStep: PropTypes.number,
/**
* Maximal step between two ticks.
* When using time data, the value is assumed to be in ms.
* Not supported by categorical axis (band, points).
*/
tickMinStep: PropTypes.number,
/**
* The number of ticks. This number is not guaranted.
* Not supported by categorical axis (band, points).
*/
tickNumber: PropTypes.number,
/**
* The size of the ticks.
* @default 6
*/
tickSize: PropTypes.number
} : void 0;
export { ChartsXAxis };