Help to develop a js widget

Developers
#1

I would like to display interactive figures generated by R package htmlwidgets into Tiddlywiki.

Following the tutorial, I can create a Widget to reproduce all html and load the required the js libraries, but still cannot display the figure.

I create a minimal example here to show my problem. Hope I can explain what I want to do.

After downloading all files from Github repo, I plan to reproduce the figure in the temp.html file into htmlwidgets.html.

image
image1328×694 33.1 KB

Not sure how htmlwidgets is working in javascript level. My guess is javascript is called according to div class echarts4r html-widget.

I start to develop the widget using Gatha in the single html file htmlwidgets.html.

The new widget htmlwidgets is called in the tiddler GettingStarted and test

In GettingStarted, I get an error

Uncaught ReferenceError: echarts is not defined`

In test, there are no figures to display.

I have no idea how to solve it now.

Thanks for any suggestions.

#2

This is a complicated application to get started with!

Your temp.html is static html , often js libraries will wait until the html has been loaded and then scan the html for domnodes with classes used by the library and then replace those domnodes with the html/domnodes that it creates - this general happens once.

tiddlywiki is dynamic html it continually adds and removes domnodes from the dom.
When using included libraries in tiddlywiki, generally, it is necessary to create the application’s js objects thru a call to the library’s js api, and not created and add domnodes (with the libraries classes) to the dom.

Also js libraries sometime need to be added to the ‘head’ section of the dom, this is achieved by added a ‘$:/tags/RawMarkup’ tag to the tiddler containing the library.

3 Likes
#3

Thanks for your reply. It sounds my target is too complicated.

#4

Would the e-charts plugin hit the spot?
https://tiddly-gittly.github.io/tw-echarts/

#5

I have done a few investigations.

  • Add tag $:/tags/RawMarkup to echarts-en.min.js. NOT working
  • Directly add script by src or source codesinto htmlwidgets.html (i.e. TW single html file). Working as expected.

After comparing generated html, I noticed TW wraps all js into one extra function.

(function(module,exports,console,setInterval,clearInterval,setTimeout,clearTimeout,Buffer,$tw,require) {(function(){
// original javascripts

;})();
return exports;
})

Consequently, object echarts cannot be found by other scripts.

It seems I have to reexport all functions in echarts-en.min.js to global scope.

Any ideas?

#6

I solved this problem with codes below

if($tw.browser) {
  if(typeof window !== 'undefined' && typeof window.echarts !== 'function') {
      window.echarts = echarts ;
  }
}