@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
334 lines • 10.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderChildrenWithPatterns = exports.useDefaultPatternProps = exports.getDefaultPatternScale = exports.getDefaultData = exports.getDefaultColorScale = exports.getPatternScale = exports.getPatternDefs = exports.getPatternDefsId = exports.getPatternId = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const uniqueId_1 = tslib_1.__importDefault(require("lodash/uniqueId"));
/**
* Patterns were pulled from v3.0.3 of the script below, which uses the MIT license.
* See https://github.com/highcharts/pattern-fill/blob/master/pattern-fill-v2.js
* @private
*/
const patterns = [
// Set 1
{
// Left diagonal lines
d: 'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
height: 5,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
patternTransform: 'scale(1.4 1.4)',
strokeWidth: 2,
width: 5,
x: 0,
y: 0
},
{
// Right diagonal lines
d: 'M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5',
height: 5,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
patternTransform: 'scale(1.4 1.4)',
strokeWidth: 2,
width: 5,
x: 0,
y: 0
},
{
// Vertical offset line
d: 'M 2 0 L 2 5 M 4 0 L 4 5',
height: 5,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
patternTransform: 'scale(1.4 1.4)',
strokeWidth: 2,
width: 5,
x: 0,
y: 0
},
{
// Horizontal lines
d: 'M 0 2 L 5 2 M 0 4 L 5 4',
height: 5,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
patternTransform: 'scale(1.4 1.4)',
strokeWidth: 2,
width: 5,
x: 0,
y: 0
},
{
// Vertical wave
d: 'M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5',
height: 5,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
patternTransform: 'scale(1.4 1.4)',
strokeWidth: 2,
width: 5,
x: 0,
y: 0
},
// Set 2
{
// Horizontal wave
d: 'M 0 0 L 5 10 L 10 0',
height: 10,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
strokeWidth: 2,
width: 10,
x: 0,
y: 0
},
{
// Squares
d: 'M 3 3 L 8 3 L 8 8 L 3 8 Z',
height: 10,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
strokeWidth: 2,
width: 10,
x: 0,
y: 0
},
{
// Circles
d: 'M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0',
height: 10,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
strokeWidth: 2,
width: 10,
x: 0,
y: 0
},
{
// Left diagonal lines (thin)
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
height: 10,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
strokeWidth: 2,
width: 10,
x: 0,
y: 0
},
{
// Right diagonal lines (thin)
d: 'M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9',
height: 10,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
strokeWidth: 2,
width: 10,
x: 0,
y: 0
},
// Set 3
{
// Diamonds
d: 'M 2 5 L 5 2 L 8 5 L 5 8 Z',
height: 10,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
strokeWidth: 2,
width: 10,
x: 0,
y: 0
},
{
// Thin vertical lines
d: 'M 3 0 L 3 10 M 8 0 L 8 10',
height: 5,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
patternTransform: 'scale(1.4 1.4)',
strokeWidth: 2,
width: 5,
x: 0,
y: 0
},
{
// Left zig zag
d: 'M 10 3 L 5 3 L 5 0 M 5 10 L 5 7 L 0 7',
height: 10,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
strokeWidth: 2,
width: 10,
x: 0,
y: 0
},
{
// Thin horizontal lines
d: 'M 0 3 L 10 3 M 0 8 L 10 8',
height: 5,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
patternTransform: 'scale(1.4 1.4)',
strokeWidth: 2,
width: 5,
x: 0,
y: 0
},
{
// Right zig zag
d: 'M 0 3 L 5 3 L 5 0 M 5 10 L 5 7 L 10 7',
height: 10,
fill: 'none',
patternContentUnits: 'userSpaceOnUse',
patternUnits: 'userSpaceOnUse',
strokeWidth: 2,
width: 10,
x: 0,
y: 0
}
];
/**
* Helper function to return a pattern ID
* @private
*/
const getPatternId = () => (0, uniqueId_1.default)('pf-pattern');
exports.getPatternId = getPatternId;
/**
* Helper function to return pattern defs ID
* @private
*/
const getPatternDefsId = (prefix, index) => {
const id = `${prefix}:${index}`;
return id;
};
exports.getPatternDefsId = getPatternDefsId;
/**
* Helper function to return pattern defs
* @private
*/
const getPatternDefs = ({ colorScale, offset = 0, patternId, patternUnshiftIndex = 0 }) => {
const defaultPatterns = [...patterns];
// Move the given pattern index to top of scale, used to sync patterns with ChartDonutThreshold
if (patternUnshiftIndex > 0 && patternUnshiftIndex < defaultPatterns.length) {
defaultPatterns.unshift(defaultPatterns.splice(patternUnshiftIndex, 1)[0]);
}
// This is wrapped in an empty tag so Victory does not apply child props to defs
const defs = (React.createElement(React.Fragment, { key: `defs` },
React.createElement("defs", null, colorScale.map((color, index) => {
const _a = defaultPatterns[(index + offset) % defaultPatterns.length], { d, fill, stroke = color, strokeWidth } = _a, rest = tslib_1.__rest(_a, ["d", "fill", "stroke", "strokeWidth"]);
const id = (0, exports.getPatternDefsId)(patternId, index);
return (React.createElement("pattern", Object.assign({ id: id, key: id }, rest),
React.createElement("path", { d: d, stroke: stroke, strokeWidth: strokeWidth, fill: fill })));
}))));
return defs;
};
exports.getPatternDefs = getPatternDefs;
/**
* Helper function to return pattern IDs to use as color scale
* @private
*/
const getPatternScale = (colorScale, patternId) => colorScale.map((val, index) => `url(#${(0, exports.getPatternDefsId)(patternId, index)})`);
exports.getPatternScale = getPatternScale;
/**
* Helper function to return default color scale
* @private
*/
const getDefaultColorScale = (colorScale, themeColorScale) => {
const result = [];
const colors = colorScale ? colorScale : themeColorScale;
colors.forEach(val => result.push(val));
return result;
};
exports.getDefaultColorScale = getDefaultColorScale;
/**
* Merge pattern IDs with `data.fill` property, used by interactive pie chart legend
* @private
*/
const getDefaultData = (data, patternScale) => {
if (!patternScale) {
return data;
}
return data.map((datum, index) => {
const pattern = patternScale[index % patternScale.length];
return Object.assign(Object.assign({}, (pattern && { _fill: pattern })), datum);
});
};
exports.getDefaultData = getDefaultData;
/**
* Helper function to return default pattern scale
* @private
*/
const getDefaultPatternScale = ({ colorScale, patternId, patternScale }) => {
if (patternScale) {
return patternScale;
}
const defaultPatternScale = (0, exports.getPatternScale)(colorScale, patternId);
return defaultPatternScale && defaultPatternScale.length > 0 ? defaultPatternScale : undefined;
};
exports.getDefaultPatternScale = getDefaultPatternScale;
/**
* Helper function to return default pattern props
* @private
*/
const useDefaultPatternProps = ({ colorScale, hasPatterns, patternScale, themeColorScale }) => {
const defaultColorScale = (0, exports.getDefaultColorScale)(colorScale, themeColorScale);
let defaultPatternScale = patternScale;
let isPatternDefs = !patternScale && hasPatterns !== undefined;
const patternId = React.useMemo(() => (isPatternDefs ? (0, exports.getPatternId)() : undefined), [isPatternDefs]);
if (isPatternDefs) {
defaultPatternScale = (0, exports.getDefaultPatternScale)({
colorScale: defaultColorScale,
patternId,
patternScale
});
}
// Initialize pattern visibility
if (Array.isArray(hasPatterns)) {
for (let i = 0; i < defaultPatternScale.length; i++) {
if (!(i < hasPatterns.length && hasPatterns[i])) {
defaultPatternScale[i] = null;
}
}
}
else if (hasPatterns === false) {
defaultPatternScale = undefined;
isPatternDefs = false;
}
return { defaultColorScale, defaultPatternScale, isPatternDefs, patternId };
};
exports.useDefaultPatternProps = useDefaultPatternProps;
/**
* Helper function to render children with patterns
* @private
*/
const renderChildrenWithPatterns = ({ children, patternScale }) => React.Children.toArray(children).map((child, index) => {
if (React.isValidElement(child)) {
const childProps = tslib_1.__rest(child.props, []);
const style = childProps.style ? Object.assign({}, childProps.style) : {};
// Merge pattern IDs with `style.data.fill` property
if (patternScale) {
const pattern = patternScale[index % patternScale.length];
style.data = Object.assign(Object.assign({}, (pattern && { fill: pattern })), style.data);
}
const _child = React.cloneElement(child, Object.assign(Object.assign(Object.assign({}, (patternScale && { patternScale })), childProps), { style // Override child props
}));
return _child;
}
return child;
});
exports.renderChildrenWithPatterns = renderChildrenWithPatterns;
//# sourceMappingURL=chart-patterns.js.map