A Pre-Plugin: Colorful Graph Macro Showing Tiddler Counts

#1

Demo Graph
json import: Tiddler-Counts.json (5.7 KB)

image
image761×450 30.9 KB

This is a silly-but-useful tiddler with a macro that calculates bar widths that represent numbers of tiddlers in categories.

The categories overlap where tiddlers are shared between them.

I’m not sure I will continue it, but:

  • I was thinking it would be cool instead of having a key - to have each bar trigger its corresponding information.
  • Also, the graph portion would be cool at the top of the Advanced Search tiddler. When you click a bar, then the corresponding filter would fill the Advanced Search text area, and show the tiddlers for that category.
  • Automated incorporation of filter groups might be good.

Warning: the technique is verbose. I probably should have used more macros or procedures.

Discussion on how to improve it is very welcome.

6 Likes
#2

Nice data display! It might be nice to have it in the Control Panel → Info → Basics tab, too, as a visual representation of the information already there.

As far as additional features go, from an accessibility standpoint, it would be nice if it were easy to customize the colors used in the graph. I thought I might poke at this myself, so I took the liberty of streamlining your code a bit. Feel free to use it however you like!

Tiddler Counts.json (3.6 KB)

Edit: Here are some tweaks I made for my own use: Fancy Tiddler Counts.json (5.9 KB). I used a lot of your ideas, but it’s ultimately styled to look good in my wiki, so it may not play as well with other themes.

image
image1378×283 12.4 KB

  • Hover over one of the bars to see a subtle label on the bar + a label and tiddler count in the tooltip.
  • Click on a color swatch in the key to change the color used to represent that category. Any custom colors will get stored in an associated data tiddler. @wattahay’s colors are used by default.
  • Click on a label in the key to open the full list of tiddlers in that category in Advanced Search (with caution—this will be very slow for any filter that returns thousands of results!)
  • I also moved the graph above the key and the max-width button to the upper left corner of the graph. I switched the max-width $reveal to a popup so that opening and closing the expanded version doesn’t “dirty” the tiddler.
4 Likes
#3

Cool, this is how it looks on my wiki

图片
图片917×743 29.2 KB

As long as you got the data, you could use echarts to display the data with bar chart, like this

3 Likes
So.. what happened to h0p3?
#6

OK, I think I’m actually stopping on this for the foreseeable future, though I cleaned it up pretty good.

  • Starts Unobtrusively Collapsed
  • Dropdown for selecting grid interval
  • Key color boxes mouse click to trigger corresponding search filter
  • Full width view

Working Demo

Advance Search With Tiddler Counts.json (9.9 KB)

  1. A retitled Advanced Search tiddler (retitled for caution)
  2. The Tiddler Counts tiddler

image
image1084×1016 79.6 KB

This picture is of TiddlyWIki.com’s Tiddlers.

It is easy to see that the interesting visual value is in the middle, where it could really use zoom. That might be the last thing I do.

Probably the most valuable advice from this is not TiddlyWiki specific. Using transparency with rgb colors made it transferable between dark and light themes. Lighter backgrounds brighten the colors and the backdrop.

If one changes the title of Advanced Search, then you have to also change the navigate action in the macro to point to $:/AdvancedSearch (or get rid of it.)

1 Like
#7

Instead of modifying the $:/AdvancedSearch shadow tiddler, I suggest making your “Tiddler Counts” a separate tab within the $:/AdvancedSearch tab set.

To do this, edit your $:/help/Tiddler Counts tiddler:

  • add tag $:/tags/AdvancedSearch
  • add a caption field containing “Tiddler Counts”

You’ll also want to store your “settings” (maxwidth and interval) in $:/help/Tiddler Counts, rather than affecting the current tiddler. You can do this by adding ONE line, just after your macro definitions, and before that really big $let widget:

<$tiddler tiddler=<<thisTiddler>>>

This will make all field references (such as {{!!interval}}) point to $:/help/Tiddler Counts

enjoy,
-e

#8

Right now I’m trying to focus on consistent and reliable methods for controlling the right text formatting expression. I think it’s procedures and then the right knowledge of different quotations marks. I feel like I need help on a big level.

\define colorbox(clr)
<div style="background-color: darkblue; padding:10px;">
<div style="background-color: $clr$;">
hello world anyways
</div>
</div>
\end

