@mui/x-charts
Version:
The community edition of MUI X Charts components.
191 lines (190 loc) • 7.8 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.ChartsLegend = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
var _useLegend = require("../hooks/useLegend");
var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
var _onClickContextBuilder = require("./onClickContextBuilder");
var _chartsLegendClasses = require("./chartsLegendClasses");
var _consumeSlots = require("../internals/consumeSlots");
var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
var _ChartProvider = require("../context/ChartProvider");
var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
var _useStore = require("../internals/store/useStore");
var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["direction", "onItemClick", "className", "classes", "toggleVisibilityOnClick"];
const RootElement = (0, _styles.styled)('ul', {
name: 'MuiChartsLegend',
slot: 'Root'
})(({
ownerState,
theme
}) => (0, _extends2.default)({}, theme.typography.caption, {
color: (theme.vars || theme).palette.text.primary,
lineHeight: '100%',
display: 'flex',
flexDirection: ownerState.direction === 'vertical' ? 'column' : 'row',
alignItems: ownerState.direction === 'vertical' ? undefined : 'center',
flexShrink: 0,
gap: theme.spacing(2),
listStyleType: 'none',
paddingInlineStart: 0,
marginBlock: theme.spacing(1),
marginInline: theme.spacing(1),
flexWrap: 'wrap',
li: {
display: ownerState.direction === 'horizontal' ? 'inline-flex' : undefined
},
[`button.${_chartsLegendClasses.legendClasses.series}`]: {
// Reset button styles
background: 'none',
border: 'none',
padding: 0,
fontFamily: 'inherit',
fontWeight: 'inherit',
fontSize: 'inherit',
letterSpacing: 'inherit',
color: 'inherit'
},
[`& .${_chartsLegendClasses.legendClasses.series}`]: {
display: ownerState.direction === 'vertical' ? 'flex' : 'inline-flex',
alignItems: 'center',
gap: theme.spacing(1),
cursor: ownerState.onItemClick || ownerState.toggleVisibilityOnClick ? 'pointer' : 'default',
[`&.${_chartsLegendClasses.legendClasses.hidden}`]: {
opacity: 0.5
}
},
gridArea: 'legend'
}));
const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('MuiChartsLegend', 'legend', {
defaultProps: {
direction: 'horizontal'
},
// @ts-expect-error position is used only in the slots, but it is passed to the SVG wrapper.
// We omit it here to avoid passing to slots.
omitProps: ['position'],
classesResolver: _chartsLegendClasses.useUtilityClasses
}, /*#__PURE__*/React.forwardRef(function ChartsLegend(props, ref) {
const data = (0, _useLegend.useLegend)();
const {
instance
} = (0, _ChartProvider.useChartContext)();
const store = (0, _useStore.useStore)();
const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
const {
onItemClick,
className,
classes,
toggleVisibilityOnClick
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const isButton = Boolean(onItemClick || toggleVisibilityOnClick);
const Element = isButton ? 'button' : 'div';
const handleClick = (0, _useEventCallback.default)((item, i) => event => {
if (onItemClick && item) {
onItemClick(event, (0, _onClickContextBuilder.seriesContextBuilder)(item), i);
}
if (toggleVisibilityOnClick) {
instance.toggleItemVisibility({
// TODO: Remove in v9
// @ts-expect-error item always has type defined.
type: item.type,
seriesId: item.seriesId,
dataIndex: item.dataIndex
});
}
});
if (data.items.length === 0) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootElement, (0, _extends2.default)({
className: (0, _clsx.default)(classes?.root, className),
ref: ref
}, other, {
ownerState: props,
children: data.items.map((item, i) => {
const isVisible = isItemVisible(seriesConfig, {
// TODO: Remove in v9
// @ts-expect-error item always has type defined.
type: item.type,
seriesId: item.seriesId,
dataIndex: item.dataIndex
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
className: classes?.item,
"data-series": item.seriesId,
"data-index": item.dataIndex,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, {
className: (0, _clsx.default)(classes?.series, !isVisible && classes?.hidden),
role: isButton ? 'button' : undefined,
type: isButton ? 'button' : undefined
// @ts-expect-error onClick is only attached to a button
,
onClick: isButton ? handleClick(item, i) : undefined,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
className: classes?.mark,
color: item.color,
type: item.markType
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
className: classes?.label,
children: item.label
})]
})
}, `${item.seriesId}-${item.dataIndex}`);
})
}));
}));
if (process.env.NODE_ENV !== "production") ChartsLegend.displayName = "ChartsLegend";
process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
className: _propTypes.default.string,
/**
* The direction of the legend layout.
* The default depends on the chart.
*/
direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
/**
* Callback fired when a legend item is clicked.
* @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
* @param {SeriesLegendItemContext} legendItem The legend item data.
* @param {number} index The index of the clicked legend item.
*/
onItemClick: _propTypes.default.func,
/**
* The props used for each component slot.
* @default {}
*/
slotProps: _propTypes.default.object,
/**
* Overridable component slots.
* @default {}
*/
slots: _propTypes.default.object,
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]),
/**
* If `true`, clicking on a legend item will toggle the visibility of the corresponding series.
* @default false
*/
toggleVisibilityOnClick: _propTypes.default.bool
} : void 0;