@alicloud/cloud-charts/es/Wpie/index.js


'use strict';

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import Base from '../common/Base';
import themes from '../themes/index';
import {
/*pxToNumber,*/
numberDecimal
/*isInvalidNumber*/
} from '../common/common';
import "./index.css";
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import label from '../common/label';
import geomStyle from '../common/geomStyle';
import circleAnnotation from '../common/circleAnnoation';
import polarLegendLayout from '../common/polarLegendLayout';
import errorWrap from '../common/errorWrap';
import updateChildrenPosition from '../common/updateChildrenPosition';
import ReactDOM from 'react-dom';
import { FullCrossName } from '../constants';
import Wnumber from '../Wnumber';
import React from 'react'; // function transformCoord(coord, transform = {}) {
//   const { type, param } = transform;
//   if (coord[type] && Array.isArray(param)) {
//     coord[type](...param);
//   }
// }
//

function selectGeom(geom, selectKey) {
  // if (!geom || !selectKey || !Array.isArray(this.data)) {
  if (!geom) {
    return;
  }

  geom.elements.forEach(function (element) {
    // 清除选中效果
    if (element.hasState('selected')) {
      element.setState('selected', false);
    } // 如果selectKey为假值，则只清空选中效果。


    if (!selectKey) {
      return;
    }

    var d = element.getData();

    if (d.x === selectKey) {
      element.setState('selected', true);
    }
  });
} //
// function paddingNumber(value) {
//   return isInvalidNumber(value) ? 0 : Number(value);
// }
//
// export function getDrawPadding(drawPadding, labelConfig, defaultDrawPadding) {
//   if (Array.isArray(drawPadding)) {
//     return drawPadding;
//   } else if (!isInvalidNumber(drawPadding)) {
//     return [drawPadding, drawPadding, drawPadding, drawPadding];
//   } else if (labelConfig && labelConfig.visible !== false) {
//     // 饼图使用 label 时，调整 drawPadding
//     return defaultDrawPadding.map(p => Math.max(p, 48));
//   } else {
//     return defaultDrawPadding;
//   }
// }


