Fast create echarts with \function and Triple backticks

#1

When developing Visualization Dashboard plugin in development, I find this fast way to create echarts chart in place:

use echarts widget with Substituted Attribute Values

  <$echarts $text=```
    option = {
    }
    ```/>

make sure to use Triple backticks https://tiddlywiki.com/#Substituted Attribute Values, so you can use $(currentTiddler)$ to use variable.

copy example

Copy from Examples - Apache ECharts

you can directly put

option = {
    series: [
// ..

inside Triple backticks

define functions

Use function to define variables for data

\function days() [{!!targetTiddler}daysbetween[]]
\function dayPercentage() [{!!targetValue}subtract<days>divide{!!targetValue}multiply[100]floor[]]
\function color() [{!!color}]
\function dateString() [{!!targetTiddler}get[endDate]] :else[{!!targetTiddler}get[startDate]] +[format:date[YYYY MMM DD]]

You can also use ${ filter expression }$ syntax inside Triple backticks, but I’m not recomment this, becuase it will make line very long, and you can’t debug by using <<varname>> to see the result.

Use variable

Usually data is inside series.data, this is for graph that only require single data

  <$echarts $text=```
  option = {
    series: [
      {
        data: [{
          value: $(dayPercentage)$,
          name: '$(days)$',

Multiple series JSON data

See Fast create echarts with \function and Triple backticks - #6 by linonetwo below

4 Likes
#2

Can’t you do so with single backticks as well? I’m sure I’ve done so. I assumed the triple backticks are so that your text could also include single ones.

#3

@linonetwo nice code pattern. I have being exploring similar uses of back tick attributes but also custom widgets to create code blocks of different kinds that can then be interpreted by a plugin or taken out to another system.

  • the key being that the resulting code generation can be somewhat automated based on values and content in my wiki.
  • this is a long term background project for me, but it stands to make tiddlywiki a platform for development, documentation, generation, training accross multiple code like echarts and other markup style solutions

Thanks for sharing this use case.

#4

That is true, I may also use single backticks for cases like this.

The text field of echarts widget is a javascript, we can use $tw.wiki javacript API, and template string (which use single backtick) in it, but I haven’t use this before, so triple backticks is an overkill here.

#5

Another way to create codeblock like this is the $$$ syntax, I think it is somehow compiled to use $text= under the hood

$$$text/vnd.tiddlywiki.mermaid
graph TD
    ReachGoal --> GetKey
    ReachGoal --> OpenDoor
    ReachGoal --> GoThroughDoor
    GetKey --> BreakBox
    GetKey --> PickUpKey
    OpenDoor --> ApproachDoor
    OpenDoor --> UseKey
$$$

P.S. anyone can contact @efurlanm to fix this issue? About $$$ usage · Issue #6 · efurlanm/mermaid-tw5 · GitHub

#6

Use \procedure and <$list widget to create multiple series of data

Data prepartion with \function

Simillar to what described above

\function dayStartDate() [daystart<weekIndex>,<dayIndex>]
\function dayEndDate() [dayend<weekIndex>,<dayIndex>]
\function hoursToday()
  [{!!targetTiddler}tagging[]field:calendarEntry[yes]] :filter[get[startDate]compare:date:gteq<dayStartDate>compare:date:lteq<dayEndDate>] +[counthours[]]
\end
\function hoursEveryDayInWeek() []
\function color() [{!!color}]

Note that hoursToday will use dayStartDate and dayEndDate as operand of compare operator, so we have to define they first using two \function .

create series

\procedure series()
<$list filter="[range[0],[3]]" variable="weekIndex">
{
  name: '{{!!targetTiddler}} {{{ [weekstart<weekIndex>format:date[YYYY MMM DD]] }}} - {{{ [weekend<weekIndex>format:date[YYYY MMM DD]] }}}',
  type: 'line',
  areaStyle: {},
  emphasis: {
    focus: 'series'
  },
  data: [
    <$list filter="[range[7]]" variable="dayIndex">
      <<hoursToday>>,
    </$list>
  ]
},
</$list>
\end

Echarts usually use multiple series, so you can use list widget with range filter operator for it. And hopefully you can use the index as operand for some operator to get data, like [weekstart<weekIndex>] and \function dayStartDate() [daystart<weekIndex>,<dayIndex>]

And Echarts accept JS style option, it allows tailing comma, so you can use <<hoursToday>>, and

  ]
},
</$list>

to create json with comma.

Wikify the result, use them in the echarts option

<$wikify name="seriesText" text=<<series>>>
    <$echarts $text=```
      option = {
        series: [
          $(seriesText)$
        ],
        title: {
          text: '${[{!!description}]}$'
        },

we can’t directly use procedure in Substituted Attribute Values, so have to wikify it. This takes extra steps and make extra indentation, so I hope it can be changed in the future #TiddlyWiki5/issues/8072.

We use wikify to run the procedure, get the final JSON text, store in seriesText variable, and render the variable using $(seriesText)$.

In this way, you can write a echarts widget invocation within a tiddler, and use JSON style data source.

#7

Have you tried to have the echarts content, that contains your variables in a separate tiddler, without wikify, and transclude that?

  • Transclusion does have the effect of effectively wikifying it.

There may also be options to define this in a variable eg; procedure and use the new transclude $variable=<<echart>>, I am not certain but its a hunch.

#8

Our many existing echarts addons are created using separate tiddler, for example https://github.com/tiddly-gittly/tw-echarts/blob/master/src/echarts/addons/Gk0Wk/TheBrain/TheBrain.ts

But that is not suitable for creating template for visualization dashboard, I want to make template tiddler self-contained in a single tiddler, so it is easier to maintain and used by plugin’s end user. Many of new users will be confused by any system that consist of multiple tiddlers.