@visx/shape/esm/shapes/BarStack.js

visx shape

import cx from 'classnames';
import { stack as d3stack } from '@visx/vendor/d3-shape';
import { Group } from '@visx/group';
import { getFirstItem, getSecondItem } from "../util/accessors.js";
import getBandwidth from "../util/getBandwidth.js";
import setNumOrAccessor from "../util/setNumberOrNumberAccessor.js";
import stackOrder from "../util/stackOrder.js";
import stackOffset from "../util/stackOffset.js";
import Bar from "./Bar.js";
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
export default function BarStack(_ref) {
  let {
    data,
    className,
    top,
    left,
    x,
    y0 = getFirstItem,
    y1 = getSecondItem,
    xScale,
    yScale,
    color,
    keys,
    value,
    order,
    offset,
    children,
    ...restProps
  } = _ref;
  const stack = d3stack();
  if (keys) stack.keys(keys);
  if (value) setNumOrAccessor(stack.value, value);
  if (order) stack.order(stackOrder(order));
  if (offset) stack.offset(stackOffset(offset));
  const stacks = stack(data);
  const barWidth = getBandwidth(xScale);
  const barStacks = stacks.map((barStack, i) => {
    const {
      key
    } = barStack;
    return {
      index: i,
      key,
      bars: barStack.map((bar, j) => {
        const barHeight = (yScale(y0(bar)) || 0) - (yScale(y1(bar)) || 0);
        const barY = yScale(y1(bar));
        const barX = 'bandwidth' in xScale ? xScale(x(bar.data)) : Math.max((xScale(x(bar.data)) || 0) - barWidth / 2);
        return {
          bar,
          key,
          index: j,
          height: barHeight,
          width: barWidth,
          x: barX || 0,
          y: barY || 0,
          color: color(barStack.key, j)
        };
      })
    };
  });
  if (children) return /*#__PURE__*/_jsx(_Fragment, {
    children: children(barStacks)
  });
  return /*#__PURE__*/_jsx(Group, {
    className: cx('visx-bar-stack', className),
    top: top,
    left: left,
    children: barStacks.map(barStack => barStack.bars.map(bar => /*#__PURE__*/_jsx(Bar, {
      x: bar.x,
      y: bar.y,
      height: bar.height,
      width: bar.width,
      fill: bar.color,
      ...restProps
    }, `bar-stack-${barStack.index}-${bar.index}`)))
  });
}