@mui/x-charts
Version:
The community edition of MUI X Charts components.
276 lines (273 loc) • 10.5 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.ContinuousColorLegend = 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 _useAxis = require("./useAxis");
var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
var _ChartsLabelGradient = require("../ChartsLabel/ChartsLabelGradient");
var _consumeThemeProps = require("../internals/consumeThemeProps");
var _continuousColorLegendClasses = require("./continuousColorLegendClasses");
var _useChartGradientId = require("../hooks/useChartGradientId");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["minLabel", "maxLabel", "direction", "axisDirection", "axisId", "rotateGradient", "reverse", "classes", "className", "gradientId", "labelPosition", "thickness"];
const templateAreas = reverse => {
const startLabel = reverse ? 'max-label' : 'min-label';
const endLabel = reverse ? 'min-label' : 'max-label';
return {
row: {
start: `
'${startLabel} . ${endLabel}'
'gradient gradient gradient'
`,
end: `
'gradient gradient gradient'
'${startLabel} . ${endLabel}'
`,
extremes: `
'${startLabel} gradient ${endLabel}'
`
},
column: {
start: `
'${endLabel} gradient'
'. gradient'
'${startLabel} gradient'
`,
end: `
'gradient ${endLabel}'
'gradient .'
'gradient ${startLabel}'
`,
extremes: `
'${endLabel}'
'gradient'
'${startLabel}'
`
}
};
};
const RootElement = (0, _styles.styled)('ul', {
name: 'MuiContinuousColorLegend',
slot: 'Root'
})(({
theme,
ownerState
}) => (0, _extends2.default)({}, theme.typography.caption, {
color: (theme.vars || theme).palette.text.primary,
lineHeight: '100%',
display: 'grid',
flexShrink: 0,
gap: theme.spacing(0.5),
listStyleType: 'none',
paddingInlineStart: 0,
marginBlock: theme.spacing(1),
marginInline: theme.spacing(1),
[`&.${_continuousColorLegendClasses.continuousColorLegendClasses.horizontal}`]: {
gridTemplateRows: 'min-content min-content',
gridTemplateColumns: 'min-content auto min-content',
[`&.${_continuousColorLegendClasses.continuousColorLegendClasses.start}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).row.start
},
[`&.${_continuousColorLegendClasses.continuousColorLegendClasses.end}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).row.end
},
[`&.${_continuousColorLegendClasses.continuousColorLegendClasses.extremes}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).row.extremes,
gridTemplateRows: 'min-content',
alignItems: 'center'
}
},
[`&.${_continuousColorLegendClasses.continuousColorLegendClasses.vertical}`]: {
gridTemplateRows: 'min-content auto min-content',
gridTemplateColumns: 'min-content min-content',
[`&.${_continuousColorLegendClasses.continuousColorLegendClasses.start}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).column.start,
[`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
justifySelf: 'end'
}
},
[`&.${_continuousColorLegendClasses.continuousColorLegendClasses.end}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).column.end,
[`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
justifySelf: 'start'
}
},
[`&.${_continuousColorLegendClasses.continuousColorLegendClasses.extremes}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).column.extremes,
gridTemplateColumns: 'min-content',
[`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
justifySelf: 'center'
}
}
},
[`.${_continuousColorLegendClasses.continuousColorLegendClasses.gradient}`]: {
gridArea: 'gradient'
},
[`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}`]: {
gridArea: 'max-label'
},
[`.${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
gridArea: 'min-label'
}
}));
const getText = (label, value, formattedValue) => {
if (typeof label === 'string') {
return label;
}
return label?.({
value,
formattedValue
}) ?? formattedValue;
};
const isZAxis = axis => axis.scale === undefined;
const ContinuousColorLegend = exports.ContinuousColorLegend = (0, _consumeThemeProps.consumeThemeProps)('MuiContinuousColorLegend', {
defaultProps: {
direction: 'horizontal',
labelPosition: 'end',
axisDirection: 'z'
},
classesResolver: _continuousColorLegendClasses.useUtilityClasses
}, function ContinuousColorLegend(props, ref) {
const {
minLabel,
maxLabel,
direction,
axisDirection,
axisId,
rotateGradient,
reverse,
classes,
className,
gradientId,
thickness
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const generateGradientId = (0, _useChartGradientId.useChartGradientIdObjectBoundBuilder)();
const axisItem = (0, _useAxis.useAxis)({
axisDirection,
axisId
});
const colorMap = axisItem?.colorMap;
if (!colorMap || !colorMap.type || colorMap.type !== 'continuous') {
return null;
}
const minValue = colorMap.min ?? 0;
const maxValue = colorMap.max ?? 100;
// Get texts to display
const valueFormatter = isZAxis(axisItem) ? undefined : axisItem.valueFormatter;
const formattedMin = valueFormatter ? valueFormatter(minValue, {
location: 'legend'
}) : minValue.toLocaleString();
const formattedMax = valueFormatter ? valueFormatter(maxValue, {
location: 'legend'
}) : maxValue.toLocaleString();
const minText = getText(minLabel, minValue, formattedMin);
const maxText = getText(maxLabel, maxValue, formattedMax);
const minComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
className: classes?.minLabel,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
className: classes?.label,
children: minText
})
});
const maxComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
className: classes?.maxLabel,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
className: classes?.label,
children: maxText
})
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootElement, (0, _extends2.default)({
className: (0, _clsx.default)(classes?.root, className),
ref: ref
}, other, {
ownerState: props,
children: [reverse ? maxComponent : minComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
className: classes?.gradient,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelGradient.ChartsLabelGradient, {
direction: direction,
rotate: rotateGradient,
reverse: reverse,
thickness: thickness,
gradientId: gradientId ?? generateGradientId(axisItem.id)
})
}), reverse ? minComponent : maxComponent]
}));
});
process.env.NODE_ENV !== "production" ? ContinuousColorLegend.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']),
/**
* The id for the gradient to use.
* If not provided, it will use the generated gradient from the axis configuration.
* The `gradientId` will be used as `fill="url(#gradientId)"`.
* @default auto-generated id
*/
gradientId: _propTypes.default.string,
/**
* Where to position the labels relative to the gradient.
* @default 'end'
*/
labelPosition: _propTypes.default.oneOf(['start', 'end', 'extremes']),
/**
* The label to display at the maximum side of the gradient.
* Can either be a string, or a function.
* If not defined, the formatted maximal value is display.
* @default formattedValue
*/
maxLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
/**
* The label to display at the minimum side of the gradient.
* Can either be a string, or a function.
* @default formattedValue
*/
minLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
/**
* If `true`, the gradient and labels will be reversed.
* @default false
*/
reverse: _propTypes.default.bool,
/**
* If provided, the gradient will be rotated by 90deg.
* Useful for linear gradients that are not in the correct orientation.
*/
rotateGradient: _propTypes.default.bool,
/**
* The thickness of the gradient
* @default 12
*/
thickness: _propTypes.default.number,
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;