Components - psovea/frontend GitHub Wiki

---

Doughnut Chart documentation

These are the properties we use of the Doughnut chart:

name	type	description
labels	[string]	The labels of the data, provided by widget
data	[int]	The data shown in the chart, also provided by widget. data and labels should be of the same size.
backgroundColor	[string]	The colors of the doughnut chart pieces.
hoverBackgroundColor	[string]	The colors of the doughnut chart pieces when hovered over.

---

Bar Chart documentation

These are the properties we use of the Bar chart:

name	type	description
labels	[string]	The labels of the data, provided by widget
data	[int]	The data shown in the chart, also provided by widget. data and labels should be of the same size.
backgroundColor	string	The color of the bar.
borderColor	string	The color of the bar border.
borderWidth	int	The width of the bar border.
hoverBackgroundColor	string	The color of the bar when hovered over.
hoverBorderColor	string	The color of the bar border when hovered over.

---

The map shows a heatmap with the delays of buses, trams and subways. It also shows markers of each station. It's possible to filter on specific transport types or stations, and the time period of which you want to find the delays.

We have used the following packages for the map:

• react-leaflet

• react-leaflet-heatmap-layer

• react-leaflet-markercluster

• react-leaflet-control

---

The Feed component shows a live feed of all incoming delays, where the delay is larger than 3 minutes. To do so, the <Delay/> components connects to a socket and listens for incoming messages. For the documentation regarding the socket, check api-backend.

---

There are two tables in our application. We have one table for average delay per stop. The array is sorted on highest to lowest delays for a certain time period. The user can filter on period and district but also on how many of the highest delay the user wants to see. The second table shows average delay per line per stop. It has almost the same setting options as the first table but can also filter on transporttype.

The tables are created using react-table.

• react-table

These are the important properties of the table, for other properties check the documentation.

name	type	description
headers	[string]	The descriptions for the columns in the table.
order	[string]	The order in which the data is received. The order should match the headers of the table.
top	int	How many elements the table shows.

---