Line Colors don't match color_thresholds

[balsman225]

When using the color_thresholds the fills colors don't match the line color.
The line color never changes - always stays green.

Attaching screenshot of CPU usage -

type: horizontal-stack
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.processor_use
    name: CPU
    color_thresholds:
      - value: 0
        color: green
      - value: 50
        color: yellow
      - value: 75
        color: red
    font_size: 75
    line_width: 8
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.memory_use_percent
    name: Memory
    color_thresholds:
      - value: 0
        color: green
      - value: 50
        color: yellow
      - value: 75
        color: red
    font_size: 75
    line_width: 8
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.disk_use_percent_home
    name: Disk
    color_thresholds:
      - value: 0
        color: green
      - value: 50
        color: yellow
      - value: 75
        color: red
    font_size: 75
    line_width: 8

Similar to #54

[kalkih]

Have you updated the card to the latest version? and cleared cache after doing so.

[balsman225]

I am currently running 0.3.0
I installed the custom card for the first time last week but I can try to remove and re-add to test.

EDIT:
I redownloaded the 0.3.0 js bundle and replaced it in my www folder, rebooted my hass instance and cleared my cache. Testing on a few different browsers display the same issue.

[kalkih]

Please let me know browsers and browser version.

[balsman225]

Homeassistant - Hassio 0.88.2

iOS App (1.5.0) on iOS 12.1.4
Safari on iOS 12.1.4
Safari (12.0.3) on MacOS 10.14.3
Chrome (72.0.3626.119) on MacOS 10.14.3
Firefox (65.0.1) in MacOS 10.14.3
Chrome (72.0.3626.121) on Windows Server 2016
Chrome (69.0.3497.100) on Android 6.0.1

[kalkih]

I'm not able to reproduce this issue, tried on Firefox, Chrome & Safari on macOS and Chrome on Android. (changed the yellow threshold to 35 for testing purposes)

Your issue sounds very similar to #52 & #54 but they were addressed with 7d65869

[balsman225]

Thank you for the reply.
I will do some additional test when I can and spin up a separate HASS instance to try.

[Human]

I just started using this custom card today, version 0.3.2, and I'm having the same issue in Chrome and Firefox (desktop and mobile). HASS 0.90.2

[kalkih]

@Human, can you send me the card config and a screenshot of the issue.

[Human]

@kalkih I checked it again, and I did see the colors change, but not when they should have according to the raw data. So I think this bug is actually user confusion (including myself) as to how the raw data maps to the graph card.

For example, I had a sensor value that spiked to 209 at 3:31, but the card shows green (below 160) until 3:55. My guess is that if people have data that fluctuates a lot, they might not see the colors change.

My config:

type: 'custom:mini-graph-card'
entities:
  - sensor.ch4
show:
  graph: true
  fill: true
  extrema: true
color_thresholds:
  - value: 155
    color: '#770000'
  - value: 140
    color: '#007700'
  - value: 0
    color: '#00ff00'

[kalkih]

Alright, yeah since the graph is completely based on the moving average, you won't often see those short spikes with the mini-graph-card.
With that said, with a higher points_per_hour set, the moving average will have less of an effect on the data represented.