Bars being coloured incorrectly on value

[bazcurtis]

I wrote the following, but some of the bars are being coloured in correctly.

I can't see a pattern. Can anyone see what is going on here?

type: custom:plotly-graph
hours_to_show: 7d
title: Octopus cost
refresh_interval: auto
entities:
  - entity: >-
      sensor.octopus_energy_electricity_current_accumulative_cost
    name: |
      $ex "Today £" + parseFloat(ys.at(-1))
    unit_of_measurement: GBP
    texttemplate: "%{y}"
    type: bar
    statistic: state
    period: day
    marker:
      color: |-
        $ex ys.map(y => {
          let value = parseFloat(y.toFixed(2));
          return value > 5 ? "darkred" : 
                 value > 4 ? "red" : 
                 value > 3 ? "darkorange" : 
                 value > 2 ? "orange" : 
                 value > 1 ? "purple" : 
                 value > 0 ? "blue" : "green";
        })
    filters:
      - filter: i >0
layout:
  xaxis:
    rangeselector:
      "y": 1.2
      buttons:
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 3
          step: month
        - count: 1
          step: year

[dbuezas]

Put the filters before the marker color. Code is executed top to bottom and removing the first data point AFTER computing color means the colors are for the wrong bar

[dbuezas]

I see you want the last value in the name, but with a single trace the legend is not shown i think you can force the legend to appear, but this alternative may be better: #364

[bazcurtis]

That fixed it for me.

type: custom:plotly-graph
hours_to_show: 7d
title: Octopus cost
refresh_interval: auto
entities:
  - entity: >-
      sensor.octopus_energy_electricity_current_accumulative_cost
    fn: >-
      $fn ({ys, vars}) => {vars.is = ys[ys.length-1];vars.was =
      ys[ys.length-2];}
    unit_of_measurement: GBP
    texttemplate: "%{y}"
    type: bar
    statistic: state
    period: day
    filters:
      - filter: i >0
    marker:
      color: |-
        $ex ys.map(y => {
          let value = parseFloat(y.toFixed(2));
          return value > 5 ? "darkred" : 
                 value > 4 ? "red" : 
                 value > 3 ? "darkorange" : 
                 value > 2 ? "orange" : 
                 value > 1 ? "darkblue" : 
                 value > 0.5 ? "blue" : "green";
        })
layout:
  xaxis:
    rangeselector:
      "y": 1.2
      buttons:
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 3
          step: month
        - count: 1
          step: year
  margin:
    t: 30

[bazcurtis]

I then tried to add 364 like this and I get a YAML error.

type: custom:plotly-graph
hours_to_show: 7d
title: Octopus cost
refresh_interval: auto
entities:
  - entity: >-
      sensor.octopus_energy_electricity_current_accumulative_cost
    fn: >-
      $fn ({ys, vars}) => {vars.is = ys[ys.length-1];vars.was =
      ys[ys.length-2];}
    unit_of_measurement: GBP
    texttemplate: "%{y}"
    type: bar
    statistic: state
    period: day
    filters:
      - filter: i >0
    marker:
      color: |-
        $ex ys.map(y => {
          let value = parseFloat(y.toFixed(2));
          return value > 5 ? "darkred" : 
                 value > 4 ? "red" : 
                 value > 3 ? "darkorange" : 
                 value > 2 ? "orange" : 
                 value > 1 ? "darkblue" : 
                 value > 0.5 ? "blue" : "green";
        })
  - entity: ''
      type: indicator
      mode: number+delta
      value: $fn ({ vars }) => vars.is
      bgcolor: white
      title:
        text: Cost
    number:
      suffix: °
      valueformat: "0.1"
    delta:
      position: top
      suffix: /h
      reference: $fn ({ vars }) => vars.was
      valueformat: "0.1"
    domain:
      x:
        - 0
        - 0.3
      "y":
        - 0.5
        - 1
layout:
  xaxis:
    rangeselector:
      "y": 1.2
      buttons:
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 3
          step: month
        - count: 1
          step: year
  margin:
    t: 30

[bazcurtis]

I then tried to add 364 like this, but I got a YAML error. Out of interest, is the docs line just a reference line?

It doesn't seem to like entity ''

type: custom:plotly-graph
hours_to_show: 7d
title: Octopus cost
refresh_interval: auto
entities:
  - entity: >-
      sensor.octopus_energy_electricity_current_accumulative_cost
    fn: >-
      $fn ({ys, vars}) => {vars.is = ys[ys.length-1];vars.was =
      ys[ys.length-2];}
    unit_of_measurement: GBP
    texttemplate: "%{y}"
    type: bar
    statistic: state
    period: day
    filters:
      - filter: i >0
    marker:
      color: |-
        $ex ys.map(y => {
          let value = parseFloat(y.toFixed(2));
          return value > 5 ? "darkred" : 
                 value > 4 ? "red" : 
                 value > 3 ? "darkorange" : 
                 value > 2 ? "orange" : 
                 value > 1 ? "darkblue" : 
                 value > 0.5 ? "blue" : "green";
        })
  - entity: ''
      type: indicator
      mode: number+delta
      docs: >-
         https://plotly.com/javascript/reference/indicator/#indicator-number
      value: $fn ({ vars }) => vars.is
      bgcolor: white
      title:
        text: Cost
    number:
      suffix: °
      valueformat: "0.1"
    delta:
      position: top
      suffix: /h
      reference: $fn ({ vars }) => vars.was
      valueformat: "0.1"
    domain:
      x:
        - 0
        - 0.3
      "y":
        - 0.5
        - 1
