CenHud Outage Trends v3 is the successor to CenHud Outage Trends v1/v2. Over the course of a couple of weeks, I completely refactored the codebase so it’s object-oriented, being the first project with class inheritance.
With a major backend refactor, I took the time to improve the frontend. Bootstrap 5 provided the groundwork for a very minimal, no-frills UX with all the same features as v2. Much of the rendering work is done on the backend, the only thing the frontend does is render the graph.
With v3.1, I wrote a basic but powerful API to interface directly with trend data and the raw database.
—
Work is ongoing to switch CenHud Outage Trends to a new outage provider, and I updated the site to Bootstrap 5.2 recently. I’ll be capturing new photos to show the updates soon.
—
Lines of code: ~750
Languages: Python, HTML, CSS, JavaScript
Frameworks: Flask, Bootstrap 5, Google Charts
Timeframe: Ongoing since May 2021
—
You can visit this project at chtrends.owenthe.dev.
The main homepage for CenHud Outage Trends. Bootstrap 5 provides a very down-to-earth, no frills UI here that I really enjoy.
The top box shows the current number of customers out and outages, along with when the data was last updated. An automatic updating system (new to v3) shows when the page will update next.
The next two boxes are the actual trends, at 1, 3, 6, and 12 hour intervals.
The final box is the records that occurred in the last 72 hours, with server-side code to point out if the latest datapoint was a new record.
The middle of the page contains the actual graph. There’s options to switch the graph type (as was present in Version 2).
CenHud Outage Trends will remember what graph type was selected through a refresh. This is cleverly done via query parameters & URL bar modification, requiring no local storage or cookies to work.
When the page starts getting narrow, the legend on the graph is automatically hidden. This greatly improves usability on mobile, increasing the graph area by ~40% compared to v2.
The bottom of the page contains information about CenHud Outage Trends, the link to the source code repository, and a link to view the CenHud Outage Trends API documentation.
A small snippet of the CenHud Outage Trends API docs. Compared to the last API that I did (the Snow Day API), I made sure not to go overboard with the methods.