Create graphs for the DietPi survey page

[JappeHallunken]

I was thinking about creating some nice graphs for the survey page, but it's not part of this repo.
I assume there is some script running on the web server creating the page?

Is there a chance to make this public or handle it in some way, so users can also contribute to this part of the website?

[MichaIng]

Yes here the script: https://github.com/MichaIng/DietPi/blob/dev/.meta/dietpi-survey_report

But makes sense to shift this over here. It was added as minimal data visualisation before our website got even added to GitHub. I also have a JavaScript contributed by someone with a search/filter function for the tables. Pretty nice. Adding such all all to a shell script doesn't seem reasonable. I guess we should keep a template incl. separate CSS and JavaScript here on the GitHub repo, and then somehow find a neat way to add the tables/data on our server. I do not want to use a database, but keep it simple for now, so it would need to be something like generating an HTML from a header template + CSS + JavaScript, keeping the latter here on the GitHub repo that we can pull on our server 🤔.

[JappeHallunken]

Hmm, instead of having the script generate a static HTML file, maybe it could just create a JSON file, also available at /var/www/survey/. That way, users could even fiddle with the JSON data if they want.

Then we could add a survey page to the website repo with some JS that reads the JSON and builds the graphs, charts, etc.

[MichaIng]

Seems a good idea, as long as all works with vanilla JS. It would mean another request in the chain: HTML > JS > JSON, but should not be noticable. The JSON could be prefetched via header to make things asynchronous in modern browsers.

If it leads to jumping content or slow first draw time, we could still inline the JavaScript and even the JSON at the server.