@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
104 lines • 5.45 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cloneElement, Fragment } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Helpers } from 'victory-core';
import { VictoryLegend } from 'victory-legend';
import { ChartLabel } from '../ChartLabel/ChartLabel';
import { ChartLegend } from '../ChartLegend/ChartLegend';
import { ChartLegendTooltipStyles } from '../ChartTheme/ChartStyles';
import { ChartLegendTooltipLabel } from './ChartLegendTooltipLabel';
import { getLegendTooltipDataProps, getLegendTooltipSize, getLegendTooltipVisibleData, getLegendTooltipVisibleText } from '../ChartUtils/chart-tooltip';
import { getTheme } from '../ChartUtils/chart-theme';
export const ChartLegendTooltipContent = (_a) => {
var { activePoints, center, datum, dx = 0, dy = 0, flyoutHeight, flyoutWidth, height, labelComponent = _jsx(ChartLegendTooltipLabel, {}), legendComponent = _jsx(ChartLegend, {}), legendData, patternScale, text, themeColor, title, titleComponent = _jsx(ChartLabel, {}), width,
// destructure last
theme = getTheme(themeColor) } = _a, rest = __rest(_a, ["activePoints", "center", "datum", "dx", "dy", "flyoutHeight", "flyoutWidth", "height", "labelComponent", "legendComponent", "legendData", "patternScale", "text", "themeColor", "title", "titleComponent", "width", "theme"]);
const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
const legendProps = getLegendTooltipDataProps(legendComponent.props);
const visibleLegendData = getLegendTooltipVisibleData({
activePoints,
colorScale: legendProps.colorScale,
legendData,
text,
theme
});
// Component offsets
const legendOffsetX = 0;
const legendOffsetY = title ? 5 : -10;
const titleOffsetX = 10;
const titleOffsetY = 0;
// Returns x position of flyout
const getX = () => {
if (!(center || flyoutWidth || width)) {
const x = rest.x;
return x ? x : undefined;
}
const _flyoutWidth = Helpers.evaluateProp(flyoutWidth, undefined);
if (width > center.x + _flyoutWidth + pointerLength) {
return center.x + ChartLegendTooltipStyles.flyout.padding / 2;
}
else if (center.x < _flyoutWidth + pointerLength) {
return ChartLegendTooltipStyles.flyout.padding / 2 - pointerLength;
}
else {
return center.x - _flyoutWidth;
}
};
// Returns y position
const getY = () => {
if (!(center || flyoutHeight || height)) {
const y = rest.y;
return y ? y : undefined;
}
const _flyoutHeight = Helpers.evaluateProp(flyoutHeight, undefined);
if (center.y < _flyoutHeight / 2) {
return ChartLegendTooltipStyles.flyout.padding / 2;
}
else if (center.y > height - _flyoutHeight / 2) {
return height - _flyoutHeight + ChartLegendTooltipStyles.flyout.padding / 2;
}
else {
return center.y - _flyoutHeight / 2 + ChartLegendTooltipStyles.flyout.padding / 2;
}
};
// Min & max dimensions do not include flyout padding
const maxLegendDimensions = getLegendTooltipSize({
legendData: visibleLegendData,
legendProps,
text: getLegendTooltipVisibleText({ activePoints, legendData, text }),
theme
});
const minLegendDimensions = getLegendTooltipSize({
legendData: [{ name: '' }],
legendProps,
minSpacing: 0,
theme
});
// Returns the label component
const getLabelComponent = () => cloneElement(labelComponent, Object.assign({ datum, dx: maxLegendDimensions.width - minLegendDimensions.width, legendData: visibleLegendData }, labelComponent.props));
// Returns the title component
const getTitleComponent = () => {
const _title = title instanceof Function ? title(datum) : title;
return cloneElement(titleComponent, Object.assign({ style: {
fill: ChartLegendTooltipStyles.label.fill,
fontWeight: ChartLegendTooltipStyles.label.fontWeight
}, text: _title, textAnchor: 'start', x: getX() + titleOffsetX + Helpers.evaluateProp(dx, undefined), y: getY() + titleOffsetY + Helpers.evaluateProp(dy, undefined) }, titleComponent.props));
};
// Returns the legend component
const getLegendComponent = () => cloneElement(legendComponent, Object.assign({ data: getLegendTooltipVisibleData({
activePoints,
colorScale: legendProps.colorScale,
legendData,
patternScale,
text,
textAsLegendData: true,
theme
}), labelComponent: getLabelComponent(), patternScale, standalone: false, theme,
themeColor, x: getX() + legendOffsetX + Helpers.evaluateProp(dx, undefined), y: getY() + legendOffsetY + Helpers.evaluateProp(dy, undefined) }, legendProps));
return (_jsxs(Fragment, { children: [getTitleComponent(), getLegendComponent()] }));
};
ChartLegendTooltipContent.displayName = 'ChartLegendTooltipContent';
// Note: VictoryLegend.role must be hoisted, but getBaseProps causes error with ChartVoronoiContainer
hoistNonReactStatics(ChartLegendTooltipContent, VictoryLegend, { getBaseProps: true });
//# sourceMappingURL=ChartLegendTooltipContent.js.map