layout:
  xaxis:
    rangeselector:
      "y": 1.2
      buttons:
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 3
          step: month
        - count: 1
          step: year
  margin:
    t: 30

[dbuezas]

You have an indentation problem, all lines after entity: '' are indented too deep.
This tool should assist: https://dbuezas.github.io/lovelace-plotly-graph-card/

[bazcurtis]

I had a feel that was what it was. I thought I had found it, but the editor was a great help. Thanks.

The code now produces the below. I need to play with the added text 😀

type: custom:plotly-graph
hours_to_show: 7d
title: Octopus cost
refresh_interval: auto
entities:
  - entity: sensor.octopus_energy_electricity_current_accumulative_cost
    fn: >-
      $fn ({ys, vars}) => {vars.is = ys[ys.length-1];vars.was =
      ys[ys.length-2];}
    unit_of_measurement: GBP
    texttemplate: "%{y}"
    type: bar
    statistic: state
    period: day
    filters:
      - filter: i >0
    marker:
      color: |-
        $ex ys.map(y => {
          let value = parseFloat(y.toFixed(2));
          return value > 5 ? "darkred" : 
                 value > 4 ? "red" : 
                 value > 3 ? "darkorange" : 
                 value > 2 ? "orange" : 
                 value > 1 ? "darkblue" : 
                 value > 0.5 ? "blue" : "green";
        })
  - entity: ""
    type: indicator
    mode: number
    value: $fn ({ vars }) => vars.is
    bgcolor: white
    title:
      text: Cost
    number:
      prefix: £
      valueformat: "0.10"
    domain:
      x:
        - 0
        - 0.3
      "y":
        - 0
        - 1
layout:
  xaxis:
    rangeselector:
      "y": 1.2
      buttons:
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 3
          step: month
        - count: 1
          step: year
  margin:
    t: 30

[dbuezas]

This example I posted in the HomeAssistant forum some weeks ago may come handy:

type: custom:plotly-graph
entities:
  - entity: sensor.openweathermap_temperature
    period: hour
    fill: tozeroy
    filters:
      - store_var: data
  - entity: ''
    type: indicator
    mode: number
    docs: https://plotly.com/javascript/reference/indicator/#indicator-number
    value: $ex Math.min(...vars.data.ys)
    title:
      text: Min
    number:
      suffix: W
    domain:
      x:
        - 0
        - .2
      'y':
        - 0.8
        - 1
  - entity: ''
    type: indicator
    mode: gauge+number
    value: $ex Math.max(...vars.data.ys)
    gauge: 
      axis: { range: [5, 15], visible: false }
      bgcolor: "lightgray" 
      bar:
        color: green
    title:
      text: Max
    number:
      suffix: W
    domain:
      x:
        - .8
        - 1
      'y':
        - 0.8
        - 1
  
hours_to_show: 24
layout:
  margin:
    t: 30
  yaxis:
    domain:
      - 0
      - .7
    autorangeoptions:
      minallowed: 5

[bazcurtis]

That looks very nice. I have another use for this. You have now given me another project 😀

[dbuezas]

Hehe cool. By the way, look at the docs linked inside the yaml, you can set color bands in the gauge of the indicator (e.g red, yellow, green for values that are too low, fine or too high) and extra lines (e.g for min and max observed)

[bazcurtis]

Thanks. I have got it to this now. I have managed to play with the font size as well.

type: custom:plotly-graph
hours_to_show: 7d
title: Octopus cost
refresh_interval: auto
entities:
  - entity: >-
      sensor.octopus_energy_electricity
![Screenshot 2024-11-19 at 10 05 44](https://github.com/user-attachments/assets/e8041e31-e151-40f9-beab-2bbb9ff48818)
_current_accumulative_cost
    fn: >-
      $fn ({ys, vars}) => {vars.is = ys[ys.length-1];vars.was =
      ys[ys.length-2];}
    unit_of_measurement: GBP
    texttemplate: "%{y}"
    type: bar
    statistic: state
    period: day
    filters:
      - filter: i >0
    marker:
      color: |-
        $ex ys.map(y => {
          let value = parseFloat(y.toFixed(2));
          return value > 5 ? "darkred" : 
                 value > 4 ? "red" : 
                 value > 3 ? "darkorange" : 
                 value > 2 ? "orange" : 
                 value > 1 ? "darkblue" : 
                 value > 0.5 ? "blue" : "green";
        })
  - entity: ""
    type: indicator
    mode: mode
    value: $fn ({ vars }) => vars.is
    bgcolor: white
    title:
      text: Cost
      font:
        size: 14
    number:
      prefix: £
      valueformat: "0.10"
      font:
        size: 14
    domain:
      x:
        - 0
        - 0.2
      "y":
        - 0.8
        - 1
layout:
  xaxis:
    rangeselector:
      "y": 1.2
      buttons:
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 3
          step: month
        - count: 1
          step: year
  margin:
    t: 30
  yaxis:
    domain:
      - 0
      - 0.7

[dbuezas]

Cool!
You could move the indicator to the right to make more space for the bars