How to use the plottable.Plots function in plottable

const yScale = new Plottable.Scales.Linear()
    const colorScale = new Plottable.Scales.InterpolatedColor()
      .range(['#5279C7', '#BDCEF0'])

    this.plot = new Plottable.Plots.Bar()
      .addDataset(this.totaledRowsDataset)
      .addDataset(this.filteredRowsDataset)
      .attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
      .x((datum) => datum.label, xScale)
      .y((datum) => datum.value, yScale)
      .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 plotGroupItems = []

    this.totaledRowsDataset = new Plottable.Dataset(totaledRows)
      .metadata({ colorBucket: 5 })
    this.filteredRowsDataset = new Plottable.Dataset(filteredRows)
      .metadata({ colorBucket: 3 })

    const xScale = new Plottable.Scales.Time()
      .padProportion(0) // remove outer padding
    const xAxis = new Plottable.Axes.Time(xScale, 'bottom')

    const yScale = new Plottable.Scales.Linear()
    const colorScale = new Plottable.Scales.InterpolatedColor()
      .range(['#5279C7', '#BDCEF0'])

    this.plot = new Plottable.Plots.Area()
      .addDataset(this.totaledRowsDataset)
      .addDataset(this.filteredRowsDataset)
      .attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
      .x((datum) => new Date(datum.label), xScale)
      .y((datum) => datum.value, yScale)
      .animated(true)
    plotGroupItems.push(this.plot)

    const selectedData = (selected) ? [selected.value] : []
    this.selectedDataset = new Plottable.Dataset(selectedData)
    const rectangle = new Plottable.Plots.Rectangle()
      .addDataset(this.selectedDataset)
      .x((datum) => new Date(datum[0].value), xScale)
      .x2((datum) => new Date(datum[1].value))
      .y(0)
      .y2((datum) => rectangle.height())

return _.map(_.range(24), (hour) => {
        return {
          x: hour,
          y: weekday,
          val: (ticketsByHour[hour] || []).length,
        };
      });
    });

    const xScale = new Plottable.Scales.Category();
    const yScale = new Plottable.Scales.Category();
    const colorScale = new Plottable.Scales.InterpolatedColor();
    colorScale.range(['#eee', '#5279C7']);
    const data = _.flatten(groupedTickets);

    const plot = new Plottable.Plots.Rectangle()
      .addDataset(new Plottable.Dataset(data))
      .x((d) => d.x, xScale)
      .y((d) => d.y, yScale)
      .attr('fill', (d) => d.val, colorScale)
      .attr('stroke', '#fff')
      .attr('stroke-width', 2)
      .renderTo('#week');

    // Initializing tooltip anchor
    const tooltipAnchorSelection = plot.foreground().append('circle');
    tooltipAnchorSelection.attr({
      r: 3,
      opacity: 0,
    });
    const tooltipAnchor = $(tooltipAnchorSelection.node());
    tooltipAnchor.tooltip({

componentDidMount () {
    const { totaledRows, filteredRows, onSelect, selected } = this.props

    this.totaledRowsDataset = new Plottable.Dataset(totaledRows)
      .metadata({ colorBucket: 5 })
    this.filteredRowsDataset = new Plottable.Dataset(filteredRows)
      .metadata({ colorBucket: 3 })

    const xScale = new Plottable.Scales.Category()
    const xAxis = new Plottable.Axes.Category(xScale, 'bottom')

    const yScale = new Plottable.Scales.Linear()
    const colorScale = new Plottable.Scales.InterpolatedColor()
      .range(['#5279C7', '#BDCEF0'])

    this.plot = new Plottable.Plots.Bar()
      .addDataset(this.totaledRowsDataset)
      .addDataset(this.filteredRowsDataset)
      .attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
      .x((datum) => datum.label, xScale)
      .y((datum) => datum.value, yScale)
      .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')

const yScale = new Plottable.Scales.Linear()
    const colorScale = new Plottable.Scales.InterpolatedColor()
      .range(['#5279C7', '#BDCEF0'])

    this.plot = new Plottable.Plots.Area()
      .addDataset(this.totaledRowsDataset)
      .addDataset(this.filteredRowsDataset)
      .attr('fill', (datum, index, dataset) => dataset.metadata().colorBucket, colorScale)
      .x((datum) => new Date(datum.label), xScale)
      .y((datum) => datum.value, yScale)
      .animated(true)
    plotGroupItems.push(this.plot)

    const selectedData = (selected) ? [selected.value] : []
    this.selectedDataset = new Plottable.Dataset(selectedData)
    const rectangle = new Plottable.Plots.Rectangle()
      .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)