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

wix-style-react

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: 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");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// 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,
      differenceBadgeTooltipContent = props.differenceBadgeTooltipContent,
      onDifferenceBadgeTooltipShow = props.onDifferenceBadgeTooltipShow;

  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
  }, /*#__PURE__*/_react["default"].createElement("section", {
    className: _FunnelChartSt.classes.funnel
  }, 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
    }, /*#__PURE__*/_react["default"].createElement(_FunnelBar.FunnelBar, {
      height: currentBarHeight,
      dataHook: _constants.dataHooks.funnelChartItem
    }), isLastItem ? /*#__PURE__*/_react["default"].createElement(_FunnelStep.EmptyFunnelStep, null) : /*#__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
    }));
  })), /*#__PURE__*/_react["default"].createElement("section", {
    className: _FunnelChartSt.classes.labels
  }, data.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: item.label,
      className: _FunnelChartSt.classes.labelWrapper
    }, /*#__PURE__*/_react["default"].createElement(_FunnelLabel.FunnelLabel, {
      value: item.value,
      label: item.label,
      displayValue: item.displayValue
    }));
  })));
};

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
};
FunnelChart.defaultProps = {
  differenceBadgeTooltipContent: function differenceBadgeTooltipContent() {
    return '';
  },
  onDifferenceBadgeTooltipShow: function onDifferenceBadgeTooltipShow() {}
};
var _default = FunnelChart;
exports["default"] = _default;