export var Pie = /*#__PURE__*/function (_Base) {
  _inheritsLoose(Pie, _Base);

  function Pie() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Base.call.apply(_Base, [this].concat(args)) || this;
    _this.chartName = 'G2Pie';
    _this.legendField = 'x';
    _this.totalData = 0;
    _this.sourceData = [];
    _this.geom = null;
    _this.noDataShape = null;
    return _this;
  }

  var _proto = Pie.prototype;

  _proto.getDefaultConfig = function getDefaultConfig() {
    return {
      colors: themes.category_12,
      // padding: [20, 20, 20, 20],
      legend: {
        position: 'right',
        align: '',
        showData: true,
        nameFormatter: null,
        // 可以强制覆盖，手动设置label
        valueFormatter: null
      },
      tooltip: {
        nameFormatter: null,
        valueFormatter: null
      },
      // coord: null,
      autoSort: true,
      cycle: false,
      select: false,
      innerRadius: 0.8,
      // 内环半径大小，仅cycle为true时可用
      outerRadius: 0.8,
      // 饼图半径大小，初始化时可用
      // drawPadding: [10, 10, 10, 10],
      label: false
    };
  };

  _proto.changeData = function changeData(chart, config, data) {
    // 更新数据总和值，保证百分比的正常
    var totalData = 0;
    data.forEach(function (d) {
      totalData += d.y;
    });
    this.totalData = totalData;
    this.sourceData = data; // 不要忘记排序的状态

    if (config.autoSort) {
      data.sort(function (a, b) {
        return b.y - a.y;
      });
    }

    chart.changeData(data); // 环图中心内容

    if (config.cycle && config.innerContent && !this.props.children && !this.props.loading && !this.props.errorInfo) {
      var _this$chartDom$getEle, _config$innerContent$, _config$innerContent, _this$rawData, _this$rawData$, _config$innerContent$2, _config$innerContent2, _config$innerContent$3, _config$innerContent3;

      var container = (_this$chartDom$getEle = this.chartDom.getElementsByClassName(FullCrossName + "-children")) === null || _this$chartDom$getEle === void 0 ? void 0 : _this$chartDom$getEle[0];

      if (!container) {
        container = document.createElement('div');
        container.className = FullCrossName + "-children";
        this.chartDom.appendChild(container);
      }

      var content = /*#__PURE__*/React.createElement(Wnumber, {
        bottomTitle: (_config$innerContent$ = config === null || config === void 0 ? void 0 : (_config$innerContent = config.innerContent) === null || _config$innerContent === void 0 ? void 0 : _config$innerContent.title) !== null && _config$innerContent$ !== void 0 ? _config$innerContent$ : (_this$rawData = this.rawData) === null || _this$rawData === void 0 ? void 0 : (_this$rawData$ = _this$rawData[0]) === null || _this$rawData$ === void 0 ? void 0 : _this$rawData$.name,
        unit: (_config$innerContent$2 = config === null || config === void 0 ? void 0 : (_config$innerContent2 = config.innerContent) === null || _config$innerContent2 === void 0 ? void 0 : _config$innerContent2.unit) !== null && _config$innerContent$2 !== void 0 ? _config$innerContent$2 : ''
      }, (_config$innerContent$3 = config === null || config === void 0 ? void 0 : (_config$innerContent3 = config.innerContent) === null || _config$innerContent3 === void 0 ? void 0 : _config$innerContent3.value) !== null && _config$innerContent$3 !== void 0 ? _config$innerContent$3 : this.totalData);
      ReactDOM.render(content, container);
    }
  };

  _proto.isChangeEqual = function isChangeEqual(objValue, othValue, key) {
    if (key === 'selectData' && objValue !== othValue) {
      selectGeom(this.geom, objValue);
      return true;
    }

    return undefined;
  };

  _proto.init = function init(chart, config, data) {
    var _this2 = this;

    var defs = {
      type: {
        type: 'cat'
      }
    };

    if (config.autoSort) {
      data.sort(function (a, b) {
        return b.y - a.y;
      });
    } // 计算得总数据


    var totalData = 0;
    data.forEach(function (d) {
      totalData += d.y;
    });
    this.totalData = totalData; // 处理后的原始数据

    this.sourceData = data;
    chart.scale(defs);
    chart.data(this.sourceData); // 重要：绘制饼图时，必须声明 theta 坐标系

    var thetaConfig = {
      // radius: 1, // 设置饼图的为100% 大小，具体大小改变在 beforeInit 中diameter的值，目前为0.8
      radius: Math.max(Math.min(config.outerRadius, 1), 0.01)
    };

    if (config.cycle) {
      thetaConfig.innerRadius = Math.max(Math.min(config.innerRadius, 1), 0);
    }

    if (config.startAngle !== undefined) {
      thetaConfig.startAngle = config.startAngle;
    }

    if (config.endAngle !== undefined) {
      thetaConfig.endAngle = config.endAngle;
    } // coordinate translate 操作会导致饼图变形，暂时换一种方式实现

    /*const coord = */


    chart.coordinate('theta', thetaConfig); // if (config.coord) {
    //   const { transform } = config.coord || {};
    //
    //   if (Array.isArray(transform)) {
    //     transform.forEach((t) => {
    //       transformCoord(coord, t);
    //     });
    //   } else if (transform && typeof transform === 'object') {
    //     transformCoord(coord, transform);
    //   }
    // }
    // const drawPadding = getDrawPadding(config.drawPadding, config.label, this.defaultConfig.drawPadding);
    // 设置图例

    rectLegend(this, chart, config, {// autoCollapse: false,
      // position: 'right',
      // itemTpl: (value, itemColor, checked, index) => {
      //   const { nameFormatter, valueFormatter, showData = true } = config.legend || {};
      //
      //   const item = (this.data && this.data[index]) || {};
      //   const raw = (this.rawData && this.rawData[0]) || {};
      //   const percent = numberDecimal(item.y / this.totalData, 4);
      //
      //   const result = nameFormatter ? nameFormatter(value, {
      //     ...raw,
      //     percent,
      //     itemColor,
      //     checked,
      //   }, index) : value;
      //
      //   if (showData) {
      //     const number = valueFormatter ? valueFormatter(item.y, {
      //       ...raw,
      //       percent,
      //       itemColor,
      //       checked,
      //     }, index) : item.y;
      //     return `${'<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}">' +
      //     '<i class="g2-legend-marker" style="background-color:{color};"></i>' +
      //     '<span class="g2-legend-text">'}${result}</span>` + `<span class="g2-legend-value">${number}</span></li>`;
      //   }
      //
      //   return `${'<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}">' +
      //   '<i class="g2-legend-marker" style="background-color:{color};"></i>' +
      //   '<span class="g2-legend-text">'}${result}</span></li>`;
      // },
      // 'g2-legend': {
      //   ...legendHtmlContainer,
      //   position: 'static',
      //   overflow: 'auto',
      //   // inline flex items 不能使用百分比的margin/padding，设置为固定大小
      //   marginLeft: `${Math.max(pxToNumber(themes['widgets-font-size-4']) - drawPadding[1], 0)}px`,
      // },
      // 'g2-legend-list-item': {
      //   ...legendHtmlListItem,
      //   marginRight: 0,
      // },
    }, true, null, true, function (item, index) {
      var name = item.name;
      var raw = _this2.rawData && _this2.rawData[0] || {};
      var value = 0;
      raw.data && raw.data.forEach(function (r) {
        if (Array.isArray(r) && r[0] === name) {
          value = r[1];
        } else if (typeof r === 'object' && r.x === name) {
          value = r.y;
        }
      });
      var percent = _this2.totalData === 0 ? 0 : numberDecimal(value / _this2.totalData, 4);
      return _extends({}, raw, {
        percent: percent
      }, item);
    }); // tooltip

    rectTooltip(this, chart, config, {
      showTitle: false,
      showMarkers: false,
      showCrosshairs: false,
      shared: false
    }, function (ev) {
      var raw = _this2.rawData && _this2.rawData[0] || {};
      var items = ev.data.items;
      items.forEach(function (item, index) {
        var percent = numberDecimal(item.value / _this2.totalData, 4);

        if (typeof config.tooltip === 'boolean') {
          return;
        }

        if (config.tooltip.valueFormatter) {
          item.value = config.tooltip.valueFormatter(item.value, _extends({}, raw, {
            percent: percent
          }), index, items);
        }

        if (config.tooltip.nameFormatter) {
          item.name = config.tooltip.nameFormatter(item.name, _extends({}, raw, {
            percent: percent
          }), index, items);
        }
      });
    }, {
      showTitle: false,
      showMarkers: false,
      showCrosshairs: false,
      shared: false
    });
    this.geom = chart.interval().position('y').adjust('stack');
    this.geom = this.geom.color('x', config.colors);

    if (typeof config.animate === 'object') {
      this.geom.animate(config.animate);
    }

    if (config.select) {
      chart.interaction('element-single-selected', {
        start: [{
          isEnable: function isEnable(context) {
            if (context.view.options.data.length > 1) {
              return true;
            }

            return false;
          },
          trigger: 'element:click',
          action: 'element-single-selected:toggle'
        }]
      });
    }

    geomStyle(this.geom, config.geomStyle);
    var labelField = 'y';
    label({
      geom: this.geom,
      config: config,
      field: labelField,
      componentConfig: {
        offset: 20,
        content: function (v, item, index) {
          if (typeof config.label === 'boolean') {
            return v[labelField];
          }

          if (config.label.labelFormatter) {
            var percent = numberDecimal(v[labelField] / _this2.totalData, 4);
            return config.label.labelFormatter(v[labelField], _extends({}, item, {
              percent: percent
            }), index);
          }

          return v[labelField];
        }
      }
    });
    polarLegendLayout(chart); // 空数据渲染效果

    chart.on('beforepaint', function () {
      if (_this2.totalData !== 0 && _this2.noDataShape) {
        _this2.noDataShape.remove(true);

        _this2.noDataShape = null;
      }
    });
    circleAnnotation(chart, config, this.size, 'G2Pie'); // 环图中心内容

    if (config.cycle && config.innerContent && !this.props.children && !this.isEmpty && !this.props.loading && !this.props.errorInfo) {
      var _config$innerContent$4, _config$innerContent4, _this$rawData2, _this$rawData2$, _config$innerContent$5, _config$innerContent5, _config$innerContent$6, _config$innerContent6;

      var container = document.createElement('div');
      container.className = FullCrossName + "-children";
      this.chartDom.appendChild(container);
      var content = /*#__PURE__*/React.createElement(Wnumber, {
        bottomTitle: (_config$innerContent$4 = config === null || config === void 0 ? void 0 : (_config$innerContent4 = config.innerContent) === null || _config$innerContent4 === void 0 ? void 0 : _config$innerContent4.title) !== null && _config$innerContent$4 !== void 0 ? _config$innerContent$4 : (_this$rawData2 = this.rawData) === null || _this$rawData2 === void 0 ? void 0 : (_this$rawData2$ = _this$rawData2[0]) === null || _this$rawData2$ === void 0 ? void 0 : _this$rawData2$.name,
        unit: (_config$innerContent$5 = config === null || config === void 0 ? void 0 : (_config$innerContent5 = config.innerContent) === null || _config$innerContent5 === void 0 ? void 0 : _config$innerContent5.unit) !== null && _config$innerContent$5 !== void 0 ? _config$innerContent$5 : ''
      }, (_config$innerContent$6 = config === null || config === void 0 ? void 0 : (_config$innerContent6 = config.innerContent) === null || _config$innerContent6 === void 0 ? void 0 : _config$innerContent6.value) !== null && _config$innerContent$6 !== void 0 ? _config$innerContent$6 : this.totalData);
      ReactDOM.render(content, container);
    } else if (!this.props.children) {
      var _this$chartDom$getEle2;

      // 删去中心内容
      var _container = (_this$chartDom$getEle2 = this.chartDom.getElementsByClassName(FullCrossName + "-children")) === null || _this$chartDom$getEle2 === void 0 ? void 0 : _this$chartDom$getEle2[0];

      if (_container) {
        this.chartDom.removeChild(_container);
      }
    }

    chart.on('afterpaint', function () {
      // 默认选中效果
      selectGeom(_this2.geom, config.selectData);
      updateChildrenPosition(chart, _this2.chartDom);

      if (_this2.totalData === 0 && !_this2.noDataShape) {
        var bgGroup = chart.getLayer('bg');
        var coordinate = chart.getCoordinate();
        var radius = coordinate.radius,
            innerRadius = coordinate.innerRadius;

        var _coordinate$getCenter = coordinate.getCenter(),
            centerX = _coordinate$getCenter.x,
            centerY = _coordinate$getCenter.y;

        var pieSize = Math.min(chart.coordinateBBox.width, chart.coordinateBBox.height) * radius;
        var outerR = pieSize / 2;
        var path = [['M', centerX, centerY - outerR], ['A', outerR, outerR, 0, 1, 1, centerX, centerY + outerR], ['A', outerR, outerR, 0, 1, 1, centerX, centerY - outerR] // ['Z'],
        ];

        if (innerRadius > 0) {
          var innerR = pieSize * innerRadius / 2;
          path.push(['M', centerX, centerY - innerR], ['A', innerR, innerR, 0, 0, 0, centerX, centerY + innerR], ['A', innerR, innerR, 0, 0, 0, centerX, centerY - innerR] // ['Z'],
          );
        }

        _this2.noDataShape = bgGroup.addShape({
          id: 'no-data-path',
          name: 'no-data-path',
          type: 'path',
          attrs: {
            path: path,
            fill: themes['widgets-circle-stroke-background']
          }
        }); // shape.set('tip', 'sdfhsjkdhk');
        //
        // registerInteraction('no-data-text', {
        //   start: [
        //     {
        //       trigger: 'no-data-path:mousemove',
        //       action: 'ellipsis-text:show',
        //       throttle: { wait: 50, leading: true, trailing: false },
        //     },
        //     {
        //       trigger: 'no-data-path:touchstart',
        //       action: 'ellipsis-text:show',
        //       throttle: { wait: 50, leading: true, trailing: false },
        //     },
        //   ],
        //   end: [
        //     { trigger: 'no-data-path:mouseleave', action: 'ellipsis-text:hide' },
        //     { trigger: 'no-data-path:touchend', action: 'ellipsis-text:hide' },
        //   ],
        // });
      }
    });
  };

  return Pie;
}(Base);
var Wpie = errorWrap(Pie);
export default Wpie;