- JavaScript
- React
- React Pivot-Table
- HTML
- CSS
Pivot Table is an opportunity for me to explore displaying primarily tabular data using HTML, CSS, and JavaScript. The data is a JSON blob of IP addresses listing bytes of traffic to and from a given address.
Primary functionality is the ability to click an IP address to create a "pivot" showing all traffic to, or from, that address. I implemented this by hand, however the library I chose can also do more robust multi-select pivots using the dropdown menus. I was also able to plugin another library allowing for more than just tables, with options ranging from heatmaps to graphs and other charts.
I chose React as a framework to allow for a quick spin-up with Create React App, and also to have an opportunity to rekindle my React knowledge. I chose AWS to deploy on because it is straightforward and easy, and has well documented methods for load balancing, not that this simple app would ever require such things.
Routing is done by hand - using URLSearchParams.get combined with the browser History API and window.onpopstate. This is actually the portion of the app I learned the most from while developing - before, I had always just used built-in routers such as React Router, Angular Router, or Vue Router without thinking twice. Unfortunately, my API decisions here means these features likely won't work on IE11.
I did not integrate any sort of CSS library such as bootstrap or materialize, because it is unnecessary for the complexity of the app.
Event handling and etc is done in vanilla JavaScript, because it's fun to keep it simple.
If I continue to work on the app in the future, my todo list will include:
- Allow the app to work with more than the hardcoded JSON I provided
- Explore backend options for other data (databases, making calls to APIs)
- Implement click-to-pivot functionality in more than just the "table" renderer
- Some styling improvements, looking at how to make the UX clearer and perhaps more beautiful
- More robust routing that includes history saved when different renderers (other than table) are selected from the drop-down, as well as when options are selected from the built-in dropdown filters.
- Unit tests.