SHARE YOUR FORMATTER - your `modify:` line everybody should have!

[Markus Meissner]

Just today the fmt property was introduces and even 2 lines documentation made it into the repository, BUT there is just an shameful small amount of formatters available. Now it's your turn, share your favorite modify: lines, or even better, directly put them into the right spot and make a pull-request - but if course, feel also free to share yours inside this issue:

• relevant code piece:

  flex-table-card/flex-table-card.js

  Lines 53 to 75 in 52ca1b7

   class CellFormatters { 
       constructor() { 
           this.failed = false; 
       } 
       number(data) { 
           return parseFloat(data) || null; 
       } 
       full_datetime(data) { 
           return Date.parse(data); 
       } 
       hours_passed(data) { 
           return Math.round((Date.now() - Date.parse(data)) / 36000.) / 100; 
       } 
       hours_mins_passed(data) { 
           const hourDiff = (Date.now() - Date.parse(data)); 
           //const secDiff = hourDiff / 1000; 
           const minDiff = hourDiff / 60 / 1000; 
           const hDiff = hourDiff / 3600 / 1000; 
           const hours = Math.floor(hDiff); 
           const minutes = minDiff - 60 * hours; 
           const minr = Math.floor(minutes); 
           return (!isNaN(hours) && !isNaN(minr)) ? hours + " hours " + minr + " minutes" : null; 
       } 

  I'ts really that easy, just put your modify line there, submit a PR so that your fellow homeassistant collegues will benefit from each other!
• Alternatively share it directly here, maybe someone else will introduce them on the way 👯

[illuzn]

A simple table which shows if core/ os/ supervisor/ addon updates are available (including, via HACS).

type: custom:flex-table-card
sort_by:
  - state+
  - friendly_name+
entities:
  include:
    - update.*
    - sensor.hacs
columns:
  - name: Name
    data: friendly_name
    modify: x.split(":")[0];
  - name: Update
    data: state
    modify: x.replace("on", "Yes"),x.replace("off", "No")

Result looks like this:

I would like to modify it so that the state can also replace 0 (from HACS) with "No" but it looks like modify only allows 2 modifiers for now.

Would also like to modify it so that rows with update other than No are highlighted but this cannot be done currently.

[carlywarly]

@illuzn

I too would like to highlight rows based on content, as for your states would

  - name: Update
    data: state
    modify: ( x == 1 || x == "on" ? '<div style="color:yellow;">Yes</div>' :"No")

work for you?

edited: to add colour to the text :) Highlight the cell text "Yes" in yellow.

Carl

[Veejer]

Here is a modifier that converts a value that contains seconds into a duration format (hh:mm:ss), eg: 1:23:45
I would love it if this could be a standard modifier.

modify: >-
let y = (x > 3600) ? Math.floor(x / 3600).toString() + ':' : '';
let m = (x > 60) ? Math.floor((x % 3600) / 60).toString().padStart(2, 0) + ':' : '';
let s = (x > 0) ? Math.floor((x % 3600) % 60).toString() : '';
if (m) s = s.padStart(2, 0);
y + m + s;

UPDATE: I put a separate ticket for this: #85

[ildar170975]

How to get a date in a format "DD/MM/YYYY hh:mm:ss" from a timestamp value:

    - name: last_changed
      data: last_changed
      modify: |-
        if(x.length == 0){"-"} else {
          var date = new Date(x);
          date.getDate()+"/"+
          (String(date.getMonth()+ 1).padStart(2,'0'))+"/"+
          date.getFullYear()+" "+
          String(date.getHours()).padStart(2,'0')+":"+
          String(date.getMinutes()).padStart(2,'0')+":"+
          date.getSeconds()
        }

[ildar170975]

How to create a weblink from an attribute:

    - name: object
      data: mapurl
      modify: '''<a href="'' + x + ''">Route</a>'''

[ildar170975]

How to draw batteries:

  - name: battery
    data: state
    modify: >-
      function getColor(aLevel) {
        if ((parseFloat(aLevel)||0) == 0)
          return 'brown';
        else
        {
          if (parseFloat(aLevel) <= 33)
            return 'red';
          else
          if (parseFloat(aLevel) <= 66)
            return 'rgb(250,218,67)';
          else
            return 'green';
        }
      }
      function getBatteryIcon(aLevel) {
        var icon;
        if ((parseFloat(aLevel)||0) == 0)
          icon = 'mdi:battery-alert';
        else if (aLevel == 100)
          icon = "mdi:battery";
        else if (aLevel >= 90)
          icon = "mdi:battery-90";
        else if (aLevel >= 80)
          icon = "mdi:battery-80";
        else if (aLevel >= 70)
          icon = "mdi:battery-70";
        else if (aLevel >= 60)
          icon = "mdi:battery-60";
        else if (aLevel >= 50)
          icon = "mdi:battery-50";
        else if (aLevel >= 40)
          icon = "mdi:battery-40";
        else if (aLevel >= 30)
          icon = "mdi:battery-30";
        else if (aLevel >= 20)
          icon = "mdi:battery-20";
        else if (aLevel >= 10)
          icon = "mdi:battery-10";
        else
          icon = "mdi:battery-outline";
        return (icon);
      }
      '<ha-icon icon="' + getBatteryIcon(x) + '" style="width: 20px; height: 20px; color: ' + getColor(x) + ';"></ha-icon>
      <span style="color: '+ getColor(x) +';">' + x + '%</span>'