linky-card.js

class LinkyCard extends HTMLElement {
  set hass(hass) {
    if (!this.content) {
      const card = document.createElement('ha-card');
      const link = document.createElement('link');
      link.type = 'text/css';
      link.rel = 'stylesheet';
      link.href = '/local/custom_ui/linky-card.css?v=31';
      card.appendChild(link);
      this.content = document.createElement('div');
      this.content.className = 'card';
      card.appendChild(this.content);
      this.appendChild(card);
    }

    const lastWeek = {
      2: hass.states[this.config.cons_2d],
      3: hass.states[this.config.cons_3d],
      4: hass.states[this.config.cons_4d],
      5: hass.states[this.config.cons_5d],
      6: hass.states[this.config.cons_6d]
    }

    this.content.innerHTML = `
      <div class="icon-block">
        <span class="linky-icon bigger" style="background: none, url(/local/images/linky.png) no-repeat; background-size: contain;"></span>
      </div>
      <div class="hp-hc-block">
        <span class="conso-hc">${Number.parseFloat(hass.states[this.config.hc_cons].state).toFixed(1)}</span><span class="conso-unit-hc"> ${hass.states[this.config.hc_cons].attributes.unit_of_measurement} <span class="more-unit">(en HC)</span></span><br />
        <span class="conso-hp">${Number.parseFloat(hass.states[this.config.hp_cons].state).toFixed(1)}</span><span class="conso-unit-hp"> ${hass.states[this.config.hp_cons].attributes.unit_of_measurement} <span class="more-unit">(en HP)</span></span>
      </div>
      <div class="cout-block">
        <span class="cout" title="Coût journalier">${Number.parseFloat(hass.states[this.config.daily_cost].state).toFixed(2)}</span><span class="cout-unit"> ${hass.states[this.config.daily_cost].attributes.unit_of_measurement}</span>
      </div>
      <div class="clear"></div>
      <span>
        <ul class="variations-linky right">
            <li><span class="ha-icon"><ha-icon icon="mdi:flash"></ha-icon></span>${Math.round(hass.states[this.config.hc_hp_percent].state)}<span class="unit"> ${hass.states[this.config.hc_hp_percent].attributes.unit_of_measurement} HC</span></li>
        </ul>
        <ul class="variations-linky">
            <li><span class="ha-icon"><ha-icon icon="mdi:arrow-right" style="transform: rotate(${(hass.states[this.config.monthly_cons_evol].state < 0) ? '45' : ((hass.states[this.config.monthly_cons_evol].state == 0) ? "0" : "-45")}deg)"></ha-icon></span>${Math.round(hass.states[this.config.monthly_cons_evol].state)}<span class="unit"> ${hass.states['sensor.evolution_conso_mensuelle'].attributes.unit_of_measurement}</span><span class="previous-month">par rapport au mois précédent</span></li>
        </ul>
      </span>
      <div class="week-history clear">
          ${Object.keys(lastWeek).map((day, index) => `
          <div class="day">
              <span class="dayname">${new Date((new Date().getTime()) - day*60*60*24*1000).toLocaleDateString('fr-FR', {weekday: "long"}).split(' ')[0]}</span>
              <br><span class="cons-val">${Number.parseFloat(lastWeek[day].state).toFixed(1)} ${lastWeek[day].attributes.unit_of_measurement}</span>
          </div>`).join('')}
      </div>`;
  }

  setConfig(config) {
    if (!config.cons_6d || !config.cons_2d || !config.cons_3d || !config.cons_4d || !config.cons_5d || !config.hp_cons || !config.hc_cons || !config.hc_hp_percent || !config.daily_cost || !config.monthly_cons_evol) {
      throw new Error('Please define entities');
    }
    this.config = config;
  }

  // @TODO: This requires more intelligent logic
  getCardSize() {
    return 3;
  }
}

customElements.define('linky-card', LinkyCard);