Check out your TiddlyWiki usage for this year with the calendar heat map before the New Year!

[linonetwo]

Simple widget call <$echarts $tiddler="$:/plugins/Gk0Wk/echarts/addons/oflg/CalendarHeatmap.js" $height="150px" /> will make it work. Very elegant.

Let me show off mine:

[oflg]

I (and two friends who specialize in SM algorithms) are combining Echarts and the Fishing memory plugin to make 3D forgetting curve chart and new algorithm, and there should be a big update next year.

[telumire]

I tested it in my wiki with all plugins disabled (v5.2.0) and it didnt work (I get this error message : "TypeError: setting getter-only property “parentNode”).

On the other hand a wiki in version 5.2.1 works without any problem

[Mohammad]

I assume we could be able to create knowledge graph from connected tiddlers like Examples - Apache ECharts

Or

Is there any tutorial/docs for Echars-TW5 plugin?

[Sttot]

Sure! It’s coming soon with English documentation. Now you can use some translation tools to read this:

https://tiddly-gittly.github.io/tw-echarts/

[EricShulman]

For a different take on a year-at-a-glance “heat map”, give this a try: TiddlyTools/Time/Calendar

Note: TiddlyTools Calendar is NOT a plugin… it’s a single tiddler, written entirely in wikitext using TWCore widgets and custom macros. Since there’s no custom Javascript code, you can drag the title of the tiddler and drop it in any TW (e.g., https://TiddlyWiki.com) and immediately see a calendar for that TW.

In addition to showing “tiddler changes” (created/modified), the Calendar also shows journals, alarms, timers, events, and timelines. Click on the Calendar settings button (gear icon) to choose which items to show. See TiddlyTools/Time/Info for instructions.

enjoy,
-e

[CodaCoder]

Confession: I’m thinking, a calendar as a heat map? That’s a bit of a stretch. And I’ve seen this tool from Eric mentioned more than a few times and promised myself I’d take a look. So today’s the day I took a look.

Result? It’s by no means a stretch – in fact, it’s better than a trad heat map. Why?

Almost zero cognitive overload trying to figure out what’s what. Some of those diags up-thread may be pretty and (no doubt) pretty clever, but Eric’s tool nails the problem directly using a familiar (did I mention zero cognitive overload?) calendar-based UI telling me exactly what I want to know. No learning curve to speak of, no on ramp, just voila!

But it’s not all glowing praise – yet. @EricShulman do you intend on trying $eventcatcher? That’s a lot of $button rendering in that UI which I’m sure could be optimized for speed (it’s pretty slow to render here, slowing down the whole wiki when open). A lot of $wikify widgets too, but I have no generic solution for that, sometimes you just have to use it.

[EricShulman]

@CodaCoder

But it’s not all glowing praise – yet. @EricShulman do you intend on trying $eventcatcher? That’s a lot of $button rendering in that UI which I’m sure could be optimized for speed (it’s pretty slow to render here, slowing down the whole wiki when open).

I’m curious as to your thinking… how do you envision that using $eventcatcher instead of $button could result in a significant performance improvement?

[CodaCoder]

Following @saqimtiaz’s advice (found here) I tried rewriting a single $list that generated hundreds of $buttons and converted them <span> elements – another to <a> elements. I was quite astonished at the difference. I’m talking about the kind of delay that causes a “Hmm – that’s slow” being entirely eradicated.

@saqimtiaz

Eventcatcher and really long lists
When dealing with very long lists, using the $eventcatcher widget can help to vastly simplify the widget tree and improve both render and refresh performance.

Also, in a comment further into the thread…

Some thoughts on performance

In TiddlyWiki if you think you need $button widgets, it is because you want to be able to click on something to invoke actions. As an example imagine a long list generated by a $list widget that creates a button for each list item: <$list filter="...."> <$button tag="div" class="myclass" actions=<<myactions>> /> </$list> Alternatively you can do something along these lines, which tells the $eventcatcher to listen for clicks inside DIVs with the class “myclass” and invoke actions in response. …

[TW_Tones]

Eric,

I already had TiddlyTools/Time/Calendar installed and at your prompting reviewed my key tiddlywiki;

Certainly I have used imy wiki most days, since creation in March. Thanks for the tools.

[EricShulman]

You might want to update TiddlyTools/Time/Calendar (just drag-and-drop a fresh copy directly from It's About Time! — TiddlyTools: "Small Tools for Big Ideas!" (tm)). Some of the new features:

• added handling for displaying scheduled alerts, timers, and journals
• replaced the date background color with a “color bar” that shows all the relevant colors for different types of events, alerts, timers and journals.
• code optimizations for improved event processing performance

[oflg]

It looks very good. It’s more detailed and interactive than this heat map I sent out.

Just as telumire said, it is github-like heatmap.

[oflg]

This site is very useful, I used it a few months ago and it helped me.

[Offray]

Thanks a lot! This looks pretty cool. There is anyway to change the year? Or to have calendars for several years in the same Tiddler? I’m looking at $:/plugins/Gk0Wk/echarts/addons/oflg/CalendarHeatmap.js and I see:

function getData(year) {
  year = new Date().getFullYear();

but seems that year is hard coded. How could I change the code so the year is the current one by default, but parameterizable? Any JS connoisseur that can help us with that?

TIA

[oflg]

You can add field year with 2021 to tiddler $:/plugins/Gk0Wk/echarts/addons/oflg/CalendarHeatmap.js, then replace new Date().getFullYear() with Number($tw.wiki.filterTiddlers("[{$:/plugins/Gk0Wk/echarts/addons/oflg/CalendarHeatmap.js!!year}]")[0]).

Note: There are two replacements required.

[Offray]

Thanks a lot. It’s working pretty well and now I have a sense of how several of our wikis behaved last year:

In future iterations I would like to make the calendar heatmap to use a parameter, so I can see historical editions on several years, in a single tiddler, with just a macro. Something like <<calendarHeatmap 2021>> or <<calendarHeatmap 2020>> and get the proper year overview.

Ps: Sorry for my late reply. I tested your suggestion soon, but I was unable to report back until now.

[oflg]

I will improve it with your suggestions

[Offray]

Recently, I was pointing to this forum and the software/community behind as a non FOMO inducing social software, in contrast with all instant messaging apps (WhatsApp, Telegram, Discord, Matrix, Slack, etc). We were talking about that in the context of how is becoming more and more difficult to keep focus in a distracting world (and talking about the books of Cal Newport about that). Being able to focus on other stuff, revive old threads and finding gentle answers like yours is a probe of how we still can build pleasant constructive talk in the web.

Thanks a lot.

[oflg]

I have updated the calendar heat map, and now its year can be changed by <$echarts $tiddler="$:/plugins/Gk0Wk/echarts/addons/oflg/CalendarHeatmap/CalendarHeatmap.js" $height="180px" year="2021"/>. It can be referenced by writing a custom << >> macro.

You can download the updated calendar heat map here. (it is included in the echarts plug-in and is being updated in PR)

$__plugins_Gk0Wk_echarts.json (1.1 MB)

[oflg]

In addition, in this update, the heat map can be clicked to show the corresponding tiddlers.