ECharts v0.1.0 - GitHub HeatMap + Focused Tiddler LiveMap

echarts v0.1.0 Released!

  • Fixed some known issues, such as ObserverLimit.
  • Upgrading echarts core version to v5.4.1.
  • Improved performance, refactored with TypeScript.
  • Updated TheBrain addon with better looking style, support for displaying transclude tiddlers, mouse hover over node to show tiddler content.
  • Added GitHub heatmap addon to view your annual writing history.

Powered by Modern.TiddlyDev, a flexible and powerful TiddlyWiki development framework.


GitHub HeatMap:

<div style="max-width: 800px; height: 200px; margin: 0 auto;">
<$echarts $tiddler="$:/plugins/Gk0Wk/echarts/addons/GitHubHeatMap.js" $width="100%" $height="100%" />
</div>


Focusing Map:

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

And you need to install focused-tiddler plugin or horizon plugin in CPL or below if you need The Focusing Map.

$__plugins_Gk0Wk_focused-tiddler.json (5.3 KB)

7 Likes

I have really enjoyed the echarts plugin, thank you for your efforts!

1 Like

v0.1.3

Support SSR(server side render) so that you can export static HTML tiddler or using headless render method such as $tw.wiki.renderText for tiddlers contains <$echarts>!

But notice that you must decide the exact size of chart with $width and $height in px.


Also solved the problem of invalid parameter settings such as $height.


As well as making the Focused Map look better, non-existent tiddlers will be connected with dashed lines.

5 Likes

Wonderful! A great job!

Thank you @Sttot

1 Like

Works very well also on light themes

Have just dragged this across to my wiki but the Brain just shows a blank.

$:/plugins/Gk0Wk/echarts/Snippets/TheBrain tiddler for example shows nothing. Checked on tiddlywiki.com.

I’m probably missing something obvious…

Stephen

Nevermind…it seems to be working…not sure what I’ve changed!

Uh, you should , I guess that, install the echarts plugin first and try it after refreshing the page.

I think it’s because I was using the multicolumn layout!
I was hoping I could have the brain view in one column and it change depending on whatever I was viewing else where, but I guess multicolumn does strange things with current-tiddler?

off topic…
I usually like the side bar closed so I was exploring other options. A layout/ ensemble/ toggle button to change fixed and fluid sidebar or just thin to fat sidebar would do the job. Or one of those two sidebar themes! Have to go and find! Had a try with @saqimtiaz float experiment (float+test.json (15.7 KB)) but that doesn’t seem to work on my wiki. Some plugin clash or other I guess!

Hi @Ste_W

you can use the Brain with the multi-column layout… there are only some lines of additional wikitext needed because the multi-column layout uses multiple history lists

If you’re interested I’ll post the code here

kind regards,
Simon

2 Likes

I am also interested in using echarts Brain with MCL

Definetly!
That would be most awsome.

Ok, my version doesn’t work when scrolling tiddlers into view, it only works when focusing tiddlers using MCL’s keyboard shortcuts…

This is the “Brain” version for MCL:

<$let currentColumn={{$:/columns!!active-column}} currentHistoryList={{{ [[$:/HistoryList-]addsuffix<currentColumn>!match[$:/HistoryList-]!match[$:/HistoryList-1]] ~[[$:/HistoryList]] }}}>

<$set name="focussedTitle" value={{{ [<currentHistoryList>get[current-tiddler]] }}}>

<$echarts $tiddler="$:/plugins/Gk0Wk/echarts/addons/TheBrain.js" aliasField="caption" levels=2 focussedTiddler=<<focussedTitle>> graphTitle="Graph" height="700px" />

</$set>

</$let>

best wishes,
Simon

2 Likes

I added "height=“700px” but it doesn’t do anything. I’ll have to look into the docs ^^

