Power Icon

base:
  aspect_ratio: 1/1
  show_state: true
  show_icon: false
  state:
    - value: 'on'
      styles:
        card: [background-color: 'rgba(255, 255, 255, 0.8)']
        name: [color: 'rgba(0, 0, 0, 0.6)']
        state: [color: 'rgba(0, 0, 0, 0.6)']
  tap_action:
    action: toggle
    haptic: light
  styles:
    custom_fields:
      circle:
        [
          top: 8.5%,
          left: 52%,
          width: 3.5vw,
          position: absolute,
          letter-spacing: 0.03vw,
        ]

sensor:
  template: ['base']
  custom_fields:
    circle: >
      [[[
        const power = states['sensor.' + entity.entity_id.split('.')[1] + '_power'].state;
        if (power <= 10) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#f72403" d="M85.81,37H69.69V12.85H85.81m1.35-4H83.79v-4H71.7v4H68.34a2.68,2.68,0,0,0-2.68,2.68V42.41a2.69,2.69,0,0,0,2.68,2.68H87.16a2.68,2.68,0,0,0,2.68-2.68V11.5A2.69,2.69,0,0,0,87.16,8.82Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 20) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#a13f2a" d="M85.75,35h-16V13h16m1.34-4H83.75V5h-12V9H68.41a2.66,2.66,0,0,0-2.66,2.66V42.34A2.67,2.67,0,0,0,68.41,45H87.09a2.66,2.66,0,0,0,2.66-2.66V11.66A2.67,2.67,0,0,0,87.09,9Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 30) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#f96602" d="M85.74,31H69.61V12.84H85.74m1.35-4H83.72v-4H71.63v4H68.26a2.68,2.68,0,0,0-2.68,2.68V42.4a2.69,2.69,0,0,0,2.68,2.68H87.09a2.68,2.68,0,0,0,2.68-2.68V11.49A2.69,2.69,0,0,0,87.09,8.81Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 40) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#fa9801" d="M85.86,29H69.71V12.85H85.86m1.36-4H83.84v-4H71.73v4H68.35a2.69,2.69,0,0,0-2.68,2.69v31a2.7,2.7,0,0,0,2.68,2.69H87.22a2.69,2.69,0,0,0,2.68-2.69v-31A2.7,2.7,0,0,0,87.22,8.81Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 50) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#fccc00" d="M85.78,27H69.62V12.85H85.78m1.35-4H83.76v-4H71.64v4H68.27a2.7,2.7,0,0,0-2.69,2.69v31a2.71,2.71,0,0,0,2.69,2.69H87.13a2.69,2.69,0,0,0,2.69-2.69v-31A2.7,2.7,0,0,0,87.13,8.81Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 60) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#fffb00" d="M85.7,25.05h-16V13h16M87,9H83.69V5h-12V9H68.33a2.66,2.66,0,0,0-2.66,2.67V42.42a2.67,2.67,0,0,0,2.66,2.66H87a2.66,2.66,0,0,0,2.66-2.66V11.7A2.67,2.67,0,0,0,87,9Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 70) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#ccfa00" d="M85.82,20.9H69.7V12.84H85.82m1.35-4H83.81v-4H71.71v4H68.35a2.68,2.68,0,0,0-2.68,2.68V42.4a2.69,2.69,0,0,0,2.68,2.68H87.17a2.68,2.68,0,0,0,2.68-2.68V11.49A2.69,2.69,0,0,0,87.17,8.81Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 80) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#99fa00" d="M85.74,18.88H69.61v-6H85.74m1.35-4H83.72v-4H71.63v4H68.26a2.68,2.68,0,0,0-2.68,2.68V42.4a2.69,2.69,0,0,0,2.68,2.68H87.09a2.68,2.68,0,0,0,2.68-2.68V11.49A2.69,2.69,0,0,0,87.09,8.81Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 90) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#65f902" d="M85.82,16.87H69.7v-4H85.82m1.35-4H83.81v-4H71.71v4H68.35a2.68,2.68,0,0,0-2.68,2.68V42.4a2.69,2.69,0,0,0,2.68,2.68H87.17a2.68,2.68,0,0,0,2.68-2.68V11.49A2.69,2.69,0,0,0,87.17,8.81Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
        if (power <= 100) {
          return `
            <svg viewBox="0 0 100 50">
              <path fill="#4af900" d="M87.09,8.81H83.72v-4H71.63v4H68.26a2.68,2.68,0,0,0-2.68,2.68V42.4a2.69,2.69,0,0,0,2.68,2.68H87.09a2.68,2.68,0,0,0,2.68-2.68V11.49A2.69,2.69,0,0,0,87.09,8.81Z" />
              <text x="37%" y="75%" fill="#8d8e90" font-size="16" text-anchor="middle" alignment-baseline="middle">${power}%</text>
            </svg>
          `;
        }
      ]]]