Upcoming Electricity Rates

[StephenMilner]

I noticed in the screenshots for this project the upcoming electricity rates.

I am in the UK, my tariff is Agile Octopus, I use the bottlecapdave octopus-energy HACS integration and using the HA Lovelace HACS integration to display the upcoming rates in a tile : https://github.com/lozzd/octopus-energy-rates-card

I'd like to be able to do the same for Tailboard as shown - The display looks very similar.

Please could someone give me an example entry for config.js?

[alphasixtyfive]

I'm afraid I have not been using it for a while as I'm on Octopus Go tariff at the moment. My config is a bit of a mess and relies on functions and variables stored in various files:

function $$(tileObject, merge) {
   if(merge instanceof Array) {
      merge = {position: merge};
   }

   var copy = mergeObjects({}, tileObject);

   return mergeObjects(copy, merge);
}

  {
         title: 'Octopus',
         bg: 'images/bg2.png',
         icon: 'mdi-flash',
         tileSize: 180,
         groups: [
            {
               title: 'Electricity rates',
               width: 4,
               height: 2.5,
               items: [
                  $$(TILES.AGILE_CURRENT_RATE, [0, 0]),
                  $$(TILES.AGILE_NEXT_RATE, [1, 0]),
                  $$(TILES.AGILE_MIN_UPCOMING_RATE, [2, 0]),
                  $$(TILES.AGILE_AVG_RATE_TODAY, [3, 0]),
               ].concat([1, 2, 3, 4].map(function (col, i) {
                  var rows = 12;
                  var entity = 'sensor.agile_upcoming_rates';
                  var getItem = function(ctx, index) {
                     return ctx.states[entity].attributes.results[index] || false;
                  }

                  return $$(TILE_CONFIGS.AGILE_RATES_LIST, {
                     id: entity,
                     position:[i, 1],
                     list: Array(rows).fill(null).map(function(row, j) {
                        return {
                            icon: function() {
                                 var rate = getItem(this, j + rows * i).value_inc_vat;
                                 return rate === undefined ? '' : (rate <= 0 ? 'mdi-circle-box' : (rate < 13 ? 'mdi-arrow-down-box' : (rate < 18 ? 'mdi-checkbox-blank' : 'mdi-arrow-up-box')));
                            },
                            title: function() {
                               var item = getItem(this, j + rows * i);
                               return item ? (formatTime(item.valid_from) + ' - ' + formatTime(item.valid_to)) : '-';
                            },
                            value: function() {
                               var rate = getItem(this, j + rows * i).value_inc_vat;
                               return rate === undefined ? '' : parseFloat(rate).toFixed(2) + 'p';
                            }
                        }
                    })
                  });
               }))
            },
            {
               title: 'Consumption',
               width: 2,
               height: 2.5,
               items: [
                  $$(TILES.ELECTRICITY_CONSUMPTION_YESTERDAY, [0, 0]),
                  $$(TILES.GAS_CONSUMPTION_YESTERDAY, [1, 0]),
                  $$(TILES.CARBON_INTENSITY_LIST, [0, 1])
               ]
            }, 
         ]
      }

var TILE_CONFIGS = {
   AGILE_RATE_GAUGE: {
      type: TYPES.GAUGE,
      settings: {
         size: 160,
         type: 'arch',
         min: 0,
         max: 35,
         cap: 'butt',
         thick: 8,
         append: 'p',
         thresholds: {
             5: { color: 'rgb(55, 180, 0)'},
             12: {color: 'rgb(255, 192, 0)'},
             25: { color: 'rgb(243, 23, 0)' }
         },
     },
     classes: ['-agile-gauge'],
     history: {}
   }
};

var TILES = {
    AGILE_CURRENT_RATE: $$(TILE_CONFIGS.AGILE_RATE_GAUGE, {
        title: 'Current rate',
        id: 'sensor.agile_current_rate',
        state: function() {
            return [
                'valid_from',
                'valid_to'
            ].map(function(attr) {
                var date = this.parseFieldValue('&sensor.agile_current_rate.attributes.' + attr);
                return formatTime(date);
            }, this).join(' - ');
        }
    }),

    AGILE_NEXT_RATE: $$(TILE_CONFIGS.AGILE_RATE_GAUGE, {
        title: 'Next rate',
        id: 'sensor.agile_next_rate',
        state: function() {
            return [
                'valid_from',
                'valid_to'
            ].map(function(attr) {
                var date = this.parseFieldValue('&sensor.agile_next_rate.attributes.' + attr);
                return formatTime(date);
            }, this).join(' - ');
        }
    }),

    AGILE_MIN_UPCOMING_RATE: $$(TILE_CONFIGS.AGILE_RATE_GAUGE, {
        title: 'Min upcoming rate',
        id: 'sensor.agile_min_upcoming_rate',
        state: function() {
            return [
                'valid_from',
                'valid_to'
            ].map(function(attr) {
                var date = this.parseFieldValue('&sensor.agile_min_upcoming_rate.attributes.' + attr);
                return formatTime(date);
            }, this).join(' - ');
        }
    }),

    AGILE_AVG_RATE_TODAY: $$(TILE_CONFIGS.AGILE_RATE_GAUGE, {
        type: TYPES.GAUGE,
        title: 'Today\'s average rate',
        id: 'sensor.agile_avg_rate_today',
        state: false
    })
};

.-agile-rates .item-list--name .mdi-arrow-up-box {
    color: rgb(243, 23, 0);
}

.-agile-rates .item-list--name .mdi-checkbox-blank {
    color: rgb(255, 192, 0);
}

.-agile-rates .item-list--name .mdi-arrow-down-box {
    color: rgb(55, 180, 0);
}

.-agile-rates .item-list--name .mdi-circle-box {
    color: rgb(82, 127, 250);
}

.-agile-gauge .item-gauge {
    padding-top: 20px;
}

[StephenMilner]

I'm slowly getting my head around this, and as Tailboard is relatively new to me and I've not got JS in my reportoire of programming languages it's taking a bit of time.

I'm trying to find the reference for this line...

return $$(TILE_CONFIGS.AGILE_RATES_LIST, {

Have you got this definition somewhere by any chance?

[StephenMilner]

I've worked out that the AGILE_RATES_LIST is a TEXT_LIST and that makes sense.

My Octopus Agile has the following entity created by HACS integration:

sensor.octopus_energy_electricity_xxxxxxx_current_rate

This entity has several attributes including a rates array attribute, and each item in the array has, for example, a rate (including date times from and to etc.)

I'm having difficulty displaying the data tin the TEXT_LIST as I can't seem to reference the rate value.

Looking at this:

var getItem = function(ctx, index) { return ctx.states[entity].attributes.results[index] || false; }

What should I be setting entity to?
sensor.octopus_energy_electricity_xxxxxxx_current_rate?

and should I reference the rates array like this:

ctx.states[entity].attributes.rates[index]

edit: these two setting work now that I have put an id: entity in the block that I was missing.

[alphasixtyfive]

I'm sorry, I have not used HACS integration (it was not even available when I was doing it). I was using Octopus API directly:

https://github.com/alphasixtyfive/home-assistant-configs/blob/main/octopus_energy_agile.yaml

[StephenMilner]

I’ve managed to get what I want thanks. I would still like to see your AGILE_RATES_LIST definition if possible. Your tile looks much prettier than mine.

[alphasixtyfive]

It is just that, the rest is assigned dynamically in a loop:

   AGILE_RATES_LIST: {
      type: TYPES.TEXT_LIST,
      width: 1,
      height: 1.55,
      state: false,
      title: '',
      classes: ['-agile-rates']
   }