custom-cards / stack-in-card

🛠 group multiple cards into one card without the borders
MIT License
262 stars 24 forks source link

Top card within the stack not being displayed #24

Open kaizersoje opened 3 years ago

kaizersoje commented 3 years ago

Checklist:

Release with the issue: 0.2.0

Last working release (if known):

Browser and Operating System: Chrome Version 89.0.4389.82

Description of problem:

The top apexcharts card is not being displayed and only the bottom table is displayed. I have noticed the same problem with another card instance where the top card is not displayed. Screenshot1

- type: custom:stack-in-card
  cards:

    - type: custom:apexcharts-card
      config_templates:
        - 250px_chart
        - stepline_chart
      apex_config:
        yaxis:
          - show: true
            decimalsInFloat: 0
            min: 0
            max: 60
            tickAmount: 6
          - show: false
            decimalsInFloat: 0
            min: 0
            max: 60
            tickAmount: 6
          - show: false
            decimalsInFloat: 0
            min: 0
            max: 60
            tickAmount: 6
          - show: false
            decimalsInFloat: 0
            min: 0
            max: 60
            tickAmount: 6
          - show: true
            decimalsInFloat: 0
            opposite: true
            min: 0
            max: 1
            tickAmount: 1
      all_series_config:
        unit: Mbps
      header:
        show: true
        show_states: true
        title: Internet Performance (Last 3 days)
      graph_span: 3d
      y_axis_precision: 0
      color_list: ['#983da1','DARKKHAKI','Plum','LightSeaGreen','lightgray']
      series:
        - entity: sensor.speedtest_download
        - entity: sensor.speedtest_upload
        - entity: sensor.stat_speedtest_download
          name: Mean Download
          show:
            in_header: false
        - entity: sensor.stat_speedtest_upload
          name: Mean Upload
          show:
            in_header: false
        - entity: binary_sensor.evening_time
          transform: "return x === 'on' ? 1 : 0;"
          curve: stepline
          type: area
          opacity: 0.2
          unit: ' '
          show:
            in_header: false

    - type: custom:flex-table-card
      card_mod:
        style: |
          .card-header {
            padding-top: 5px !important;
            padding-bottom: 5px !important;
          }
          table {
            padding-top: 0px !important;
          }
      entities:
        - sensor.stat_speedtest_download
        - sensor.stat_speedtest_upload
      columns:
        - data: friendly_name
          name: Entity
        - data: mean
          name: Mean
        - data: median
          name: Median
        - data: min_value
          name: Min
        - data: max_value
          name: Max
        - data: standard_deviation
          name: Std Dev.
        - data: change
          name: Change

If I change the card from stack-in-card to vertical-stack-in-card, then both the cards are shown.

- type: custom:vertical-stack-in-card
  cards:

    - type: custom:apexcharts-card
      config_templates:
        - 250px_chart
        - stepline_chart
      apex_config:
        yaxis:
          - show: true
            decimalsInFloat: 0
            min: 0
            max: 60
            tickAmount: 6
          - show: false
            decimalsInFloat: 0
            min: 0
            max: 60
            tickAmount: 6
          - show: false
            decimalsInFloat: 0
            min: 0
            max: 60
            tickAmount: 6
          - show: false
            decimalsInFloat: 0
            min: 0
            max: 60
            tickAmount: 6
          - show: true
            decimalsInFloat: 0
            opposite: true
            min: 0
            max: 1
            tickAmount: 1
      all_series_config:
        unit: Mbps
      header:
        show: true
        show_states: true
        title: Internet Performance (Last 3 days)
      graph_span: 3d
      y_axis_precision: 0
      color_list: ['#983da1','DARKKHAKI','Plum','LightSeaGreen','lightgray']
      series:
        - entity: sensor.speedtest_download
        - entity: sensor.speedtest_upload
        - entity: sensor.stat_speedtest_download
          name: Mean Download
          show:
            in_header: false
        - entity: sensor.stat_speedtest_upload
          name: Mean Upload
          show:
            in_header: false
        - entity: binary_sensor.evening_time
          transform: "return x === 'on' ? 1 : 0;"
          curve: stepline
          type: area
          opacity: 0.2
          unit: ' '
          show:
            in_header: false

    - type: custom:flex-table-card
      card_mod:
        style: |
          .card-header {
            padding-top: 5px !important;
            padding-bottom: 5px !important;
          }
          table {
            padding-top: 0px !important;
          }
      entities:
        - sensor.stat_speedtest_download
        - sensor.stat_speedtest_upload
      columns:
        - data: friendly_name
          name: Entity
        - data: mean
          name: Mean
        - data: median
          name: Median
        - data: min_value
          name: Min
        - data: max_value
          name: Max
        - data: standard_deviation
          name: Std Dev.
        - data: change
          name: Change

This is how it should look like. Screenshot2

Javascript errors shown in the web inspector (if applicable):

Additional information: