@alicloud/cloud-charts
Version:
217 lines (215 loc) • 8.14 kB
JavaScript
'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", "trend", "type", "percent", "title", "unit", "children", "radius", "strokeWidth", "status", "color", "backgroundColor", "linecap", "bottomTitle", "bottomUnit", "bottomNumber", "bottomTrend"];
import * as React from 'react';
import classNames from 'classnames';
import Warrow from '../common/arrow';
import { getStatusColorName } from '../common/common';
import chartLog from '../common/log';
import { FullCrossName, PrefixName } from '../constants';
import "./index.css";
var prefix = PrefixName + "-wcircle";
var Wcircle = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Wcircle, _React$Component);
function Wcircle(props) {
var _this;
_this = _React$Component.call(this, props) || this;
// 图表初始化时记录日志
chartLog('Wcircle', 'init');
return _this;
}
var _proto = Wcircle.prototype;
_proto.renderBottom = function renderBottom(bottomTitle, bottomUnit, bottomNumber, bottomTrend) {
var numberTrendIcon;
var numberClasses = prefix + "-bottom-number";
if (bottomTrend === 'raise') {
numberClasses += ' raise';
numberTrendIcon = /*#__PURE__*/React.createElement(Warrow, {
type: "up"
});
} else if (bottomTrend === 'drop') {
numberClasses += ' drop';
numberTrendIcon = /*#__PURE__*/React.createElement(Warrow, {
type: "down"
});
}
if (!!bottomTitle || !!bottomUnit || !!bottomNumber || !!bottomTrend) {
return /*#__PURE__*/React.createElement("div", {
className: prefix + "-bottom-block"
}, /*#__PURE__*/React.createElement("span", {
className: numberClasses
}, bottomTrend && /*#__PURE__*/React.createElement("span", {
className: prefix + "-leftIcon"
}, numberTrendIcon), bottomNumber, bottomUnit && /*#__PURE__*/React.createElement("span", {
className: prefix + "-bottom-unit"
}, bottomUnit)), /*#__PURE__*/React.createElement("p", {
className: prefix + "-title"
}, bottomTitle));
}
return null;
};
_proto.renderMain = function renderMain(_ref) {
var title = _ref.title,
unit = _ref.unit,
children = _ref.children,
trend = _ref.trend,
type = _ref.type,
percent = _ref.percent,
radius = _ref.radius,
strokeWidth = _ref.strokeWidth,
status = _ref.status,
customColor = _ref.color,
backgroundColor = _ref.backgroundColor,
bottomTitle = _ref.bottomTitle,
bottomUnit = _ref.bottomUnit,
bottomNumber = _ref.bottomNumber,
bottomTrend = _ref.bottomTrend,
linecap = _ref.linecap;
var numberTrendIcon;
var numberClasses = prefix + "-number";
var style = {};
if (customColor) {
style.color = customColor;
}
if (trend === 'raise') {
numberClasses += ' raise';
numberTrendIcon = /*#__PURE__*/React.createElement(Warrow, {
type: "up"
});
} else if (trend === 'drop') {
numberClasses += ' drop';
numberTrendIcon = /*#__PURE__*/React.createElement(Warrow, {
type: "down"
});
}
var radiusInner = radius - strokeWidth / 2;
var pathString = "M " + radius + "," + radius + " m 0," + radiusInner + "\n a " + radiusInner + "," + radiusInner + " 0 1 1 0,-" + 2 * radiusInner + "\n a " + radiusInner + "," + radiusInner + " 0 1 1 0," + 2 * radiusInner;
var circleLengh = Math.PI * 2 * radiusInner;
var openWidth, pathDashoffset, strokeDashoffset, strokePathStyle;
if (type === 'circle') {
openWidth = 0;
pathDashoffset = '0px';
strokeDashoffset = "-" + circleLengh / 2 + "px";
strokePathStyle = {
strokeDasharray: percent * (circleLengh - openWidth) + "px " + (1 - percent) * (circleLengh - openWidth) + "px",
strokeDashoffset: strokeDashoffset
};
} else if (type === 'gauge') {
openWidth = Math.PI * 0.45 * radiusInner;
pathDashoffset = "-" + openWidth / 2 + "px";
strokeDashoffset = "-" + openWidth / 2 + "px";
strokePathStyle = {
strokeDasharray: percent * (circleLengh - openWidth) + "px " + circleLengh + "px",
strokeDashoffset: strokeDashoffset
};
}
var pathStyle = {
strokeDasharray: circleLengh - openWidth + "px " + circleLengh + "px",
strokeDashoffset: pathDashoffset
};
if (backgroundColor) {
pathStyle.stroke = backgroundColor;
}
var svgStyle = {
height: radius * 2,
width: radius * 2
};
return /*#__PURE__*/React.createElement("div", {
className: prefix + "-main " + getStatusColorName(status),
style: style
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-ratio"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-ratio-svg",
style: svgStyle
}, /*#__PURE__*/React.createElement("svg", {
width: "100%",
height: "100%",
xmlns: "http://www.w3.org/2000/svg",
version: "1.1",
className: linecap
}, /*#__PURE__*/React.createElement("path", {
className: prefix + "-svg-bg",
d: pathString,
strokeWidth: strokeWidth,
style: pathStyle
}), /*#__PURE__*/React.createElement("path", {
className: prefix + "-svg-ring",
d: pathString,
strokeWidth: strokeWidth,
style: strokePathStyle
}))), /*#__PURE__*/React.createElement("div", {
className: prefix + "-number-block"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-number-middle"
}, /*#__PURE__*/React.createElement("span", {
className: numberClasses
}, trend && /*#__PURE__*/React.createElement("span", {
className: prefix + "-leftIcon"
}, numberTrendIcon), children, unit && /*#__PURE__*/React.createElement("span", {
className: prefix + "-unit"
}, unit)), title && /*#__PURE__*/React.createElement("p", {
className: prefix + "-title"
}, title))), type === 'gauge' && this.renderBottom(bottomTitle, bottomUnit, bottomNumber, bottomTrend)));
};
_proto.render = function render() {
var _classNames;
var _this$props = this.props,
className = _this$props.className,
style = _this$props.style,
trend = _this$props.trend,
type = _this$props.type,
percent = _this$props.percent,
title = _this$props.title,
unit = _this$props.unit,
children = _this$props.children,
radius = _this$props.radius,
strokeWidth = _this$props.strokeWidth,
status = _this$props.status,
color = _this$props.color,
backgroundColor = _this$props.backgroundColor,
linecap = _this$props.linecap,
bottomTitle = _this$props.bottomTitle,
bottomUnit = _this$props.bottomUnit,
bottomNumber = _this$props.bottomNumber,
bottomTrend = _this$props.bottomTrend,
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({
title: title,
unit: unit,
children: children,
trend: trend,
percent: percent,
type: type,
radius: radius,
strokeWidth: strokeWidth,
status: status,
color: color,
backgroundColor: backgroundColor,
linecap: linecap,
bottomTitle: bottomTitle,
bottomUnit: bottomUnit,
bottomNumber: bottomNumber,
bottomTrend: bottomTrend
}));
};
return Wcircle;
}(React.Component);
Wcircle.displayName = 'Wcircle';
Wcircle.defaultProps = {
type: 'circle',
title: '',
percent: 0,
unit: '',
status: 'blue',
radius: 70,
strokeWidth: 6,
linecap: 'round'
};
export { Wcircle as default };