function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { Row, Spin } from 'antd';
import ReactEcharts from 'echarts-for-react';
import _, { isEmpty } from 'lodash';
import useSettings from "../../_hooks/useSettings";
import { getPercentValue } from "../../_util";
import VmEmpty from "../vm-empty";
import "./index.less";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var PieCharts = function PieCharts(_ref) {
  var dataList = _ref.dataList,
    title = _ref.title,
    total = _ref.total,
    name = _ref.name,
    loading = _ref.loading,
    unit = _ref.unit,
    _ref$isError = _ref.isError,
    isError = _ref$isError === void 0 ? false : _ref$isError,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? '100%' : _ref$height,
    _ref$legendConfig = _ref.legendConfig,
    legendConfig = _ref$legendConfig === void 0 ? {} : _ref$legendConfig,
    _ref$spaceLength = _ref.spaceLength,
    spaceLength = _ref$spaceLength === void 0 ? 20 : _ref$spaceLength,
    _ref$nameLength = _ref.nameLength,
    nameLength = _ref$nameLength === void 0 ? 6 : _ref$nameLength,
    _ref$innerRadius = _ref.innerRadius,
    innerRadius = _ref$innerRadius === void 0 ? ['30%', '45%'] : _ref$innerRadius,
    _ref$outerRadius = _ref.outerRadius,
    outerRadius = _ref$outerRadius === void 0 ? ['45%', '50%'] : _ref$outerRadius,
    _ref$center = _ref.center,
    center = _ref$center === void 0 ? null : _ref$center,
    _ref$colors = _ref.colors,
    colors = _ref$colors === void 0 ? null : _ref$colors,
    _ref$colors2 = _ref.colors2,
    colors2 = _ref$colors2 === void 0 ? null : _ref$colors2,
    _ref$subTitle = _ref.subTitle,
    subTitle = _ref$subTitle === void 0 ? null : _ref$subTitle,
    _ref$tooltipFormatter = _ref.tooltipFormatter,
    tooltipFormatter = _ref$tooltipFormatter === void 0 ? null : _ref$tooltipFormatter;
  var _useSettings = useSettings(),
    chartFontColor = _useSettings.chartFontColor,
    isDark = _useSettings.isDark;
  var colorList = colors || ['#36A1FF', '#53CB74', '#FABB43', '#FF8746', '#31C5E9', '#6FD7C7', '#B894F9', '#fc4f66', '#5d75ff'];
  var colorList2 = colors2 || ['#e1f1ff', '#e5f7ea', '#fef5e3', '#ffede3', '#e0f6fc', '#e9f9f7', '#f4effe', '#ffe5e8', '#e7eaff'];
  if (isDark) {
    colorList2 = colors2 || ['#0d4e7e', '#115368', '#2b505d', '#2b465c', '#0c5176', '#155472', '#214a7a', '#2b4166', '#14487d'];
  }
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: tooltipFormatter || "{a} <br/>{b}: {c}".concat(unit, " ({d}%)"),
      position: function position(point, _params, _dom, _rect, size) {
        // 固定在顶部
        var leftSize = point[0] - size.contentSize[0];
        return [point[0] + size.contentSize[0] > size.viewSize[0] ? leftSize < 0 ? '35%' : leftSize : point[0], '0%'];
      }
    },
    legend: _objectSpread({
      top: 'center',
      right: 50,
      orient: 'vertical',
      type: 'scroll',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 14,
        color: chartFontColor,
        rich: {
          name: {
            width: 100,
            fontSize: 14
          },
          space: {
            width: spaceLength
          },
          number: {
            width: 50,
            align: 'right',
            fontSize: 14,
            color: chartFontColor
          },
          percent: {
            width: 50,
            align: 'right',
            fontSize: 14,
            color: isDark ? '#fff' : '#8C8C8C'
          }
        }
      },
      pageIconColor: chartFontColor,
      pageIconInactiveColor: chartFontColor,
      pageTextStyle: {
        color: chartFontColor
      },
      formatter: function formatter(name) {
        var index = dataList.findIndex(function (item) {
          return item.name === name;
        });
        var info = dataList[index] || {};
        var value = info.value;
        var percent = getPercentValue(_.map(dataList, 'value'), index, 2);
        return "{name|".concat(name.slice(0, nameLength)).concat(name.length > nameLength ? '...' : '', "}{number|").concat(value || 0).concat(unit || '', "}{space|}{percent|").concat(percent || 0, "%}");
      },
      tooltip: {
        show: true
      }
    }, legendConfig),
    series: [{
      name: name,
      type: 'pie',
      radius: innerRadius,
      center: center || ['25%', '50%'],
      labelLine: {
        show: false // 去除从圆心指向数据块的线条
      },
      label: {
        show: false
      },
      data: dataList.map(function (item, index) {
        return _objectSpread(_objectSpread({}, item), {}, {
          itemStyle: {
            color: colorList[index % colorList.length]
          }
        });
      })
    }, {
      name: name,
      type: 'pie',
      radius: outerRadius,
      hoverAnimation: false,
      legendHoverLink: false,
      labelLine: {
        show: false // 去除从圆心指向数据块的线条
      },
      label: {
        show: false
      },
      center: center || ['25%', '50%'],
      data: dataList.map(function (item, index) {
        return _objectSpread(_objectSpread({}, item), {}, {
          itemStyle: {
            color: colorList2[index % colorList2.length]
          }
        });
      })
    }]
  };
  return /*#__PURE__*/_jsx("div", {
    className: 'vtx-car-pie-charts',
    style: {
      height: height
    },
    children: loading ? /*#__PURE__*/_jsx(Spin, {}) : isEmpty(dataList) ? /*#__PURE__*/_jsx(Row, {
      style: {
        height: height
      },
      align: 'middle',
      justify: 'center',
      children: /*#__PURE__*/_jsx(VmEmpty, {
        type: "NO_CHART"
      })
    }) : /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsxs("div", {
        className: 'vtx-car-pie-charts-title-wrap',
        style: {
          left: (center === null || center === void 0 ? void 0 : center[0]) || '25%'
        },
        children: [/*#__PURE__*/_jsx("div", {
          className: 'vtx-car-pie-charts-total',
          style: {
            color: isDark ? isError ? '#FF5861' : '#009DFF' : isError ? '#F5222D' : '#1677FF'
          },
          children: total
        }), /*#__PURE__*/_jsx("div", {
          style: {
            color: chartFontColor
          },
          children: title
        }), subTitle && /*#__PURE__*/_jsx("div", {
          style: {
            color: chartFontColor
          },
          children: subTitle
        })]
      }), /*#__PURE__*/_jsx(ReactEcharts, {
        option: option,
        notMerge: true,
        lazyUpdate: true,
        style: {
          height: '100%',
          width: '100%'
        }
      })]
    })
  });
};
export default PieCharts;