A simple dashboard application built using React, for monitoring online chat room data. Fetches and displays data about visitor and chatroom statistics from an API.
User has to provide a date range (between 01.05.2017 - 15.06.2017), and the access token (38ab33b9f32a3478555d1e06189d50f01a872966) for the query to run successfully.
After receiving response from the API, the app renders two major data display components.
- On the top is a "Speedometer" display with three dials each representing data from the following fields: total_conversation_count, total_user_message_count and total_visitor_message_count. Note: When the screen width is smaller than 960px the dials are replaced with plain text panels instead for better readability.
- a) On the bottom is a table component which displays daily numbers for the following fields: conversation_count, missed_chat_count and visitors_with_conversation_count. The table allows for sorting of the fields, and the results are paginated if the table has more than 5 rows. b) Alternatively, the daily numbers can also be viewed in a graphical format. For best readability in graphical format, consider selecting a shorter date range (< 16 days).
Clone the chat-room-dashboard repository locally. In a terminal, run:
$ git clone https://github.com/pankaj-pant/chat-room-dashboard
$ cd chat-room-dashboard
To install the dependencies and build a production version of the app, run the commands:
$ yarn install
$ yarn build
This command serves the app at http://localhost:8080/
$ yarn start