How to use the plottable.Components function in plottable

.y(0)
      .y2((datum) => rectangle.height())
      .attr('fill', '#f99300')
      .attr('opacity', 0.3)

    xScale.innerPadding(0.4) // See https://github.com/palantir/plottable/issues/3426

    const group = new Plottable.Components.Group([ this.plot, rectangle ])

    if (onSelect) {
      const interaction = new Plottable.Interactions.Click()
      interaction.onClick(this.onClickPlot.bind(this))
      interaction.attachTo(this.plot)
    }

    const table = new Plottable.Components.Table([
      [group],
      [xAxis]
    ])

    table.renderTo(this.container)
  }
  onClickPlot (point) {

.animated(true)
      // .labelsEnabled(true)

    const selectedData = (selected) ? [selected.value] : []
    this.selectedDataset = new Plottable.Dataset(selectedData)
    const rectangle = new Plottable.Plots.Rectangle()
      .addDataset(this.selectedDataset)
      .x((datum) => datum, xScale)
      .y(0)
      .y2((datum) => rectangle.height())
      .attr('fill', '#f99300')
      .attr('opacity', 0.3)

    xScale.innerPadding(0.4) // See https://github.com/palantir/plottable/issues/3426

    const group = new Plottable.Components.Group([ this.plot, rectangle ])

    if (onSelect) {
      const interaction = new Plottable.Interactions.Click()
      interaction.onClick(this.onClickPlot.bind(this))
      interaction.attachTo(this.plot)
    }

    const table = new Plottable.Components.Table([
      [group],
      [xAxis]
    ])

    table.renderTo(this.container)
  }
  onClickPlot (point) {

.addDataset(this.selectedDataset)
      .x((datum) => new Date(datum[0].value), xScale)
      .x2((datum) => new Date(datum[1].value))
      .y(0)
      .y2((datum) => rectangle.height())
      .attr('fill', '#f99300')
      .attr('opacity', 0.3)
    plotGroupItems.push(rectangle)

    if (onSelect) {
      const dragbox = new Plottable.Components.XDragBoxLayer()
      dragbox.onDragEnd(this.onDragEnd.bind(this))
      plotGroupItems.push(dragbox)
    }

    const group = new Plottable.Components.Group(plotGroupItems)
    const table = new Plottable.Components.Table([
      [group || this.plot],
      [xAxis]
    ])

    table.renderTo(this.container)
  }
  onDragEnd (box) {

.x((datum) => new Date(datum[0].value), xScale)
      .x2((datum) => new Date(datum[1].value))
      .y(0)
      .y2((datum) => rectangle.height())
      .attr('fill', '#f99300')
      .attr('opacity', 0.3)
    plotGroupItems.push(rectangle)

    if (onSelect) {
      const dragbox = new Plottable.Components.XDragBoxLayer()
      dragbox.onDragEnd(this.onDragEnd.bind(this))
      plotGroupItems.push(dragbox)
    }

    const group = new Plottable.Components.Group(plotGroupItems)
    const table = new Plottable.Components.Table([
      [group || this.plot],
      [xAxis]
    ])

    table.renderTo(this.container)
  }
  onDragEnd (box) {