@antv/f2/es/components/treemap/withTreemap.js

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 { Category } from '../../attr';
import Component from '../../base/component';
import CoordController from '../../controller/coord';
import { hierarchy, treemap, treemapBinary } from '../../deps/d3-hierarchy/src';
import { jsx } from '../../jsx';
export default (function (View) {
  return /*#__PURE__*/function (_Component) {
    _inherits(Treemap, _Component);

    var _super = _createSuper(Treemap);

    function Treemap(props, context, updater) {
      var _this;

      _classCallCheck(this, Treemap);

      _this = _super.call(this, props, context, updater);
      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(Treemap, [{
      key: "treemapLayout",
      value: function treemapLayout() {
        var props = this.props,
            coord = this.coord,
            colorAttr = this.color;
        var data = props.data,
            value = props.value;
        var root = hierarchy({
          children: data
        }).sum(function (d) {
          return d[value];
        }).sort(function (a, b) {
          return b[value] - a[value];
        });
        var treemapLayout = treemap() // 默认treemapSquarify
        .tile(treemapBinary) // .size([1, 1])
        // @ts-ignore
        .round(false); // .padding(space)
        // .paddingInner(space);
        // .paddingOuter(options.paddingOuter)
        // .paddingTop(options.paddingTop)
        // .paddingRight(options.paddingRight)
        // .paddingBottom(options.paddingBottom)
        // .paddingLeft(options.paddingLeft);

        var nodes = treemapLayout(root);
        return nodes.children.map(function (item) {
          var data = item.data,
              x0 = item.x0,
              y0 = item.y0,
              x1 = item.x1,
              y1 = item.y1;
          var color = colorAttr.mapping(data[colorAttr.field]);
          var rect = coord.convertRect({
            x: [x0, x1],
            y: [y0, y1]
          });
          return _objectSpread({
            key: data.key,
            origin: data,
            color: color
          }, rect);
        });
      }
    }, {
      key: "render",
      value: function render() {
        var nodes = this.treemapLayout();
        var props = this.props,
            coord = this.coord;
        return jsx(View, _objectSpread(_objectSpread({
          nodes: nodes
        }, props), {}, {
          coord: coord
        }));
      }
    }]);

    return Treemap;
  }(Component);
});