Allow custom ranges for colors

[akballow]

Hello love the card so much.

Will you be so kind to consider allowing us the ability to adjust the range for colors and add additional ones

For example right now there is only >0, 0, <0. I would like to be able to adjust these per device so I can have color based on how much or how little they are generating so I can see if something is not performing correctly.

For example the ability to do

1000 = red 500 = yellow 100 = green <-500 = yellow <-1000 = red

THANKS

[JonahKr]

Hi there 👋 Thanks for the good suggestion. Sadly i have a lot to do at the moment, Uni related, which is why i cannot get working on this as quickly as i normally would. I will keep the issue open and revisit it once i have more time! Take care! 👍

[JonahKr]

Just to collect some ideas for an editor here: If people have additional ideas, feel free to post them here.

Similar structure to https://www.home-assistant.io/dashboards/gauge/#segments with the difference to be able to define values for points aswell.

interface EntitySettings {
    ...,
    arrow_color: Segment[]
}
interface Segment {
    color: string,
    value?: number
}
const example: Segment[] = [
    {
        color: red,
    },
    {
        color: orange,
        value: 0
    },
    {
        color: green
    }
];

[nicknol]

you might consider the way how the bar-card could be configured. There it is called severity. And could be configured by associating colors with a range (from - to) for each of them.

    severity:
      - color: Red
        from: 0
        to: 60

This way you could define as many color/range tripels as you like.

I placed a bar-card as content in the power-distribution card. See below for a screenshot and the relevant YAML code. The bar-card hasn't been maintained for quite some time, hence similar functionality in the power-distribution card would be great.

center:
  type: card
  content:
    type: custom:bar-card
    entities:
      - entity: sensor.e3dc_autarky
        name: Autark
        severity:
          - color: Red
            from: 0
            to: 60
          - color: Orange
            from: 61
            to: 80
          - color: Amber
            from: 81
            to: 90
          - color: Green
            from: 91
            to: 95
          - color: Darkgreen
            from: 96
            to: 100
      - entity: sensor.e3dc_own_consumption
        name: Selbst
        severity:
          - color: Red
            from: 0
            to: 60
          - color: Orange
            from: 61
            to: 80
          - color: Amber
            from: 81
            to: 90
          - color: Green
            from: 91
            to: 96
          - color: Darkgreen
            from: 96
            to: 100
    title: Haus 🏠
    columns: 2
    direction: up
    height: 200
    width: 70%
    positions:
      icon: off
      name: outside
      value: outside
      indicator: off

[JonahKr]

@nicknol Thanks for your input. Wouldn't that be a bit different since this only allows setting values for ranges, but not for specific points?

[nicknol]

Well, I understood the feature request that way :) at least I would like to be able to define different ranges of values ans associate each range with a color. this could be used for the bars in the center, or as well for the icons and arrows. e.g. the consumption of my house could be colored

• green if it is from 0W to 300W
• lime if it is from 301W to 500W
• yellow if it is from 501 to 700W
• red if it is from 701 10.000W (to color it red in any case above 700W)