import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { cn } from "../utils/cn.js";
import { getDefaultChartColor } from "./chart-utils.js";
import { g as get, u as uniqueId, c as isNan, R as ResponsiveContainer } from "../../ResponsiveContainer-by1DMaUt.js";
import * as React from "react";
import { useState, useEffect, PureComponent } from "react";
import { o as omit } from "../../omit-D9SXns7w.js";
import { r as resolveDefaultProps, K as useAnimationManager, M as getTransitionVal, i as isPositiveNumber, R as RechartsStoreProvider, N as ReportChartSize, O as ReportChartMargin, d as useAppDispatch, L as Layer, k as svgPropertiesNoEvents, P as TooltipPortalContext, S as SetTooltipEntrySettings, Q as RechartsWrapper, U as Surface, E as getValueByDataKey, V as Rectangle, W as COLOR_PANEL, X as setActiveClickItemIndex, Y as setActiveMouseOverItemIndex, G as Global, T as Tooltip } from "../../RechartsWrapper-B6DckFGn.js";
import { P as Polygon } from "../../Polygon-B5nnF46T.js";
import { n as noop, g as getStringSize } from "../../noop-DP3tzhET.js";
var defaultProps = {
  begin: 0,
  duration: 1e3,
  easing: "ease",
  isActive: true,
  canBegin: true,
  onAnimationEnd: () => {
  },
  onAnimationStart: () => {
  }
};
function CSSTransitionAnimate(outsideProps) {
  var props = resolveDefaultProps(outsideProps, defaultProps);
  var {
    from,
    to,
    attributeName,
    isActive,
    canBegin,
    duration,
    easing,
    begin,
    onAnimationEnd,
    onAnimationStart,
    children
  } = props;
  var animationManager = useAnimationManager(attributeName, props.animationManager);
  var [style, setStyle] = useState(isActive ? from : to);
  useEffect(() => {
    if (!isActive) {
      setStyle(to);
    }
  }, [isActive, to]);
  useEffect(() => {
    if (!isActive || !canBegin) {
      return noop;
    }
    var unsubscribe = animationManager.subscribe(setStyle);
    animationManager.start([onAnimationStart, begin, to, duration, onAnimationEnd]);
    return () => {
      animationManager.stop();
      if (unsubscribe) {
        unsubscribe();
      }
      onAnimationEnd();
    };
  }, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager, to]);
  if (isActive && canBegin) {
    var transition = getTransitionVal([attributeName], duration, easing);
    return children({
      transition,
      [attributeName]: style
    });
  }
  return children({
    [attributeName]: style
  });
}
var _excluded = ["width", "height", "className", "style", "children", "type"];
function _objectWithoutProperties(e, t) {
  if (null == e) return {};
  var o, r, i = _objectWithoutPropertiesLoose(e, t);
  if (Object.getOwnPropertySymbols) {
    var n = Object.getOwnPropertySymbols(e);
    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
  }
  return i;
}
function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (-1 !== e.indexOf(n)) continue;
    t[n] = r[n];
  }
  return t;
}
function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function(n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}
function ownKeys(e, r) {
  var t = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    r && (o = o.filter(function(r2) {
      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
    })), t.push.apply(t, o);
  }
  return t;
}
function _objectSpread(e) {
  for (var r = 1; r < arguments.length; r++) {
    var t = null != arguments[r] ? arguments[r] : {};
    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
      _defineProperty(e, r2, t[r2]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
    });
  }
  return e;
}
function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == typeof i ? i : i + "";
}
function _toPrimitive(t, r) {
  if ("object" != typeof t || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r);
    if ("object" != typeof i) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
var NODE_VALUE_KEY = "value";
var treemapPayloadSearcher = (data, activeIndex) => {
  return get(data, activeIndex);
};
var addToTreemapNodeIndex = function addToTreemapNodeIndex2(indexInChildrenArr) {
  var activeTooltipIndexSoFar = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
  return "".concat(activeTooltipIndexSoFar, "children[").concat(indexInChildrenArr, "]");
};
var options = {
  chartName: "Treemap",
  defaultTooltipEventType: "item",
  validateTooltipEventTypes: ["item"],
  tooltipPayloadSearcher: treemapPayloadSearcher,
  eventEmitter: void 0
};
var computeNode = (_ref) => {
  var {
    depth,
    node,
    index,
    dataKey,
    nameKey,
    nestedActiveTooltipIndex
  } = _ref;
  var currentTooltipIndex = depth === 0 ? "" : addToTreemapNodeIndex(index, nestedActiveTooltipIndex);
  var {
    children
  } = node;
  var childDepth = depth + 1;
  var computedChildren = children && children.length ? children.map((child, i) => computeNode({
    depth: childDepth,
    node: child,
    index: i,
    dataKey,
    nameKey,
    nestedActiveTooltipIndex: currentTooltipIndex
  })) : null;
  var nodeValue;
  if (children && children.length) {
    nodeValue = computedChildren.reduce((result, child) => result + child[NODE_VALUE_KEY], 0);
  } else {
    nodeValue = isNan(node[dataKey]) || node[dataKey] <= 0 ? 0 : node[dataKey];
  }
  return _objectSpread(_objectSpread({}, node), {}, {
    children: computedChildren,
    // @ts-expect-error getValueByDataKey does not validate the output type
    name: getValueByDataKey(node, nameKey, ""),
    [NODE_VALUE_KEY]: nodeValue,
    depth,
    index,
    tooltipIndex: currentTooltipIndex
  });
};
var filterRect = (node) => ({
  x: node.x,
  y: node.y,
  width: node.width,
  height: node.height
});
var getAreaOfChildren = (children, areaValueRatio) => {
  var ratio = areaValueRatio < 0 ? 0 : areaValueRatio;
  return children.map((child) => {
    var area = child[NODE_VALUE_KEY] * ratio;
    return _objectSpread(_objectSpread({}, child), {}, {
      area: isNan(area) || area <= 0 ? 0 : area
    });
  });
};
var getWorstScore = (row, parentSize, aspectRatio) => {
  var parentArea = parentSize * parentSize;
  var rowArea = row.area * row.area;
  var {
    min,
    max
  } = row.reduce((result, child) => ({
    min: Math.min(result.min, child.area),
    max: Math.max(result.max, child.area)
  }), {
    min: Infinity,
    max: 0
  });
  return rowArea ? Math.max(parentArea * max * aspectRatio / rowArea, rowArea / (parentArea * min * aspectRatio)) : Infinity;
};
var horizontalPosition = (row, parentSize, parentRect, isFlush) => {
  var rowHeight = parentSize ? Math.round(row.area / parentSize) : 0;
  if (isFlush || rowHeight > parentRect.height) {
    rowHeight = parentRect.height;
  }
  var curX = parentRect.x;
  var child;
  for (var i = 0, len = row.length; i < len; i++) {
    child = row[i];
    child.x = curX;
    child.y = parentRect.y;
    child.height = rowHeight;
    child.width = Math.min(rowHeight ? Math.round(child.area / rowHeight) : 0, parentRect.x + parentRect.width - curX);
    curX += child.width;
  }
  child.width += parentRect.x + parentRect.width - curX;
  return _objectSpread(_objectSpread({}, parentRect), {}, {
    y: parentRect.y + rowHeight,
    height: parentRect.height - rowHeight
  });
};
var verticalPosition = (row, parentSize, parentRect, isFlush) => {
  var rowWidth = parentSize ? Math.round(row.area / parentSize) : 0;
  if (isFlush || rowWidth > parentRect.width) {
    rowWidth = parentRect.width;
  }
  var curY = parentRect.y;
  var child;
  for (var i = 0, len = row.length; i < len; i++) {
    child = row[i];
    child.x = parentRect.x;
    child.y = curY;
    child.width = rowWidth;
    child.height = Math.min(rowWidth ? Math.round(child.area / rowWidth) : 0, parentRect.y + parentRect.height - curY);
    curY += child.height;
  }
  if (child) {
    child.height += parentRect.y + parentRect.height - curY;
  }
  return _objectSpread(_objectSpread({}, parentRect), {}, {
    x: parentRect.x + rowWidth,
    width: parentRect.width - rowWidth
  });
};
var position = (row, parentSize, parentRect, isFlush) => {
  if (parentSize === parentRect.width) {
    return horizontalPosition(row, parentSize, parentRect, isFlush);
  }
  return verticalPosition(row, parentSize, parentRect, isFlush);
};
var squarify = (node, aspectRatio) => {
  var {
    children
  } = node;
  if (children && children.length) {
    var rect = filterRect(node);
    var row = [];
    var best = Infinity;
    var child, score;
    var size = Math.min(rect.width, rect.height);
    var scaleChildren = getAreaOfChildren(children, rect.width * rect.height / node[NODE_VALUE_KEY]);
    var tempChildren = scaleChildren.slice();
    row.area = 0;
    while (tempChildren.length > 0) {
      row.push(child = tempChildren[0]);
      row.area += child.area;
      score = getWorstScore(row, size, aspectRatio);
      if (score <= best) {
        tempChildren.shift();
        best = score;
      } else {
        row.area -= row.pop().area;
        rect = position(row, size, rect, false);
        size = Math.min(rect.width, rect.height);
        row.length = row.area = 0;
        best = Infinity;
      }
    }
    if (row.length) {
      rect = position(row, size, rect, true);
      row.length = row.area = 0;
    }
    return _objectSpread(_objectSpread({}, node), {}, {
      children: scaleChildren.map((c) => squarify(c, aspectRatio))
    });
  }
  return node;
};
var defaultState = {
  isAnimationFinished: false,
  formatRoot: null,
  currentRoot: null,
  nestIndex: []
};
function ContentItem(_ref2) {
  var {
    content,
    nodeProps,
    type,
    colorPanel,
    onMouseEnter,
    onMouseLeave,
    onClick
  } = _ref2;
  if (/* @__PURE__ */ React.isValidElement(content)) {
    return /* @__PURE__ */ React.createElement(Layer, {
      onMouseEnter,
      onMouseLeave,
      onClick
    }, /* @__PURE__ */ React.cloneElement(content, nodeProps));
  }
  if (typeof content === "function") {
    return /* @__PURE__ */ React.createElement(Layer, {
      onMouseEnter,
      onMouseLeave,
      onClick
    }, content(nodeProps));
  }
  var {
    x,
    y,
    width,
    height,
    index
  } = nodeProps;
  var arrow = null;
  if (width > 10 && height > 10 && nodeProps.children && type === "nest") {
    arrow = /* @__PURE__ */ React.createElement(Polygon, {
      points: [{
        x: x + 2,
        y: y + height / 2
      }, {
        x: x + 6,
        y: y + height / 2 + 3
      }, {
        x: x + 2,
        y: y + height / 2 + 6
      }]
    });
  }
  var text = null;
  var nameSize = getStringSize(nodeProps.name);
  if (width > 20 && height > 20 && nameSize.width < width && nameSize.height < height) {
    text = /* @__PURE__ */ React.createElement("text", {
      x: x + 8,
      y: y + height / 2 + 7,
      fontSize: 14
    }, nodeProps.name);
  }
  var colors = colorPanel || COLOR_PANEL;
  return /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(Rectangle, _extends({
    fill: nodeProps.depth < 2 ? colors[index % colors.length] : "rgba(255,255,255,0)",
    stroke: "#fff"
  }, omit(nodeProps, ["children"]), {
    onMouseEnter,
    onMouseLeave,
    onClick,
    "data-recharts-item-index": nodeProps.tooltipIndex
  })), arrow, text);
}
function ContentItemWithEvents(props) {
  var dispatch = useAppDispatch();
  var activeCoordinate = props.nodeProps ? {
    x: props.nodeProps.x + props.nodeProps.width / 2,
    y: props.nodeProps.y + props.nodeProps.height / 2
  } : null;
  var onMouseEnter = () => {
    dispatch(setActiveMouseOverItemIndex({
      activeIndex: props.nodeProps.tooltipIndex,
      activeDataKey: props.dataKey,
      activeCoordinate
    }));
  };
  var onMouseLeave = () => {
  };
  var onClick = () => {
    dispatch(setActiveClickItemIndex({
      activeIndex: props.nodeProps.tooltipIndex,
      activeDataKey: props.dataKey,
      activeCoordinate
    }));
  };
  return /* @__PURE__ */ React.createElement(ContentItem, _extends({}, props, {
    onMouseEnter,
    onMouseLeave,
    onClick
  }));
}
function getTooltipEntrySettings(_ref3) {
  var {
    props,
    currentRoot
  } = _ref3;
  var {
    dataKey,
    nameKey,
    stroke,
    fill
  } = props;
  return {
    dataDefinedOnItem: currentRoot,
    positions: void 0,
    // TODO I think Treemap has the capability of computing positions and supporting defaultIndex? Except it doesn't yet
    settings: {
      stroke,
      strokeWidth: void 0,
      fill,
      dataKey,
      nameKey,
      name: void 0,
      // Each TreemapNode has its own name
      hide: false,
      type: void 0,
      color: fill,
      unit: ""
    }
  };
}
var defaultTreemapMargin = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
};
class TreemapWithState extends PureComponent {
  constructor() {
    super(...arguments);
    _defineProperty(this, "state", _objectSpread({}, defaultState));
    _defineProperty(this, "handleAnimationEnd", () => {
      var {
        onAnimationEnd
      } = this.props;
      this.setState({
        isAnimationFinished: true
      });
      if (typeof onAnimationEnd === "function") {
        onAnimationEnd();
      }
    });
    _defineProperty(this, "handleAnimationStart", () => {
      var {
        onAnimationStart
      } = this.props;
      this.setState({
        isAnimationFinished: false
      });
      if (typeof onAnimationStart === "function") {
        onAnimationStart();
      }
    });
    _defineProperty(this, "handleTouchMove", (_state, e) => {
      var touchEvent = e.touches[0];
      var target = document.elementFromPoint(touchEvent.clientX, touchEvent.clientY);
      if (!target || !target.getAttribute) {
        return;
      }
      var itemIndex = target.getAttribute("data-recharts-item-index");
      var activeNode = treemapPayloadSearcher(this.state.formatRoot, itemIndex);
      if (!activeNode) {
        return;
      }
      var {
        dataKey,
        dispatch
      } = this.props;
      var activeCoordinate = {
        x: activeNode.x + activeNode.width / 2,
        y: activeNode.y + activeNode.height / 2
      };
      dispatch(setActiveMouseOverItemIndex({
        activeIndex: itemIndex,
        activeDataKey: dataKey,
        activeCoordinate
      }));
    });
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.data !== prevState.prevData || nextProps.type !== prevState.prevType || nextProps.width !== prevState.prevWidth || nextProps.height !== prevState.prevHeight || nextProps.dataKey !== prevState.prevDataKey || nextProps.aspectRatio !== prevState.prevAspectRatio) {
      var root = computeNode({
        depth: 0,
        // @ts-expect-error missing properties
        node: {
          children: nextProps.data,
          x: 0,
          y: 0,
          width: nextProps.width,
          height: nextProps.height
        },
        index: 0,
        dataKey: nextProps.dataKey,
        nameKey: nextProps.nameKey
      });
      var formatRoot = squarify(root, nextProps.aspectRatio);
      return _objectSpread(_objectSpread({}, prevState), {}, {
        formatRoot,
        currentRoot: root,
        nestIndex: [root],
        prevAspectRatio: nextProps.aspectRatio,
        prevData: nextProps.data,
        prevWidth: nextProps.width,
        prevHeight: nextProps.height,
        prevDataKey: nextProps.dataKey,
        prevType: nextProps.type
      });
    }
    return null;
  }
  handleMouseEnter(node, e) {
    e.persist();
    var {
      onMouseEnter
    } = this.props;
    if (onMouseEnter) {
      onMouseEnter(node, e);
    }
  }
  handleMouseLeave(node, e) {
    e.persist();
    var {
      onMouseLeave
    } = this.props;
    if (onMouseLeave) {
      onMouseLeave(node, e);
    }
  }
  handleClick(node) {
    var {
      onClick,
      type
    } = this.props;
    if (type === "nest" && node.children) {
      var {
        width,
        height,
        dataKey,
        nameKey,
        aspectRatio
      } = this.props;
      var root = computeNode({
        depth: 0,
        node: _objectSpread(_objectSpread({}, node), {}, {
          x: 0,
          y: 0,
          width,
          height
        }),
        index: 0,
        dataKey,
        nameKey,
        // with Treemap nesting, should this continue nesting the index or start from empty string?
        nestedActiveTooltipIndex: node.tooltipIndex
      });
      var formatRoot = squarify(root, aspectRatio);
      var {
        nestIndex
      } = this.state;
      nestIndex.push(node);
      this.setState({
        formatRoot,
        currentRoot: root,
        nestIndex
      });
    }
    if (onClick) {
      onClick(node);
    }
  }
  handleNestIndex(node, i) {
    var {
      nestIndex
    } = this.state;
    var {
      width,
      height,
      dataKey,
      nameKey,
      aspectRatio
    } = this.props;
    var root = computeNode({
      depth: 0,
      node: _objectSpread(_objectSpread({}, node), {}, {
        x: 0,
        y: 0,
        width,
        height
      }),
      index: 0,
      dataKey,
      nameKey,
      // with Treemap nesting, should this continue nesting the index or start from empty string?
      nestedActiveTooltipIndex: node.tooltipIndex
    });
    var formatRoot = squarify(root, aspectRatio);
    nestIndex = nestIndex.slice(0, i + 1);
    this.setState({
      formatRoot,
      currentRoot: node,
      nestIndex
    });
  }
  renderItem(content, nodeProps, isLeaf) {
    var {
      isAnimationActive,
      animationBegin,
      animationDuration,
      animationEasing,
      isUpdateAnimationActive,
      type,
      colorPanel,
      dataKey
    } = this.props;
    var {
      isAnimationFinished
    } = this.state;
    var {
      width,
      height,
      x,
      y,
      depth
    } = nodeProps;
    var translateX = parseInt("".concat((Math.random() * 2 - 1) * width), 10);
    var event = {};
    if (isLeaf || type === "nest") {
      event = {
        onMouseEnter: this.handleMouseEnter.bind(this, nodeProps),
        onMouseLeave: this.handleMouseLeave.bind(this, nodeProps),
        onClick: this.handleClick.bind(this, nodeProps)
      };
    }
    if (!isAnimationActive) {
      return /* @__PURE__ */ React.createElement(Layer, event, /* @__PURE__ */ React.createElement(ContentItemWithEvents, {
        content,
        dataKey,
        nodeProps: _objectSpread(_objectSpread({}, nodeProps), {}, {
          isAnimationActive: false,
          isUpdateAnimationActive: false,
          width,
          height,
          x,
          y
        }),
        type,
        colorPanel
      }));
    }
    return /* @__PURE__ */ React.createElement(CSSTransitionAnimate, {
      from: "translate(".concat(translateX, "px, ").concat(translateX, "px)"),
      to: "translate(0, 0)",
      attributeName: "transform",
      begin: animationBegin,
      easing: animationEasing,
      isActive: isAnimationActive,
      duration: animationDuration,
      onAnimationStart: this.handleAnimationStart,
      onAnimationEnd: this.handleAnimationEnd
    }, (style) => /* @__PURE__ */ React.createElement(Layer, _extends({}, event, {
      style
    }), depth > 2 && !isAnimationFinished ? null : /* @__PURE__ */ React.createElement(ContentItemWithEvents, {
      content,
      dataKey,
      nodeProps: _objectSpread(_objectSpread({}, nodeProps), {}, {
        isAnimationActive,
        isUpdateAnimationActive: !isUpdateAnimationActive,
        width,
        height,
        x,
        y
      }),
      type,
      colorPanel
    })));
  }
  renderNode(root, node) {
    var {
      content,
      type
    } = this.props;
    var nodeProps = _objectSpread(_objectSpread(_objectSpread({}, svgPropertiesNoEvents(this.props)), node), {}, {
      root
    });
    var isLeaf = !node.children || !node.children.length;
    var {
      currentRoot
    } = this.state;
    var isCurrentRootChild = (currentRoot.children || []).filter((item) => item.depth === node.depth && item.name === node.name);
    if (!isCurrentRootChild.length && root.depth && type === "nest") {
      return null;
    }
    return /* @__PURE__ */ React.createElement(Layer, {
      key: "recharts-treemap-node-".concat(nodeProps.x, "-").concat(nodeProps.y, "-").concat(nodeProps.name),
      className: "recharts-treemap-depth-".concat(node.depth)
    }, this.renderItem(content, nodeProps, isLeaf), node.children && node.children.length ? node.children.map((child) => this.renderNode(node, child)) : null);
  }
  renderAllNodes() {
    var {
      formatRoot
    } = this.state;
    if (!formatRoot) {
      return null;
    }
    return this.renderNode(formatRoot, formatRoot);
  }
  // render nest treemap
  renderNestIndex() {
    var {
      nameKey,
      nestIndexContent
    } = this.props;
    var {
      nestIndex
    } = this.state;
    return /* @__PURE__ */ React.createElement("div", {
      className: "recharts-treemap-nest-index-wrapper",
      style: {
        marginTop: "8px",
        textAlign: "center"
      }
    }, nestIndex.map((item, i) => {
      var name = get(item, nameKey, "root");
      var content = null;
      if (/* @__PURE__ */ React.isValidElement(nestIndexContent)) {
        content = /* @__PURE__ */ React.cloneElement(nestIndexContent, item, i);
      }
      if (typeof nestIndexContent === "function") {
        content = nestIndexContent(item, i);
      } else {
        content = name;
      }
      return (
        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
        /* @__PURE__ */ React.createElement("div", {
          onClick: this.handleNestIndex.bind(this, item, i),
          key: "nest-index-".concat(uniqueId()),
          className: "recharts-treemap-nest-index-box",
          style: {
            cursor: "pointer",
            display: "inline-block",
            padding: "0 7px",
            background: "#000",
            color: "#fff",
            marginRight: "3px"
          }
        }, content)
      );
    }));
  }
  render() {
    var _this$props = this.props, {
      width,
      height,
      className,
      style,
      children,
      type
    } = _this$props, others = _objectWithoutProperties(_this$props, _excluded);
    var attrs = svgPropertiesNoEvents(others);
    return /* @__PURE__ */ React.createElement(TooltipPortalContext.Provider, {
      value: this.state.tooltipPortal
    }, /* @__PURE__ */ React.createElement(SetTooltipEntrySettings, {
      fn: getTooltipEntrySettings,
      args: {
        props: this.props,
        currentRoot: this.state.currentRoot
      }
    }), /* @__PURE__ */ React.createElement(RechartsWrapper, {
      className,
      style,
      width,
      height,
      ref: (node) => {
        if (this.state.tooltipPortal == null) {
          this.setState({
            tooltipPortal: node
          });
        }
      },
      onMouseEnter: void 0,
      onMouseLeave: void 0,
      onClick: void 0,
      onMouseMove: void 0,
      onMouseDown: void 0,
      onMouseUp: void 0,
      onContextMenu: void 0,
      onDoubleClick: void 0,
      onTouchStart: void 0,
      onTouchMove: this.handleTouchMove,
      onTouchEnd: void 0
    }, /* @__PURE__ */ React.createElement(Surface, _extends({}, attrs, {
      width,
      height: type === "nest" ? height - 30 : height
    }), this.renderAllNodes(), children), type === "nest" && this.renderNestIndex()));
  }
}
_defineProperty(TreemapWithState, "displayName", "Treemap");
_defineProperty(TreemapWithState, "defaultProps", {
  aspectRatio: 0.5 * (1 + Math.sqrt(5)),
  dataKey: "value",
  nameKey: "name",
  type: "flat",
  isAnimationActive: !Global.isSsr,
  isUpdateAnimationActive: !Global.isSsr,
  animationBegin: 0,
  animationDuration: 1500,
  animationEasing: "linear"
});
function TreemapDispatchInject(props) {
  var dispatch = useAppDispatch();
  return /* @__PURE__ */ React.createElement(TreemapWithState, _extends({}, props, {
    dispatch
  }));
}
function Treemap$1(props) {
  var _props$className;
  var {
    width,
    height
  } = props;
  if (!isPositiveNumber(width) || !isPositiveNumber(height)) {
    return null;
  }
  return /* @__PURE__ */ React.createElement(RechartsStoreProvider, {
    preloadedState: {
      options
    },
    reduxStoreName: (_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : "Treemap"
  }, /* @__PURE__ */ React.createElement(ReportChartSize, {
    width,
    height
  }), /* @__PURE__ */ React.createElement(ReportChartMargin, {
    margin: defaultTreemapMargin
  }), /* @__PURE__ */ React.createElement(TreemapDispatchInject, props));
}
const CustomTooltip = ({ active, payload }) => {
  if (active && payload && payload.length && payload[0]) {
    const data = payload[0].payload;
    if (!data || typeof data !== "object") {
      return null;
    }
    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-popover p-2 shadow-lg", children: [
      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-primary", children: "name" in data ? String(data.name) : "" }),
      /* @__PURE__ */ jsxs("p", { className: "text-sm text-secondary", children: [
        "Value: ",
        "value" in data ? data.value : "size" in data ? data.size : 0
      ] }),
      "parent" in data && data.parent && /* @__PURE__ */ jsxs("p", { className: "text-sm text-secondary", children: [
        "Parent: ",
        String(data.parent)
      ] })
    ] });
  }
  return null;
};
const CustomContent = ({
  x,
  y,
  width,
  height,
  name,
  value,
  color,
  index
}) => {
  const colorIndex = index !== void 0 ? index : name ? name.charCodeAt(0) : 0;
  const fillColor = color || getDefaultChartColor(colorIndex);
  return /* @__PURE__ */ jsxs("g", { children: [
    /* @__PURE__ */ jsx(
      "rect",
      {
        x,
        y,
        width,
        height,
        style: {
          fill: fillColor,
          stroke: "hsl(var(--background))",
          strokeWidth: 2,
          strokeOpacity: 1
        }
      }
    ),
    width > 50 && height > 30 && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        "text",
        {
          x: x + width / 2,
          y: y + height / 2 - 7,
          textAnchor: "middle",
          fill: "white",
          className: "text-xs font-medium",
          children: name
        }
      ),
      /* @__PURE__ */ jsx(
        "text",
        {
          x: x + width / 2,
          y: y + height / 2 + 7,
          textAnchor: "middle",
          fill: "white",
          className: "text-xs",
          children: value
        }
      )
    ] })
  ] });
};
function Treemap({
  data,
  className,
  showTooltip = true,
  dataKey = "size",
  aspectRatio = 4 / 3,
  tooltipProps,
  treemapProps,
  height = 400,
  width = "100%"
}) {
  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsx(
    Treemap$1,
    {
      data,
      dataKey,
      aspectRatio,
      stroke: "hsl(var(--background))",
      content: (props) => /* @__PURE__ */ jsx(CustomContent, { ...props }),
      isAnimationActive: false,
      ...treemapProps,
      children: showTooltip && /* @__PURE__ */ jsx(
        Tooltip,
        {
          content: /* @__PURE__ */ jsx(CustomTooltip, {}),
          cursor: { fill: "hsl(var(--muted))", opacity: 0.5 },
          ...tooltipProps
        }
      )
    }
  ) }) });
}
Treemap.displayName = "Treemap";
export {
  Treemap
};
