wix-style-react
Version:
70 lines (67 loc) • 2.79 kB
JavaScript
import React from 'react';
import { st, classes } from './FunnelStep.st.css';
import { FunnelBadge } from '../FunnelBadge';
import { countPercentageFromBase, formatToPercent } from '../../utils/numberFormatters';
var FIXED_PERCENT_BADGE_POSITION = 0.6;
var BADGE_MAX_TOP_POSITION = 86;
var BADGE_OVERFLOWED_TOP_POSITION = 10;
function calculateBadgeTopPosition(currentDeltaHeight, nextDeltaHeight) {
var calculatedBadgePosition = Math.max(currentDeltaHeight + nextDeltaHeight * FIXED_PERCENT_BADGE_POSITION, 100 - BADGE_MAX_TOP_POSITION);
return calculatedBadgePosition < 0 ? BADGE_OVERFLOWED_TOP_POSITION : calculatedBadgePosition;
}
export var FunnelStep = function FunnelStep(_ref) {
var currentBarIndex = _ref.currentBarIndex,
currentBarData = _ref.currentBarData,
nextBarData = _ref.nextBarData,
currentBarHeight = _ref.currentBarHeight,
nextBarHeight = _ref.nextBarHeight,
hideDifferenceBadge = _ref.hideDifferenceBadge,
getTooltipContent = _ref.getTooltipContent,
_onTooltipShow = _ref.onTooltipShow;
var nextDeltaHeight = currentBarHeight - nextBarHeight;
var currentDeltaHeight = 100 - currentBarHeight;
var badgeTopPosition = calculateBadgeTopPosition(currentDeltaHeight, nextDeltaHeight);
var differenceInPercentage = formatToPercent(countPercentageFromBase(+currentBarData.value, +nextBarData.value, 0));
var dataForDifferenceBadge = {
currentIndex: currentBarIndex,
difference: differenceInPercentage
};
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, {
nextBarIsFlat: nextBarHeight === 0
})
}, /*#__PURE__*/React.createElement("div", {
className: classes.funnelStepRotated,
style: {
height: "".concat(nextDeltaHeight, "%")
}
}), /*#__PURE__*/React.createElement("div", {
className: classes.funnelStep,
style: {
height: "".concat(nextBarHeight, "%")
}
}), /*#__PURE__*/React.createElement("div", {
className: classes.funnelStepPlaceholder,
style: {
top: "".concat(currentDeltaHeight, "%"),
height: "".concat(nextDeltaHeight, "%")
}
}), hideDifferenceBadge ? null : /*#__PURE__*/React.createElement("div", {
className: classes.badgeWrapper,
style: {
top: "".concat(badgeTopPosition, "%")
}
}, /*#__PURE__*/React.createElement(FunnelBadge, {
value: differenceInPercentage,
tooltipContent: getTooltipContent(dataForDifferenceBadge),
onTooltipShow: function onTooltipShow() {
return _onTooltipShow(dataForDifferenceBadge);
}
})));
};
/** It just takes place but doesn't display or calculate anything */
export var EmptyFunnelStep = function EmptyFunnelStep() {
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root)
});
};