@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
60 lines • 3.89 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { cloneElement } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Helpers } from 'victory-core';
import { VictoryTooltip } from 'victory-tooltip';
import { ChartCursorTooltip } from '../ChartCursorTooltip/ChartCursorTooltip';
import { ChartLegendTooltipContent } from './ChartLegendTooltipContent';
import { ChartLegendTooltipStyles } from '../ChartTheme/ChartStyles';
import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
import { getLegendTooltipDataProps, getLegendTooltipSize, getLegendTooltipVisibleData, getLegendTooltipVisibleText } from '../ChartUtils/chart-tooltip';
import { getTheme } from '../ChartUtils/chart-theme';
export const ChartLegendTooltip = (_a) => {
var { activePoints, center = { x: 0, y: 0 }, datum, flyoutHeight, flyoutWidth, height, isCursorTooltip = true, labelComponent = _jsx(ChartLegendTooltipContent, {}), legendData, patternScale, text, themeColor, title, width,
// destructure last
theme = getTheme(themeColor) } = _a, rest = __rest(_a, ["activePoints", "center", "datum", "flyoutHeight", "flyoutWidth", "height", "isCursorTooltip", "labelComponent", "legendData", "patternScale", "text", "themeColor", "title", "width", "theme"]);
const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
const legendTooltipProps = () => ({
legendData: getLegendTooltipVisibleData({ activePoints, legendData, text, theme }),
legendProps: getLegendTooltipDataProps(labelComponent.props.legendComponent ? labelComponent.props.legendComponent.props : undefined),
text: getLegendTooltipVisibleText({ activePoints, legendData, text }),
theme
});
// Returns flyout height based on legend size
const getFlyoutHeight = ({ height }) => {
const _flyoutHeight = height + ChartLegendTooltipStyles.flyout.padding;
return title ? _flyoutHeight : _flyoutHeight - 10;
};
// Returns flyout width based on legend size
const getFlyoutWidth = ({ width }) => width + ChartLegendTooltipStyles.flyout.padding;
// Returns the tooltip content component
const getTooltipContentComponent = (props) => 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 = getLegendTooltipSize(legendTooltipProps());
if (legendSize.height === 0 && legendSize.width === 0) {
return null;
}
const _flyoutWidth = getFlyoutWidth(legendSize);
const tooltipComponent = isCursorTooltip ? _jsx(ChartCursorTooltip, {}) : _jsx(ChartTooltip, {});
return 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();
};
ChartLegendTooltip.displayName = 'ChartLegendTooltip';
// Note: VictoryTooltip.defaultEvents must be hoisted
hoistNonReactStatics(ChartLegendTooltip, VictoryTooltip);
//# sourceMappingURL=ChartLegendTooltip.js.map