Counter in the frontend should be numeric instead of categorical

[jasonmhite]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

The problem

The details card for counter entities displays as a categorical/color bar plot. A bar plot is not useful for interpreting trends since it destroys any notion of ordering/magnitude, as can be seen in the example image below.

Expected behavior

Counter values are obviously numeric, they should display as a line plot. I can't think of a use case where you would prefer a bar plot, considering what counters are intended to be used for.

Steps to reproduce

Pull up the details card for a counter entity from anywhere in the UI.

Environment

• Home Assistant release with the issue: 0.113
• Last working Home Assistant release (if known): NA, present since at least 0.111 from my experience and probably longer.
• Browser and browser version: Chrome and Firefox, latest
• Operating system: HA is on a raspi 4 running the HA managed system (hassio), browsers I've tried on a bunch of systems.

State of relevant entities

Problem-relevant configuration

This counter is fed by a separate automation that counts lightning strikes based on messages received over MQTT from a device using an AS3935 lightning sensor. I am not including the automation because this issue applies to all counter entities as far as I am aware, but I note that the actual value counting works entirely as expected and the only problem is with how the counter history is displayed in the frontend.

counter:
    lightning_strikes:
        initial: 0
        step: 1
        restore: no
        minimum: 0
        icon: "mdi:lightning-bolt"

Javascript errors shown in your browser console/inspector

NA

Additional information

I assume this is just a mistake with how counter entities are configured to be displayed. Without really knowing a lot about the HA internals, I would guess that the frontend decides what type of plot to use based on the data type of the entity value column in the history database. Presumably counter values are stored as some type of int, which the frontend assumes is categorical.

[bramkragten]

We only show line graphs for entities with a unit of measurement, maybe we should add the option to set a unit of measurement for counters.

[jasonmhite]

That sounds like a reasonable solution, the only caveat I'd give is that it would seem logical that counters should show as a line graph by default.

[bramkragten]

Thinking about this some more, I guess we could also fix it on the frontend. By setting the unit to "#" when fetching the history.

[zsarnett]

I agree. By default a counter should be a line graph as a number is a number. We don't need a UOM for a line graph we just require it for our purposes for categorization. Defaulting it to # is a good idea

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[jasonmhite]

Issue is still present.

[carpii]

I'd like to see this issue being given some reconsideration too...

Right now a counter is always graphed as a bar plot, which Id argue is of limited use in the majority of cases (unless it is just transitioning between a few states 0-3 etc)

test_counter:
  name: Test Counter
  initial: 0
  step: 1
  minimum: 0  

You can create a sensor which encapsulates the counter, and specify a unit of measurement of none, at which point that sensor is now plotted as a line graph

- platform: template
  sensors:
    test_counter_int:
      unit_of_measurement: none
      friendly_name: "Test Counter (int)"
      value_template: {{ states('counter.test_counter') }}

[frenck]

This is currently a backend issue, not a frontend one. In the given example in the issue description, the integration is missing a unit of measurement. If there isn't a unit, there isn't a measurable value that is graphable.

The problem in this example, is the counter, which doesn't have a measurement at this point. That should be fixed, in the backend.

[jasonmhite]

@frenck I guess in my mind the question is why unit of measure is what is used to determine how it is displayed in the frontend? A categorical value can have units, too, and likewise a continuous value might not have units. Similarly, there might be cases where you want to display some sensor value in both categorical and continuous forms in different places in the frontend. It seems to me that the natural approach is that determining which display form is used should be controlled independently from the unit of measure, and also selectable in the frontend.

Though I'm guessing that is probably not a trivial change to implement and might break things for users, so as to whether that might actually be a practical solution I dunno.

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[jasonmhite]

Still present, though it appears that @thomasloven is working on a (partial?) fix.

[jasonmhite]

Updated today and this appears to be fixed as of 2021.6.3. Thanks for the fix!