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

[oflg]

@Sttot developed a very versatile visualisation library ECharts — Awesome Visualization Library for TiddlyWiki5, and I make a calendar heatmap that shows the number of Tiddlers created or edited each day using it.

Calendar heatmap can count the number of tiddlers created or modified by users this year by day.

How to use:

First install Echarts, then download and drag the following CalendarHeatmap plugin into your TiddlyWiki, and finally refresh it.

CalendarHeatmap.json (1.7 KB)

It would be nice to give Echarts a star GitHub - tiddly-gittly/tw-echarts: An All-in-one Visualization Framework for TiddlyWiki5 based on ECharts .

[telumire]

Wow this plugin is awesome ! I wanted to have a github-like heatmap for my wiki for quite some time, thanks a lot for sharing yours

EDIT: Seeing websites like ECharts — Awesome Visualization Library for TiddlyWiki5 make me really wish I knew chinese (I think ?), I’m just in awe of the work done here

This being said, deepl appears to do a fantastic job at translating.
If only there was a deepl/google translate plugin…

[Mohammad]

Superb! Thank you for sharing!

@oflg

It would be nice to give Echarts a star GitHub - tiddly-gittly/tw-echarts: An All-in-one Visualization Framework for TiddlyWiki5 based on ECharts .

I have done! It is a pity one cannot give more than one star!
It is good to give examples like this calendar heatmap, lets people how they can use Echarts!

[oflg]

haa, This is the url $:/plugins/Gk0Wk/echarts

[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”:

https://tiddlytools.com/timer.html#TiddlyTools%2FTime%2FCalendar

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 https://tiddlytools.com/timer.html#TiddlyTools%2FTime%2FInfo 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.