Realtime Push

This component changes the color values of an element that contains a numeric value.

When the background color flashes, it shows that the value has changed. The flash color shows if the value changed to positive or negative in comparison to the previous value. This background changes will called push update.

In addition, the numerical value itself is displayed in different colors depending on whether the numerical value is positive (>0), neutral (==0) or negative (<0). This color changes will called state update.

How to use

You need the class .realtime-push and the data attribute data-sg-realtime-push.

If you only want to push a single value, than the following code works for you.

<span class="realtime-push" data-sg-realtime-push>123</span>

If you want, that the background push animation includes other texts, you can change the position of the data attribute. In the following example, the numeric value and the € symbol will contain in the push animation. But only the numeric value gets the font color state updates.

<span class="realtime-push">
  <span data-sg-realtime-push>123</span>
  <span class="font-color-black">€</span>
</span>

Their are two different ways to trigger the styles updates. First directly change the numeric value with your own code and the element.textContent = "123" native JS method. This only works, if you also add the data-sg-realtime-push-start-listener="true" in addition to the data-sg-realtime-push attribute.

<span class="realtime-push">
  <span data-sg-realtime-push data-sg-realtime-push-start-listener="true">123</span>
  <span class="font-color-black">€</span>
</span>
<script>
  window.styleGuideCallbacks = window.styleGuideCallbacks || [];
  window.styleGuideCallbacks.push(() => {
    const realtimePush = document.querySelector('.realtime-push');
    const pushElement = realtimePush.querySelector('[data-sg-realtime-push]');
    let num = parseInt(pushElement.textContent);
    setInterval(() => {
      num += 1;
      pushElement.textContent = num.toString();
    }, 2000);
  });
</script>

Alternative, you can call a helper function from the RealtimePushHandler class:

/**
 * A external programme can update the current value of a realtime push.
 * @param realtimePush reference to the element with the `.realtime-push` class
 * @param value the new value that will add to the data attribute and trigger the new styles
 * @param [print=false] if the boolean is set, the new value will also printed to the HTML text node
 */
styleGuide.realtimePushHandler.updateValue(realtimePush: RealtimePush, value: number | string, print: false): void;

The following code shows, how to use the updateValue() function:

<span class="realtime-push">
  <span data-sg-realtime-push>123</span>
  <span class="font-color-black">€</span>
</span>
<script>
  window.styleGuideCallbacks = window.styleGuideCallbacks || [];
  window.styleGuideCallbacks.push(() => {
    const realtimePush = document.querySelector('.realtime-push');
    const pushElement = realtimePush.querySelector('[data-sg-realtime-push]');
    let num = parseInt(pushElement.textContent);
    setInterval(() => {
      num += 1;
      styleGuide.realtimePushHandler.updateValue(realtimePush, num, true);
    }, 2000);
  });
</script>

Their are some additional data attribute to set special handling:

data-sg-realtime-push-no-state-update this will prevent the styles to add state updates
data-sg-realtime-push-no-push-update this will prevent the styles to add push updates

Theme basic Screen size XL

html