Using formulas plugin result in <$reveal widget

[tru...@gmail.com]

Hi! First time posting. I've been trying to figure this out all day, but I have to concede I won't figure it out.

My first big TW project is this personal budget calculator: https://trumad.github.io/budgetlywiki/

I'd really love to make the "Budget delta" result green when it's a positive number, and red when it's a negative number. You can see how the delta is calculated by editing the " Budget Overview" tiddler:

(= {{Income Total}} - {{Expenses Total}} =)

And you can see that the tiddlers Income Total and Expenses Total each do their own calculations before one gets subtracted from the other. For example:

(= sum([tag[Expenses]get[value]]) =)

So what I tried to do was make a new tiddler called budgetDelta which would do the delta calculation. And then use the <$reveal widget to do a "lt" calculation on the budgetDelta tiddler:

<$reveal type="lt" state="budgetDelta" text="0">
Less than 0!
</$reveal>

However, it doesn't work if the budgetDelta tiddler has the formulas syntax in it. The calculation doesn't seem to be done. It maybe coerces the actual text of the formula to a number, and then decides whether it's less than 0, because if the calculations make the delta a minus number, it still doesn't register as being under 0. So I changed budgetDelta to just a plain integer in wikitext and it worked as expected. But obviously I need it to work as a formula, which the <$reveal widget uses to decide whether the value is less than 0.

I guess maybe the formulas plugin doesn't work properly with reveal, and I should find another way. But I'm stumped.

I hope I've been making some sense here. If anyone finds a way to make the text red if the number is less than 0, I'd be very grateful. It's obviously not a huge priority; the thing works as is. But I'm keen to learn what I'm doing wrong and how i can improve my TW knowledge. Thanks!

[TW Tones]

Quick tip

If you get your number into a variable you can then use the sign operator you could then have two or three css classes defined and have a filter determine which of these three css classes to apply to the display of the number, or use the result of the sign in a list fillter, reveal widget etc...

Untested thinking here

<$set name=cssclassname filter="[<number>sign[]match[-1]then[red-bold]else[black]]">

<span class=<<cssclassname>>><<number>></span>

Tones

[tru...@gmail.com]

Ok, this might get me somewhere. I did some testing like so, but the classname is always black:

<$set name=number value=-5>

<$set name=cssclassname filter="[<<number>>sign[]match[-1]then[red-bold]else[black]]">

<span class=<<cssclassname>>><<number>></span>

</$set>
</$set>

There's also no guarantee if I go down this road that the text from the tiddler where I use formulas to make a calculation will be parsed as its resulting number, rather than just a weird string.

[Eric Shulman]

On Monday, May 10, 2021 at 11:31:07 PM UTC-7 tru...@gmail.com wrote:

Ok, this might get me somewhere. I did some testing like so, but the classname is always black:

<$set name=number value=-5>

<$set name=cssclassname filter="[<<number>>sign[]match[-1]then[red-bold]else[black]]">
<span class=<<cssclassname>>><<number>></span>

</$set>
</$set>

Use single angle brackets for variable references in filters.

Thus:

 <$set name=cssclassname filter="[<number>sign[]match[-1]then[red-bold]else[black]]">

-e

[tru...@gmail.com]

Oh silly me. That's fixed now, and it works as expected when the {{budgetDelta}} tiddler has just a number in it. As soon as I put in the formulas plugin syntax (= {{Income Total}} - {{Expenses Total}} =) it breaks. Maybe I need to find a way to do all the math using TW native functions instead. Because it seems that the variable is not stored as the numeric result of the formulas sum() function, but as the function call itself.

I uploaded a better test version of the site where you can play around with everything yourself, if someone has the time to take a look.. https://trumad.github.io/budgetlywiki/budgetDeltaRed.html - I have not added the CSS definitions yet, but you can see in the DOM that the class name remains black. (Unless you overwrite {{budgetDelta}} with a negative integer).

Maybe there is a whole different way of achieving all this than I am currently aware of. Thanks so much for your help so far.

[tru...@gmail.com]

I had a trial run of using TW's built-in math operators, hoping they could allow the result to be evaluated in a variable, but it didn't work. It's the same issue - even when it's a negative value, sign[] interprets it as a positive. Probably because it's coercing the wikitext string to a number, instead of using the number from the result?

Here's a sandbox to replicate that:

https://trumad.github.io/budgetlywiki/budgetDeltaRedNative.html

[Eric Shulman]

On Tuesday, May 11, 2021 at 8:58:04 AM UTC-7 tru...@gmail.com wrote:

I had a trial run of using TW's built-in math operators, hoping they could allow the result to be evaluated in a variable, but it didn't work. It's the same issue - even when it's a negative value, sign[] interprets it as a positive. Probably because it's coercing the wikitext string to a number, instead of using the number from the result?

Try this:

<$wikify name=number text={{budgetDelta}}>

<$set name=csscolor filter="[<number>sign[]match[-1]then[color:red;font-weight:bold]else[color:black;]]">

<span style=<<csscolor>>><<number>></span>

</$set>

</$wikify>

Notes:

1) Use $wikify instead of $set.  This allows the contents of {{budgetDelta}} to be parsed by the formula plugin rather than just retrieving the formula text

2) Set "csscolor" rather than "cssclassname".  This uses literal CSS styles rather than references to classname declarations

3) use "style=<<csscolor>> to apply the computed styles

enjoy,

-e

[tru...@gmail.com]

yes! This worked, and makes sense of the wikify widget. I had spotted it while trying to figure this out, but hadn't been sure how to use it or even if it was the thing I needed to solve this. Turns out it was.

Using style instead of class is handy for this instance. Maybe some time I'll move it out into its own stylesheet, but that's something to learn some other day!

Thanks so much everyone for your help. These changes are now reflected on https://trumad.github.io/budgetlywiki/ going forward and the project is complete, unless I come up with more improvements. Thanks!