React Victory Line Chart For 0-10 minute timeframe

Question

Could use some help trying to create a simple line chart with Victory.

What I'm trying to do:

I'm basically trying to create a line chart that shows random numbers for the last 10 minutes. I generate a new random number every 3 seconds, and add that num to the line chart.

So the X-Axis should be from 0 minutes – 10 minutes, and the Y axis should be the actual rand num for a given time.

My main problem is that I am pretty lost on how to go about creating the X axis from 0 – 10 minutes in 3 second intervals

What I have so far:

Here's a Code Sandbox with what I've done so far so you can try it out: https://codesandbox.io/s/6wnzkz512n

The main Chart component:

import React from 'react'
import { VictoryChart, VictoryLine, VictoryAxis } from 'victory'

class Chart extends React.Component {
  constructor() {
    super()
    this.state = {
      data: []
    }
  }

  // Add a new data point every 3 seconds
  componentDidMount() {
    this.getRandNum()
    setInterval(this.getRandNum, 3000)
  }

  // get rand num from 1-5 along with current time,
  // and add it to data. not sure if this is right approach
  getRandNum = () => {
    const newData = {
      date: new Date(),
      num: Math.floor(Math.random() * 5) + 1
    }

    this.setState({
      data: [...this.state.data, newData]
    })
  }

  render() {
    return (
      <VictoryChart width={600} height={470}>
        <VictoryLine
          style={{
            data: { stroke: 'lime' }
          }}
          data={this.state.data}
          x="date"
          y="num"
        />
      </VictoryChart>
    )
  }
}

---

Answer 1

Code Sandbox with solution: https://codesandbox.io/s/989zx8v6v4

Changes:

• Add startTime in state
• state.data.date rename as state.data.time and contains number of seconds from stat
• Initialization in componentDidMount()
• getRandNum() calculate time difference in seconds
• VictoryAxis format X axis as "m:ss"

Chart component:

    class Chart extends React.Component {
      constructor() {
        super();
        this.state = {
          data: [],
          startTime: null
        };
      }

      // Add a new data point every 3 seconds
      componentDidMount() {
        const startTime = new Date();
        const time = 0;
        const num = Math.floor(Math.random() * 5) + 1;

        this.setState({ data: [{ time, num }], startTime });
        setInterval(this.getRandNum, 3000);
      }

      // get rand num from 1-5 along with current time,
      // and add it to data. not sure if this is right approach
      getRandNum = () => {
        const actualTime = new Date();
        let num = Math.floor(Math.random() * 5) + 1;
        let time = Math.round((actualTime - this.state.startTime) / 1000);

        this.setState({
          data: [...this.state.data, { time, num }]
        });
      };

      render() {
        return (
          <VictoryChart width={600} height={470}>
            <VictoryAxis dependentAxis />
            <VictoryAxis
              tickFormat={t =>
                `${Math.floor(t / 60)}:${Math.round(t % 60)
                  .toString()
                  .padStart(2, "0")}`
              }
            />
            <VictoryLine
              style={{
                data: { stroke: "lime" }
              }}
              data={this.state.data}
              x="time"
              y="num"
            />
          </VictoryChart>
        );
      }
    }