@alicloud/cloud-charts
Version:
304 lines (274 loc) • 13.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
// @ts-ignore
/* eslint-disable @typescript-eslint/brace-style */
/* eslint-disable no-mixed-operators */
/* eslint-disable react/no-array-index-key */
import React, { useState, useEffect, useRef, Fragment, useCallback } from 'react';
import Wline from '../Wline';
import Wcircle from '../Wcircle';
import { beautifyNumber } from '../common/common';
import { FullCrossName, PrefixName } from '../constants';
import WidgetsTooltip from '../common/Tooltip';
import classNames from 'classnames';
import chartLog from '../common/log';
import "./index.css";
var prefix = PrefixName + "-wnumbercard";
export var Wnumbercard = function Wnumbercard(props) {
var _classNames;
var _ref = props || {},
label = _ref.label,
value = _ref.value,
unit = _ref.unit,
status = _ref.status,
icon = _ref.icon,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
userBackgroundType = _ref.backgroundType,
backgroundImage = _ref.backgroundImage,
_ref$iconPosition = _ref.iconPosition,
iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
_ref$labelTags = _ref.labelTags,
labelTags = _ref$labelTags === void 0 ? [] : _ref$labelTags,
_ref$valueTags = _ref.valueTags,
valueTags = _ref$valueTags === void 0 ? [] : _ref$valueTags,
chart = _ref.chart,
itemStyle = _ref.itemStyle,
labelStyle = _ref.labelStyle,
valueStyle = _ref.valueStyle,
otherProps = _objectWithoutPropertiesLoose(_ref, ["label", "value", "unit", "status", "icon", "size", "backgroundType", "backgroundImage", "iconPosition", "labelTags", "valueTags", "chart", "itemStyle", "labelStyle", "valueStyle"]); // 有minichart的卡片默认灰色
var backgroundType = userBackgroundType ? userBackgroundType : chart ? 'fill' : 'none';
var chartPosition = (chart === null || chart === void 0 ? void 0 : chart.position) || 'right';
var labelRef = useRef(null); // icon
var iconElement = icon && /*#__PURE__*/React.isValidElement(icon) ? icon : false;
useEffect(function () {
// 图表初始化时记录日志
chartLog('Wnumbercard', 'init');
}, []); // label tags
var labelTagElements = labelTags.map(function (tag, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
className: prefix + "-label-tag " + prefix + "-tag-item " + (tag.status || 'default')
}, /*#__PURE__*/React.createElement("span", {
className: prefix + "-tag-value"
}, tag === null || tag === void 0 ? void 0 : tag.text));
}); // value tags
var valueTagElements = valueTags.map(function (tag, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
className: prefix + "-value-tag " + prefix + "-tag-item " + (tag.status || 'default')
}, (tag === null || tag === void 0 ? void 0 : tag.trend) === 'down' && /*#__PURE__*/React.createElement("svg", {
className: prefix + "-tag-trend"
}, /*#__PURE__*/React.createElement("polygon", {
points: "0,2 10,2 5,10"
})), (tag === null || tag === void 0 ? void 0 : tag.trend) === 'up' && /*#__PURE__*/React.createElement("svg", {
className: prefix + "-tag-trend"
}, /*#__PURE__*/React.createElement("polygon", {
points: "0,10 10,10 5,2"
})), /*#__PURE__*/React.createElement("span", {
className: prefix + "-tag-value"
}, tag === null || tag === void 0 ? void 0 : tag.text));
}); // 线图
var lineChart = (chart === null || chart === void 0 ? void 0 : chart.type) === 'Wline' && /*#__PURE__*/React.createElement(Wline, {
data: (chart === null || chart === void 0 ? void 0 : chart.data) || [],
width: (chart === null || chart === void 0 ? void 0 : chart.width) || null,
height: (chart === null || chart === void 0 ? void 0 : chart.height) || 44,
config: _extends({
xAxis: {
visible: false
},
yAxis: {
visible: false
},
legend: false,
tooltip: false
}, chart === null || chart === void 0 ? void 0 : chart.config),
force: true
}); // 圆环图
var circleChart = (chart === null || chart === void 0 ? void 0 : chart.type) === 'Wcircle' && /*#__PURE__*/React.createElement(Wcircle, _extends({
percent: (chart === null || chart === void 0 ? void 0 : chart.data) || 0
}, _extends({
radius: 22
}, chart === null || chart === void 0 ? void 0 : chart.config)));
var chartElement = /*#__PURE__*/React.isValidElement(chart) && chart || lineChart || circleChart;
var chartContainer = chartElement && /*#__PURE__*/React.createElement("div", {
className: prefix + "-item-chart",
style: {
justifyContent: chartPosition === 'right' ? 'flex-end' : 'flex-start',
marginLeft: chartPosition === 'right' ? 20 : 0,
marginRight: chartPosition === 'left' ? 20 : 0,
marginTop: chartPosition === 'bottom' ? 20 : 0,
marginBottom: chartPosition === 'top' ? 20 : 0
}
}, chartElement);
var mainClasses = classNames(prefix, (_classNames = {}, _classNames[FullCrossName] = true, _classNames[prefix + '-data-item-container'] = true, _classNames[prefix + '-none-card'] = backgroundType === 'none', _classNames[prefix + '-fill-card'] = backgroundType === 'fill', _classNames[prefix + '-image-card'] = backgroundType === 'image', _classNames[prefix + '-clickable'] = !!(props !== null && props !== void 0 && props.onClick), _classNames));
return /*#__PURE__*/React.createElement("div", _extends({
className: mainClasses,
style: _extends({
backgroundImage: backgroundType === 'image' ? "url(" + backgroundImage + ")" : 'none'
}, itemStyle || {}, {
flexDirection: chartPosition === 'left' || chartPosition === 'right' ? 'row' : 'column',
padding: chartPosition === 'bottom' ? '16px 20px 20px 16px' : '12px 16px'
})
}, otherProps), (chartPosition === 'left' || chartPosition === 'top') && chartContainer, /*#__PURE__*/React.createElement("div", {
className: prefix + "-item-content",
style: {
justifyContent: chartElement && chartPosition === 'left' ? 'flex-end' : 'space-between',
alignItems: chartElement && chartPosition === 'bottom' ? 'flex-start' : 'center',
alignSelf: chartElement && chartPosition === 'left' ? 'flex-end' : 'flex-start'
}
}, iconPosition === 'left' && iconElement, /*#__PURE__*/React.createElement("div", {
className: prefix + "-main-content",
style: {
marginLeft: iconElement && iconPosition === 'left' ? 16 : 0
}
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-item-label-container",
style: {
marginBottom: value || value === 0 ? chartPosition === 'bottom' ? 20 : 8 : 0
}
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-item-label",
ref: labelRef,
style: labelStyle || {}
}, label || ''), /*#__PURE__*/React.createElement(WidgetsTooltip, {
ref: labelRef,
content: label || ''
}), (labelTagElements === null || labelTagElements === void 0 ? void 0 : labelTagElements.length) > 0 && /*#__PURE__*/React.createElement("div", {
className: prefix + "-tag-container"
}, labelTagElements)), /*#__PURE__*/React.createElement("div", {
className: prefix + "-label-value-container"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-item-value"
}, typeof value === 'number' ? /*#__PURE__*/React.createElement("span", {
className: prefix + "-value-number " + prefix + "-" + (status || 'default') + " " + (size || 'medium'),
style: valueStyle || {}
}, beautifyNumber(value || 0, ',')) : typeof value === 'string' ? /*#__PURE__*/React.createElement("span", {
className: prefix + "-value-number " + prefix + "-" + (status || 'default') + " " + (size || 'medium'),
style: valueStyle || {}
}, value) : value, unit && /*#__PURE__*/React.createElement("div", {
className: prefix + "-item-unit " + prefix + "-" + (status || 'default'),
style: {
marginBottom: /*#__PURE__*/React.isValidElement(value) || isNaN(Number(value)) ? 0 : size === 'small' ? 1 : 2
}
}, unit), (valueTagElements === null || valueTagElements === void 0 ? void 0 : valueTagElements.length) > 0 && /*#__PURE__*/React.createElement("div", {
className: prefix + "-tag-container"
}, valueTagElements)))), iconPosition === 'right' && iconElement), (chartPosition === 'right' || chartPosition === 'bottom') && chartContainer);
};
export var Wnumberoverview = function Wnumberoverview(props) {
var _ref2 = props || {},
_ref2$data = _ref2.data,
data = _ref2$data === void 0 ? [] : _ref2$data,
userColumns = _ref2.columns,
_ref2$margin = _ref2.margin,
margin = _ref2$margin === void 0 ? 16 : _ref2$margin,
userShowDivider = _ref2.showDivider,
userBackgroundType = _ref2.backgroundType,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 'medium' : _ref2$size;
var marginRight = typeof margin === 'number' ? margin : margin[1];
var marginBottom = typeof margin === 'number' ? margin : margin[0];
var maxWidth = Math.max.apply(Math, data.map(calcCardMinWidth));
var container = useRef(null);
var _useState = useState(1),
columns = _useState[0],
setColumns = _useState[1];
var _useState2 = useState(0),
containerWidth = _useState2[0],
setContainerWidth = _useState2[1];
useEffect(function () {
// 图表初始化时记录日志
chartLog('Wnumberoverview', 'init');
}, []);
var calcColumns = useCallback(function () {
var _container$current;
var width = (container === null || container === void 0 ? void 0 : (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.offsetWidth) || 0;
setContainerWidth(width); // 用户设置了列数则直接用
if (userColumns) {
setColumns(userColumns);
return;
} // 每行几个卡片，最少2个，最多6个
var itemsPerRow = Math.min(Math.max(Math.min(Math.floor(width / maxWidth), (data === null || data === void 0 ? void 0 : data.length) || 0), 2), 6);
setColumns(itemsPerRow);
}, [userColumns, data]);
useEffect(function () {
calcColumns();
window.addEventListener('resize', calcColumns);
return function () {
window.removeEventListener('resize', calcColumns);
};
}, [calcColumns]); // 卡片背景样式
var _useState3 = useState(undefined),
backgroundType = _useState3[0],
setBackgroundType = _useState3[1]; // 计算默认的backgroundType
useEffect(function () {
// 用户指定了backgroundType就直接用
if (userBackgroundType) {
setBackgroundType(userBackgroundType);
return;
}
if (data.some(function (item) {
return item.backgroundType;
})) {
// 任意卡片指定了backgroundType则不做处理
setBackgroundType(undefined);
} else if (data.some(function (item) {
return item.icon;
})) {
// 任意卡片有icon 则默认用白色卡片
setBackgroundType('none');
} else {
setBackgroundType('fill');
}
}, [data, userBackgroundType]); // 是否加间隔线
var showDivider = userShowDivider !== undefined ? userShowDivider : backgroundType === 'none';
var itemWidth = (containerWidth - (marginRight + (showDivider ? 1 : 0)) * (columns - 1)) / columns;
var chartWidth = Math.max(62, itemWidth / 3);
var dataByRow = [];
for (var index = 0; index < (data === null || data === void 0 ? void 0 : data.length); index += columns) {
dataByRow.push(data.slice(index, index + columns));
}
return /*#__PURE__*/React.createElement("div", {
className: FullCrossName + " " + prefix + "-data-overview-container " + backgroundType,
ref: container,
style: {
flexDirection: 'row'
}
}, dataByRow.map(function (row, rowIndex) {
return /*#__PURE__*/React.createElement("div", {
key: rowIndex,
className: prefix + "-data-overview-row",
style: {
marginBottom: rowIndex === dataByRow.length - 1 ? 0 : marginBottom
}
}, row.map(function (item, colIndex) {
var _item$itemStyle;
var itemProps = _extends({
backgroundType: backgroundType,
size: size
}, item, item.chart && ! /*#__PURE__*/React.isValidElement(item.chart) ? {
chart: _extends({}, item.chart, {
width: chartWidth
})
} : {}, {
itemStyle: _extends({
height: 68,
width: itemWidth,
marginRight: colIndex === columns - 1 ? 0 : marginRight / 2,
marginLeft: colIndex === 0 ? 0 : marginRight / 2
}, (_item$itemStyle = item === null || item === void 0 ? void 0 : item.itemStyle) !== null && _item$itemStyle !== void 0 ? _item$itemStyle : {})
});
return /*#__PURE__*/React.createElement(Fragment, {
key: rowIndex * columns + colIndex
}, /*#__PURE__*/React.createElement(Wnumbercard, itemProps), colIndex !== row.length - 1 && showDivider && /*#__PURE__*/React.createElement("div", {
className: prefix + "-divider"
}));
}));
}));
}; // 计算卡片宽度
function calcCardMinWidth(cardProps) {
if (cardProps.icon) {
return 172;
}
return 92;
}