Proposal for a simple graph card

[coasting24]

View:

      - type: custom:button-card
        template: custom_card_graph
        variables:
          hc_card_graph_name: Temperature #"[[[ return states['sensor.whatever'].attributes.friendly_name ]]]"
          hc_card_graph_icon: mdi:thermometer
          hc_card_graph_entity1: sensor.outside_temperature
          hc_card_graph_labelunit: °C
          hc_card_graph_type: line # line|bar|false
          hc_card_graph_fill: fade # true|false|fade
          hc_card_graph_color1: var(--color-gold)
          hc_card_graph_line_width: 2

Template:

custom_card_graph:
  variables:
    hc_card_graph_background:
    hc_card_graph_name: "[[[ return entity.attributes.friendly_name; ]]]"
    hc_card_graph_icon:  "[[[ return entity.attributes.icon; ]]]"
    hc_card_graph_color1: "var(--color-gold)"
    hc_card_graph_labelunit: ""
    hc_card_graph_entity2: ""
    hc_card_graph_color2: "var(--rosewater)"
    hc_card_graph_type: "fill"
    hc_card_graph_hours: 24
    hc_card_graph_group_by: "interval"
    hc_card_graph_line_width: 5
    hc_card_graph_icon_color: ""
    hc_card_graph_points: "0.5"

  triggers_update:
    - "[[[ return variables.hc_card_graph_entity2; ]]]"
  show_icon: true
  icon: "[[[ return variables.hc_card_graph_icon; ]]]"
  show_state: false
  name: "[[[ return variables.hc_card_graph_name; ]]]"
  aspect_ratio: 2/1
  tap_action:
    action: more-info
  styles:
    card:
      - background: "[[[ return variables.hc_card_graph_background; ]]]"
      - padding: 15px
    grid:
      - grid-template-areas: '"i n" "label label" "graph graph"'
      - grid-template-columns: min-content 1fr
      - grid-template-rows: min-content 1fr 1fr
#      - row-gap: 0.8rem
      - column-gap: 0.8rem
    icon:
      - width: 100%
      - padding: 0
      - color: var(--color-gold)
      - opacity: 0.8
    img_cell:
      - width: 1rem
      - height: 1.5rem
      - padding: 0
    name:
      - font-size: 0.9rem
      - color: var(--color-gold)
      - justify-self: start
      - opacity: 0.8
      - font-weight: 400
      - font-family: montserrat
    custom_fields:
      state:
        - align-self: end
        - justify-self: start
      label:
        - align-self: start
        - justify-self: start
      graph:  
        - align-self: center
        - justify-self: stretch

  custom_fields:

    label:
      card:
        type: custom:button-card
        name: "[[[ return states[variables.hc_card_graph_entity1].state; ]]]"
        label: "[[[ return variables.hc_card_graph_labelunit; ]]]"
        show_label: true
        styles:
          grid:
            - grid-template-areas: '"n l"'
            - grid-template-rows: min-content
          name:
            - padding: 0 0 0 0
            - margin: 0 0 0 0
            - font-size: 2.5rem
            - font-family: montserrat
            - font-weight: 600
            - justify-self: start
            - align-self: start
          label:
            - align-self: center
            - padding-left: 5px
            - justify-self: start
            - font-size: 0.9rem
          card:
            - background: none
            - box-shadow: none

    graph:
      card:
        type: "custom:mini-graph-card"
        entities: >
          [[[
            var entity = [];
            entity.push(variables.hc_card_graph_entity1);
            if(variables.hc_card_graph_entity2 != "")
              entity.push(variables.hc_card_graph_entity2);
            return entity;
          ]]]
        line_color: >
          [[[
            var color = [];
            color.push(variables.hc_card_graph_color1);
            if(variables.hc_card_graph_color2 != "")
              color.push(variables.hc_card_graph_color2);
            return color;
          ]]]
        show:
          name: false
          icon: false
          legend: false
          state: false
          graph: "[[[ return variables.hc_card_graph_type; ]]]"
          fill: "[[[ return variables.hc_card_graph_fill; ]]]"
        hours_to_show: "[[[ return variables.hc_card_graph_hours; ]]]"
        points_per_hour: "[[[ return variables.hc_card_graph_points; ]]]"
        group_by: "[[[ return variables.hc_card_graph_group_by; ]]]"
        line_width: "[[[ return variables.hc_card_graph_line_width; ]]]"
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
              --ha-card-border-width: 0;
            }