@wix/design-system
Version:
@wix/design-system
78 lines • 3.61 kB
JavaScript
import React from 'react';
import Tooltip from '../Tooltip';
import Heading from '../Heading';
import AdaptiveHeading from '../common/AdaptiveHeading';
import { st, classes, vars } from './BarChart.st.css.js';
import dataHooks from './dataHooks';
import { ZIndex } from '../common/ZIndex';
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: ZIndex.barChart },
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("div", { "data-hook": dataHook, ref: elem => {
this.node = elem;
}, className: classes.wrapper },
React.createElement("div", { className: st(classes.root), style: {
width: `${width}%`,
} }, items
.slice()
.sort((a, b) => b.value - a.value)
.map(this._renderItem))));
}
}
BarChart.displayName = 'BarChart';
BarChart.defaultProps = {
items: [],
};
export default BarChart;
//# sourceMappingURL=BarChart.js.map