wix-style-react
Version:
wix-style-react
100 lines • 4.83 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Tooltip from '../Tooltip';
import Heading from '../Heading';
import AdaptiveHeading from '../utils/AdaptiveHeading';
import { st, classes, vars } from './BarChart.st.css';
import dataHooks from './dataHooks';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
class BarChart extends React.PureComponent {
constructor() {
super(...arguments);
this.MIN_BAR_WIDTH = 50;
this.state = {
width: 0,
};
this._renderValue = ({ descriptionInfo, value, label, labelShort, showText }) => {
const text = String(label || value);
const { onDescriptionInfoShown } = this.props;
const adaptiveHeadingProps = {
text,
textInShort: labelShort,
dataHook: dataHooks.value,
appearance: 'H3',
light: true,
};
return descriptionInfo ? (React.createElement(Tooltip, { textAlign: "start", dataHook: dataHooks.tooltip, content: descriptionInfo, onShow: onDescriptionInfoShown, zIndex: 5999 },
React.createElement("div", { className: classes.value }, showText && React.createElement(AdaptiveHeading, { ...adaptiveHeadingProps, emptyLast: true })))) : (React.createElement("div", { className: classes.value }, showText && React.createElement(AdaptiveHeading, { ...adaptiveHeadingProps })));
};
this._renderItem = ({ value, label, labelShort, description, descriptionInfo }, key) => {
const { width } = this.state;
const { total } = this.props;
const calculatedTotal = this._getCalculatedTotal();
const coefficient = total ? calculatedTotal / total : 1;
const showText = width === 0 ||
(value * width) / (calculatedTotal * coefficient) > this.MIN_BAR_WIDTH;
return (React.createElement("div", { className: st(classes.item), key: key, "data-hook": dataHooks.bar, style: {
// avoid too big numbers from getting into a css
[vars.barValue]: value / 10 ** (calculatedTotal.toString().length - 1),
} },
this._renderValue({
descriptionInfo,
value,
label,
labelShort,
showText,
}),
React.createElement("div", { className: classes.description },
React.createElement(Heading, { ellipsis: true, dataHook: dataHooks.description, size: "tiny" }, showText && description))));
};
}
componentDidMount() {
this.setState({
width: this.node.offsetWidth,
});
}
_getCalculatedTotal() {
return this.props.items.reduce((a, b) => a + b.value, 0);
}
render() {
const { dataHook, items, total } = this.props;
const calculatedTotal = this._getCalculatedTotal();
const width = total ? (calculatedTotal / total) * 100 : 100;
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { "data-hook": dataHook, ref: elem => (this.node = elem), className: classes.wrapper },
React.createElement("div", { className: st(classes.root, { newColorsBranding }), style: {
width: `${width}%`,
} }, items
.slice()
.sort((a, b) => b.value - a.value)
.map(this._renderItem))))));
}
}
BarChart.displayName = 'BarChart';
BarChart.defaultProps = {
items: [],
};
BarChart.propTypes = {
/** Applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook: PropTypes.string,
/**
* Array of items
* * `value` - This prop is used for sorting bars. Displayed as big text on a bar, when there is no caption prop.
* * `label` - Displayed as big text on a bar.
* * `labelShort` - Is shown instead of a `label` when there is not enough space.
* * `description` - short label under the bar.
* * `descriptionInfo` - long description.
*/
items: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.number.isRequired,
label: PropTypes.node,
labelShort: PropTypes.node,
description: PropTypes.node,
descriptionInfo: PropTypes.node,
})),
/** Used to calculate space for bars inside a widget. Should be specified if the actual total is different from the sum of values of all items */
total: PropTypes.number,
/** Callback called every time when descriptionInfo tooltip is shown*/
onDescriptionInfoShown: PropTypes.func,
};
export default BarChart;
//# sourceMappingURL=BarChart.js.map