@alicloud/cloud-charts
Version:
178 lines (173 loc) • 13.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
var _index = _interopRequireDefault(require("../../themes/index"));
var _Wnumber = _interopRequireDefault(require("../../Wnumber"));
var _globalResizeObserver = require("../../common/globalResizeObserver");
require("./index.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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 = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(0),
width = _useState[0],
setWidth = _useState[1];
var _useState2 = (0, _react.useState)(0),
offsetX = _useState2[0],
setOffsetX = _useState2[1];
var unityAnimation = function unityAnimation(waterWidth) {
var _ref$current$getBound, _ref$current, _ref$current$getBound2;
var currentX = (_ref$current$getBound = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$getBound2 = _ref$current.getBoundingClientRect()) === null || _ref$current$getBound2 === void 0 ? void 0 : _ref$current$getBound2.left) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : 0;
var capcityList = document.getElementsByClassName(prefix + "-percent-container");
var minX = 9999999;
for (var i = 0; i < (capcityList === null || capcityList === void 0 ? void 0 : capcityList.length); i++) {
var x_position = capcityList[i].getBoundingClientRect().left;
minX = Math.min(minX, x_position);
}
;
// 计算距离
var distance = Math.ceil(currentX) === Math.ceil(minX) ? 0 : currentX - minX - waterWidth;
// 计算偏移，减去最左侧的水位
var offsetX = distance - Math.floor(distance / waterWidth) * waterWidth;
setOffsetX(offsetX);
};
(0, _react.useEffect)(function () {
var timer;
var handleResize = function handleResize() {
clearTimeout(timer);
timer = setTimeout(function () {
var _ref$current$clientWi, _ref$current2;
if (!ref.current) return;
var waterWidth = (_ref$current$clientWi = ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.clientWidth) !== null && _ref$current$clientWi !== void 0 ? _ref$current$clientWi : 0;
setWidth(waterWidth);
if (!config.closeUniAnimation || !_index["default"]['widgets-global-uni-animation'] && _index["default"]['widgets-global-uni-animation'] !== 'true') {
unityAnimation(waterWidth);
}
}, 0);
};
handleResize();
var parent = ref.current && ref.current.parentElement;
if (parent) {
_globalResizeObserver.GlobalResizeObserver.observe(parent, handleResize);
}
return function () {
clearTimeout(timer);
var parent = ref.current && ref.current.parentElement;
if (parent) {
_globalResizeObserver.GlobalResizeObserver.unobserve(parent);
}
};
}, [ref]);
// 默认态是图表主色
var statusColors = {
normal: _index["default"]['widgets-capacity-color-grey'],
// 平常态是灰色
success: _index["default"]['widgets-color-green'],
warning: _index["default"]['widgets-color-orange'],
error: _index["default"]['widgets-color-red']
};
var translateStartColor = function translateStartColor(data, config) {
if (data.percent.displayNumber === 0 || data.percent.displayNumber === '-' || !data.percent.displayNumber) {
return {
status: 'empty',
color: _index["default"]['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 : 'normal',
color: statusColors[config === null || config === void 0 ? void 0 : config.startColor] || (config === null || config === void 0 ? void 0 : config.startColor) || _index["default"]['widgets-color-normal']
};
}
} 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 : 'normal',
color: statusColors[config === null || config === void 0 ? void 0 : config.startColor] || (config === null || config === void 0 ? void 0 : config.startColor) || _index["default"]['widgets-color-normal']
};
}
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-percent-container",
style: (0, _extends2["default"])({
width: (config === null || config === void 0 ? void 0 : config.barSize) || '100%'
}, config === null || config === void 0 ? void 0 : config.percentConfig),
ref: ref
}, /*#__PURE__*/_react["default"].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["default"].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["default"].createElement(_Wnumber["default"], {
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["default"].createElement("div", {
className: prefix + "-process-bar",
style: (0, _extends2["default"])({
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["default"].createElement("div", {
className: prefix + "-process-back",
style: (0, _extends2["default"])({
background: "linear-gradient(180deg, transparent 19px, " + translateStartColor(data, config).color + " 0%, " + ((config === null || config === void 0 ? void 0 : config.endColor) || (0, _tinycolor["default"])(translateStartColor(data, config).color).setAlpha(0.1).toRgbString()) + " 100%)"
}, config === null || config === void 0 ? void 0 : config.processBarBackConfig, {
transform: "translate3d(" + -offsetX + "px,0,0) scale(1, 1) perspective(1px)"
})
}, /*#__PURE__*/_react["default"].createElement("svg", {
className: "process-svg",
width: "100%",
height: 20,
version: "1.1",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/_react["default"].createElement("g", {
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: getClipPath(width * 2, 20),
fill: translateStartColor(data, config).color,
opacity: "0.5",
transform: "translate(" + -0.5 * width + ",0)"
}), /*#__PURE__*/_react["default"].createElement("path", {
d: getClipPath(width * 2, 20),
fill: translateStartColor(data, config).color
}))))), /*#__PURE__*/_react["default"].createElement(_Wnumber["default"], {
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["default"].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["default"].createElement("div", {
className: prefix + "-percent-bar-label-title",
style: config === null || config === void 0 ? void 0 : config.titleConfig
}, data.percent.name)));
}
var _default = exports["default"] = PercentBar;