@antv/f2/es/components/sunburst/withSunburst.js

Charts for mobile visualization.

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import { jsx } from '../../jsx';
import Component from '../../base/component';
import { partition, hierarchy } from '../../deps/d3-hierarchy/src';
import { Category } from '../../attr';
import { isInBBox } from '../../util';
import CoordController from '../../controller/coord';
import { mix, isFunction } from '@antv/util';
function rootParent(data) {
  var d = data;
  while (d.depth > 1) {
    d = d.parent;
  }
  return d;
}
export default (function (View) {
  return /*#__PURE__*/function (_Component) {
    _inherits(Sunburst, _Component);
    var _super = _createSuper(Sunburst);
    function Sunburst(props, context) {
      var _this;
      _classCallCheck(this, Sunburst);
      _this = _super.call(this, props, context);
      var coord = props.coord,
        color = props.color,
        data = props.data;
      var width = context.width,
        height = context.height,
        theme = context.theme;
      _this.coordController = new CoordController();
      var _assertThisInitialize = _assertThisInitialized(_this),
        coordController = _assertThisInitialize.coordController;
      _this.coord = coordController.create(coord, {
        width: width,
        height: height
      });
      _this.color = new Category(_objectSpread(_objectSpread({
        range: theme.colors
      }, color), {}, {
        data: data
      }));
      return _this;
    }
    _createClass(Sunburst, [{
      key: "didMount",
      value: function didMount() {
        var _this2 = this;
        var props = this.props,
          container = this.container;
        var onClick = props.onClick;
        var canvas = container.get('canvas');
        this.triggerRef = [];
        canvas.on('click', function (ev) {
          var points = ev.points;
          var shape = _this2.triggerRef.find(function (ref) {
            return isInBBox(ref.current.getBBox(), points[0]);
          });
          if (shape) {
            ev.shape = shape;
            // @ts-ignore
            ev.payload = shape.payload;
            onClick && onClick(ev);
          }
        });
      }
    }, {
      key: "_mapping",
      value: function _mapping(children) {
        var colorAttr = this.color,
          coord = this.coord;
        for (var i = 0, len = children.length; i < len; i++) {
          var node = children[i];
          var root = rootParent(node);
          var color = colorAttr.mapping(root.data[colorAttr.field]);
          node.color = color;
          var x0 = node.x0,
            x1 = node.x1,
            y0 = node.y0,
            y1 = node.y1;
          var rect = coord.convertRect({
            x: [x0, x1],
            y: [y0, y1]
          });
          mix(node, rect);
          // 递归处理
          if (node.children && node.children.length) {
            this._mapping(node.children);
          }
        }
      }
    }, {
      key: "sunburst",
      value: function sunburst() {
        var props = this.props;
        var data = props.data,
          value = props.value,
          _props$sort = props.sort,
          sort = _props$sort === void 0 ? true : _props$sort;
        var root = hierarchy({
          children: data
        }).sum(function (d) {
          return d[value];
        });
        // 内置按value大小顺序排序，支持传入sort函数
        if (sort === true || isFunction(sort)) {
          var sortFn = isFunction(sort) ? sort : function (a, b) {
            return b[value] - a[value];
          };
          root.sort(sortFn);
        }
        var nodes = partition()(root);
        var children = nodes.children;
        this._mapping(children);
        return nodes;
      }
    }, {
      key: "render",
      value: function render() {
        var node = this.sunburst();
        var coord = this.coord,
          props = this.props;
        return jsx(View, _objectSpread(_objectSpread({}, props), {}, {
          coord: coord,
          node: node,
          triggerRef: this.triggerRef
        }));
      }
    }]);
    return Sunburst;
  }(Component);
});