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

const radius = width / 2;
  const x = scaleLinear().range([0, 2 * Math.PI]);
  const y = scaleLinear().range([radius / 4, radius]);

  d3_select(chartDiv)
    .select('svg')
    .attr('width', width)
    .attr('height', width);
  const wrapper = d3_select(chartDiv)
    .select('.chart-wrapper')
    .attr('transform', 'translate(' + radius + ',' + radius + ')');

  const legend = d3_select(chartDiv)
    .select('.legend');

  const arc = d3_arc()
    .startAngle(d => Math.max(0, Math.min(2 * Math.PI, x(d.x0))))
    .endAngle(d => Math.max(0, Math.min(2 * Math.PI, x(d.x1))))
    .innerRadius(d => Math.max(0, y(d.y0)))
    .outerRadius(d => Math.max(0, y(d.y1)));

  // console.log('root', nodes);

  const arcs = wrapper
    .select('.arcs')
    .selectAll('path')
    .data(nodes, d => d.data.key);

  const labelNodes = nodes.filter(n => n.depth === 1);
  const beams = wrapper
    .select('.beams')
    .selectAll('line')

// arguments:
		//		angleStart - the angle around the lane of which the center of the tick mark will be drawn (North is zero radians)
		//		angleEnd - the thickness of the tick mark in radians
		//		margin - (optional) adjust the width of the tick { inner: , outer:  }
		arc: arc()
			.startAngle(function (angleStart, angleEnd) { return angleStart; })
			.endAngle(function (angleStart, angleEnd) { return angleEnd; })
			.innerRadius(function(angleStart, angleEnd, margin) { return this.offset + ((margin!=null && margin.inner!=null) ? margin.inner : 0); })
			.outerRadius(function(angleStart, angleEnd, margin) { return this.offset + ((margin && margin.width) ? margin.width : this.width) + ((margin && margin.outer) ? margin.outer : 0); }),

		// draws a tick mark in the lane
		// arguments:
		//		angle - the angle around the lane of which the center of the tick mark will be drawn (North is zero radians)
		//		width - the thickness of the tick mark in radians
		//		margin - (optional) adjust the width of the tick { inner: , outer:  }
		tick: arc()
			.startAngle(function (angle, width) { return angle-width; })
			.endAngle(function (angle, width) { return angle+width; })
			.innerRadius(function(angle, width, margin) { return this.offset + ((margin && margin.inner) ? margin.inner : 0); })
			.outerRadius(function(angle, width, margin) { return this.offset + this.width + ((margin && margin.outer) ? margin.outer : 0); })
	};

	// add an alternate width arc function in cases where the plugin may
	// want to be larger than the lane default
	// WARNING  This arc function copy doesnt work because of the 'this' references in the functions which need to resolve to the above
	//          lane object. For this to work, those this references would need to be converted into references on lane.
	/*lane.arc.width = function(width) {
		console.log("creating alternative arc for lane "+ordinal+" of width "+width);
		return lane.arc
			//.startAngle(function (angleStart, angleEnd) { return angleStart; })
			//.endAngle(function (angleStart, angleEnd) { return angleEnd; })
			//.innerRadius(function(angleStart, angleEnd, margin) { return this.offset + ((margin!=null && margin.inner!=null) ? margin.inner : 0); })

renderDonut() {
    const { colors, data } = this.props;
    const radius = SIZE / 2;

    // -- Setup arc and angles
    this.arc = arc()
      .innerRadius(radius - 15)
      .outerRadius(radius);

    this.pie = pie()
      .sort(null)
      .value(d => d.value);

    // -- Draw texts
    const value = this.donutContainer
      .append('text')
      .attr('transform', 'translate(0, 0)')
      .attr('text-anchor', 'middle')
      .style('font-size', '24')
      .style('font-weight', '300')
      .style('fill', 'currentColor')
      .style('font-family', 'Roboto')

.attr('x2', '50%')
      .attr('y2', '100%');
    gradient.append('stop')
      .attr('offset', '50%')
      .attr('stop-color', colors[4])
      .attr('stop-opacity', 1);
    gradient.append('stop')
      .attr('offset', '100%')
      .attr('stop-color', colors[5])
      .attr('stop-opacity', 1);

    // outer circle
    const outerRadius = 200 - 10;
    const innerRadius = 0;

    const circle = arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .startAngle(0)
      .endAngle(2 * Math.PI);

    g.append('path')
      .attr('d', circle)
      .attr('fill', 'url(#gradient1)')
      .attr('stroke', colors[1])
      .attr('stroke-width', '7');

    // ticks
    const lg = svg.append('g').attr('class', 'label').attr('transform', `translate(${r}, ${r})`);
    const minAngle = -160;
    const maxAngle = 150;
    const angleRange = maxAngle - minAngle;

private computeArcs(computed: ComputedInitial): ComputedArcs {
    const drawingDims = this.state.current.get("computed").canvas.drawingContainerDims
    const r = this.computeOuterRadius(drawingDims)
    const rInner = this.computeInnerRadius(r)
    const rHover = r + 1
    const rInnerHover = Math.max(rInner - 1, 0)

    return {
      r,
      rInner,
      rHover,
      rInnerHover,
      arc: d3Arc(),
      arcOver: d3Arc()
        .innerRadius(rInnerHover)
        .outerRadius(rHover),
    }
  }

Gauge.prototype.computeArcs = function (computed) {
        var drawingDims = this.state.current.get("computed").canvas.drawingContainerDims;
        var outerBorderMargin = this.state.current.get("config").outerBorderMargin;
        var r = this.computeOuterRadius(drawingDims, outerBorderMargin);
        var rInner = this.computeInnerRadius(r);
        var rHover = r + 1;
        var rInnerHover = Math.max(rInner - 1, 0);
        return {
            r: r,
            rInner: rInner,
            rHover: rHover,
            rInnerHover: rInnerHover,
            arc: d3_shape_1.arc(),
            arcOver: d3_shape_1.arc()
                .innerRadius(rInnerHover)
                .outerRadius(rHover),
        };
    };
    Gauge.prototype.computeOuterRadius = function (drawingDims, margin) {

centroid = _ref.centroid,
      _ref$innerRadius = _ref.innerRadius,
      innerRadius = _ref$innerRadius === undefined ? 0 : _ref$innerRadius,
      outerRadius = _ref.outerRadius,
      cornerRadius = _ref.cornerRadius,
      _ref$startAngle = _ref.startAngle,
      startAngle = _ref$startAngle === undefined ? 0 : _ref$startAngle,
      endAngle = _ref.endAngle,
      padAngle = _ref.padAngle,
      padRadius = _ref.padRadius,
      pieSort = _ref.pieSort,
      pieSortValues = _ref.pieSortValues,
      pieValue = _ref.pieValue,
      restProps = objectWithoutProperties(_ref, ['className', 'top', 'left', 'data', 'centroid', 'innerRadius', 'outerRadius', 'cornerRadius', 'startAngle', 'endAngle', 'padAngle', 'padRadius', 'pieSort', 'pieSortValues', 'pieValue']);

  var path$$1 = arc();
  path$$1.innerRadius(innerRadius);
  if (outerRadius) path$$1.outerRadius(outerRadius);
  if (cornerRadius) path$$1.cornerRadius(cornerRadius);
  if (padRadius) path$$1.padRadius(padRadius);
  var pie$$1 = pie();
  if (pieSort) pie$$1.sort(pieSort);
  if (pieSortValues) pie$$1.sortValues(pieSortValues);
  if (pieValue) pie$$1.value(pieValue);
  if (padAngle != null) pie$$1.padAngle(padAngle);
  if (startAngle != null) pie$$1.startAngle(startAngle);
  if (endAngle != null) pie$$1.endAngle(endAngle);
  var arcs = pie$$1(data);
  return React.createElement(
    Group,
    { className: 'vx-pie-arcs-group', top: top, left: left },
    arcs.map(function (arc$$1, i) {

}, {
    name: 'Oyoba',
  }
]

const radius = (dims[1] / 2) * 0.70

const pieLayout = pie()
  .value((d) => d.value)
  .sort(null)

const innerArcPath = arc()
  .innerRadius(radius * 0.8)
  .outerRadius(radius * 1.0)

const outerArcPath = arc()
  .innerRadius(radius * 1.2)
  .outerRadius(radius * 1.2)

function mid(d) {
  return Math.PI > (d.startAngle + (d.endAngle - d.startAngle))
}
  
const getPolylinePoints = (startAngle, endAngle) => {
  const arc = { startAngle, endAngle }
  const p0 = innerArcPath.centroid(arc)
  const p1 = outerArcPath.centroid(arc)
  const p2 = [
    mid(arc) ? p1[0] + (radius * 0.5) : p1[0] - (radius * 0.5),
    p1[1],
  ]

calculation(props) {
          let calc = arc();
          const keys = this.inputs;
          keys.forEach(attrName => {
            if (itsSet(props[attrName])) {
              calc = calc[attrName](props[attrName]);
            }
          });
          return calc();
        },
      },

private computeArcs(): ComputedArcs {
    const drawingDims = this.state.current.getComputed().canvas.drawingContainerDims;
    const outerBorderMargin = this.state.current.getConfig().outerBorderMargin;
    const r = this.computeOuterRadius(drawingDims, outerBorderMargin);
    const rInner = this.computeInnerRadius(r);
    const rHover = r + 1;
    const rInnerHover = Math.max(rInner - 1, 0);

    return {
      r,
      rInner,
      rHover,
      rInnerHover,
      arc: d3Arc(),
      arcOver: d3Arc()
        .innerRadius(rInnerHover)
        .outerRadius(rHover),
    };
  }