@antv/f2/es/components/treemap/withTreemap.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 { 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);
});