Improving Report’s UI

4.3.2024 – In my previous blog update, I’ve been focused on refining the charts report. While the chart portion is nearly complete, there are still some adjustments needed for the timeline feature. This feature allows users to choose between yearly, monthly, and daily views via a convenient dropdown menu. The UI’s idea was achieved after discussing with Mr Peter on what would be more practical for the users. Previously, I only made both UI and the API to only read and return yearly and monthly.

In the yearly view, users can see charts displaying total data for each year. Monthly view shows data specific to the selected year, while the daily view breaks down record on a day-to-day basis for the chosen month. I made the timeline dropdown refreshes automatically upon clicking a button. 

Additionally, I aimed to enhance chart responsiveness by enabling zoom and panning functionality. Thankfully, implementing this feature was straightforward, thanks to LiveCharts’ comprehensive documentation. While most aspects fell into place smoothly, there were some areas that required trial and error to achieve the desired outcomes. For instance, configuring one chart to display data upon hovering and omitting the y-axis label took some experimentation with existing properties.

Towards the end of the week, a few touch-ups were still needed, but I committed to the code first and will continue to improve both the UI and the code.

Leave a Reply