ApexCharts code review

[andrewgoz]

My ApexCharts plugin is just about ready. It's available on my wiki:

http://www.scss.com.au/family/andrew/tiddlywiki/

My recent issues implementing it have been resolved. Some preliminary feedback included:

• JavaScript parsing - this is still present, simply because I need it, however, the plugin now defaults to JSON parsing
• Dictionary data tiddler support - I've created procedures that convert dictionary data tiddlers into chart data sources
• Widget attribute support for some common chart settings (type, title, width, height)

This has been achieved by allowing the widget to accept an array of chart options structures and merge them down to a single structure for charting.

I'm hoping that some people better at TiddlyWiki stuff than me could have a look at this and see if there is anything I could be doing better. There's only two things - the widget code tiddler, and the procedures tiddler.

Thanks!

[pmario]

We had some discussion about the module function wrapper. It actually is redundant. So you can safely remove it. In the future it should be removed from all core code too.

(function(){
...
})();

[pmario]

Just an info, that may be handy
I forgot to mention, where you can find the deepMerge equivalents, that are part of the core. There are 3 $tw.utils.xx functions.

• .extend(object /* [, src] */ ) ... which modifies the input object and "extends" it with optionally several input objects, which is handy.
• .extendDeepCopy(object,extendedProperties) ... returns an exteded copy of an object. Input can be an object from .extend()
  • .deepCopy(object) ... helper which returns a new copy of the object

https://github.com/Jermolene/TiddlyWiki5/blob/6c67dc82356355234292da4b0034c4019c0e0fb8/core/modules/utils/utils.js#L256

https://github.com/Jermolene/TiddlyWiki5/blob/6c67dc82356355234292da4b0034c4019c0e0fb8/core/modules/utils/utils.js#L267

https://github.com/Jermolene/TiddlyWiki5/blob/6c67dc82356355234292da4b0034c4019c0e0fb8/core/modules/utils/utils.js#L285

If you search the TW code for $tw.utils.extend( you'll find examples how to use it.
It seems .extendDeepCopy() has never been used in the core. See lines: 1959, 1961

https://github.com/Jermolene/TiddlyWiki5/blob/6c67dc82356355234292da4b0034c4019c0e0fb8/boot/boot.js#L1956-L1962

[pmario]

I think .extend(obj, a, b, c) Should simplify your code too.

[andrewgoz]

The issue with these functions is that they aren't performing a merge. For example, extendDeepCopy is replacing properties at

https://github.com/Jermolene/TiddlyWiki5/blob/6c67dc82356355234292da4b0034c4019c0e0fb8/core/modules/utils/utils.js#L276

extend() is similar.

[pmario]

The biggest problem I do have is the security aspect. Use alert("got you") for any of your parameters and you are screwed!

[andrewgoz]

I had globally enabled JavaScript parsing for my wiki because so many of the demo charts I was putting into the wiki needed JS to work.

There are many reasons why ApexChart is using JS.

• Date parsing
• Value reformatting
• Click handling
• ... I'm sure there are more ...

I'm working through these issues trying to replace the JavaScript with something else. For example, where the sample ApexChart options had new Date("9 Aug 2023").getTime(), I've created a macro <<ApexChartParseDate "9 Aug 2023">> that is the equivalent (it's not yet in the plugin). (Aside: I was hoping TiddlyWiki already had something suitable, but I haven't found anything, yet)

I'm also planning to look at how the <$button> widget works with a view to implementing click handlers.

For the moment, the JavaScript parsing option has to remain as there are no alternatives. I have, however, removed the option of changing the default parsing to JavaScript. It's now locked to JSON, but the checkbox enabling per-widget overriding (defaulting to off) remains.

[andrewgoz]

The plugin has now reached a major milestone - no JavaScript parsing. Everything is in JSON!

There still needs to be some manual review to support more of the JavaScript callbacks (each one has to be specially supported).

There is no custom click handling action - all click handlers are a "navigate to tiddler".

Over the coming days I plan to "TiddlyWiki-fy" as many of the example ApexCharts charts as possible. The idea is to build a good reference for how to use the plugin with TiddlyWiki, and to make sure I'm supporting the various callbacks correctly.

I expect to release "officially" when that is complete.

Enjoy!

[pmario]

I only did have a look at 1 example: http://www.scss.com.au/family/andrew/tiddlywiki/#ApexChart%20Line%20Test and tried to insert alert("hi") ... No "luck" . I'm happy about that ;)

I did open the tiddler and saw, that there is some JSON encoded data. It may be possible to use plain text JSON here, for better readability. If only the JSON parser is used it should have no implications on security.

I'll have a closer look when I do have time. -- Good Work -- I like it.

Over the coming days I plan to "TiddlyWiki-fy" as many of the example ApexCharts charts as possible. The idea is to build a good reference for how to use the plugin with TiddlyWiki, and to make sure I'm supporting the various callbacks correctly.

I think there is room for improvement, with the data-structure. -- But you'll see it, when you prepare the examples.

[andrewgoz]

Trying to do "v=[<config>jsonget[series],<seriesIndex>,[data],<dataPointIndex>,[x]] results in broken JSON - the variable references become element tags. I don't see a way to mix plain text with tag-like filter variables and still have widgets and macros work. I tried to implement a DOM tree walk to find the tags and convert them back to their equivalent plain text before the JSON parsing, but couldn't get that to work. I may try again sometime, unless someone has a clever suggestion.

[andrewgoz]

The latest update has an improved DOM tree walk that allows filter variables to be used without ampersand escapes - provided you aren't using two widgets(charts) in the same tiddler. I tend to put each chart into its own tiddler anyway, so it's a bit of a minor issue. I'll have a closer look sometime to see what's going on.