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

defaultArea = defaultArea.defined(true);

area = area.defined((d, t, data) => {
    console.log('Number of Points: ', data.length);
    console.log('Y0-Coordinate of first point: ', data[0].y0); // data type is Array
    return !d.missing; // d type is AreaDatum
});

areaDefAccessorFn = area.defined();

// curve(...) ------------------------------------------------------------------------

defaultArea = defaultArea.curve(d3Shape.curveLinear);

area = area.curve(d3Shape.curveCardinal.tension(0.5));
// area = area.curve(d3Shape.curveBundle.beta(0.5)); // fails, as curveBundle-based line generator does not support area-related methods

currentCurveFactory = area.curve();

// use Area generator ===============================================================

defaultArea([[10, 10], [20, 10], [20, 20]]);

const areaData: AreaDatum[] = [
    { x0: 10, y0: 10, x1: 10, y1: 30, missing: false },
    { x0: 20, y0: 20, x1: 20, y1: 40, missing: false },
    { x0: 30, y0: 30, x1: 30, y1: 30, missing: false }
];

const areaPathStringMaybe: string | null = area(areaData);

const Chart = ({ data }: { data: number[] }) => {
  // Really shouldn't happen
  if (data.length < 3) {
    return null;
  }

  return (
     d !== 0).length <= 3 ? 50 : undefined}
    >
      
  );
};

bottom: 0,
      }}
    >
      
      
      
      
      <area fill="#8884d8" stroke="#8884d8" type="monotone">
      <area fill="#82ca9d" stroke="#82ca9d" type="monotone">
      <area fill="#ffc658" stroke="#ffc658" type="monotone">
    
  
)

// CardinalAreaChart
const cardinal = d3.curveCardinal.tension(0.2)
const CardinalAreaChart = () =&gt; (
  
    
      
      
      
      
      <area fill="#8884d8" stroke="#8884d8" type="monotone">
      <area fill="#82ca9d" stroke="#82ca9d" type="{cardinal}">

var SCALE_PADDING = 0.15;

var THEME = 'monteCarlo';
var SECONDARY_THEME = 'vividCerise';
var OUTLINE_FILL = 50;
var OUTLINE_HOVER = 30;
var OUTLINE_STROKE = -20; // Line options

var LINE_STROKE_WIDTH = 2;
var LINE_TYPE = 'curveLinear';
var LINE_TYPES = {
  curveBasis: d3Shape.curveBasis,
  curveBasisClosed: d3Shape.curveBasisClosed,
  curveBasisOpen: d3Shape.curveBasisOpen,
  curveBundle: d3Shape.curveBundle,
  curveCardinal: d3Shape.curveCardinal,
  curveCardinalClosed: d3Shape.curveCardinalClosed,
  curveCardinalOpen: d3Shape.curveCardinalOpen,
  curveCatmullRom: d3Shape.curveCatmullRom,
  curveCatmullRomClosed: d3Shape.curveCatmullRomClosed,
  curveCatmullRomOpen: d3Shape.curveCatmullRomOpen,
  curveLinear: d3Shape.curveLinear,
  curveLinearClosed: d3Shape.curveLinearClosed,
  curveMonotoneX: d3Shape.curveMonotoneX,
  curveMonotoneY: d3Shape.curveMonotoneY,
  curveNatural: d3Shape.curveNatural,
  curveStep: d3Shape.curveStep,
  curveStepAfter: d3Shape.curveStepAfter,
  curveStepBefore: d3Shape.curveStepBefore
};

/**

maxRadius = 10;
  minRadius = 3;
  showSeriesOnHover = true;
  roundEdges: boolean = true;
  animations: boolean = true;
  xScaleMin: any;
  xScaleMax: any;
  yScaleMin: number;
  yScaleMax: number;
  showDataLabel = false;

  curves = {
    Basis: shape.curveBasis,
    'Basis Closed': shape.curveBasisClosed,
    Bundle: shape.curveBundle.beta(1),
    Cardinal: shape.curveCardinal,
    'Cardinal Closed': shape.curveCardinalClosed,
    'Catmull Rom': shape.curveCatmullRom,
    'Catmull Rom Closed': shape.curveCatmullRomClosed,
    Linear: shape.curveLinear,
    'Linear Closed': shape.curveLinearClosed,
    'Monotone X': shape.curveMonotoneX,
    'Monotone Y': shape.curveMonotoneY,
    Natural: shape.curveNatural,
    Step: shape.curveStep,
    'Step After': shape.curveStepAfter,
    'Step Before': shape.curveStepBefore,
    default: shape.curveLinear
  };

  // line interpolation
  curveType: string = 'Linear';

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _d3Shape = require("d3-shape");

exports.default = {
    curveBasisClosed: _d3Shape.curveBasisClosed,
    curveBasisOpen: _d3Shape.curveBasisOpen,
    curveBasis: _d3Shape.curveBasis,
    curveBundle: _d3Shape.curveBundle,
    curveCardinalClosed: _d3Shape.curveCardinalClosed,
    curveCardinalOpen: _d3Shape.curveCardinalOpen,
    curveCardinal: _d3Shape.curveCardinal,
    curveCatmullRomClosed: _d3Shape.curveCatmullRomClosed,
    curveCatmullRomOpen: _d3Shape.curveCatmullRomOpen,
    curveCatmullRom: _d3Shape.curveCatmullRom,
    curveLinearClosed: _d3Shape.curveLinearClosed,
    curveLinear: _d3Shape.curveLinear,
    curveMonotoneX: _d3Shape.curveMonotoneX,
    curveMonotoneY: _d3Shape.curveMonotoneY,
    curveNatural: _d3Shape.curveNatural,
    curveStep: _d3Shape.curveStep,
    curveStepAfter: _d3Shape.curveStepAfter,
    curveStepBefore: _d3Shape.curveStepBefore
}; /**
    *  Copyright (c) 2017, The Regents of the University of California,
    *  through Lawrence Berkeley National Laboratory (subject to receipt
    *  of any required approvals from the U.S. Dept. of Energy).
    *  All rights reserved.

setInterpolationType(curveType) {
    this.curveType = curveType;
    if (curveType === 'Bundle') {
      this.curve = shape.curveBundle.beta(1);
    }
    if (curveType === 'Cardinal') {
      this.curve = shape.curveCardinal;
    }
    if (curveType === 'Catmull Rom') {
      this.curve = shape.curveCatmullRom;
    }
    if (curveType === 'Linear') {
      this.curve = shape.curveLinear;
    }
    if (curveType === 'Monotone X') {
      this.curve = shape.curveMonotoneX;
    }
    if (curveType === 'Monotone Y') {
      this.curve = shape.curveMonotoneY;
    }
    if (curveType === 'Natural') {
      this.curve = shape.curveNatural;
    }

get: function get() {
    return _d3Shape.curveCardinal;
  }
});

export function getPath(x, y, yVals, dates, tension) {
  return shape.area()
    .curve(shape.curveCardinal.tension(tension))
    .x((d) => x(d))
    .y0((d, i) => y(yVals[i][0]))
    .y1((d, i) => y(yVals[i][1]))(dates);
}