@teamix/data-summary
Version:
214 lines (196 loc) • 9.35 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _components = require("@alicloudfe/components");
var _cloudCharts = require("@alicloud/cloud-charts");
var _icon = _interopRequireDefault(require("@teamix/icon"));
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; }
/* eslint-disable react/prop-types */
// import { useSize } from 'ahooks';
// @ts-ignore: no types
var isTeamixIcon = function isTeamixIcon(type) {
if (type === void 0) {
type = '';
}
return type.endsWith('-line') || type.endsWith('-fill');
};
var DataSummary = function DataSummary(_ref) {
var dataSource = _ref.dataSource,
loading = _ref.loading,
noBorder = _ref.noBorder,
noPadding = _ref.noPadding,
backgroundState = _ref.backgroundState,
title = _ref.title,
tooltip = _ref.tooltip,
subTitle = _ref.subTitle,
action = _ref.action,
extra = _ref.extra,
increase = _ref.increase,
increaseUnit = _ref.increaseUnit,
progress = _ref.progress,
progressUnit = _ref.progressUnit,
progressState = _ref.progressState,
progressColor = _ref.progressColor,
_ref$prefixType = _ref.prefixType,
prefixType = _ref$prefixType === void 0 ? 'inner' : _ref$prefixType,
prefix = _ref.prefix,
prefixState = _ref.prefixState,
prefixIcon = _ref.prefixIcon,
style = _ref.style,
footer = _ref.footer,
onDataItemClick = _ref.onDataItemClick;
var ref = React.useRef(); // const size = useSize(ref);
var source = dataSource instanceof Array ? dataSource : [dataSource];
var renderContent = function renderContent() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "data-summary-row"
}, (prefix || prefixIcon) && /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])('data-summary-row-left', prefixType, prefixState)
}, prefixIcon && (isTeamixIcon(prefixIcon) ? /*#__PURE__*/React.createElement(_icon["default"], {
className: "prefix-icon",
type: prefixIcon,
size: prefixType === 'inner' ? 'medium' : 'xxl'
}) : /*#__PURE__*/React.createElement(_components.Icon, {
className: "prefix-icon",
type: prefixIcon,
size: prefixType === 'inner' ? 'medium' : 'xxl'
})), prefix, prefixType === 'inner' && /*#__PURE__*/React.createElement("div", {
className: "prefix-divide"
})), /*#__PURE__*/React.createElement("div", {
className: "data-summary-row-center"
}, title && /*#__PURE__*/React.createElement("div", {
className: "data-summary-header"
}, action && /*#__PURE__*/React.createElement("div", {
className: "data-summary-action"
}, action), /*#__PURE__*/React.createElement("div", {
className: "data-summary-header-title"
}, /*#__PURE__*/React.createElement("div", {
className: "data-summary-title"
}, title, tooltip ? /*#__PURE__*/React.createElement(_components.Balloon.Tooltip, {
trigger: /*#__PURE__*/React.createElement(_icon["default"], {
style: {
cursor: 'pointer',
marginLeft: 'var(--s-2,8px)',
color: 'var(--color-text1-8,#848484)'
},
type: "info-circle-line",
size: "small"
}),
align: "t"
}, tooltip) : null), subTitle && /*#__PURE__*/React.createElement("div", {
className: "data-summary-sub-title"
}, subTitle))), /*#__PURE__*/React.createElement("div", {
className: "data-summary-content"
}, /*#__PURE__*/React.createElement("div", {
className: "data-summary-main"
}, source.map(function (item, i) {
return /*#__PURE__*/React.createElement("div", {
className: "data-summary-data-item " + (item.align || '') + " " + (item.status || ''),
key: i
}, item.icon && /*#__PURE__*/React.createElement("div", {
className: "icon"
}, isTeamixIcon(item.icon) ? /*#__PURE__*/React.createElement(_icon["default"], {
type: item.icon
}) : /*#__PURE__*/React.createElement(_components.Icon, {
type: item.icon
})), /*#__PURE__*/React.createElement("div", {
className: "data-item-content"
}, item.url ? /*#__PURE__*/React.createElement("a", {
className: "data-item-data " + (item.dataAlign || ''),
href: item.url
}, /*#__PURE__*/React.createElement("span", {
className: "data"
}, item.data), item.unit && /*#__PURE__*/React.createElement("span", {
className: "unit"
}, item.unit)) : /*#__PURE__*/React.createElement("div", {
className: "data-item-data " + (item.dataAlign || '') + " " + (item.onClick || onDataItemClick ? 'has-click' : ''),
onClick: function onClick(e) {
(item === null || item === void 0 ? void 0 : item.onClick) && item.onClick(e);
onDataItemClick && onDataItemClick(item, e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "data"
}, item.data), item.unit && /*#__PURE__*/React.createElement("span", {
className: "unit"
}, item.unit)), /*#__PURE__*/React.createElement("div", {
className: "description"
}, item.description)));
})))), /*#__PURE__*/React.createElement("div", {
className: "data-summary-row-right"
}, progress !== undefined &&
/*#__PURE__*/
// <Progress
// percent={progress}
// color={progressColor}
// state={progressState}
// size="large"
// shape="circle"
// />
React.createElement(_cloudCharts.Wcircle, {
percent: progress / 100,
unit: progressUnit,
status: progressState,
color: progressColor // radius={Math.min(64,Math.max(32, Math.round((size.width || 0) / 4)))}
,
radius: 32
}, progress), increase !== undefined && /*#__PURE__*/React.createElement("div", {
className: "increase " + (increase >= 0 ? 'add' : '')
}, /*#__PURE__*/React.createElement(_components.Icon, {
type: increase > 0 ? 'triangle-up-s' : 'triangle-down-s'
}), increase, increaseUnit), extra)), footer && /*#__PURE__*/React.createElement("div", {
className: "data-summary-footer"
}, footer));
};
var renderLoading = function renderLoading() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "data-summary-row"
}, /*#__PURE__*/React.createElement("div", {
className: "data-summary-row-center"
}, (title || action) && /*#__PURE__*/React.createElement("div", {
className: "data-summary-header"
}, /*#__PURE__*/React.createElement("div", {
className: "data-summary-title"
}, /*#__PURE__*/React.createElement(_components.Skeleton, {
width: "50%"
})), /*#__PURE__*/React.createElement("div", null)), /*#__PURE__*/React.createElement("div", {
className: "data-summary-content"
}, /*#__PURE__*/React.createElement("div", {
className: "data-summary-main"
}, /*#__PURE__*/React.createElement("div", {
style: {
flexGrow: 1
}
}, /*#__PURE__*/React.createElement(_components.Skeleton, {
count: 3
}))))), /*#__PURE__*/React.createElement("div", {
className: "data-summary-row-right"
})), footer && /*#__PURE__*/React.createElement("div", {
className: "data-summary-footer"
}, /*#__PURE__*/React.createElement("div", {
style: {
flexGrow: 1
}
}, /*#__PURE__*/React.createElement(_components.Skeleton, {
width: "75%"
}))));
};
return /*#__PURE__*/React.createElement("div", {
className: (0, _classnames["default"])('DataSummary', 'cloud-charts', backgroundState, {
'has-footer': footer,
noBorder: noBorder || noPadding,
noPadding: noPadding
}),
style: style,
ref: ref
}, loading ? renderLoading() : renderContent());
};
DataSummary.defaultProps = {
dataSource: []
};
var _default = DataSummary;
exports["default"] = _default;