@cainiaofe/cn-ui-charts
Version:
382 lines (379 loc) • 17 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CnStatisticCard = CnStatisticCard;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _classnames4 = _interopRequireDefault(require("classnames"));
var _cnUi = require("@alife/cn-ui");
var _cnChart = require("../cn-chart");
require("./index.scss");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
// @ts-ignore
var CnListItem = _cnUi.CnList.Item;
/**
* CnStatisticCard 组件
* @param {*} props
* @returns
*/
function CnStatisticCard(props) {
var _classnames2, _classnames3, _period$items, _compare$items;
if (props.beforeRender) {
props = props.beforeRender(props);
}
var _props = props,
className = _props.className,
style = _props.style,
icon = _props.icon,
statistic = _props.statistic,
compare = _props.compare,
period = _props.period,
action = _props.action,
_props$noPadding = _props.noPadding,
noPadding = _props$noPadding === void 0 ? false : _props$noPadding,
_props$noBorder = _props.noBorder,
noBorder = _props$noBorder === void 0 ? false : _props$noBorder,
bgColor = _props.bgColor,
trend = _props.trend,
progress = _props.progress,
hover = _props.hover,
onClick = _props.onClick,
_props$active = _props.active,
active = _props$active === void 0 ? false : _props$active,
_props$shape = _props.shape,
shape = _props$shape === void 0 ? 'normal' : _props$shape,
subIndicators = _props.subIndicators,
_props$horizontalConf = _props.horizontalConfig,
horizontalConfig = _props$horizontalConf === void 0 ? {} : _props$horizontalConf;
var clsPrefix = 'cn-statistic-card';
var clsPrefixSmall = 'cn-statistic-card-small';
var renderStatisticVal = function renderStatisticVal(val) {
var _val$value;
if (val.formatter && typeof val.formatter === 'function') {
return val.formatter(val.value);
}
return (_val$value = val.value) === null || _val$value === void 0 ? void 0 : _val$value.toLocaleString();
};
var finallyStyle = style ? (0, _extends2["default"])({}, style, {
backgroundColor: bgColor
}) : {
backgroundColor: bgColor
};
var renderCompareIcon = function renderCompareIcon(item) {
var colorFun = compare === null || compare === void 0 ? void 0 : compare.color;
if (item.arrowDirection) {
if (item.arrowDirection > 0) {
return /*#__PURE__*/_react["default"].createElement(_cnUi.CnIcon, {
type: "triangle-up-fill",
className: clsPrefix + "-compare-item-icon",
color: colorFun && typeof colorFun === 'function' ? colorFun(item) : '#EA6173'
});
}
if (item.arrowDirection < 0) {
return /*#__PURE__*/_react["default"].createElement(_cnUi.CnIcon, {
type: "triangle-down-fill",
className: clsPrefix + "-compare-item-icon",
color: colorFun && typeof colorFun === 'function' ? colorFun(item) : '#0ACEAC'
});
}
}
return null;
};
var renderTrend = function renderTrend(trendData) {
var _trendData$items;
if (!(trendData !== null && trendData !== void 0 && (_trendData$items = trendData.items) !== null && _trendData$items !== void 0 && _trendData$items.length)) {
return null;
}
var _trendData$autoDataDo = trendData.autoDataDomainFit,
autoDataDomainFit = _trendData$autoDataDo === void 0 ? true : _trendData$autoDataDo,
options = trendData.options;
var domain;
if (autoDataDomainFit) {
var maxY = trendData.items.reduce(function (accumulator, current) {
if (current.y > accumulator.y) {
return current;
}
return accumulator;
}).y;
var minY = trendData.items.reduce(function (accumulator, current) {
if (current.y < accumulator.y) {
return current;
}
return accumulator;
}).y;
domain = [minY, maxY];
}
console.log('domain', domain);
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-trend"
}, trendData !== null && trendData !== void 0 && trendData.title ? /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-trend-title"
}, trendData.title) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-trend-wrap"
}, /*#__PURE__*/_react["default"].createElement(_cnChart.CnChart, {
theme: "classic",
padding: 0,
autoFit: true,
data: trendData.items,
options: (0, _extends2["default"])({
scale: {
y: {
domain: domain
}
},
insetTop: 10,
children: [{
type: 'area',
/* axis: {
x: {
line: false,
},
}, */
encode: {
x: 'x',
y: 'y',
shape: 'smooth'
},
style: {
fill: 'linear-gradient(90deg, rgba(40,76,191,0.8) 0%, rgba(40,76,191,0.18) 100%)',
stroke: '#284CC0',
fillOpacity: 0.2
},
axis: false,
animate: {
enter: {
type: 'fadeIn'
}
},
interaction: {
tooltip: trendData.tooltip ? trendData.tooltip : {
// @ts-ignore
render: function render(e, _ref) {
var items = _ref.items;
return items[0].value;
}
}
}
}, {
type: 'line',
axis: false,
encode: {
x: 'x',
y: 'y',
shape: 'smooth'
// color: 'rgba(40,76,191, 1)',
},
style: {
stroke: 'rgba(40,76,191, 1)',
strokeWidth: 1
}
}]
}, options)
})));
};
var renderAction = function renderAction(config) {
if (!config) {
return null;
}
if ( /*#__PURE__*/(0, _react.isValidElement)(config)) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-action"
}, config);
}
var actionData = config;
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-action",
onClick: actionData === null || actionData === void 0 ? void 0 : actionData.onClick
}, actionData === null || actionData === void 0 ? void 0 : actionData.text, /*#__PURE__*/_react["default"].createElement(_cnUi.CnIcon, {
className: clsPrefix + "-statistic-action-icon",
type: "triangle-left-fill",
size: "medium"
}));
};
var renderProgress = function renderProgress(progressConfig) {
if (!progressConfig) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-progress"
}, progressConfig.title ? /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-progress-title"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-progress-text"
}, progressConfig.title), /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-progress-value"
}, progressConfig.percent + "%")) : null, /*#__PURE__*/_react["default"].createElement(_cnUi.Progress, {
percent: progressConfig.percent,
size: "medium",
color: progressConfig.color,
textRender: function textRender() {
return null;
}
}));
};
if (shape === 'statistic') {
var _classnames;
clsPrefix = clsPrefixSmall;
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])(clsPrefix, className, {
padding: !noPadding,
border: !noBorder,
hover: hover,
checked: active
}),
style: finallyStyle,
onClick: onClick
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])(clsPrefix + "-content")
}, statistic && /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-header"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-title"
}, statistic.status ? /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])((_classnames = {
status: true
}, _classnames[statistic.status] = true, _classnames))
}) : null, statistic.title, statistic.tip ? /*#__PURE__*/_react["default"].createElement(_cnUi.CnTooltip, {
trigger: /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-tip"
}, /*#__PURE__*/_react["default"].createElement(_cnUi.CnIcon, {
type: "help-fill",
size: 14,
style: {
color: '#D4DBF2'
}
})),
align: "t"
}, statistic.tip) : null, statistic.updateTime ? /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-time"
}, statistic.updateTime) : null), renderAction(action)), /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-body"
}, statistic.prefix ? /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-statistic-body-prefix"
}, statistic.prefix) : null, /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-statistic-body-value",
style: {
color: statistic === null || statistic === void 0 ? void 0 : statistic.valueColor
}
}, renderStatisticVal(statistic)), statistic.suffix ? /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-statistic-body-suffix"
}, statistic.suffix) : null))));
}
if (shape === 'multipleIndicator') {
clsPrefix = clsPrefixSmall;
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])(clsPrefix, className, {
padding: !noPadding,
border: !noBorder,
hover: hover,
checked: active
}),
style: finallyStyle,
onClick: onClick
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])(clsPrefix + "-content")
}, subIndicators && subIndicators.length ? /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])(clsPrefix + "-sub")
}, /*#__PURE__*/_react["default"].createElement(_cnUi.CnList, {
horizontalConfig: (0, _extends2["default"])({
columnGap: 20,
rowGap: 8,
columns: 4,
size: 'small'
}, horizontalConfig),
dataSource: subIndicators,
renderItem: function renderItem(item, i) {
return /*#__PURE__*/_react["default"].createElement(CnListItem, {
key: i
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-sub-item"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-sub-header"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-sub-title"
}, item.title)), /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-sub-body"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-sub-body-value",
style: {
color: item === null || item === void 0 ? void 0 : item.valueColor
}
}, renderStatisticVal(item)))));
}
})) : null));
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])(clsPrefix, className, {
padding: !noPadding,
border: !noBorder,
hover: hover,
checked: active
}),
style: finallyStyle,
onClick: onClick
}, icon ? /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-icon"
}, _cnUi.Avatar && /*#__PURE__*/_react["default"].createElement(_cnUi.Avatar, (0, _extends2["default"])({
shape: "square",
size: 52
}, icon))) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])(clsPrefix + "-content", (_classnames2 = {}, _classnames2[clsPrefix + "-content-small"] = !!icon, _classnames2))
}, statistic && /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-header"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-title"
}, statistic.status ? /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames4["default"])((_classnames3 = {
status: true
}, _classnames3[statistic.status] = true, _classnames3))
}) : null, statistic.title, statistic.tip ? /*#__PURE__*/_react["default"].createElement(_cnUi.CnTooltip, {
trigger: /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-tip"
}, /*#__PURE__*/_react["default"].createElement(_cnUi.CnIcon, {
type: "help-fill",
size: 14,
style: {
color: '#D4DBF2'
}
})),
align: "t"
}, statistic.tip) : null, statistic.updateTime ? /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-time"
}, statistic.updateTime) : null), renderAction(action)), /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-statistic-body"
}, statistic.prefix ? /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-statistic-body-prefix"
}, statistic.prefix) : null, /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-statistic-body-value",
style: {
color: statistic === null || statistic === void 0 ? void 0 : statistic.valueColor
}
}, renderStatisticVal(statistic)), statistic.suffix ? /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-statistic-body-suffix"
}, statistic.suffix) : null)), period !== null && period !== void 0 && (_period$items = period.items) !== null && _period$items !== void 0 && _period$items.length ? /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-period"
}, period.items.map(function (item) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-period-item"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-period-item-key"
}, item.text), /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-period-item-value"
}, item.value));
})) : null, compare !== null && compare !== void 0 && (_compare$items = compare.items) !== null && _compare$items !== void 0 && _compare$items.length ? /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-compare"
}, compare.items.map(function (item) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: clsPrefix + "-compare-item"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-compare-item-key"
}, item.text), /*#__PURE__*/_react["default"].createElement("span", {
className: clsPrefix + "-compare-item-value"
}, renderCompareIcon(item), item.formatter ? item.formatter(item.value) : item.value));
})) : null, renderTrend(trend), renderProgress(progress)));
}