wix-style-react
Version:
wix-style-react
227 lines (226 loc) • 7.43 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _AdaptiveHeading = _interopRequireDefault(require("../utils/AdaptiveHeading"));
var _BarChartSt = require("./BarChart.st.css");
var _dataHooks = _interopRequireDefault(require("./dataHooks"));
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/BarChart/BarChart.js";
class BarChart extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.MIN_BAR_WIDTH = 50;
this.state = {
width: 0
};
this._renderValue = _ref => {
var {
descriptionInfo,
value,
label,
labelShort,
showText
} = _ref;
var text = String(label || value);
var {
onDescriptionInfoShown
} = this.props;
var adaptiveHeadingProps = {
text,
textInShort: labelShort,
dataHook: _dataHooks.default.value,
appearance: 'H3',
light: true
};
return descriptionInfo ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
textAlign: "start",
dataHook: _dataHooks.default.tooltip,
content: descriptionInfo,
onShow: onDescriptionInfoShown,
zIndex: 5999,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _BarChartSt.classes.value,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 9
}
}, showText && /*#__PURE__*/_react.default.createElement(_AdaptiveHeading.default, (0, _extends2.default)({}, adaptiveHeadingProps, {
emptyLast: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 24
}
})))) : /*#__PURE__*/_react.default.createElement("div", {
className: _BarChartSt.classes.value,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 7
}
}, showText && /*#__PURE__*/_react.default.createElement(_AdaptiveHeading.default, (0, _extends2.default)({}, adaptiveHeadingProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 22
}
})));
};
this._renderItem = (_ref2, key) => {
var {
value,
label,
labelShort,
description,
descriptionInfo
} = _ref2;
var {
width
} = this.state;
var {
total
} = this.props;
var calculatedTotal = this._getCalculatedTotal();
var coefficient = total ? calculatedTotal / total : 1;
var showText = width === 0 || value * width / (calculatedTotal * coefficient) > this.MIN_BAR_WIDTH;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _BarChartSt.st)(_BarChartSt.classes.item),
key: key,
"data-hook": _dataHooks.default.bar,
style: {
// avoid too big numbers from getting into a css
[_BarChartSt.vars.barValue]: value / 10 ** (calculatedTotal.toString().length - 1)
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 7
}
}, this._renderValue({
descriptionInfo,
value,
label,
labelShort,
showText
}), /*#__PURE__*/_react.default.createElement("div", {
className: _BarChartSt.classes.description,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Heading.default, {
ellipsis: true,
dataHook: _dataHooks.default.description,
size: "tiny",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 11
}
}, showText && description)));
};
}
componentDidMount() {
this.setState({
width: this.node.offsetWidth
});
}
_getCalculatedTotal() {
return this.props.items.reduce((a, b) => a + b.value, 0);
}
render() {
var {
dataHook,
items,
total
} = this.props;
var calculatedTotal = this._getCalculatedTotal();
var width = total ? calculatedTotal / total * 100 : 100;
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 7
}
}, _ref3 => {
var {
newColorsBranding
} = _ref3;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
ref: elem => this.node = elem,
className: _BarChartSt.classes.wrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _BarChartSt.st)(_BarChartSt.classes.root, {
newColorsBranding
}),
style: {
width: "".concat(width, "%")
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 13
}
}, 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.default.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.default.arrayOf(_propTypes.default.shape({
value: _propTypes.default.number.isRequired,
label: _propTypes.default.node,
labelShort: _propTypes.default.node,
description: _propTypes.default.node,
descriptionInfo: _propTypes.default.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.default.number,
/** Callback called every time when descriptionInfo tooltip is shown*/
onDescriptionInfoShown: _propTypes.default.func
};
var _default = exports.default = BarChart;
//# sourceMappingURL=BarChart.js.map