zhu-jiang-yi-yuan-mobile/lib/components/gauge/index.js

南方医科大学珠江医院移动端

"use strict";

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

var _utils = require("../../utils");

var _bizcharts = require("bizcharts");

var _nsnConst = require("nsn-const");

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

require("./index.less");

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

var CLS_PREFIX = "".concat(_utils.Const.CLS_PREFIX, "-gauge"); // https://bizcharts.net/product/BizCharts4/category/77/page/143

var Gauge = function Gauge(props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? 0 : _props$value,
      _props$color = props.color,
      color = _props$color === void 0 ? '#1F8FFB' : _props$color,
      className = props.className,
      valueLabel = props.valueLabel;
  var newValue = parseFloat((value * 100).toFixed(2));
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(CLS_PREFIX, " ").concat(className || _nsnConst.NConst.EMPTY)
  }, /*#__PURE__*/_react.default.createElement(_bizcharts.GaugeChart, {
    data: [],
    value: newValue,
    height: 130,
    width: 130,
    renderer: "svg",
    padding: [5, 5, 5, 5],
    min: 0,
    max: 100,
    range: [0, newValue],
    rangeStyle: {
      fill: color
    },
    rangeBackgroundStyle: {
      fill: '#f0f0f0'
    },
    rangeSize: 4,
    pivot: {
      thickness: 2,
      pointer: {
        style: {
          fill: color
        }
      },
      base: {
        style: {
          fill: color
        }
      },
      pin: {
        style: {
          fill: color
        }
      }
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "statistic",
    style: {
      color: color
    }
  }, "".concat(valueLabel ? "".concat(valueLabel, "\uFF1A") : _nsnConst.NConst.EMPTY).concat(newValue, "%")));
};

exports.Gauge = Gauge;