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

Charts for mobile visualization.

import { __assign } from "tslib";
import { jsx } from '@antv/f-engine';
export default (function (props // Coord 在 withTreemap 被转成 Coord 类型了，所以这里需要重新定义
) {
  var nodes = props.nodes,
    coord = props.coord,
    onClick = props.onClick,
    _a = props.label,
    label = _a === void 0 ? false : _a;
  if (coord.isPolar) {
    var center = coord.center;
    var x_1 = center.x,
      y_1 = center.y;
    return jsx("group", null, nodes.map(function (node) {
      var xMin = node.xMin,
        xMax = node.xMax,
        yMin = node.yMin,
        yMax = node.yMax,
        color = node.color,
        style = node.style;
      return jsx("sector", {
        style: __assign({
          cx: x_1,
          cy: y_1,
          lineWidth: '1px',
          stroke: '#fff',
          startAngle: xMin,
          endAngle: xMax,
          r0: yMin,
          r: yMax,
          fill: color
        }, style),
        onClick: onClick ? function () {
          return onClick(node);
        } : null
      });
    }));
  }
  return jsx("group", null, nodes.map(function (node) {
    var key = node.key,
      xMin = node.xMin,
      xMax = node.xMax,
      yMin = node.yMin,
      yMax = node.yMax,
      color = node.color,
      style = node.style;
    return jsx("group", null, jsx("rect", {
      key: key,
      style: __assign({
        x: xMin,
        y: yMin,
        width: xMax - xMin,
        height: yMax - yMin,
        fill: color,
        lineWidth: '4px',
        stroke: '#fff',
        radius: '8px'
      }, style),
      animation: {
        appear: {
          easing: 'linear',
          duration: 450,
          property: ['fillOpacity', 'strokeOpacity'],
          start: {
            fillOpacity: 0,
            strokeOpacity: 0
          }
        },
        update: {
          easing: 'linear',
          duration: 450,
          property: ['x', 'y', 'width', 'height', 'radius', 'lineWidth', 'fillOpacity', 'strokeOpacity']
        }
      },
      onClick: onClick ? function () {
        return onClick(node);
      } : null
    }), label && jsx("text", {
      style: __assign({
        x: (xMin + xMax) / 2,
        y: (yMin + yMax) / 2,
        text: node.origin.name,
        fill: 'white',
        textAlign: 'center',
        textBaseline: 'middle'
      }, label)
    }));
  }));
});