@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
64 lines • 4.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartLegendTooltip = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const hoist_non_react_statics_1 = tslib_1.__importDefault(require("hoist-non-react-statics"));
const victory_core_1 = require("victory-core");
const victory_tooltip_1 = require("victory-tooltip");
const ChartCursorTooltip_1 = require("../ChartCursorTooltip/ChartCursorTooltip");
const ChartLegendTooltipContent_1 = require("./ChartLegendTooltipContent");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const ChartTooltip_1 = require("../ChartTooltip/ChartTooltip");
const chart_tooltip_1 = require("../ChartUtils/chart-tooltip");
const chart_theme_1 = require("../ChartUtils/chart-theme");
const ChartLegendTooltip = (_a) => {
var { activePoints, center = { x: 0, y: 0 }, datum, flyoutHeight, flyoutWidth, height, isCursorTooltip = true, labelComponent = (0, jsx_runtime_1.jsx)(ChartLegendTooltipContent_1.ChartLegendTooltipContent, {}), legendData, patternScale, text, themeColor, title, width,
// destructure last
theme = (0, chart_theme_1.getTheme)(themeColor) } = _a, rest = tslib_1.__rest(_a, ["activePoints", "center", "datum", "flyoutHeight", "flyoutWidth", "height", "isCursorTooltip", "labelComponent", "legendData", "patternScale", "text", "themeColor", "title", "width", "theme"]);
const pointerLength = theme && theme.tooltip ? victory_core_1.Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
const legendTooltipProps = () => ({
legendData: (0, chart_tooltip_1.getLegendTooltipVisibleData)({ activePoints, legendData, text, theme }),
legendProps: (0, chart_tooltip_1.getLegendTooltipDataProps)(labelComponent.props.legendComponent ? labelComponent.props.legendComponent.props : undefined),
text: (0, chart_tooltip_1.getLegendTooltipVisibleText)({ activePoints, legendData, text }),
theme
});
// Returns flyout height based on legend size
const getFlyoutHeight = ({ height }) => {
const _flyoutHeight = height + ChartStyles_1.ChartLegendTooltipStyles.flyout.padding;
return title ? _flyoutHeight : _flyoutHeight - 10;
};
// Returns flyout width based on legend size
const getFlyoutWidth = ({ width }) => width + ChartStyles_1.ChartLegendTooltipStyles.flyout.padding;
// Returns the tooltip content component
const getTooltipContentComponent = (props) => (0, react_1.cloneElement)(labelComponent, Object.assign({ center, flyoutHeight: flyoutHeight || getFlyoutHeight(props), flyoutWidth: flyoutWidth || getFlyoutWidth(props), height,
legendData,
patternScale,
title,
width }, labelComponent.props));
// Returns the tooltip component
const getTooltipComponent = () => {
// There must be at least one active, visible item or else this will return zero for height & width.
const legendSize = (0, chart_tooltip_1.getLegendTooltipSize)(legendTooltipProps());
if (legendSize.height === 0 && legendSize.width === 0) {
return null;
}
const _flyoutWidth = getFlyoutWidth(legendSize);
const tooltipComponent = isCursorTooltip ? (0, jsx_runtime_1.jsx)(ChartCursorTooltip_1.ChartCursorTooltip, {}) : (0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip, {});
return (0, react_1.cloneElement)(tooltipComponent, Object.assign(Object.assign(Object.assign({ activePoints,
center,
datum, flyoutHeight: flyoutHeight || getFlyoutHeight(legendSize), flyoutWidth: flyoutWidth || getFlyoutWidth(legendSize), height, labelComponent: getTooltipContentComponent(legendSize) }, (flyoutWidth === undefined && {
showPointer: width > _flyoutWidth + center.x + pointerLength || center.x > _flyoutWidth + pointerLength
})), { text,
theme,
themeColor,
width }), rest));
};
return getTooltipComponent();
};
exports.ChartLegendTooltip = ChartLegendTooltip;
exports.ChartLegendTooltip.displayName = 'ChartLegendTooltip';
// Note: VictoryTooltip.defaultEvents must be hoisted
(0, hoist_non_react_statics_1.default)(exports.ChartLegendTooltip, victory_tooltip_1.VictoryTooltip);
//# sourceMappingURL=ChartLegendTooltip.js.map