Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Top card within the stack not being displayed #24

Open
2 tasks done
kaizersoje opened this issue Mar 13, 2021 · 0 comments
Open
2 tasks done

Top card within the stack not being displayed #24

kaizersoje opened this issue Mar 13, 2021 · 0 comments
Labels
bug Something isn't working

Comments

@kaizersoje
Copy link

Checklist:

  • I updated to the latest version available
  • I cleared the cache of my browser

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:

@kaizersoje kaizersoje added the bug Something isn't working label Mar 13, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant