Habits/Summaries - add chart view

[dwertheimer]

I am starting to track things like daily calories: @calories(xxx) and weight @weight(yyy) in my daily note.

I would love to be able to click to see a pretty graph of this data over time in an HTML popup. thinking that we can maybe use a library to draw simple line charts. https://www.chartjs.org/docs/latest/getting-started/

For now, I see this as most easily invoked via x-callback so you can specify the tag(s) you want in the chart, and the time frame to graph. For simplicity, I think we just pull it from the web like we do in Mermaid.

https://www.chartjs.org/docs/latest/getting-started/

Thoughts?

[jgclark]

I've been wanting to have this as well, but have been waylaid with Dashboard rearchitecting first.

I think we should have a call to talk through architecture options. There's the generate-and-embed-in-note approach, or the HTMLWindow approach. Perhaps others too ...

[dwertheimer]

BTW, it would be especially cool to track calories and weight on the same chart with two axes.

[dwertheimer]

Some use cases for me: Basic Line chart of data - e.g. @weight(xxx) over the period A to B Line chart with multiple lines - e.g. @carbs() @fats() @protein() showing trends over various days Dual-axis line chart - e.g. @weight() on one axis and @calories() on the other - days being the x axis

In terms of output, 1) I am thinking for starters, it's just a transient pop-up that renders the data in an HTML window based on an xcallback 2) We could render and place in the note, but I wouldn't use that because i don't want heavy images lying around in all my daily notes. I can see the value though in having a chart that could stick around for posterity (e.g. here was my monthly progress from May)

[jgclark]

If you haven't already, try out the weeklyStatsToCSV command having updated settings for @weight, @carbs, @calories etc. (See README for where it writes to.) I spent many hours yesterday improving and fixing date logic in it (which lives in jgclark.Summaries::forCharting.js) hoping that it will be useful.

[jgclark]

OK, I think my requirements are similar to yours. But here's some more detail:

Location: charts produced in either temporary window or saved-into-note form.

Data sets for charts:

1. single line chart covering multiple data sets, with all data sets auto-scaled (so scale not shown). Actual data points available on hover, or optionally always shown.
2. multiple line charts each with a single (shown) scale for 1+ data sets. Actual data points available on hover.
   • ideally data set colours stay same across multiple runs, even if the number of data sets in a chart changes. Implies being able to user-define them.

Data duration: user-settable number of weeks (default 23) of months (default 12) shown

Generation triggered by /command or x-callback.

[jgclark]

So, next challenge is to agree a way to define chart(s). Options that occur to me are:

1. In JSON, so it can be passed to x-callback?
2. In YAML files that live as NP notes. (Assumes YAML handling and display improves in time in NP editor.) These notes are referenced in x-callback calls.
3. In JSON code blocks that live in an NP note. These blocks are referenced in x-callback calls.

[dwertheimer]

@jgclark maybe now it's time to talk this through. One (maybe crazy) idea is (for a first step), to put the full chart.JS code in a codeblock in a note whose title is included in the xcallback. The codeblock references a data object that is populated by the plugin at runtime. This is definitely not naïve user-friendly, but might be a good way to prototype various charts and play around with it to see what applications are worth hard coding into the plug-in. Happy to discuss live if u want to suggest some times