@teamix/data-summary/es/index.js

数据概览，数据展示

/* eslint-disable react/prop-types */
import * as React from 'react';
import classnames from 'classnames';
import { Skeleton, Icon, Balloon } from '@alicloudfe/components'; // import { useSize } from 'ahooks';
// @ts-ignore: no types

import { Wcircle } from '@alicloud/cloud-charts';
import TeamixIcon from '@teamix/icon';
import './index.scss';

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: classnames('data-summary-row-left', prefixType, prefixState)
    }, prefixIcon && (isTeamixIcon(prefixIcon) ? /*#__PURE__*/React.createElement(TeamixIcon, {
      className: "prefix-icon",
      type: prefixIcon,
      size: prefixType === 'inner' ? 'medium' : 'xxl'
    }) : /*#__PURE__*/React.createElement(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(Balloon.Tooltip, {
      trigger: /*#__PURE__*/React.createElement(TeamixIcon, {
        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(TeamixIcon, {
        type: item.icon
      }) : /*#__PURE__*/React.createElement(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(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(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(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(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(Skeleton, {
      width: "75%"
    }))));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classnames('DataSummary', 'cloud-charts', backgroundState, {
      'has-footer': footer,
      noBorder: noBorder || noPadding,
      noPadding: noPadding
    }),
    style: style,
    ref: ref
  }, loading ? renderLoading() : renderContent());
};

DataSummary.defaultProps = {
  dataSource: []
};
export default DataSummary;