[FR] Display graphs in opposite Z-order: the last entity = bottommost, the 1st entity = topmost

[JCHH2]

Hi,

It appears to me that the lines are drawn in the order of the entities listed. This means the last entity is drawn over the others. I would request that there is the capability to make the last entity listed (the top drawn one) to be the main entity shown (for state etc at the top of the card).

Hope this makes sense!

[ildar170975]

Sorry, let me clarify. Consider this example:

type: custom:mini-graph-card
entities:
  - entity: sensor.mijia_300_1_temperature
    color: blue
    show_state: true
    name: Temp
  - entity: sensor.mijia_300_1_co2
    color: red
    show_state: true
    y_axis: secondary
    name: Humidity

Here the 1st entity's state is on the left side. If you add more entities - then 2nd, 3rd ... entities will be on the right side. So, here entities are placed accordingly to their order (1st - left, others - in the right).

As for order of filling - unclear what color is on the top since colors are semi-transparent. To know it - let's use some card-mod to remove transparency:

card_mod:
  style: |
    .fill {
      fill: white;
      opacity: 1 !important;
    }

which gives this: So, the order is same as above - but gives an opposite result.

Here we probably should display graphs in opposite order. Agree?

[ghost]

Hi,

I am not sure what point you are trying to make. Are you agreeing with my request or telling me it is not necessary or something else?

If you add more entities - then 2nd, 3rd ... entities will be on the right side.

yes, if you specify y_axis: secondary I am not using y_axis: secondary in my scenario

This is my min-graph

I would like the coloured line (outside temp) to be drawn over the two black lines (highest inside, coolest inside). I seem to be able to only do this by making it the 3rd entity, but then the 1st entity is the one shown in the top-left corner.

here is my yaml:

  - type: custom:mini-graph-card
    name: 'Outside'
    show:
      state: true
      name: true
      icon: false
      extrema: true
    height: 300
    entities:
      - entity: sensor.outside_temp
        state_adaptive_color: true
        show_fill: false
        name: Outside
        show_state: true
        show_points: true
        show_legend: false
      - entity: sensor.hottest_temp
        name: Hottest inside
        show_state: false
        show_fill: false
        color: var(--paper-card-background-color)
        show_points: false
        show_legend: false
      - entity: sensor.coolest_temp
        color: var(--paper-card-background-color)
        name: Coolest inside
        show_state: false
        show_fill: false
        show_points: false
        show_legend: false
    hour24: true
    hours_to_show: 48
    lower_bound: 12 #"{{ states('sensor.coolest_inside_temp_48_hrs') }}" # templates not supported
    upper_bound: 35 #"{{ states('sensor.hottest_inside_temp_48_hrs') }}" # templates not supported
    points_per_hour: 4
    color_thresholds:
      - value: -10
        color: '#000fff' # Blue
      - from: 3
        color: '#002aff' # Blue (RYB)
      - color: '#055fff' # Blye (RYB)

      [...]

...what I really want to do is show the difference between the two lines as a fill.

From what I read of your reply, if I put the lines on y_axis: secondary, fill them, make one the colour of the card background and set transparency to ), I could do this?? ...I'm going to try that now....

[ghost]

Hi,

I modified entities 2 and 3 as follows and also set upper/lower boundaries for the y axis. I cannot get card_mod to remove the transparency of the last sensor. I have never used card_mod before. can you tell me where I am going wrong?

      - entity: sensor.hottest_temp
        name: Hottest inside
        y_axis: secondary
        show_state: false
        #show_fill: false
        show_line: false
        color: grey
        show_points: false
        show_legend: false
      - entity: sensor.coolest_temp
        card_mod:
          style: |
            .fill {
              fill: white;
              opacity: 1 !important;
            }
        color: var(--paper-card-background-color)
        name: Coolest inside
        y_axis: secondary
        show_state: false
        #show_fill: false
        show_line: false
        show_points: false
        show_legend: false
        card_mod:
          style: |
            .fill {
              fill: white;
              opacity: 1 !important;
            }

gives me almost what I am really looking for (just need the lower fill to be not transparent).

[ildar170975]

Are you agreeing with my request or telling me it is not necessary or something else?

Repeat:

• "let me clarify."
• "Here we probably should display graphs in opposite order. Agree?"

Sorry - what is unclear?

yes, if you specify y_axis: secondary

This is not important. Used to make graphs absolutely different to see the issue.

here is my yaml:

Please provide SHORT code snippets. Many lines in your example are not related to the issue.

[ghost]

got it on both comments - thanks and sorry, respectfully.

[ildar170975]

To conclude - are you agree that we only need to change an order of displaying graphs? I mean: 4th entity -> then 3rd entity -> then 2nd entity -> then 1st entity ? (so the last entity is on the bottom, the 1st entity is on the top)

• entity: sensor.coolest_temp card_mod: style: | .fill { fill: white; opacity: 1 !important; }

Here card-mod must be specified on the "root level" - i.e with zero indentation:

type: custom:mini-graph-card
entities:
  - entity: ...
  - entity: ...
card_mod:
  style:
    ...

In the example from the 1st post the style is for all graphs. But you may specify a style for some particular graph only. Goto mini-graph-card Community thread for details.

[ghost]

yes, that is what I meant - sorry I was not clear and sorry I did not understand your reply properly the first time.

[ildar170975]

@jchhenderson

1. Renamed the issue to specify our conclusion.
2. For card-mod questions - please check here for a list of examples for mini-graph-card.
3. There was an issue or even a PR here to propose a kind of "index" option for each entity - and this option was supposed to be used to specify an order. I dislike this proposal, honestly.

[cryptk]

I have been able to replicate this effect using card-mod. While this functionality is still something that should happen (basically either reversing the draw order for the entities, or having the state draw from the last entity rather than the first one), in the meantime here is an example of how to achieve the same result. Posting that workaround here to help out the other people who want this feature.

Basically, just add the card_mod snippet to your mini-graph-card config and then set show_state: true on your last entity (or whatever other entity it is you wanted to have the state rendered from). The show_state: true on the last entity will cause it to show it's state on the right side of the card, and the card_mod snippet will hide the primary state display (allowing the secondary state to move to the left side) and then clean up the left side padding on the secondary state to get it positioned exactly where the primary state used to be at. Here is the example

type: custom:mini-graph-card
name: Downstairs Temperature
icon: mdi:thermometer
card_mod:
  style: |
    .states > .state {
      display: none;
    }
    .states--secondary {
      margin-left: 0 !important;
    }
entities:
  - name: Cooling Target
    entity: climate.downstairs
    attribute: target_temp_high
    smoothing: false
    show_fill: false
    color: blue
  - name: Heating Target
    entity: climate.downstairs
    attribute: target_temp_low
    smoothing: false
    show_fill: false
    color: red
  - name: Current Temperature
    entity: sensor.downstairs_current_temperature
    show_fill: false
    show_state: true
    color: yellow

[ildar170975]

Noted that this issue is a duplicate of https://github.com/kalkih/mini-graph-card/issues/269 Closing it.