Add @saqimtiaz’s Streams compatibility to TheBrain in 4 steps (note: there are probably better ways to accomplish this, using the get-stream-root[] and get-stream-nodes[] filters, but TheBrain is in javascript and I am not great at leveraging WikiText filters from javascript).

step 1 in $:/core/modules/wiki.js add the following two functions:

/*
Return an array of tiddler titles that are directly linked from the specified tiddler or
from any of the Streams nodes tied to the specified tiddler
*/
exports.getStreamLinks = function(title) {
	var self = this;
	var results = [];
		
	// Parse the tiddler first, then worry about the subordinate Stream nodes
	var parser = self.parseTiddler(title);
	if(parser) {

		//deduplicate as we push returned array element into the results array
		for (var element of self.extractLinks(parser.tree)) {
			if (results.indexOf(element) == -1) { //not already present
				results.push(element);
			}
		}
	}
	
	//examine the "stream-*" fields
	var tiddler = self.getTiddler(title); //work from the tiddler title, to access fields
	if(tiddler && tiddler.fields["stream-list"] && tiddler.fields["stream-type"]) {
		
		//turn the stream-list into array of tiddler titles
		var streamList = $tw.utils.parseStringArray(tiddler.fields["stream-list"]);

		for (var node of streamList) { //for each tiddler title in stream list, recurse
			
			//deduplicate as we push returned array item into the results array
			for (var item of self.getStreamLinks(node)) {
				if (results.indexOf(item) == -1) { //not already present
					results.push(item);
				}
			}
		}
	}
	
	return results;
};
/*
Return an array of tiddler titles that link to the specified tiddler
*/
exports.getStreamBacklinks = function(targetTitle) {
	var self = this,
		backlinksIndexer = this.getIndexer("BacklinksIndexer"),
		backlinks = backlinksIndexer && backlinksIndexer.lookup(targetTitle),
		ancestorList = [];

	if(!backlinks) {
		backlinks = [];
		this.forEachTiddler(function(title,tiddler) {
			var links = self.getTiddlerLinks(title);
			if(links.indexOf(targetTitle) !== -1) {
				backlinks.push(title);
			}
		});
	}

	backlinks.forEach(function (title, index) {

		var ancestors = [];
		var tiddler = self.getTiddler(title); 
		if(tiddler && tiddler.fields["parent"] && tiddler.fields["stream-type"]) {
			var parentTiddler = tiddler;
			while(parentTiddler) {
				ancestors.unshift(parentTiddler.fields.title);
				if(parentTiddler.fields.parent) {	
					parentTiddler = self.getTiddler(parentTiddler.fields.parent);
				} else {
					break;
				}
			}
		} else {
			ancestors.unshift(title);
		}
		ancestorList.push(ancestors[0]);
	});	

	return ancestorList;

};

step 2 in $:/plugins/Gk0Wk/echarts/addons/TheBrain.js, replace getTiddlerLinks with the new function getStreamLinks

step 3 in $:/plugins/Gk0Wk/echarts/addons/TheBrain.js, replace getTiddlerBacklinks with the new function getStreamBacklinks

step 4 replace the content of $:/plugins/Gk0Wk/echarts/addons/TheBrainPopup with <h3><$text text=<<currentTiddler>> /></h3><$transclude tiddler="$:/plugins/sq/streams/templates/stream-root-template" mode="inline" />

2 Likes

You can acturally release that code as a new addon plugin!

I am not sure about the mods to core wiki.js… probably would need to extract that out.
Will give it a try…

I think you can create a new file $:/plugins/Gk0Wk/echarts/addons/TheBrain4Stream.js or something, and add getStreamLinks and getStreamBacklinks in that file instead?

So you don’t need to change the wiki.js in the echarts plugin.

And you can use Gatha Gatha Plugin: Beta Release - Create and Distribute Tiddlywiki Plugins - #94 by linonetwo to pack it as a plugin.

Could this heatmap be developed into a more modular plugin? For example, opening an interface allows me to easily input other types of data and display it.