@wix/design-system/dist/cjs/FunnelChart/FunnelChart.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _FunnelChartSt = require("./FunnelChart.st.css.js");
var _FunnelLabel = require("./FunnelLabel");
var _FunnelBar = require("./FunnelBar");
var _FunnelStep = require("./FunnelStep");
var _numberFormatters = require("../utils/numberFormatters");
var _constants = require("./constants");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FunnelChart/FunnelChart.jsx",
  _this = void 0;
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 = function calculateBarsHeights(_ref) {
  var funnelChartData = _ref.funnelChartData,
    startValue = _ref.startValue;
  return funnelChartData.map(function (i) {
    var percentage = (0, _numberFormatters.countPercentageFromBase)(startValue, i.value, 0);
    return percentage > 100 ? 100 : percentage;
  });
};

/** FunnelChart */
var FunnelChart = function FunnelChart(props) {
  var dataHook = props.dataHook,
    className = props.className,
    data = props.data,
    hideDifferenceBadge = props.hideDifferenceBadge,
    fullHeight = props.fullHeight,
    _props$differenceBadg = props.differenceBadgeSkin,
    differenceBadgeSkin = _props$differenceBadg === void 0 ? 'standard' : _props$differenceBadg,
    _props$differenceBadg2 = props.differenceBadgeProps,
    differenceBadgeProps = _props$differenceBadg2 === void 0 ? function () {
      return {};
    } : _props$differenceBadg2,
    _props$differenceBadg3 = props.differenceBadgeTooltipContent,
    differenceBadgeTooltipContent = _props$differenceBadg3 === void 0 ? function () {
      return '';
    } : _props$differenceBadg3,
    _props$differenceBadg4 = props.differenceBadgeTooltipProps,
    differenceBadgeTooltipProps = _props$differenceBadg4 === void 0 ? function () {
      return {};
    } : _props$differenceBadg4,
    _props$onDifferenceBa = props.onDifferenceBadgeTooltipShow,
    onDifferenceBadgeTooltipShow = _props$onDifferenceBa === void 0 ? function () {} : _props$onDifferenceBa,
    _props$differenceStep = props.differenceStepSkin,
    differenceStepSkin = _props$differenceStep === void 0 ? function () {
      return 'standard';
    } : _props$differenceStep;
  (0, _react.useEffect)(function () {
    if ('differenceBadgeSkin' in props) {
      (0, _deprecationLog["default"])('<FunnelChart/> - prop "differenceBadgeSkin" is deprecated and will be removed in next major release.');
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  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: (0, _FunnelChartSt.st)(_FunnelChartSt.classes.root, className),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react["default"].createElement("section", {
    className: (0, _FunnelChartSt.st)(_FunnelChartSt.classes.funnel, {
      fullHeight: fullHeight
    }),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54,
      columnNumber: 7
    }
  }, data.map(function (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: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react["default"].createElement(_FunnelBar.FunnelBar, {
      height: currentBarHeight,
      dataHook: _constants.dataHooks.funnelChartItem,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 63,
        columnNumber: 15
      }
    }), isLastItem || data[index + 1].value === 0 ? /*#__PURE__*/_react["default"].createElement(_FunnelStep.EmptyFunnelStep, {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 68,
        columnNumber: 17
      }
    }) : /*#__PURE__*/_react["default"].createElement(_FunnelStep.FunnelStep, {
      currentBarIndex: index,
      currentBarData: data[index],
      nextBarData: data[index + 1],
      currentBarHeight: currentBarHeight,
      nextBarHeight: nextBarHeight,
      hideDifferenceBadge: hideDifferenceBadge,
      differenceBadgeSkin: differenceBadgeSkin // mark as deprecated
      ,
      getDifferenceBadgeProps: differenceBadgeProps,
      getDifferenceStepSkin: differenceStepSkin,
      getTooltipContent: differenceBadgeTooltipContent,
      getTooltipProps: differenceBadgeTooltipProps,
      onTooltipShow: onDifferenceBadgeTooltipShow,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 70,
        columnNumber: 17
      }
    }));
  })), /*#__PURE__*/_react["default"].createElement("section", {
    className: _FunnelChartSt.classes.labels,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89,
      columnNumber: 7
    }
  }, data.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: item.label,
      className: _FunnelChartSt.classes.labelWrapper,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 92,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react["default"].createElement(_FunnelLabel.FunnelLabel, {
      value: item.value,
      label: item.label,
      displayValue: item.displayValue,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 93,
        columnNumber: 15
      }
    }));
  })));
};
FunnelChart.displayName = 'FunnelChart';
var _default = exports["default"] = FunnelChart;