How to use the d3-shape.stack function in d3-shape

{ name: 'apples', label: 'Apples' },
    { name: 'oranges', label: 'Oranges' }
];

const stackData: StackDatum[] = [
    { values: { bananas: 10, apples: 20, oranges: 10 } },
    { values: { bananas: 10, apples: 25, oranges: 0 } },
    { values: { bananas: 20, apples: 20, oranges: 30 } },
    { values: { bananas: 12, apples: 10, oranges: 50 } }
];

// Create stack generator ==========================================================

let defaultStack: d3Shape.Stack;

defaultStack = d3Shape.stack();

let overlyComplicatedStack: d3Shape.Stack;

overlyComplicatedStack = d3Shape.stack();

// Configure stack generator =======================================================

// keys(...) ----------------------------------------------------------------------

defaultStack = defaultStack.keys(['bananas', 'apples', 'oranges']);

overlyComplicatedStack = overlyComplicatedStack.keys((data: StackDatum[], keys: StackKey[]) => {
    return keys;
});

let keysAccessor: (this: any, data: StackDatum[], keys: StackKey[]) => StackKey[];

data,
  curve,
  defined,
  x,
  x0,
  x1,
  y0,
  y1,
  value,
  order,
  offset,
  color,
  children,
  ...restProps
}: StackProps & Omit, keyof StackProps>) {
  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 path = area>();
  if (x) path.x(x);
  if (x0) path.x0(x0);
  if (x1) path.x1(x1);
  if (y0) path.y0(y0);
  if (y1) path.y1(y1);
  if (curve) path.curve(curve);
  if (defined) path.defined(defined);

  const stacks = stack(data);

function initStacks() {
        const keys = graph.data.map((column) => column.id);

        return stack().keys(keys).order(stackOrderNone).offset(stackOffsetNone);
    }

curve = _ref.curve,
      defined = _ref.defined,
      x = _ref.x,
      x0 = _ref.x0,
      x1 = _ref.x1,
      y0 = _ref.y0,
      y1 = _ref.y1,
      value = _ref.value,
      order = _ref.order,
      offset = _ref.offset,
      render = _ref.render,
      _ref$reverse = _ref.reverse,
      reverse = _ref$reverse === undefined ? false : _ref$reverse,
      restProps = objectWithoutProperties(_ref, ['className', 'top', 'left', 'keys', 'data', 'curve', 'defined', 'x', 'x0', 'x1', 'y0', 'y1', 'value', 'order', 'offset', 'render', 'reverse']);

  var stack$$1 = stack();
  if (keys) stack$$1.keys(keys);
  if (value) stack$$1.value(value);
  if (order) stack$$1.order(stackOrder(order));
  if (offset) stack$$1.offset(stackOffset(offset));

  var path$$1 = area();
  if (x) path$$1.x(x);
  if (x0) path$$1.x0(x0);
  if (x1) path$$1.x1(x1);
  if (y0) path$$1.y0(y0);
  if (y1) path$$1.y1(y1);
  if (curve) path$$1.curve(curve);
  if (defined) path$$1.defined(defined);

  var seriesData = stack$$1(data);
  if (reverse) seriesData.reverse();

_renderChart() {
    const { height, width } = this.state;
    const { activeArtifactNames, chartType, builds, valueAccessor } = this.props;
    if (height === 0 || width === 0) {
      return;
    }

    const yScale = this._getYScale();
    const xScale = this._getXScale();

    const chartStack = stack();
    chartStack.keys(activeArtifactNames);
    chartStack.value((d, key) => (d.artifacts[key] ? valueAccessor(d.artifacts[key]) : 0));

    const data = chartStack(builds);

    switch (chartType) {
      case ChartType.BAR:
        this._drawBars(data, xScale, yScale);
        break;
      case ChartType.AREA:
        this._drawArea(data, xScale, yScale);
        break;
      default:
        throw new Error(`Chart type ${chartType} is unknown`);
    }

(data, layout, tension) => {
      const dates = data.map((d) => utcParse('%Y-%m-%dT%H:%M:%S.%LZ')(d.date));

      const stacked = shape.stack()
        .keys(keys)
        .value((d, key) => d[key])
        .offset(shape.stackOffsetSilhouette)(data);


      if (layout === 'alluvial') {
        const lenY = stacked.length;
        const lenX = stacked[0].length;

        for (let x = 0; x < lenX; x++) {
          const temp = [];

          let minY = Number.POSITIVE_INFINITY;

          for (let y = 0; y < lenY; y++) {
            const y0 = stacked[y][x][0];

function refresh() {
        const data = enrichDataWithLevels(vm.data);
        const stackData = stack()
            .keys(vm.keys)
            (data);
        const scales = prepareScales(data, vm.dimensions, vm.keys);
        draw(vm.svg, stackData, vm.keys, scales);
    }

function createGenerator(props, generator?: Stack): Stack {
    generator = generator || d3.stack();
    return args.reduce((acc: Stack, arg) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}