- Please don’t fork/branch or create pull-request from the repository.
- Clone it and email your solution back to us when you’re done.
You have a server which returns random numbers via WebSocket (socket.io) connection.
You should implement the next:
- A line chart:
- x-axis: time of a received number (look at
timestamp
payload field) - y-axis: number values
- x-axis: time of a received number (look at
- A bar chart:
- x-axis: range categories (e.g.
-10 - 0
,0 - 10
,10 - 20
etc) - y-axis: the amount of numbers in each category
- x-axis: range categories (e.g.
- (Optional) An input called "Alert threshold":
- a user should be able to enter a number
- if the random number received from the server is greater than the threshold - show an alert toast / snackbar with the number as the payload
- Design: we appreciate your own design decisions =)
Charts should be updated in real time. Please, consider code style best practices.
- React
- Use socket.io-client to connect to the server
- That’s all
P.S. Feel free to use any module bundler, charts package, UI-kit etc you want. BUT please, leave some notes about the project setup.
- Install NodeJS
- In the project root folder run
yarn
/npm install
- Add
.env
file with the specified PORT (3000
by default) env variable (look at.env.sample
file) - Run
yarn start
/npm start
- Now you can connect to the server via socket.io-client:
- listen for
data
event - the payload format is
{ value: <float>, timestamp: <integer> }
- listen for