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

ZeroETP React Component Library

import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";
import "antd/es/statistic/style";
import _Statistic from "antd/es/statistic";
import React from "react";
import { ArrowUpOutlined, ArrowDownOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import ZELogicformVisualizer from "../../ZELogicformVisualizer";
import { formatWithProperty, getFormatter } from "../../util";
import { useCurrencyFromContext } from "../../hooks/useCurrency";
import sift from "sift";

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 = 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(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 ? 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 = sift(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.createElement(React.Fragment, null, showArrow && /*#__PURE__*/React.createElement(ArrowUpOutlined, {
      style: valueStyle
    }), currencySymbol);
  } else if (trend === "down") {
    valueStyle = {
      color: downColor
    };
    prefix = /*#__PURE__*/React.createElement(React.Fragment, null, showArrow && /*#__PURE__*/React.createElement(ArrowDownOutlined, {
      style: valueStyle
    }), currencySymbol);
  }

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

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

export default StatisticForValue;