@Vaughano Thank you!
I pushed a version out now, like the commit states it has a lot of work to be done. Especially, on mobile devices. The initial zoom on mobile is just to large to provide any instant feedback of what is happening. When zoomed out the bar is too narrow and thus cuts off the program ID. I have ideas on how to fix most of these issues but for now please let me know how it is working for everyone in case I need to troubleshooting issues I cannot foresee.
Thanks!
Update: I finally addressed the bug when first opening the preview page. Got it loading perfectly now (at least for me). For the narrow iPhone’s screen I made a small modification where I check the time range of the scheduled programs and then narrow it down if its beyond a certain range. At the very least, the program ID now properly displays inside the bar. Since the graph is moveable and zoomable it is up to the user to navigate around on the small screen to fully see the program for the day. On a larger screen this should be much easier. Also, on smaller screens I purposefully cut off the station names on the left to give more viewing space to the time ranges. I do this because 16 characters of text can take up half the width of the iPhone normally, which was way too much. This is done via @media queries on CSS so simply rotating the iPhone, for example, will change the text back to full width.
Update 2: At a later point, I want to do what Ray does with his preview and give programs unique colors to help differentiate them. I also want to stylize programs that will NOT be run due to rain delay. Lastly, I want to add master stations to the visual representation. All of these are on the to do list for a later date. I am happy I finally got this data to be more visual in nature which is more in line with the overall theme of the app. Look forward to everyone’s feedback!