@alicloud/cloud-charts
Version:
391 lines (375 loc) • 22 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Wnumberoverview = exports.Wnumbercard = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _Wline = _interopRequireDefault(require("../Wline"));
var _Wcircle = _interopRequireDefault(require("../Wcircle"));
var _common = require("../common/common");
var _constants = require("../constants");
var _Tooltip = _interopRequireDefault(require("../common/Tooltip"));
var _classnames = _interopRequireDefault(require("classnames"));
var _log = _interopRequireDefault(require("../common/log"));
var _globalResizeObserver = require("../common/globalResizeObserver");
require("./index.css");
var _excluded = ["position", "status", "icon", "size", "backgroundType", "backgroundImage", "iconPosition", "extra", "extraTriggerType", "labelTags", "valueTags", "chart", "itemStyle", "labelStyle", "valueStyle", "needUnitTransform", "decimal", "unitTransformTo", "valueType", "customCarryUnits", "customCarryThreshold", "addonTextAfter"],
_excluded2 = ["data", "config"]; // @ts-ignore
/* eslint-disable @typescript-eslint/brace-style */
/* eslint-disable no-mixed-operators */
/* eslint-disable react/no-array-index-key */
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; }
var prefix = _constants.PrefixName + "-wnumbercard";
// todo: 提出去
var Wnumbercard = exports.Wnumbercard = function Wnumbercard(props) {
var _classNames, _chart$config$radius, _chart$config, _chart$width;
// 兼容老api
var _props$props$data = (0, _extends2["default"])({}, props, props === null || props === void 0 ? void 0 : props.data),
label = _props$props$data.label,
value = _props$props$data.value,
unit = _props$props$data.unit;
var _props$props$config = (0, _extends2["default"])({}, props, props === null || props === void 0 ? void 0 : props.config),
_props$props$config$p = _props$props$config.position,
position = _props$props$config$p === void 0 ? 'left' : _props$props$config$p,
status = _props$props$config.status,
icon = _props$props$config.icon,
_props$props$config$s = _props$props$config.size,
size = _props$props$config$s === void 0 ? 'medium' : _props$props$config$s,
userBackgroundType = _props$props$config.backgroundType,
backgroundImage = _props$props$config.backgroundImage,
_props$props$config$i = _props$props$config.iconPosition,
iconPosition = _props$props$config$i === void 0 ? 'left' : _props$props$config$i,
extra = _props$props$config.extra,
_props$props$config$e = _props$props$config.extraTriggerType,
extraTriggerType = _props$props$config$e === void 0 ? 'none' : _props$props$config$e,
_props$props$config$l = _props$props$config.labelTags,
labelTags = _props$props$config$l === void 0 ? [] : _props$props$config$l,
_props$props$config$v = _props$props$config.valueTags,
valueTags = _props$props$config$v === void 0 ? [] : _props$props$config$v,
chart = _props$props$config.chart,
itemStyle = _props$props$config.itemStyle,
labelStyle = _props$props$config.labelStyle,
valueStyle = _props$props$config.valueStyle,
needUnitTransform = _props$props$config.needUnitTransform,
decimal = _props$props$config.decimal,
unitTransformTo = _props$props$config.unitTransformTo,
valueType = _props$props$config.valueType,
customCarryUnits = _props$props$config.customCarryUnits,
customCarryThreshold = _props$props$config.customCarryThreshold,
addonTextAfter = _props$props$config.addonTextAfter,
otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_props$props$config, _excluded);
var current = value;
var finalUnit = unit;
if (needUnitTransform && valueType) {
if (valueType === 'percent_1' && typeof current === 'number') {
current = current * 100;
}
var _unitConversion = (0, _common.unitConversion)(current, unit, decimal, unitTransformTo, valueType, customCarryUnits, customCarryThreshold, addonTextAfter),
_value = _unitConversion.value,
transformUnit = _unitConversion.unit;
current = _value;
finalUnit = transformUnit;
}
// 有minichart的卡片默认灰色
var backgroundType = userBackgroundType ? userBackgroundType : chart ? 'fill' : 'none';
var chartPosition = (chart === null || chart === void 0 ? void 0 : chart.position) || 'right';
var labelRef = (0, _react.useRef)(null);
var extraRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(0),
extraWidth = _useState[0],
setExtraWidth = _useState[1];
// icon
var iconElement = icon && /*#__PURE__*/_react["default"].isValidElement(icon) ? icon : false;
(0, _react.useEffect)(function () {
// 图表初始化时记录日志
(0, _log["default"])('Wnumbercard', 'init');
}, []);
// label tags
var labelTagElements = labelTags.map(function (tag, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: prefix + "-label-tag " + prefix + "-tag-item " + (tag.status || 'default')
}, /*#__PURE__*/_react["default"].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["default"].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["default"].createElement("svg", {
className: prefix + "-tag-trend"
}, /*#__PURE__*/_react["default"].createElement("polygon", {
points: "0,2 10,2 5,10"
})), (tag === null || tag === void 0 ? void 0 : tag.trend) === 'up' && /*#__PURE__*/_react["default"].createElement("svg", {
className: prefix + "-tag-trend"
}, /*#__PURE__*/_react["default"].createElement("polygon", {
points: "0,10 10,10 5,2"
})), /*#__PURE__*/_react["default"].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["default"].createElement(_Wline["default"], {
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) || null,
config: (0, _extends2["default"])({
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["default"].createElement(_Wcircle["default"], (0, _extends2["default"])({
percent: (chart === null || chart === void 0 ? void 0 : chart.data) || 0
}, (0, _extends2["default"])({
radius: 22
}, chart === null || chart === void 0 ? void 0 : chart.config)));
var chartElement = /*#__PURE__*/_react["default"].isValidElement(chart) && chart || lineChart || circleChart;
var chartContainer = chartElement && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-item-chart",
style: {
justifyContent: chartPosition === 'right' ? 'flex-end' : 'flex-start',
marginLeft: chartPosition === 'right' ? 8 : 0,
marginRight: chartPosition === 'left' ? 8 : 0,
marginTop: chartPosition === 'bottom' ? 8 : 0,
marginBottom: chartPosition === 'top' ? 8 : 0,
height: ['top', 'bottom'].includes(chartPosition) ? "calc(100% - " + (label && value !== undefined ? 58 : 26) + "px)" : '100%'
}
}, chartElement);
var mainClasses = (0, _classnames["default"])(prefix, (_classNames = {}, _classNames[_constants.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'] = !!(otherProps !== null && otherProps !== void 0 && otherProps.onClick), _classNames));
(0, _react.useEffect)(function () {
var _extraRef$current;
if (!extraRef.current) {
return;
}
setExtraWidth(extraRef === null || extraRef === void 0 ? void 0 : (_extraRef$current = extraRef.current) === null || _extraRef$current === void 0 ? void 0 : _extraRef$current.offsetWidth);
}, [extra]);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: mainClasses,
style: (0, _extends2["default"])({
backgroundImage: backgroundType === 'image' ? "url(" + backgroundImage + ")" : 'none',
minHeight: label && value !== undefined ? 68 : !label && value !== undefined ? 48 : 42,
flexDirection: chartPosition === 'left' || chartPosition === 'right' ? 'row' : 'column',
padding: chartPosition === 'bottom' ? '16px 12px' : '12px 16px'
}, itemStyle || {})
}, otherProps), (chartPosition === 'left' || chartPosition === 'top') && chartContainer, /*#__PURE__*/_react["default"].createElement("div", {
className: position === 'center' ? prefix + "-item-content-center" : 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',
width: chartElement && ['left', 'right'].includes(chartPosition) ? "calc(100% - " + (((chart === null || chart === void 0 ? void 0 : chart.type) === 'Wcircle' ? ((_chart$config$radius = chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.radius) !== null && _chart$config$radius !== void 0 ? _chart$config$radius : 22) * 2 : (_chart$width = chart === null || chart === void 0 ? void 0 : chart.width) !== null && _chart$width !== void 0 ? _chart$width : 0) + 20) + "px)" : '100%'
}
}, iconPosition === 'left' && iconElement, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-main-content",
style: {
marginLeft: iconElement && iconPosition === 'left' ? 16 : 0
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-item-label-container",
style: {
marginBottom: value || value === 0 || chart && chartPosition === 'bottom' ? 8 : 0
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-item-label-left",
style: {
maxWidth: extra ? "calc(100% - " + (extraWidth + 8) + "px)" : '100%'
}
}, iconPosition === 'top-left' && iconElement && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-top-left-icon"
}, iconElement), /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-item-label",
ref: labelRef,
style: labelStyle || {}
}, label || ''), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
ref: labelRef,
content: label || '',
position: "top"
}), (labelTagElements === null || labelTagElements === void 0 ? void 0 : labelTagElements.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-tag-container"
}, labelTagElements)), extra && /*#__PURE__*/_react["default"].isValidElement(extra) && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-item-label-right " + (extraTriggerType === 'hover' ? prefix + "-item-label-right-hidden" : ''),
ref: extraRef
}, extra)), /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-label-value-container"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-item-value"
}, typeof value === 'number' ? /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-value-number " + prefix + "-" + (status || 'default') + " " + (size || 'medium'),
style: valueStyle || {}
}, (0, _common.beautifyNumber)(current || 0, ',')) : typeof value === 'string' ? /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-value-number " + prefix + "-" + (status || 'default') + " " + (size || 'medium'),
style: valueStyle || {}
}, value) : value, finalUnit && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-item-unit " + prefix + "-" + (status || 'default'),
style: {
marginBottom: /*#__PURE__*/_react["default"].isValidElement(value) || isNaN(Number(value)) ? 0 : size === 'small' ? 1 : 2
}
}, finalUnit), (valueTagElements === null || valueTagElements === void 0 ? void 0 : valueTagElements.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-tag-container"
}, valueTagElements)))), iconPosition === 'right' && iconElement), (chartPosition === 'right' || chartPosition === 'bottom') && chartContainer);
};
var Wnumberoverview = exports.Wnumberoverview = function Wnumberoverview(props) {
var _ref = props || {},
_ref$data = _ref.data,
data = _ref$data === void 0 ? [] : _ref$data;
var _props$props$config2 = (0, _extends2["default"])({}, props, props === null || props === void 0 ? void 0 : props.config),
userColumns = _props$props$config2.columns,
_props$props$config2$ = _props$props$config2.margin,
margin = _props$props$config2$ === void 0 ? 16 : _props$props$config2$,
userShowDivider = _props$props$config2.showDivider,
userBackgroundType = _props$props$config2.backgroundType,
_props$props$config2$2 = _props$props$config2.size,
size = _props$props$config2$2 === void 0 ? 'medium' : _props$props$config2$2;
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 = (0, _react.useRef)(null);
var _useState2 = (0, _react.useState)(1),
columns = _useState2[0],
setColumns = _useState2[1];
var _useState3 = (0, _react.useState)(0),
containerWidth = _useState3[0],
setContainerWidth = _useState3[1];
(0, _react.useEffect)(function () {
// 图表初始化时记录日志
(0, _log["default"])('Wnumberoverview', 'init');
}, []);
var calcColumns = (0, _react.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]);
(0, _react.useEffect)(function () {
calcColumns();
var parent = container.current && container.current.parentElement;
if (parent) {
_globalResizeObserver.GlobalResizeObserver.observe(parent, calcColumns);
}
return function () {
var parent = container.current && container.current.parentElement;
if (parent) {
_globalResizeObserver.GlobalResizeObserver.unobserve(parent);
}
};
}, [calcColumns]);
// 卡片背景样式
var _useState4 = (0, _react.useState)(undefined),
backgroundType = _useState4[0],
setBackgroundType = _useState4[1];
// 计算默认的backgroundType
(0, _react.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;
// 当任意卡片有图表（不在左右）时，高度100%，否则68
var itemHeight = data.some(function (item) {
var _item$config$chart, _item$config;
var chart = (_item$config$chart = item === null || item === void 0 ? void 0 : (_item$config = item.config) === null || _item$config === void 0 ? void 0 : _item$config.chart) !== null && _item$config$chart !== void 0 ? _item$config$chart : item === null || item === void 0 ? void 0 : item.chart;
if (chart && (chart === null || chart === void 0 ? void 0 : chart.position) !== 'left' && (chart === null || chart === void 0 ? void 0 : chart.position) !== 'right') {
return true;
}
return false;
}) ? '100%' : 68;
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["default"].createElement("div", {
className: _constants.FullCrossName + " " + prefix + "-data-overview-container " + backgroundType,
ref: container,
style: {
flexDirection: 'row'
}
}, dataByRow.map(function (row, rowIndex) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: rowIndex,
className: prefix + "-data-overview-row",
style: {
marginBottom: rowIndex === dataByRow.length - 1 ? 0 : marginBottom,
height: 100 / (dataByRow === null || dataByRow === void 0 ? void 0 : dataByRow.length) + "%",
minHeight: 68
}
}, row.map(function (item, colIndex) {
var _config$chart, _data$label, _data$value, _data$unit, _config$itemStyle;
var _ref2 = item || {},
data = _ref2.data,
config = _ref2.config,
others = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
var chart = (_config$chart = config === null || config === void 0 ? void 0 : config.chart) !== null && _config$chart !== void 0 ? _config$chart : others === null || others === void 0 ? void 0 : others.chart;
var itemProps = {
data: {
label: (_data$label = data === null || data === void 0 ? void 0 : data.label) !== null && _data$label !== void 0 ? _data$label : others === null || others === void 0 ? void 0 : others.label,
value: (_data$value = data === null || data === void 0 ? void 0 : data.value) !== null && _data$value !== void 0 ? _data$value : others === null || others === void 0 ? void 0 : others.value,
unit: (_data$unit = data === null || data === void 0 ? void 0 : data.unit) !== null && _data$unit !== void 0 ? _data$unit : others === null || others === void 0 ? void 0 : others.unit
},
config: (0, _extends2["default"])({
backgroundType: backgroundType,
size: size
}, others, config, chart && ! /*#__PURE__*/_react["default"].isValidElement(chart) ? {
chart: (0, _extends2["default"])({}, chart, {
width: ['top', 'bottom'].includes(chart === null || chart === void 0 ? void 0 : chart.position) ? null : chartWidth
})
} : {}, {
itemStyle: (0, _extends2["default"])({
height: itemHeight,
width: itemWidth,
marginRight: colIndex === columns - 1 ? 0 : marginRight / 2,
marginLeft: colIndex === 0 ? 0 : marginRight / 2
}, (_config$itemStyle = config === null || config === void 0 ? void 0 : config.itemStyle) !== null && _config$itemStyle !== void 0 ? _config$itemStyle : others === null || others === void 0 ? void 0 : others.itemStyle)
})
};
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
key: rowIndex * columns + colIndex
}, /*#__PURE__*/_react["default"].createElement(Wnumbercard, itemProps), colIndex !== row.length - 1 && showDivider && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-divider"
}));
}));
}));
};
// 计算卡片宽度
function calcCardMinWidth(cardProps) {
if (cardProps.icon) {
return 172;
}
return 92;
}