Using HWInfo logs can be really useful to diagnose problems in your hardware. But a .csv file isn't the most human-readable thing and neither is loading it in Excel or LibreOffice Calc.
In this post, I'm going to talk more about LogCharts, a tool I made to make HWInfo logs visualization more human-friendly.
Here's what you will see:
- The Problem
- The Solution
- The Implementation
- Hosting and Analytics
- The Result
- What I learn from all this
The Problem
You just downloaded HWInfo to find out how your computer hardware behaves and why it behaves the way it does.
You noticed that opening HWInfo just collects the min, max, current and average data. But you need something that shows the data over time.
You discover that HWInfo has a log feature that exports a .csv file containing all the sensor data that were collected between when you activated the feature and deactivated it.
You open the .csv file and this is what it looks like:
It has what you need but you can't exactly interpret it, right? You decide to load it into a table and it looks like this:
It's getting better. Now you can sort, filter and things like that. But what about the relationship between your data and time? It's kinda hard to analyse it through a table, isn't it?
The Solution
What if it was possible to load the .csv and generate line charts showing how your data spreads over time?
That's what LogCharts does. Now, you can see logs the way they are meant to be seen. And with some nice additions like the tooltip and the brush.
Since you may want to compare data from different sensors, you can create as many lines as you want and select which data they will show while assigning colours to them.
The Implementation
I made this project when I was learning the web development basics: HTML, CSS and JavaScript. It feels like ages back to the time when I developed it so I don't remember all the details, unfortunately.
I do remember that I made some poor decisions that made the code harder to maintain. At the time, I thought: "I have an HTML page. I'm gonna create lots of JS files to manipulate this HTML page and lots of style files to style it. And that's it".
Some time ago I needed to get back to the code to fix a bug and it took me some time to understand where the things were and what I should change to fix the bug.
This helped me learn how componentization helps isolate things and how valuable this is.
Hosting and Analytics
After years of hosting LogCharts on GitHub pages, I got curious to see how many people were using it. For this, I needed an analytics solution that GitHub Pages doesn't provide.
After searching for options, I opted for Cloudflare Web Analytics. It doesn't have the cookie banner thing that I find pretty annoying while also working nicely and being easy to deploy.
It helped me find that LogCharts has nearly 280 monthly visits! It ain't much but it's honest work.
I also used the project to learn Docker. I created a Dockerfile that runs an NGNIX server that serves LogCharts static files. Someone even created an issue asking me for a docker-compose file which was nice.
The Result
You can check LogCharts here. And its source code here.
What I learned from all this
- How to use D3.js to create interactive line charts
- How to work with .csv files
- How to deploy a project to GitHub Pages and Cloudflare
- How to create a GitHub Action
- How to use ESBuild to create bundles for production
- How to use Docker in a project
- How componentization can increase maintainability in a project
Top comments (0)