@alicloud/cloud-charts/es/Wcapacity/percentBar/index.js


import _extends from "@babel/runtime/helpers/extends";
import React, { useRef, useEffect, useState } from 'react';
import themes from '../../themes/index';
import Wnumber from '../../Wnumber';
import "./index.css";

function getClipPath(width, height) {
  return ['M0,10', "Q" + 0.125 * width + "," + height + " " + 0.25 * width + "," + height / 4, "Q" + 0.375 * width + "," + -height / 4 + " " + 0.5 * width + "," + height / 2, "Q" + 0.625 * width + "," + height + " " + 0.75 * width + "," + height / 4, "Q" + 0.875 * width + "," + -height / 4 + " " + width + "," + height / 2, "L" + width + ",0", "L" + width + "," + height, "L0," + height, 'L0,0', 'Z'].join(' ');
}

function PercentBar(props) {
  var _translateStartColor, _config$guide$status3, _config$guide4, _config$guide$thresho2, _config$guide5, _config$guide$status4, _config$guide6, _config$guide$status5, _config$guide7, _config$guide$status6, _config$guide8, _config$guide$thresho3, _config$guide9, _config$percentConfig, _config$labelConfig;

  var data = props.data,
      config = props.config,
      prefix = props.prefix;
  var ref = useRef(null);

  var _useState = useState(0),
      width = _useState[0],
      setWidth = _useState[1];

  useEffect(function () {
    var timer;

    var handleResize = function handleResize() {
      clearTimeout(timer);
      timer = setTimeout(function () {
        var _ref$current$clientWi, _ref$current;

        if (!ref.current) return;
        var waterWidth = (_ref$current$clientWi = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) !== null && _ref$current$clientWi !== void 0 ? _ref$current$clientWi : 0;
        setWidth(waterWidth);
      }, 0);
    };

    handleResize();
    window.addEventListener('resize', handleResize, false);
    return function () {
      clearTimeout(timer);
      window.removeEventListener('resize', handleResize, false);
    };
  }, [ref]); // 默认态是图表主色

  var statusColors = {
    normal: themes['widgets-capacity-color-grey'],
    // 平常态是灰色
    success: themes['widgets-color-green'],
    warning: themes['widgets-color-orange'],
    error: themes['widgets-color-red']
  };

  var translateStartColor = function translateStartColor(data, config) {
    if (data.percent.displayNumber === 0) {
      return {
        status: 'empty',
        color: themes['widgets-tooltip-cross-line']
      };
    } else if (config !== null && config !== void 0 && config.guide) {
      var _ref, _config$guide$thresho, _config$guide;

      var threshold = Number((_ref = (_config$guide$thresho = config === null || config === void 0 ? void 0 : (_config$guide = config.guide) === null || _config$guide === void 0 ? void 0 : _config$guide.threshold) !== null && _config$guide$thresho !== void 0 ? _config$guide$thresho : '80%') === null || _ref === void 0 ? void 0 : _ref.replace('%', ''));

      if (data.percent.displayNumber >= threshold) {
        var _config$guide$status, _config$guide2, _config$guide$status2, _config$guide3;

        return {
          status: (_config$guide$status = config === null || config === void 0 ? void 0 : (_config$guide2 = config.guide) === null || _config$guide2 === void 0 ? void 0 : _config$guide2.status) !== null && _config$guide$status !== void 0 ? _config$guide$status : 'error',
          color: statusColors[(_config$guide$status2 = config === null || config === void 0 ? void 0 : (_config$guide3 = config.guide) === null || _config$guide3 === void 0 ? void 0 : _config$guide3.status) !== null && _config$guide$status2 !== void 0 ? _config$guide$status2 : 'error']
        };
      } else {
        var _Object$keys;

        return {
          status: (_Object$keys = Object.keys(statusColors)) !== null && _Object$keys !== void 0 && _Object$keys.includes(config === null || config === void 0 ? void 0 : config.startColor) ? config === null || config === void 0 ? void 0 : config.startColor : 'default',
          color: statusColors[config === null || config === void 0 ? void 0 : config.startColor] || (config === null || config === void 0 ? void 0 : config.startColor) || themes['widgets-color-category-1']
        };
      }
    } else {
      var _Object$keys2;

      return {
        status: (_Object$keys2 = Object.keys(statusColors)) !== null && _Object$keys2 !== void 0 && _Object$keys2.includes(config === null || config === void 0 ? void 0 : config.startColor) ? config === null || config === void 0 ? void 0 : config.startColor : 'default',
        color: statusColors[config === null || config === void 0 ? void 0 : config.startColor] || (config === null || config === void 0 ? void 0 : config.startColor) || themes['widgets-color-category-1']
      };
    }
  };

  return /*#__PURE__*/React.createElement("div", {
    className: prefix + "-percent-container",
    style: _extends({
      width: (config === null || config === void 0 ? void 0 : config.barSize) || '100%'
    }, config === null || config === void 0 ? void 0 : config.percentConfig),
    ref: ref
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + "-bar-container " + ((_translateStartColor = translateStartColor(data, config)) === null || _translateStartColor === void 0 ? void 0 : _translateStartColor.status),
    style: config === null || config === void 0 ? void 0 : config.barConfig
  }, (config === null || config === void 0 ? void 0 : config.guide) && /*#__PURE__*/React.createElement("div", {
    className: prefix + "-bar-guide-line " + ((_config$guide$status3 = config === null || config === void 0 ? void 0 : (_config$guide4 = config.guide) === null || _config$guide4 === void 0 ? void 0 : _config$guide4.status) !== null && _config$guide$status3 !== void 0 ? _config$guide$status3 : 'error'),
    style: {
      height: (_config$guide$thresho2 = config === null || config === void 0 ? void 0 : (_config$guide5 = config.guide) === null || _config$guide5 === void 0 ? void 0 : _config$guide5.threshold) !== null && _config$guide$thresho2 !== void 0 ? _config$guide$thresho2 : '80%',
      borderTopColor: statusColors[(_config$guide$status4 = config === null || config === void 0 ? void 0 : (_config$guide6 = config.guide) === null || _config$guide6 === void 0 ? void 0 : _config$guide6.status) !== null && _config$guide$status4 !== void 0 ? _config$guide$status4 : 'error']
    }
  }, /*#__PURE__*/React.createElement(Wnumber, {
    className: prefix + "-bar-guide-text " + ((_config$guide$status5 = config === null || config === void 0 ? void 0 : (_config$guide7 = config.guide) === null || _config$guide7 === void 0 ? void 0 : _config$guide7.status) !== null && _config$guide$status5 !== void 0 ? _config$guide$status5 : 'error'),
    style: {
      color: statusColors[(_config$guide$status6 = config === null || config === void 0 ? void 0 : (_config$guide8 = config.guide) === null || _config$guide8 === void 0 ? void 0 : _config$guide8.status) !== null && _config$guide$status6 !== void 0 ? _config$guide$status6 : 'error']
    }
  }, (_config$guide$thresho3 = config === null || config === void 0 ? void 0 : (_config$guide9 = config.guide) === null || _config$guide9 === void 0 ? void 0 : _config$guide9.threshold) !== null && _config$guide$thresho3 !== void 0 ? _config$guide$thresho3 : '-')), /*#__PURE__*/React.createElement("div", {
    className: prefix + "-process-bar",
    style: _extends({
      width: (config === null || config === void 0 ? void 0 : config.barSize) || (config === null || config === void 0 ? void 0 : (_config$percentConfig = config.percentConfig) === null || _config$percentConfig === void 0 ? void 0 : _config$percentConfig.width) || '100%',
      height: data.percent.displayNumber === 0 || data.percent.displayNumber === '-' ? '15px' : "calc(" + data.percent.displayNumber + "% + 15px)"
    }, config === null || config === void 0 ? void 0 : config.processBarConfig)
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + "-process-back",
    style: _extends({
      background: "linear-gradient(180deg, transparent 19px, " + translateStartColor(data, config).color + " 0%, " + ((config === null || config === void 0 ? void 0 : config.endColor) || 'rgba(0,0,0,0)') + " 100%)"
    }, config === null || config === void 0 ? void 0 : config.processBarBackConfig)
  }, /*#__PURE__*/React.createElement("svg", {
    className: "process-svg",
    width: "100%",
    height: 20,
    version: "1.1",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/React.createElement("g", {
    stroke: "none",
    strokeWidth: "1",
    fill: "none",
    fillRule: "evenodd"
  }, /*#__PURE__*/React.createElement("path", {
    d: getClipPath(width * 2, 20),
    fill: translateStartColor(data, config).color,
    opacity: "0.5",
    transform: "translate(" + -0.5 * width + ",0)"
  }), /*#__PURE__*/React.createElement("path", {
    d: getClipPath(width * 2, 20),
    fill: translateStartColor(data, config).color
  }))))), /*#__PURE__*/React.createElement(Wnumber, {
    className: prefix + "-percent-bar-label-content " + ((config === null || config === void 0 ? void 0 : config.size) || 'medium'),
    style: config === null || config === void 0 ? void 0 : config.labelConfig
  }, data.percent.displayNumber, /*#__PURE__*/React.createElement("span", {
    className: prefix + "-percent-bar-label-unit"
  }, (config === null || config === void 0 ? void 0 : (_config$labelConfig = config.labelConfig) === null || _config$labelConfig === void 0 ? void 0 : _config$labelConfig.unit) || '%')), /*#__PURE__*/React.createElement("div", {
    className: prefix + "-percent-bar-label-title",
    style: config === null || config === void 0 ? void 0 : config.titleConfig
  }, data.percent.name)));
}

export default PercentBar;