How to use the plottable.Scales function in plottable

componentDidMount () {
    const { totaledRows, filteredRows, onSelect, selected } = this.props
    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)

componentDidMount () {
    const { totaledRows, filteredRows, onSelect, selected } = this.props
    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)

const ticketGroup = ticketsByWeekday[weekday] || [];
      const ticketsByHour = _.groupBy(ticketGroup, (ticket) => {
        return moment(ticket.createdAt).hour();
      });
      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,

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)

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] : []

});
    const groupedTickets = _.map(_.range(7), (weekday) => {
      const ticketGroup = ticketsByWeekday[weekday] || [];
      const ticketsByHour = _.groupBy(ticketGroup, (ticket) => {
        return moment(ticket.createdAt).hour();
      });
      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');