SHARE YOUR FORMATTER - your `modify:` line everybody should have!
daringer opened this issue · comments
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
- Alternatively share it directly here, maybe someone else will introduce them on the way
👯
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.
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
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
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()
}
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>'