Assignment Deliverables:
You are required to submit a SINGLE WinZip file that has the following deliverables :
Documentation for the Angular Components that you created to draw the Line chart
Source Code
Output report that has ALL captured screen-shots of your assignment run saved in OUTPUT.pdf
Video recording of 10 minutes as a demo for the run of your assignment using https://screencast-o-matic.com/
Post your assignment as a SINGLE WIN-ZIP on Blackboard.
Architecture/High-level Design:
Requirements:
Refine your Assignment #3 implementation of ChicagoSocialHub to achieve the following :
Use logstash to log Divvy the periodic divvy status on ElasticSearch server. Your log MUST accumulate data of at least 7 days.
Use and pdate the provided logstash.conf filter to clean entries that have white space after/before data values; for example a white space before/after Chicago in city name
Use the provided Python script to collect data from Divvy and send them to Logstash
The periodic Divvy heart beat will be stored on PostgreSQL server
A Line Chart to plot the number of available docks of the selected divvy station.
The user shall be provided with a button next to every nearby Divvy station listed to view/select options for the Line Chart. The following is an example of a valid listing/display:
After the User clicks the Real-Time Chart button, a new page is displayed where the user is provided with a dropdown buttons/list labeled Time Range . The user shall be provided with the Drop-Down list with label “Time Range” in order to choose 1 hour, 24 hours, 7 days in Green color.
The Line Chart must be updated in real-time without a MANUAL refresh.
When you plot divvy data on your Line Chart,
the X-axis shall display time in granularity of 2 minutes (30 label/interval total displayed)
the X-axis shall display time in granularity of Hours ( 24 label/intervals total displayed)
the X-axis shall display time in granularity of days ( 7
label/intervals total displayed)
10) Right next to “Time Range”, the user shall be provided with TWO Check-BOX Buttons to draw/overlay on the same chart the 30 (past 1 hour divvy data) simple moving average in Blue color and 720 (past 24 hours divvy data) simple moving average in Red color. So, on the same Chart, the user will see real-time data (Green line) , 1 hours SMA (Blue line) , 24 hours SMA (Red line)
11) The data collected from divvy stations using the provided
Python script must be stored in an index you create on ElasticSearch server with the name divvy_stations_logs
12) Every page must have a Back button display on the Far-Right
13) Every page must have a Home button display on the Far-Left; this button always will take you to ChicagoSocailHub App homepage
14) All buttons shall be displayed on one line below the Chicago Social Hub Logo
15) Buttons and icons must be displayed evenly on your UI
16) Create the UML sequence diagram to plot the line chart
17) Create the UML design class diagram for the application
