The following repo consists of the features and UI as required from the document specification.
# install node modules
$ npm i
$ npm start
This single page application was implemented with ReactJS.
- Provide UI for user to enter two input parameters: Initial Investment and Monthly Investment
- Fetch investment project data from the mocky.io API
- Display a project chart where the X-axis indicates the date and Y-axis the amount in SGD
- Display five line series that convey: a) Top 25% outcome of investment projection b) Median outcome of investment projection c) Bottom 10% outcome of investment projection d) Benchmark e) Total Deposit
- Loading state UI while the API is loading
When clicked, the button component would take the initial investment and monthly investment values from the state and use the values to request the payload to get the data.
The input fields were made such that on change, they would send the data in their fields to the main app, updating the state of the main app.
The chart was made using a third-party charting library known as React-vis and 5 line series were generated by using the data fetched from the API. A crosshair was made as well to display the data of the 5 lines and the crosshair would appear when the user's cursor goes close to the graph, and would show the data of the nearest X value from the cursor. The coloured circles on the crosshair corresponds to the colour of the line series as well.
A loading state UI was created using a third-party library known as React-loading and the "bubble" loading type was used. The loading UI casts an overlay on the application and it will show up when the app is fetching data from the API.
The main layout was build here and the different components built earlier are used to create the overall application. As the loading state UI and chart will not always be on the application, boolean flags were used to control when the chart will be generated and when the loading state UI will appear.