@alicloud/cloud-charts/es/Wnumber/index.js


'use strict';

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["className", "style", "status", "unit", "numberTrend", "rightRatioTrend", "rightTitle", "rightRatio", "rightRatioStatus", "trend", "children", "bottomTitle"];
import * as React from 'react';
import classNames from 'classnames';
import { getStatusColorName, beautifyNumber } from '../common/common';
import WidgetsTooltip from '../common/Tooltip';
import Warrow from '../common/arrow';
import chartLog from '../common/log';
import { FullCrossName, PrefixName } from '../constants';
import "./index.css";
var prefix = PrefixName + "-wnumber";
function getTrendIcon(trend) {
  if (trend === 'raise') {
    return /*#__PURE__*/React.createElement(Warrow, {
      type: "up"
    });
  } else if (trend === 'drop') {
    return /*#__PURE__*/React.createElement(Warrow, {
      type: "down"
    });
  } else {
    return null;
  }
}
var Wnumber = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Wnumber, _React$Component);
  function Wnumber(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;

    // 图表初始化时记录日志
    _this.labelRef = /*#__PURE__*/React.createRef();
    _this.numberRef = /*#__PURE__*/React.createRef();
    chartLog('Wnumber', 'init');
    return _this;
  }
  var _proto = Wnumber.prototype;
  _proto.renderBottom = function renderBottom(bottomTitle) {
    if (!!bottomTitle) {
      return /*#__PURE__*/React.createElement("div", {
        className: prefix + "-bottomTitle",
        ref: this.labelRef
      }, /*#__PURE__*/React.createElement(WidgetsTooltip, {
        ref: this.labelRef,
        content: bottomTitle || '',
        position: "bottom"
      }), bottomTitle);
    } else {
      return null;
    }
  };
  _proto.renderMain = function renderMain(status, unit, numberTrend, rightRatioTrend, rightTitle, rightRatio, rightRatioStatus, trend, children) {
    var numberTrendIcon = getTrendIcon(numberTrend);
    var numberClasses = prefix + "-number";
    var rightRatioTrendIcon = getTrendIcon(rightRatioTrend);
    var rightRatioTrendClasses = prefix + "-rightRatio " + rightRatioTrend + " " + (rightRatioStatus ? getStatusColorName(rightRatioStatus) : '');
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + "-main " + numberTrend + " " + (status ? getStatusColorName(status) : '')
    }, numberTrend && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-leftIcon"
    }, numberTrendIcon), /*#__PURE__*/React.createElement("span", {
      className: numberClasses
    }, beautifyNumber(children)), unit && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-unit"
    }, unit), rightTitle && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-rightTitle"
    }, rightTitle), rightRatio && /*#__PURE__*/React.createElement("span", {
      className: rightRatioTrendClasses
    }, rightRatioTrend && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-rightRatioIcon"
    }, rightRatioTrendIcon), rightRatio), trend && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-trend"
    }, trend()));
  };
  _proto.render = function render() {
    var _classNames;
    var _this$props = this.props,
      className = _this$props.className,
      style = _this$props.style,
      status = _this$props.status,
      unit = _this$props.unit,
      numberTrend = _this$props.numberTrend,
      rightRatioTrend = _this$props.rightRatioTrend,
      rightTitle = _this$props.rightTitle,
      rightRatio = _this$props.rightRatio,
      rightRatioStatus = _this$props.rightRatioStatus,
      trend = _this$props.trend,
      children = _this$props.children,
      bottomTitle = _this$props.bottomTitle,
      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
    var mainClasses = classNames((_classNames = {}, _classNames[FullCrossName] = true, _classNames["" + prefix] = true, _classNames[className] = !!className, _classNames));
    return /*#__PURE__*/React.createElement("div", _extends({
      className: mainClasses,
      style: style
    }, otherProps), this.renderMain(status, unit, numberTrend, rightRatioTrend, rightTitle, rightRatio, rightRatioStatus, trend, children), this.renderBottom(bottomTitle));
  };
  return Wnumber;
}(React.Component);
Wnumber.displayName = 'Wnumber';
Wnumber.defaultProps = {
  numberTrend: '',
  rightRatioTrend: '',
  status: ''
};
export { Wnumber as default };