wix-style-react
Version:
wix-style-react
168 lines (166 loc) • 6.16 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FunnelChartSt = require("./FunnelChart.st.css");
var _FunnelLabel = require("./FunnelLabel");
var _FunnelBar = require("./FunnelBar");
var _FunnelStep = require("./FunnelStep");
var _numberFormatters = require("../utils/numberFormatters");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FunnelChart/FunnelChart.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// TODO - this can be memoized
var calculateBarsHeights = _ref => {
var {
funnelChartData,
startValue
} = _ref;
return funnelChartData.map(i => {
var percentage = (0, _numberFormatters.countPercentageFromBase)(startValue, i.value, 0);
return percentage > 100 ? 100 : percentage;
});
};
/** FunnelChart */
var FunnelChart = _ref2 => {
var {
dataHook,
className,
data,
hideDifferenceBadge,
differenceBadgeTooltipContent = () => '',
onDifferenceBadgeTooltipShow = () => {}
} = _ref2;
if (data.length < 2) {
return null;
}
var barsHeights = calculateBarsHeights({
funnelChartData: data,
startValue: data[0].value
});
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: className,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("section", {
className: _FunnelChartSt.classes.funnel,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 7
}
}, data.map((item, index) => {
var currentBarHeight = barsHeights[index];
var nextBarHeight = barsHeights[index + 1];
var isLastItem = index === data.length - 1;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
key: item.label,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_FunnelBar.FunnelBar, {
height: currentBarHeight,
dataHook: _constants.dataHooks.funnelChartItem,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 15
}
}), isLastItem || data[index + 1].value === 0 ? /*#__PURE__*/_react.default.createElement(_FunnelStep.EmptyFunnelStep, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 17
}
}) : /*#__PURE__*/_react.default.createElement(_FunnelStep.FunnelStep, {
currentBarIndex: index,
currentBarData: data[index],
nextBarData: data[index + 1],
currentBarHeight: currentBarHeight,
nextBarHeight: nextBarHeight,
hideDifferenceBadge: hideDifferenceBadge,
getTooltipContent: differenceBadgeTooltipContent,
onTooltipShow: onDifferenceBadgeTooltipShow,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 17
}
}));
})), /*#__PURE__*/_react.default.createElement("section", {
className: _FunnelChartSt.classes.labels,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 7
}
}, data.map(item => {
return /*#__PURE__*/_react.default.createElement("div", {
key: item.label,
className: _FunnelChartSt.classes.labelWrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_FunnelLabel.FunnelLabel, {
value: item.value,
label: item.label,
displayValue: item.displayValue,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 15
}
}));
})));
};
FunnelChart.displayName = 'FunnelChart';
FunnelChart.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** A css class to be applied to the component's root element */
className: _propTypes.default.string,
/**
* Array of Funnel Chart items
* * `value` - Item's value.
* * `label` - Short label under the value.
* * `displayValue` - Item's value send by the user.
*/
data: _propTypes.default.arrayOf(_propTypes.default.shape({
value: _propTypes.default.number.isRequired,
label: _propTypes.default.string.isRequired,
displayValue: _propTypes.default.string
})).isRequired,
/** A flag that controls the appearance of the calculated percentage badge */
hideDifferenceBadge: _propTypes.default.bool,
/** Returns the tooltip content by current index and badge's value (in percentage)
* ##### Signature:
* `({currentIndex: number, difference: string}) => string`
*/
differenceBadgeTooltipContent: _propTypes.default.func,
/** Callback on tooltip content show event by current index and badge's value (in percentage)
* ##### Signature:
* `({currentIndex: number, difference: string}) => void`
*/
onDifferenceBadgeTooltipShow: _propTypes.default.func
};
var _default = exports.default = FunnelChart;
//# sourceMappingURL=FunnelChart.js.map