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

[daringer]

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>'

[teskanoo]

Here's one I'm using with Environment Canada integration for a daily forecast:

  - name: ' '
    align: left
    icon: mdi:weather-cloudy-clock
    data: forecast
    modify: >-
      function getWeatherData(condition) {
          /*console.log('condition', condition);*/
          var weather_data = {
              sunny: {
                  name: 'Sunny',
                  colour: 'yellow',
                  icon: 'mdi:weather-sunny',
              },
              cloudy: {
                  name: 'Cloudy',
                  colour: 'CadetBlue',
                  icon: 'mdi:weather-cloudy',
              },
              fog: {
                  name: 'Foggy',
                  colour: 'Gainsboro',
                  icon: 'mdi:weather-fog',
              },
              hail: {
                  name: 'Hail',
                  colour: 'SlateGray',
                  icon: 'mdi:weather-hail',
              },
              partlycloudy: {
                  name: 'Partly Cloudy',
                  colour: 'LightSlateGray',
                  icon: 'mdi:weather-partly-cloudy',
              },
              partlyrainy: {
                  name: 'Partly Rainy',
                  colour: 'CornflowerBlue',
                  icon: 'mdi:weather-partly-rainy',
              },
              partlysnowy: {
                  name: 'Partly Snowy',
                  colour: 'LightCyan',
                  icon: 'mdi:weather-partly-snowy',
              },
              rainy: {
                  name: 'Rainy',
                  colour: 'RoyalBlue',
                  icon: 'mdi:weather-rainy',
              },
              snowy: {
                  name: 'snowy',
                  colour: 'PowderBlue',
                  icon: 'mdi:weather-snowy',
              },
              windy: {
                  name: 'windy',
                  colour: '',
                  icon: 'mdi:weather-windy',
              },
              _undefined: {
                  name: 'undefined',
                  colour: '',
                  icon: 'mdi:alert',
              },
              _unknown: {
                  name: condition,
                  colour: 'Red',
                  icon: 'mdi:help',
              },
          };
          if (undefined === condition) {
              return weather_data._undefined;
          } else if (condition in weather_data) {
              return weather_data[condition];
          } else {
              return weather_data._unknown;
          }
      }
      function getName(condition) {
          return getWeatherData(condition).name;
      }
      function getColor(condition) {
          return getWeatherData(condition).colour;
      }
      function getIcon(condition) {
        return getWeatherData(condition).icon;
      }
      function getPrecipitationProbability(probability) {
        if(undefined === probability){
          return ' ';
        }
        if(0 === probability){
          return ' ';
        }
        else{
          return probability + '%';
        }
      }
      '<ha-icon icon="' + getIcon(x.condition) + '" style="width: 20px; height: 20px; color: ' + getColor(x.condition) +';"></ha-icon>' +
      ' <span style="font-size:0.75rem;color:'+getColor(x.condition)+';display:inline-block;width:30px;">' + getPrecipitationProbability(x.precipitation_probability) + '</span>'+
      ' <span>' + getName(x.condition) + '</span>'

[JeffCrum1]

Using the Anniversaries (https://github.com/pinkywafer/Anniversaries) integration for a list of birthdays ...

This gives name, birthdate (month and day), current age, and days until their next birthday.

      - type: custom:flex-table-card
        title: Birthdays
        entities:
          include: sensor.anniversary_*bday
        sort_by: friendly_name+
        columns:
          - name: Name
            data: friendly_name
            modify: x.replace(' BDay', '')
          - name: Birthdate
            data: date
            modify: >-
              var date = new Date(x);
              const months = ['January ','February ','March ','April ','May ','June ','July ','August ','September ','October ','November ','December '];
              months[date.getMonth()] + String(date.getDate())
          - name: Age
            data: current_years
            align: right
          - name: Days
            data: state
            align: right

[AleXSR700]

modify: x.replace("on", "Yes"),x.replace("off", "No")

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.

If I am not mistaken the second x.replace should be simply attached to the first like
modify: x.replace("eQ-3 ", "").replace(" Climate", "")

So replace the ,x. with ..
This will replace both string partials and I think you can add as many as you like.
At least I was able to just add more like
modify: x.replace("eQ-3 ", "").replace(" Climate", "").replace("Living", "")