Apply specific style when value changes

[jfvilleforceix]

Hello,
Is there any way to get an event listener when the value of a gauge changes from previous ? For exemple, I have a parameter which is a boolean, and I would like to apply a specific style when the value changes from 0 to 1. With g3.indicateStyle().trigger it is not possible as filtering is only on value, not on value evolution.

Thank you for your help

[patricksurry]

Do you want the style to persist after the value changes, i.e. not just disappear again immediately?

If that's the case you can use a closure to remember the last value so that your trigger function can check the change. Something like (untested):

<script>
prevValue = None;
...
g3.panel() ... 
    g3.indicateStyle().trigger((v) => {
         out = v == 1 && prevValue == 0 ? 1: 0;
         prevValue = v;
         return out;
     }

[jfvilleforceix]

I tried so :

const temporaryBox = () => {
  let prevValue = null;

  return v => {
    const out = (v === 1 && prevValue === 0); // ? 1 : 0;
    prevValue = v;
    return out;
  };
};

const rect = g3.element('rect', {width: 150, height: 37}).style('stroke: #FFF; stroke-width: 3');
g.append(g3.indicateStyle().trigger(temporaryBox).styleOn({"animation": "show10s 10s forwards", "stroke-opacity": 1}).styleOff({"animation": null}).append(rect));

where show10s is a @Keyframes

but when initiating the gauge, the box is still displayed even if input value for gauge is 0. If I add stroke-opacity: 0 to rect style, it won't display in any case.

[patricksurry]

i don't think that's what you want. it adds a trigger function that ignores its argument and returns a function. I was meaning something like this. i.e. you still need a function that takes the metric and returns 0 or 1, but you track prev value with external state.

  let prevValue = null;

  functIon mytrigger(v) {
    const out = (v === 1 && prevValue === 0); // ? 1 : 0;
    prevValue = v;
    return out;
  };

const rect = g3.element('rect', {width: 150, height: 37}).style('stroke: #FFF; stroke-width: 3');
g.append(g3.indicateStyle().trigger(myTrigger).styleOn({"animation": "show10s 10s forwards", "stroke-opacity": 1}).styleOff({"animation": null}).append(rect));

[jfvilleforceix]

Hello, thank you for your answer. The problem remains because when I simulate the data input, the rect is displayed even if the value is 0. I tried to use only the ? 1 : 0 but then, the rect disappears as soon as the data is reloaded (with panel.interval value).
Here is my current code :

        let prevValue = 0;
        function temporaryBox(v) {
          console.log("mode :", mode, "value: ", v, "prevValue: ", prevValue)
          const out = (v === 1 && prevValue === 0) ? 1 : 0;
          prevValue = v;
          return out;
        }
        const rect = g3.element('rect', {width: 150, height: 37, x: -350, y: 5}).class('fma-engage-box');
        g.append(g3.indicateStyle().trigger(temporaryBox).styleOn({"animation": "show10s 10s forwards", "stroke-opacity": 1}).styleOff({"animation": null}).append(rect));
      

and css :

.fma-engage-box {
    stroke: #FFF;
    stroke-width: 3;
    animation: show10s 2s forwards
}

As you see, I tried to differentiate the initial css animation from the styleOnbut when it is always displayed with 2s delay, never 10s.

[patricksurry]

This sounds like the same problem we talked about in #12

I think the trigger function is OK but d3 doesn't seem to like interpolating between a style containing an animation and one without. I'd try what's suggested over there, which is to have the animation present all the time and just use the styleOn/Off to control the opacity or stroke opacity (a property that isn't animated). Or just wrap the always-animated thing in another g3.put (an svg group) and put the indicateStyle on the grouping object so you can make it disappear while the thing inside continues its animation.