@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
108 lines • 6.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartLegendTooltipContent = 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_legend_1 = require("victory-legend");
const ChartLabel_1 = require("../ChartLabel/ChartLabel");
const ChartLegend_1 = require("../ChartLegend/ChartLegend");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const ChartLegendTooltipLabel_1 = require("./ChartLegendTooltipLabel");
const chart_tooltip_1 = require("../ChartUtils/chart-tooltip");
const chart_theme_1 = require("../ChartUtils/chart-theme");
const ChartLegendTooltipContent = (_a) => {
var { activePoints, center, datum, dx = 0, dy = 0, flyoutHeight, flyoutWidth, height, labelComponent = (0, jsx_runtime_1.jsx)(ChartLegendTooltipLabel_1.ChartLegendTooltipLabel, {}), legendComponent = (0, jsx_runtime_1.jsx)(ChartLegend_1.ChartLegend, {}), legendData, patternScale, text, themeColor, title, titleComponent = (0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, {}), width,
// destructure last
theme = (0, chart_theme_1.getTheme)(themeColor) } = _a, rest = tslib_1.__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 ? victory_core_1.Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10;
const legendProps = (0, chart_tooltip_1.getLegendTooltipDataProps)(legendComponent.props);
const visibleLegendData = (0, chart_tooltip_1.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 = victory_core_1.Helpers.evaluateProp(flyoutWidth, undefined);
if (width > center.x + _flyoutWidth + pointerLength) {
return center.x + ChartStyles_1.ChartLegendTooltipStyles.flyout.padding / 2;
}
else if (center.x < _flyoutWidth + pointerLength) {
return ChartStyles_1.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 = victory_core_1.Helpers.evaluateProp(flyoutHeight, undefined);
if (center.y < _flyoutHeight / 2) {
return ChartStyles_1.ChartLegendTooltipStyles.flyout.padding / 2;
}
else if (center.y > height - _flyoutHeight / 2) {
return height - _flyoutHeight + ChartStyles_1.ChartLegendTooltipStyles.flyout.padding / 2;
}
else {
return center.y - _flyoutHeight / 2 + ChartStyles_1.ChartLegendTooltipStyles.flyout.padding / 2;
}
};
// Min & max dimensions do not include flyout padding
const maxLegendDimensions = (0, chart_tooltip_1.getLegendTooltipSize)({
legendData: visibleLegendData,
legendProps,
text: (0, chart_tooltip_1.getLegendTooltipVisibleText)({ activePoints, legendData, text }),
theme
});
const minLegendDimensions = (0, chart_tooltip_1.getLegendTooltipSize)({
legendData: [{ name: '' }],
legendProps,
minSpacing: 0,
theme
});
// Returns the label component
const getLabelComponent = () => (0, react_1.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 (0, react_1.cloneElement)(titleComponent, Object.assign({ style: {
fill: ChartStyles_1.ChartLegendTooltipStyles.label.fill,
fontWeight: ChartStyles_1.ChartLegendTooltipStyles.label.fontWeight
}, text: _title, textAnchor: 'start', x: getX() + titleOffsetX + victory_core_1.Helpers.evaluateProp(dx, undefined), y: getY() + titleOffsetY + victory_core_1.Helpers.evaluateProp(dy, undefined) }, titleComponent.props));
};
// Returns the legend component
const getLegendComponent = () => (0, react_1.cloneElement)(legendComponent, Object.assign({ data: (0, chart_tooltip_1.getLegendTooltipVisibleData)({
activePoints,
colorScale: legendProps.colorScale,
legendData,
patternScale,
text,
textAsLegendData: true,
theme
}), labelComponent: getLabelComponent(), patternScale, standalone: false, theme,
themeColor, x: getX() + legendOffsetX + victory_core_1.Helpers.evaluateProp(dx, undefined), y: getY() + legendOffsetY + victory_core_1.Helpers.evaluateProp(dy, undefined) }, legendProps));
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [getTitleComponent(), getLegendComponent()] }));
};
exports.ChartLegendTooltipContent = ChartLegendTooltipContent;
exports.ChartLegendTooltipContent.displayName = 'ChartLegendTooltipContent';
// Note: VictoryLegend.role must be hoisted, but getBaseProps causes error with ChartVoronoiContainer
(0, hoist_non_react_statics_1.default)(exports.ChartLegendTooltipContent, victory_legend_1.VictoryLegend, { getBaseProps: true });
//# sourceMappingURL=ChartLegendTooltipContent.js.map