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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.FunnelStep = exports.EmptyFunnelStep = void 0;
var _react = _interopRequireDefault(require("react"));
var _FunnelStepSt = require("./FunnelStep.st.css");
var _FunnelBadge = require("../FunnelBadge");
var _numberFormatters = require("../../utils/numberFormatters");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FunnelChart/FunnelStep/FunnelStep.js";
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 = _ref => {
  var {
    currentBarIndex,
    currentBarData,
    nextBarData,
    currentBarHeight,
    nextBarHeight,
    hideDifferenceBadge,
    getTooltipContent,
    onTooltipShow: _onTooltipShow
  } = _ref;
  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
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _FunnelStepSt.classes.funnelStepRotated,
    style: {
      height: "".concat(nextDeltaHeight, "%")
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _FunnelStepSt.classes.funnelStep,
    style: {
      height: "".concat(nextBarHeight, "%")
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _FunnelStepSt.classes.funnelStepPlaceholder,
    style: {
      top: "".concat(currentDeltaHeight, "%"),
      height: "".concat(nextDeltaHeight, "%")
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 63,
      columnNumber: 7
    }
  }), hideDifferenceBadge ? null : /*#__PURE__*/_react.default.createElement("div", {
    className: _FunnelStepSt.classes.badgeWrapper,
    style: {
      top: "".concat(badgeTopPosition, "%")
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_FunnelBadge.FunnelBadge, {
    value: differenceInPercentage,
    tooltipContent: getTooltipContent(dataForDifferenceBadge),
    onTooltipShow: () => _onTooltipShow(dataForDifferenceBadge),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 11
    }
  })));
};

/** It just takes place but doesn't display or calculate anything */
exports.FunnelStep = FunnelStep;
var EmptyFunnelStep = () => /*#__PURE__*/_react.default.createElement("div", {
  className: (0, _FunnelStepSt.st)(_FunnelStepSt.classes.root),
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 88,
    columnNumber: 38
  }
});
exports.EmptyFunnelStep = EmptyFunnelStep;
//# sourceMappingURL=FunnelStep.js.map