Notes

This code misses some important features (like error handling) and common design practices (like usage of typesafe-actions), tests and other stuff.

This has been made intentionally to save time spent on test task, I hope we'll get chance to discuss this issues during interview.

To start run:

yarn && yarn dev

Task Description

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
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
(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.

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> }