@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
94 lines • 5.78 kB
JavaScript
import { __rest } from "tslib";
import * as React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Helpers } from 'victory-core';
import { VictoryPie } from 'victory-pie';
import { ChartContainer } from '../ChartContainer';
import { ChartLegend } from '../ChartLegend';
import { ChartCommonStyles } from '../ChartTheme';
import { ChartTooltip } from '../ChartTooltip';
import { getComputedLegend, useDefaultPatternProps, getPaddingForSide, getPatternDefs, getTheme } from '../ChartUtils';
export var ChartPieLabelPosition;
(function (ChartPieLabelPosition) {
ChartPieLabelPosition["centroid"] = "centroid";
ChartPieLabelPosition["endAngle"] = "endAngle";
ChartPieLabelPosition["startAngle"] = "startAngle";
})(ChartPieLabelPosition || (ChartPieLabelPosition = {}));
export var ChartPieLegendPosition;
(function (ChartPieLegendPosition) {
ChartPieLegendPosition["bottom"] = "bottom";
ChartPieLegendPosition["right"] = "right";
})(ChartPieLegendPosition || (ChartPieLegendPosition = {}));
export var ChartPieSortOrder;
(function (ChartPieSortOrder) {
ChartPieSortOrder["ascending"] = "ascending";
ChartPieSortOrder["descending"] = "descending";
})(ChartPieSortOrder || (ChartPieSortOrder = {}));
export const ChartPie = (_a) => {
var { allowTooltip = true, ariaDesc, ariaTitle, colorScale, constrainToVisibleArea = false, containerComponent = React.createElement(ChartContainer, null), hasPatterns, legendAllowWrap = false, legendComponent = React.createElement(ChartLegend, null), legendData, legendPosition = ChartCommonStyles.legend.position, name, patternScale, patternUnshiftIndex, padding, radius, standalone = true, style, themeColor,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
themeVariant,
// destructure last
theme = getTheme(themeColor), labelComponent = allowTooltip ? (React.createElement(ChartTooltip, { constrainToVisibleArea: constrainToVisibleArea, theme: theme })) : (undefined), legendOrientation = theme.legend.orientation, height = theme.pie.height, width = theme.pie.width } = _a, rest = __rest(_a, ["allowTooltip", "ariaDesc", "ariaTitle", "colorScale", "constrainToVisibleArea", "containerComponent", "hasPatterns", "legendAllowWrap", "legendComponent", "legendData", "legendPosition", "name", "patternScale", "patternUnshiftIndex", "padding", "radius", "standalone", "style", "themeColor", "themeVariant", "theme", "labelComponent", "legendOrientation", "height", "width"]);
const defaultPadding = {
bottom: getPaddingForSide('bottom', padding, theme.pie.padding),
left: getPaddingForSide('left', padding, theme.pie.padding),
right: getPaddingForSide('right', padding, theme.pie.padding),
top: getPaddingForSide('top', padding, theme.pie.padding)
};
const { defaultColorScale, defaultPatternScale, isPatternDefs, patternId } = useDefaultPatternProps({
colorScale,
hasPatterns,
patternScale,
themeColorScale: theme.pie.colorScale
});
// Ensure non-negative value is returned
const getDefaultRadius = () => {
const result = 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 = (React.createElement(VictoryPie, Object.assign({ colorScale: colorScale, height: height, key: "pf-chart-pie", labelComponent: labelComponent, name: name, padding: padding, radius: chartRadius, standalone: false, style: getDefaultStyle(), theme: theme, width: width }, rest)));
const legend = React.cloneElement(legendComponent, Object.assign(Object.assign(Object.assign({ colorScale, data: legendData }, (name && { name: `${name}-${legendComponent.type.displayName}` })), { key: 'pf-chart-pie-legend', orientation: legendOrientation, theme }), legendComponent.props));
// Returns a computed legend
const getLegend = () => {
if (!legend.props.data) {
return null;
}
return getComputedLegend(Object.assign({ allowWrap: legendAllowWrap, chartType: 'pie', height, legendComponent: legend, padding: defaultPadding, position: legendPosition, theme,
width }, (defaultPatternScale && { patternScale: defaultPatternScale })));
};
// Clone so users can override container props
const container = standalone
? React.cloneElement(containerComponent, Object.assign({ desc: ariaDesc, height, title: ariaTitle, width,
theme }, containerComponent.props), [
chart,
getLegend(),
isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale, patternUnshiftIndex })
])
: null;
return standalone ? (React.createElement(React.Fragment, null, container)) : (React.createElement(React.Fragment, null,
chart,
getLegend(),
isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale, patternUnshiftIndex })));
};
ChartPie.displayName = 'ChartPie';
// Note: VictoryPie.role must be hoisted
hoistNonReactStatics(ChartPie, VictoryPie);
//# sourceMappingURL=ChartPie.js.map