[Feature Request] Format an attribute based on its value

[thorschtn]

I use the Flex-Table to display a connection overview of the next three train connections including possible delays.

I'm looking for a way to format the delay depending on the value: 0..4 min - green 5..9 min - yellow 10 .. min - red

Is that already possible?

[ghost]

Do you mean something like so?

If yes you can do it like so: Just make multiple if statements to cover green/yellow red and it should work nicely.

  - type: 'custom:flex-table-card'
    title: Continuous return
    clickable: false
    entities:
      include: sensor.foobar

    columns:
      - name: Time frame
        data: continuous_return
        modify: x.time_frame

      - name: Return
        data: continuous_return
        modify: >-
          const color = (!isNaN(x.return) && Number(x.return) > 0) ? 'green' : 'red';
          '<span style="color:' + color + ';">' + x.return + '%</span>'

[bcordix]

I am trying to color change the color of the temp column but have the threshold depend on the type. How would i access the type data being used in the next column?

      - type: 'custom:flex-table-card'
        title: 'Disk Temp'
        entities:
          include: sensor.drive_temperature*
        columns:
          - data: Drive
            icon: mdi:harddisk
          - name: Temp
            data: state
            modify: >-
              const color = ((!isNaN(x) && String(x.Type) == 'hdd' && Number(x) < 100) || (!isNaN(x) && String(x.Type) == 'ssd' && Number(x) < 130)) ? 'green' : 'red';
              '<span style="color:' + color + ';">' + x + '°F</span>'
          - name: Type
            data: Type

[daringer]

mmmh, tough one, I believe this currently might not be possible, #32 is addressing this

[Haldyz]

Please tell me, what I'm doing wrong for battery levels? My intention is to show battery level above 10% in green and bellow 10% in red.

type: custom:flex-table-card
title: Stav baterie v Xiaomi BT teploměrech
sort_by: state+
entities:
  include:
    - sensor.*battery*
  exclude:
    - sensor.domov*
    - sensor.mi_9_se_teplota_baterie
columns:
  - name: Teploměr
    data: name

  - name: Baterie
#    icon: mdi:battery-bluetooth-variant
#    suffix: ' %'
    data: state
    modify: >-
      const color = (!isNaN(x.state) && Number(x.state) > 10) ? 'green' : 'red';
      '<span style="color:' + color + ';">' + x.state + '%</span>' 
#    multi_delimiter: ','

Without Modify its working fine

[ildar170975]

I'm doing wrong for battery levels?

Probably you should use x instead of x.state.

Once I made this test example which seems to work fine:

    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';
        }
      }
      '<span style="color:' + getColor(x) + ';">' + x + '%</span>'

[ildar170975]

@daringer Seems that sort_by option cannot handle these "colored values" properly?

A possible workaround could be adding the same column WITHOUT colouring, sort by this column and then hide it:

sort_by: id_battery_raw+
columns:
  - id: id_battery_raw
    data: state
    hidden: true
  - name: battery
    data: state
    modify: |-
      ...

[Haldyz]

thank you very much, its working fine with this update sorting update :-)