@mui/x-charts
Version:
The community edition of MUI X Charts components.
270 lines (267 loc) • 9.08 kB
JavaScript
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["minLabel", "maxLabel", "direction", "axisDirection", "axisId", "rotateGradient", "reverse", "classes", "className", "gradientId", "labelPosition", "thickness"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import clsx from 'clsx';
import { useAxis } from "./useAxis.js";
import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
import { ChartsLabelGradient } from "../ChartsLabel/ChartsLabelGradient.js";
import { consumeThemeProps } from "../internals/consumeThemeProps.js";
import { continuousColorLegendClasses, useUtilityClasses } from "./continuousColorLegendClasses.js";
import { useChartGradientIdObjectBoundBuilder } from "../hooks/useChartGradientId.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 = styled('ul', {
name: 'MuiContinuousColorLegend',
slot: 'Root'
})(({
theme,
ownerState
}) => _extends({}, 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.horizontal}`]: {
gridTemplateRows: 'min-content min-content',
gridTemplateColumns: 'min-content auto min-content',
[`&.${continuousColorLegendClasses.start}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).row.start
},
[`&.${continuousColorLegendClasses.end}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).row.end
},
[`&.${continuousColorLegendClasses.extremes}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).row.extremes,
gridTemplateRows: 'min-content',
alignItems: 'center'
}
},
[`&.${continuousColorLegendClasses.vertical}`]: {
gridTemplateRows: 'min-content auto min-content',
gridTemplateColumns: 'min-content min-content',
[`&.${continuousColorLegendClasses.start}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).column.start,
[`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
justifySelf: 'end'
}
},
[`&.${continuousColorLegendClasses.end}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).column.end,
[`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
justifySelf: 'start'
}
},
[`&.${continuousColorLegendClasses.extremes}`]: {
gridTemplateAreas: templateAreas(ownerState.reverse).column.extremes,
gridTemplateColumns: 'min-content',
[`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
justifySelf: 'center'
}
}
},
[`.${continuousColorLegendClasses.gradient}`]: {
gridArea: 'gradient'
},
[`.${continuousColorLegendClasses.maxLabel}`]: {
gridArea: 'max-label'
},
[`.${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 = consumeThemeProps('MuiContinuousColorLegend', {
defaultProps: {
direction: 'horizontal',
labelPosition: 'end',
axisDirection: 'z'
},
classesResolver: useUtilityClasses
}, function ContinuousColorLegend(props, ref) {
const {
minLabel,
maxLabel,
direction,
axisDirection,
axisId,
rotateGradient,
reverse,
classes,
className,
gradientId,
thickness
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const generateGradientId = useChartGradientIdObjectBoundBuilder();
const axisItem = 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__*/_jsx("li", {
className: classes?.minLabel,
children: /*#__PURE__*/_jsx(ChartsLabel, {
className: classes?.label,
children: minText
})
});
const maxComponent = /*#__PURE__*/_jsx("li", {
className: classes?.maxLabel,
children: /*#__PURE__*/_jsx(ChartsLabel, {
className: classes?.label,
children: maxText
})
});
return /*#__PURE__*/_jsxs(RootElement, _extends({
className: clsx(classes?.root, className),
ref: ref
}, other, {
ownerState: props,
children: [reverse ? maxComponent : minComponent, /*#__PURE__*/_jsx("li", {
className: classes?.gradient,
children: /*#__PURE__*/_jsx(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.oneOf(['x', 'y', 'z']),
/**
* The id of the axis item with the color configuration to represent.
* @default The first axis item.
*/
axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
className: PropTypes.string,
/**
* The direction of the legend layout.
* @default 'horizontal'
*/
direction: PropTypes.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.string,
/**
* Where to position the labels relative to the gradient.
* @default 'end'
*/
labelPosition: PropTypes.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.oneOfType([PropTypes.func, PropTypes.string]),
/**
* The label to display at the minimum side of the gradient.
* Can either be a string, or a function.
* @default formattedValue
*/
minLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
/**
* If `true`, the gradient and labels will be reversed.
* @default false
*/
reverse: PropTypes.bool,
/**
* If provided, the gradient will be rotated by 90deg.
* Useful for linear gradients that are not in the correct orientation.
*/
rotateGradient: PropTypes.bool,
/**
* The thickness of the gradient
* @default 12
*/
thickness: PropTypes.number,
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
export { ContinuousColorLegend };