@mui/x-charts
Version:
The community edition of MUI X Charts components.
272 lines (271 loc) • 11 kB
JavaScript
;
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PiecewiseColorLegend = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@mui/material/styles");
var _clsx = _interopRequireDefault(require("clsx"));
var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
var _consumeThemeProps = require("../internals/consumeThemeProps");
var _piecewiseColorLegendClasses = require("./piecewiseColorLegendClasses");
var _useAxis = require("./useAxis");
var _piecewiseColorDefaultLabelFormatter = require("./piecewiseColorDefaultLabelFormatter");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["direction", "classes", "className", "markType", "labelPosition", "axisDirection", "axisId", "labelFormatter", "onItemClick"];
const RootElement = (0, _styles.styled)('ul', {
name: 'MuiPiecewiseColorLegend',
slot: 'Root'
})(({
theme,
ownerState
}) => {
return (0, _extends2.default)({}, theme.typography.caption, {
color: (theme.vars || theme).palette.text.primary,
lineHeight: '100%',
display: 'flex',
flexDirection: ownerState.direction === 'vertical' ? 'column' : 'row',
flexShrink: 0,
gap: theme.spacing(0.5),
listStyleType: 'none',
paddingInlineStart: 0,
marginBlock: theme.spacing(1),
marginInline: theme.spacing(1),
width: 'max-content',
[`button.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
// Reset button styles
background: 'none',
border: 'none',
padding: 0,
cursor: ownerState.onItemClick ? 'pointer' : 'unset',
fontFamily: 'inherit',
fontWeight: 'inherit',
fontSize: 'inherit',
letterSpacing: 'inherit',
color: 'inherit'
},
[`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
display: 'flex',
gap: theme.spacing(0.5)
},
[`li :not(.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}) .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses?.mark}`]: {
alignSelf: 'center'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
alignItems: 'end'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
alignItems: 'start'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.horizontal}`]: {
alignItems: 'center',
[`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
flexDirection: 'column'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
alignItems: 'end'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
alignItems: 'start'
},
[`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}`]: {
alignItems: 'end'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.extremes}`]: {
[`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}`]: {
alignItems: 'center',
display: 'flex',
flexDirection: 'row'
}
}
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.vertical}`]: {
[`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
flexDirection: 'row',
alignItems: 'center'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
alignItems: 'end'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
alignItems: 'start'
},
[`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.extremes}`]: {
alignItems: 'center',
[`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}`]: {
alignItems: 'center',
display: 'flex',
flexDirection: 'column'
}
}
}
});
});
const PiecewiseColorLegend = exports.PiecewiseColorLegend = (0, _consumeThemeProps.consumeThemeProps)('MuiPiecewiseColorLegend', {
defaultProps: {
direction: 'horizontal',
labelPosition: 'extremes',
labelFormatter: _piecewiseColorDefaultLabelFormatter.piecewiseColorDefaultLabelFormatter
},
classesResolver: _piecewiseColorLegendClasses.useUtilityClasses
}, function PiecewiseColorLegend(props, ref) {
const {
direction,
classes,
className,
markType,
labelPosition,
axisDirection,
axisId,
labelFormatter,
onItemClick
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const isVertical = direction === 'vertical';
const isReverse = isVertical;
const axisItem = (0, _useAxis.useAxis)({
axisDirection,
axisId
});
const colorMap = axisItem?.colorMap;
if (!colorMap || !colorMap.type || colorMap.type !== 'piecewise') {
return null;
}
const valueFormatter = v => axisItem.valueFormatter?.(v, {
location: 'legend'
}) ?? v.toLocaleString();
const formattedLabels = colorMap.thresholds.map(valueFormatter);
const startClass = isReverse ? classes?.maxLabel : classes?.minLabel;
const endClass = isReverse ? classes?.minLabel : classes?.maxLabel;
const colors = colorMap.colors.map((color, colorIndex) => ({
color,
colorIndex
}));
const orderedColors = isReverse ? colors.reverse() : colors;
const isStart = labelPosition === 'start';
const isEnd = labelPosition === 'end';
const isExtremes = labelPosition === 'extremes';
return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootElement, (0, _extends2.default)({
className: (0, _clsx.default)(classes?.root, className),
ref: ref
}, other, {
ownerState: props,
children: orderedColors.map(({
color,
colorIndex
}, index) => {
const isFirst = index === 0;
const isLast = index === colorMap.colors.length - 1;
const isFirstColor = colorIndex === 0;
const isLastColor = colorIndex === colorMap.colors.length - 1;
const data = (0, _extends2.default)({
index: colorIndex,
length: formattedLabels.length
}, isFirstColor ? {
min: null,
formattedMin: null
} : {
min: colorMap.thresholds[colorIndex - 1],
formattedMin: formattedLabels[colorIndex - 1]
}, isLastColor ? {
max: null,
formattedMax: null
} : {
max: colorMap.thresholds[colorIndex],
formattedMax: formattedLabels[colorIndex]
});
const label = labelFormatter?.(data);
if (label === null || label === undefined) {
return null;
}
const isTextBefore = isStart || isExtremes && isFirst;
const isTextAfter = isEnd || isExtremes && isLast;
const clickObject = {
type: 'piecewiseColor',
color,
label,
minValue: data.min,
maxValue: data.max
};
const Element = onItemClick ? 'button' : 'div';
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, {
role: onItemClick ? 'button' : undefined,
type: onItemClick ? 'button' : undefined,
onClick:
// @ts-ignore onClick is only attached to a button
onItemClick ? event => onItemClick(event, clickObject, index) : undefined,
className: (0, _clsx.default)(classes?.item, index === 0 && `${startClass}`, index === orderedColors.length - 1 && `${endClass}`),
children: [isTextBefore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
className: classes?.label,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
className: classes?.mark,
type: markType,
color: color
}), isTextAfter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
className: classes?.label,
children: label
})]
})
}, colorIndex);
})
}));
});
process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* The axis direction containing the color configuration to represent.
* @default 'z'
*/
axisDirection: _propTypes.default.oneOf(['x', 'y', 'z']),
/**
* The id of the axis item with the color configuration to represent.
* @default The first axis item.
*/
axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
className: _propTypes.default.string,
/**
* The direction of the legend layout.
* @default 'horizontal'
*/
direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
/**
* Format the legend labels.
* @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
* @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
*/
labelFormatter: _propTypes.default.func,
/**
* Where to position the labels relative to the gradient.
* @default 'extremes'
*/
labelPosition: _propTypes.default.oneOf(['start', 'end', 'extremes']),
/**
* The type of the mark.
* @default 'square'
*/
markType: _propTypes.default.oneOf(['square', 'circle', 'line']),
/**
* Callback fired when a legend item is clicked.
* @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
* @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
* @param {number} index The index of the clicked legend item.
*/
onItemClick: _propTypes.default.func,
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
} : void 0;