@wix/design-system
Version:
@wix/design-system
203 lines (202 loc) • 7.96 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _AdaptiveHeading = _interopRequireDefault(require("../common/AdaptiveHeading"));
var _BarChartSt = require("./BarChart.st.css.js");
var _dataHooks = _interopRequireDefault(require("./dataHooks"));
var _ZIndex = require("../common/ZIndex");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/BarChart/BarChart.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var BarChart = /*#__PURE__*/function (_React$PureComponent) {
function BarChart() {
var _this;
(0, _classCallCheck2["default"])(this, BarChart);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, BarChart, [].concat(args));
_this.MIN_BAR_WIDTH = 50;
_this.state = {
width: 0
};
_this._renderValue = function (_ref) {
var descriptionInfo = _ref.descriptionInfo,
value = _ref.value,
label = _ref.label,
labelShort = _ref.labelShort,
showText = _ref.showText;
var text = String(label || value);
var onDescriptionInfoShown = _this.props.onDescriptionInfoShown;
var adaptiveHeadingProps = {
text: 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: _ZIndex.ZIndex.barChart,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _BarChartSt.classes.value,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 9
}
}, showText && /*#__PURE__*/_react["default"].createElement(_AdaptiveHeading["default"], (0, _extends2["default"])({}, adaptiveHeadingProps, {
emptyLast: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 24
}
})))) : /*#__PURE__*/_react["default"].createElement("div", {
className: _BarChartSt.classes.value,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 7
}
}, showText && /*#__PURE__*/_react["default"].createElement(_AdaptiveHeading["default"], (0, _extends2["default"])({}, adaptiveHeadingProps, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 22
}
})));
};
_this._renderItem = function (_ref2, key) {
var value = _ref2.value,
label = _ref2.label,
labelShort = _ref2.labelShort,
description = _ref2.description,
descriptionInfo = _ref2.descriptionInfo;
var width = _this.state.width;
var total = _this.props.total;
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: (0, _defineProperty2["default"])({}, _BarChartSt.vars.barValue, value / Math.pow(10, calculatedTotal.toString().length - 1)),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 7
}
}, _this._renderValue({
descriptionInfo: descriptionInfo,
value: value,
label: label,
labelShort: labelShort,
showText: showText
}), /*#__PURE__*/_react["default"].createElement("div", {
className: _BarChartSt.classes.description,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
ellipsis: true,
dataHook: _dataHooks["default"].description,
size: "tiny",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 11
}
}, showText && description)));
};
return _this;
}
(0, _inherits2["default"])(BarChart, _React$PureComponent);
return (0, _createClass2["default"])(BarChart, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setState({
width: this.node.offsetWidth
});
}
}, {
key: "_getCalculatedTotal",
value: function _getCalculatedTotal() {
return this.props.items.reduce(function (a, b) {
return a + b.value;
}, 0);
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
dataHook = _this$props.dataHook,
items = _this$props.items,
total = _this$props.total;
var calculatedTotal = this._getCalculatedTotal();
var width = total ? calculatedTotal / total * 100 : 100;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
ref: function ref(elem) {
_this2.node = elem;
},
className: _BarChartSt.classes.wrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _BarChartSt.st)(_BarChartSt.classes.root),
style: {
width: "".concat(width, "%")
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 9
}
}, items.slice().sort(function (a, b) {
return b.value - a.value;
}).map(this._renderItem)));
}
}]);
}(_react["default"].PureComponent);
BarChart.displayName = 'BarChart';
BarChart.defaultProps = {
items: []
};
var _default = exports["default"] = BarChart;