<$let
missing={{{ [[$:/palette]is[missing]then[#ffffff]else[not missing]] }}}
pal={{{ [{$:/palette}get[text]stringify[]split[\n]prefix[tiddler-background:]removeprefix[tiddler-background:]] }}}
adaptive={{{ [[$:/palette]is[missing]then[gone]else<pal>] }}}
manual="#ffffff"
manual2={{{ [<colour background>] }}}
variabal=<<colour background>>
>

<$macrocall $name="colorbox" clr=<<missing>> /> <br>
<$macrocall $name="colorbox" clr=<<pal>> /> <br>
<$macrocall $name="colorbox" clr=<<adaptive>> /> <br>
<$macrocall $name="colorbox" clr=<<manual>> /> <br>
<$macrocall $name="colorbox" clr=<<manual2>> /> <br>
<$macrocall $name="colorbox" clr=<<variabal>> /> <br>
<$macrocall $name="colorbox" clr=<<colour background>> />

missing palette: <<missing>><br>
palette: <<pal>><br>
adaptive: <<adaptive>><br>
adaptive:  #ffffff<br>
manual: <<manual>><br>
manual2: <<manual2>>

</$let>

Some of these macros work in my wiki, but they don’t work in the default, fresh TiddlyWIki. No clue why.

I keep on getting literal strings when I don’t want them, like <<colour background>> instead of the value.

In the case of the “else” and “then” operators, I realize they’re about literal strings, but even when I get the right string, it won’t impact the CSS.

I have looked briefly at procedures for expression of filters in text mode, as well as the text widget, but I just don’t seem to have control over what I want yet.

I guess I’m at a place where it’s time for me to go back and unlearn and relearn some things.

#9
  • The $:/palette tiddler contains the name the currently selected palette tiddler. If the $:/palette tiddler doesn’t exist, $:/palettes/Vanilla (a shadow tiddler) is used as the default palette.
  • A palette tiddler is a Dictionary Tiddler, containing lines of “name: value” pairs.
  • For any specified palette name (e.g., “$:/palettes/Vanilla”) and color name (e.g., “tiddler-background”), you can get it’s corresponding value by using a filter, like this:
    {{{ [[$:/palettes/Vanilla]getindex[tiddler-background]] }}}
  • To get the current “tiddler-background” color, you would use a filter like this:
    {{{ [{$:/palette}is[tiddler]else[$:/palettes/Vanilla]] +[getindex[tiddler-background]] }}}
    Note the fallback to “$:/palettes/Vanilla” if the $:/palette tiddler itself or the palette name it contains doesn’t exist.
  • Palette values can be any valid CSS color definition, including:
    • 8-digit hex: #ffffffaa (where aa is an “alpha channel” value for controlling transparency)
    • 6-digit hex: #ffffff
    • 3-digit hex: #fff
    • RGB function: rgb(255,255,255)
    • RGBA function: `rgba(255,255,255,100)
    • an X11 color name (white)
  • Palette values can also contain any TiddlyWiki wikitext (most often a <<colour ...>> macro)
  • Because the <<colour ...>> macro is implemented using wikitext you need to use $wikify to get the actual CSS color value from the palette value, like this:
    <$wikify name="actualcolor" text="<<colour tiddler-background>>"

Hope this helps…

-e

1 Like
#10

That was very helpful, thank you. getindex is much better than what I had, and I did not recall what wikify was.

Additionally, I have since observed that the <<colour background>> macro was producing extra text in the CSS which included the \whitespace pragma.
<div style="background-color: \whitespace trim rgb(38, 38, 38);">

edit
OK this worked after I finally understood the wikify widget.

The crazy thing that I still don’t understand is that my personal wiki does NOT need the wikify widget in most of these cases, but the default TiddlyWIki does. It must be something I did much earlier in the wiki’s CSS.

In any case, adding the widgets doesn’t hurt.

\define colorbox(clr)
<div style="background-color: darkblue; padding:10px;">
<div style="background-color: $clr$;">
hello world anyways
</div>
</div>
\end

<$wikify name="colbg" mode="inline" type="text" text=<<colour background>> >
<$let
missing={{{ [[$:/palette]is[missing]then[#ffffff]else[pink]] }}}
pal={{{ [{$:/palette}get[text]stringify[]split[\n]prefix[tiddler-background:]removeprefix[tiddler-background:]] }}}
adaptive={{{ [[$:/palette]is[missing]then[gone]else<pal>] }}}
final={{{ [{$:/palette}is[tiddler]else[$:/palettes/Vanilla]] +[getindex[tiddler-background]] }}}
manual={{{ [<colour background>] }}}
manualwk={{{ [<colbg>] }}}
variabal=<<colbg>>
>

<$wikify name="finalwk"  text=<<final>> >
<$wikify name="adaptivewk"  text=<<adaptive>> >
<$wikify name="palwk"  text=<<pal>> >
missing:
<$macrocall $name="colorbox" clr=<<missing>> /> <br>
pal:
<$macrocall $name="colorbox" clr=<<pal>> /> <br>
palwk:
<$macrocall $name="colorbox" clr=<<palwk>> /> <br>
adaptive:
<$macrocall $name="colorbox" clr=<<adaptive>> /> <br>
adaptivewk:
<$macrocall $name="colorbox" clr=<<adaptivewk>> /> <br>
final:
<$macrocall $name="colorbox" clr=<<final>> /> <br>
finalwk:
<$macrocall $name="colorbox" clr=<<finalwk>> /> <br>
manual:
<$macrocall $name="colorbox" clr=<<manual>> /> <br>
manualwk:
<$macrocall $name="colorbox" clr=<<manualwk>> /> <br>
variabal:
<$macrocall $name="colorbox" clr=<<variabal>> /> <br>
colour macro 
<$macrocall $name="colorbox" clr=<<colour background>> /><br>
colbg:
<$macrocall $name="colorbox" clr=<<colbg>> /><br>


missing palette: <<missing>><br>
palette: <<pal>><br>
adaptive: <<adaptive>><br>
final: <<final>><br>
manual: <<manual>><br>
manualwk: <<manual2>><br>
variabal: <<variabal>><br>
colbg: <<colbg>>
macro: <<colour background>>

</$wikify>
</$wikify>
</$wikify>
</$let>
</$wikify>