ze-react-component-library/lib/components/StatisticForValue/index.js

ZeroETP React Component Library

"use strict";

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

require("antd/lib/tooltip/style");

var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));

require("antd/lib/statistic/style");

var _statistic = _interopRequireDefault(require("antd/lib/statistic"));

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

var _icons = require("@ant-design/icons");

var _ZELogicformVisualizer = _interopRequireDefault(require("../../ZELogicformVisualizer"));

var _util = require("../../util");

var _useCurrency = require("../../hooks/useCurrency");

var _sift = _interopRequireDefault(require("sift"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var StatisticForValue = function StatisticForValue(_a) {
  var _b, _c;

  var property = _a.property,
      _value = _a.value,
      _tip = _a.tip,
      logicform = _a.logicform,
      _trend = _a.trend,
      upColor = _a.upColor,
      downColor = _a.downColor,
      title = _a.title,
      subTitle = _a.subTitle,
      showArrow = _a.showArrow;
  var key = property === null || property === void 0 ? void 0 : property.name;
  var finalTitle = title || key;
  var getCurrencySymbol = (0, _useCurrency.useCurrencyFromContext)().getCurrencySymbol;
  var currencySymbol = (getCurrencySymbol === null || getCurrencySymbol === void 0 ? void 0 : getCurrencySymbol(property)) || "";
  var trend = _trend;
  var unit = "";
  var tip = _tip || (property === null || property === void 0 ? void 0 : property.description);
  var suffix = "";
  var prefix = currencySymbol;
  var valueStyle;
  var value = property ? String((0, _util.formatWithProperty)(property, _value)) : ""; //@ts-ignore

  if (!_trend && (property === null || property === void 0 ? void 0 : property.target)) {
    //@ts-ignore
    trend = _value < property.target ? "down" : "up";
  }

  if (property === null || property === void 0 ? void 0 : property.unit) {
    unit = property.unit;
  }

  var formatter = property ? (0, _util.getFormatter)(property) : undefined;

  if (formatter) {
    suffix = "" + formatter.prefix + unit + formatter.postfix;
  }

  if (suffix.length === 0) {
    suffix = unit;
  }

  var intUnit = value[value.length - 1];

  if (intUnit !== "-" && Number.isNaN(Number(intUnit))) {
    suffix = intUnit;
    value = value.replace(suffix, "");
  }

  var colorRuleMatch; //@ts-ignore

  if ((_b = property === null || property === void 0 ? void 0 : property.ui) === null || _b === void 0 ? void 0 : _b.colors) {
    //@ts-ignore
    var array = (_c = property === null || property === void 0 ? void 0 : property.ui) === null || _c === void 0 ? void 0 : _c.colors;

    for (var index = 0; index < array.length; index++) {
      var element = array[index];
      var filter = (0, _sift.default)(element.rule);

      if (filter(_value)) {
        colorRuleMatch = element;
        break;
      }
    }
  }

  if (colorRuleMatch) {
    trend = undefined;
    valueStyle = {
      color: colorRuleMatch.color
    };
  }

  if (trend === "up") {
    valueStyle = {
      color: upColor
    };
    prefix = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showArrow && /*#__PURE__*/_react.default.createElement(_icons.ArrowUpOutlined, {
      style: valueStyle
    }), currencySymbol);
  } else if (trend === "down") {
    valueStyle = {
      color: downColor
    };
    prefix = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showArrow && /*#__PURE__*/_react.default.createElement(_icons.ArrowDownOutlined, {
      style: valueStyle
    }), currencySymbol);
  }

  if (!property || typeof _value !== "number") {
    return /*#__PURE__*/_react.default.createElement(_statistic.default, {
      key: new Date().toString(),
      value: "-",
      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalTitle, subTitle)
    });
  }

  return /*#__PURE__*/_react.default.createElement(_statistic.default, {
    key: key,
    value: value,
    suffix: suffix,
    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tip || logicform ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalTitle, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
      title: /*#__PURE__*/_react.default.createElement("div", null, tip, logicform && /*#__PURE__*/_react.default.createElement(_ZELogicformVisualizer.default, {
        mode: "verbose",
        className: "light",
        showQueryFilter: false,
        logicform: logicform
      })),
      placement: "right"
    }, /*#__PURE__*/_react.default.createElement(_icons.QuestionCircleOutlined, {
      style: {
        marginLeft: 8
      }
    }))) : finalTitle, subTitle),
    prefix: prefix,
    valueStyle: valueStyle
  });
};

var _default = StatisticForValue;
exports.default = _default;