@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
59 lines • 3.86 kB
JavaScript
import { __rest } from "tslib";
import * as React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Helpers } from 'victory-core';
import { VictoryTooltip } from 'victory-tooltip';
import { ChartCursorTooltip } from '../ChartCursorTooltip';
import { ChartLegendTooltipContent } from './ChartLegendTooltipContent';
import { ChartLegendTooltipStyles } from '../ChartTheme';
import { ChartTooltip } from '../ChartTooltip';
import { getLegendTooltipDataProps, getLegendTooltipSize, getLegendTooltipVisibleData, getLegendTooltipVisibleText, getTheme } from '../ChartUtils';
export const ChartLegendTooltip = (_a) => {
var { activePoints, datum, center = { x: 0, y: 0 }, flyoutHeight, flyoutWidth, height, isCursorTooltip = true, labelComponent = React.createElement(ChartLegendTooltipContent, null), legendData, patternScale, text, themeColor,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
themeVariant, title, width,
// destructure last
theme = getTheme(themeColor) } = _a, rest = __rest(_a, ["activePoints", "datum", "center", "flyoutHeight", "flyoutWidth", "height", "isCursorTooltip", "labelComponent", "legendData", "patternScale", "text", "themeColor", "themeVariant", "title", "width", "theme"]);
const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 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) => React.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 ? React.createElement(ChartCursorTooltip, null) : React.createElement(ChartTooltip, null);
return React.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,
width }), rest));
};
return getTooltipComponent();
};
ChartLegendTooltip.displayName = 'ChartLegendTooltip';
// Note: VictoryTooltip.defaultEvents must be hoisted
hoistNonReactStatics(ChartLegendTooltip, VictoryTooltip);
//# sourceMappingURL=ChartLegendTooltip.js.map