wix-style-react/dist/src/FunnelChart/FunnelStep/FunnelStep.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EmptyFunnelStep = exports.FunnelStep = void 0;

var _react = _interopRequireDefault(require("react"));

var _FunnelStepSt = require("./FunnelStep.st.css");

var _FunnelBadge = require("../FunnelBadge");

var _numberFormatters = require("../../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;
}

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 = (0, _numberFormatters.formatToPercent)((0, _numberFormatters.countPercentageFromBase)(+currentBarData.value, +nextBarData.value, 0));
  var dataForDifferenceBadge = {
    currentIndex: currentBarIndex,
    difference: differenceInPercentage
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _FunnelStepSt.st)(_FunnelStepSt.classes.root, {
      nextBarIsFlat: nextBarHeight === 0
    })
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _FunnelStepSt.classes.funnelStepRotated,
    style: {
      height: "".concat(nextDeltaHeight, "%")
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: _FunnelStepSt.classes.funnelStep,
    style: {
      height: "".concat(nextBarHeight, "%")
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: _FunnelStepSt.classes.funnelStepPlaceholder,
    style: {
      top: "".concat(currentDeltaHeight, "%"),
      height: "".concat(nextDeltaHeight, "%")
    }
  }), hideDifferenceBadge ? null : /*#__PURE__*/_react["default"].createElement("div", {
    className: _FunnelStepSt.classes.badgeWrapper,
    style: {
      top: "".concat(badgeTopPosition, "%")
    }
  }, /*#__PURE__*/_react["default"].createElement(_FunnelBadge.FunnelBadge, {
    value: differenceInPercentage,
    tooltipContent: getTooltipContent(dataForDifferenceBadge),
    onTooltipShow: function onTooltipShow() {
      return _onTooltipShow(dataForDifferenceBadge);
    }
  })));
};
/** It just takes place but doesn't display or calculate anything */


exports.FunnelStep = FunnelStep;

var EmptyFunnelStep = function EmptyFunnelStep() {
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _FunnelStepSt.st)(_FunnelStepSt.classes.root)
  });
};

exports.EmptyFunnelStep = EmptyFunnelStep;