@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
105 lines • 7.42 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartPie = 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_pie_1 = require("victory-pie");
const ChartContainer_1 = require("../ChartContainer/ChartContainer");
const ChartLegend_1 = require("../ChartLegend/ChartLegend");
const ChartStyles_1 = require("../ChartTheme/ChartStyles");
const ChartTooltip_1 = require("../ChartTooltip/ChartTooltip");
const chart_legend_1 = require("../ChartUtils/chart-legend");
const chart_padding_1 = require("../ChartUtils/chart-padding");
const chart_patterns_1 = require("../ChartUtils/chart-patterns");
const chart_theme_1 = require("../ChartUtils/chart-theme");
const ChartPoint_1 = require("../ChartPoint/ChartPoint");
const ChartLabel_1 = require("../ChartLabel/ChartLabel");
const ChartPie = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, colorScale, constrainToVisibleArea = false, containerComponent = (0, jsx_runtime_1.jsx)(ChartContainer_1.ChartContainer, {}), hasPatterns, legendAllowWrap = false, legendComponent = (0, jsx_runtime_1.jsx)(ChartLegend_1.ChartLegend, {}), legendData, legendPosition = ChartStyles_1.ChartCommonStyles.legend.position, legendDirection = 'ltr', name, patternScale, patternUnshiftIndex, padding, radius, standalone = true, style, themeColor,
// destructure last
theme = (0, chart_theme_1.getTheme)(themeColor), labelComponent = allowTooltip ? ((0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip, { constrainToVisibleArea: constrainToVisibleArea, theme: theme })) : undefined, legendOrientation = theme.legend.orientation, height = theme.pie.height, width = theme.pie.width } = _a, rest = tslib_1.__rest(_a, ["allowTooltip", "ariaDesc", "ariaTitle", "colorScale", "constrainToVisibleArea", "containerComponent", "hasPatterns", "legendAllowWrap", "legendComponent", "legendData", "legendPosition", "legendDirection", "name", "patternScale", "patternUnshiftIndex", "padding", "radius", "standalone", "style", "themeColor", "theme", "labelComponent", "legendOrientation", "height", "width"]);
const defaultPadding = {
bottom: (0, chart_padding_1.getPaddingForSide)('bottom', padding, theme.pie.padding),
left: (0, chart_padding_1.getPaddingForSide)('left', padding, theme.pie.padding),
right: (0, chart_padding_1.getPaddingForSide)('right', padding, theme.pie.padding),
top: (0, chart_padding_1.getPaddingForSide)('top', padding, theme.pie.padding)
};
const { defaultColorScale, defaultPatternScale, isPatternDefs, patternId } = (0, chart_patterns_1.useDefaultPatternProps)({
colorScale,
hasPatterns,
patternScale,
themeColorScale: theme.pie.colorScale
});
// Ensure non-negative value is returned
const getDefaultRadius = () => {
const result = victory_core_1.Helpers.getRadius({
height,
width,
padding: defaultPadding
});
return result > -1 ? result : undefined;
};
const chartRadius = radius ? radius : getDefaultRadius();
// Merge pattern IDs with `style.data.fill` property
const getDefaultStyle = () => {
if (!defaultPatternScale) {
return style;
}
const _style = style ? Object.assign({}, style) : {};
_style.data = Object.assign({ fill: ({ slice }) => {
const pattern = defaultPatternScale[slice.index % defaultPatternScale.length];
return pattern ? pattern : defaultColorScale[slice.index % defaultColorScale.length];
} }, _style.data);
return _style;
};
const chart = ((0, jsx_runtime_1.jsx)(victory_pie_1.VictoryPie, Object.assign({ colorScale: colorScale, height: height, labelComponent: labelComponent, name: name, padding: padding, radius: chartRadius, standalone: false, style: getDefaultStyle(), theme: theme, width: width }, rest), "pf-chart-pie"));
let legendXOffset = 0;
if (legendDirection === 'rtl') {
legendXOffset = (0, chart_legend_1.getLegendMaxTextWidth)(legendData, theme);
}
const legend = (0, react_1.cloneElement)(legendComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ colorScale, data: legendData }, (name && { name: `${name}-${legendComponent.type.displayName}` })), { key: 'pf-chart-pie-legend', orientation: legendOrientation, theme,
themeColor }), (legendDirection === 'rtl' && {
dataComponent: legendComponent.props.dataComponent ? ((0, react_1.cloneElement)(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })) : ((0, jsx_runtime_1.jsx)(ChartPoint_1.ChartPoint, { transform: `translate(${legendXOffset})` }))
})), (legendDirection === 'rtl' && {
labelComponent: legendComponent.props.labelComponent ? ((0, react_1.cloneElement)(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })) : ((0, jsx_runtime_1.jsx)(ChartLabel_1.ChartLabel, { direction: "rtl", dx: legendXOffset - 30 }))
})), legendComponent.props));
// Returns a computed legend
const getLegend = () => {
if (!legend.props.data) {
return null;
}
return (0, chart_legend_1.getComputedLegend)(Object.assign({ allowWrap: legendAllowWrap === true || typeof legendAllowWrap === 'function', chartType: 'pie', height, legendComponent: legend, padding: defaultPadding, position: legendPosition, theme,
width }, (defaultPatternScale && { patternScale: defaultPatternScale })));
};
// Clone so users can override container props
const container = standalone
? (0, react_1.cloneElement)(containerComponent, Object.assign({ desc: ariaDesc, height, title: ariaTitle, width,
theme }, containerComponent.props), [
chart,
getLegend(),
isPatternDefs && (0, chart_patterns_1.getPatternDefs)({ patternId, colorScale: defaultColorScale, patternUnshiftIndex })
])
: null;
// Callback to compliment legendAllowWrap
const computedLegend = getLegend();
(0, react_1.useEffect)(() => {
if ((computedLegend === null || computedLegend === void 0 ? void 0 : computedLegend.props) && typeof legendAllowWrap === 'function') {
const extraHeight = (0, chart_legend_1.getLegendItemsExtraHeight)({
legendData: computedLegend.props.data,
legendOrientation: computedLegend.props.orientation,
legendProps: computedLegend.props,
theme
});
legendAllowWrap(extraHeight);
}
}, [computedLegend, legendAllowWrap, theme, width]);
return standalone ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: container })) : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [chart, computedLegend, isPatternDefs && (0, chart_patterns_1.getPatternDefs)({ patternId, colorScale: defaultColorScale, patternUnshiftIndex })] }));
};
exports.ChartPie = ChartPie;
exports.ChartPie.displayName = 'ChartPie';
// Note: VictoryPie.role must be hoisted
(0, hoist_non_react_statics_1.default)(exports.ChartPie, victory_pie_1.VictoryPie);
//# sourceMappingURL=ChartPie.js.map