[FR] Separate "decimals" options for each entity

[szymucha94]

Please separate "decimals" parameter for main entity value that is shown on the card and additional entities that are shown only as graphs.
Currently I'm forced to use "decimals: 2" for both graph and main entity which results in unnecessary zeros after decimal point for power usage while two decimal points are necessary for energy consumption readings:

Please, pretty please :)
Cheers

[ildar170975]

main entity value that is shown on the card and additional entities that are shown only as graphs.

Not clear what you mean by "main value shown on the card" & "additional entities shown only as graphs".
Every entity may be shown as a graph and/or as a state.
Do you mean that your card (which you decided not to explain by a code) contains 2 entities - with a state, w/o a graph + w/o a state, with a graph ?

[szymucha94]

This is my card:

type: custom:mini-graph-card
view_layout:
  column: 2
entities:
  - entity: sensor.mainenergymetercurrent_power
    show_graph: false
    show_state: true
  - entity: sensor.mainenergymetertotal_energy
    show_graph: true
    show_state: false
    name: Energy consumption
name: Current Power Consumption
hour24: true
aggregate_func: delta
hours_to_show: 18
height: 88
decimals: 2
points_per_hour: 1
update_interval: 600
labels_secondary: false
group_by: hour
show:
  graph: bar
  labels: false
  fill: true

What I need is to represent sensor.mainenergymetercurrent_power as integer and sensor.mainenergymetertotal_energy as float.
Currently if I set "decimals: 0" sensor.mainenergymetercurrent_power is represented as expected, but sensor.mainenergymetertotal_energy (per hour) is shown as zero.
So I've set "decimals: 2" which makes sensor.mainenergymetertotal_energy (per hour) readable, but on the other hand sensor.mainenergymetercurrent_power now has useless zeros after dot.

[ildar170975]

Next time use TRIPLE "`" for code.
Formatted the code by myself.

---

labels_secondary: false - must be used inside the show section.
Here this option is meaningless - you have no entities assigned for the secondary axis.

---

So, your proposal is to support separate decimals options for each entity?

[szymucha94]

Yes, precisely.

[jlsjonas]

This will be fixed as part of the configuration update, allowing you to set most options on entity-level with global defaults/overrides!

[SeBsZ]

Hey was this ever added? I'm trying to show two entities, one without decimals and the other has 1 decimal. I can't set this to show correctly without per-entity decimal settings. Is this still planned or does someone know of a workaround?

[cataseven]

Hey was this ever added? I'm trying to show two entities, one without decimals and the other has 1 decimal. I can't set this to show correctly without per-entity decimal settings. Is this still planned or does someone know of a workaround?

I finally did it. You can use attached js file for entity based decimals. Link is here :)

Please note that;

• Firstly you should delete "mini-graph-card-bundle.js.gz" and "mini-graph-card-bundle.js" files under "mini-graph-card" folder
• Then upload attached js file to mini-graph-card" folder
• Then delete your browser cache, restart ha, restart your browser
• I use Turkish number format (1.234.567,89) if you want to change it to English format I can assist you
• I am not a developer so I do not know how to create pull request. I am just learning coding as hobby. If someone can create pull request, it is ok.

Example card yaml

type: custom:mini-graph-card
entities:
  - entity: sensor.XXX
    name: XXX
    smoothing: false
    decimals: 0
  - entity: sensor.YYY
    name: YYYY
    attribute: ZZZ
    smoothing: false
    show_graph: false
    show_state: true
    unit: "%"
    decimals: 2
icon: mdi:car
hour24: true
hours_to_show: 24
points_per_hour: 12
line_color: green
line_width: 1
font_size: 100
font_size_header: 12
height: 217
animate: true
show:
  points: hover
  fill: fade
  extrema: true
  aggregate_func: max

you are welcome :)
@SeBsZ @szymucha94 @ildar170975 @jlsjonas

[SeBsZ]

Alright! I'll test your changes and release the proper PR for the correct source files, not the bundle.js file.

Thanks for the work.

[SeBsZ]

Hmm, you modified the mini-graph-card-bundle.js file? You should make changes to main.js (

mini-graph-card/src/main.js

Line 288 in 49ca1cd

renderState(entityConfig, id) {

) and then compile the source code into mini-graph-card-bundle.js . It's very difficult for me to see what changes you made now @cataseven and turn this into a PR.

[cataseven]

Hmm, you modified the mini-graph-card-bundle.js file? You should make changes to main.js (

mini-graph-card/src/main.js

Line 288 in 49ca1cd

renderState(entityConfig, id) {

) and then compile the source code into mini-graph-card-bundle.js . It's very difficult for me to see what changes you made now @cataseven and turn this into a PR.

As I told avbove I am not a developer so I do not know how to create pull request. I will try. If I cant will write changes to you so maybe you can do it

[cataseven]

Hmm, you modified the mini-graph-card-bundle.js file? You should make changes to main.js (

mini-graph-card/src/main.js

Line 288 in 49ca1cd

renderState(entityConfig, id) {

) and then compile the source code into mini-graph-card-bundle.js . It's very difficult for me to see what changes you made now @cataseven and turn this into a PR.

You can find my updates below

updated computeState function in order to manage "entity base decimals" and also "number formatting" for Turkish. Because number format follows language, but I am using HA in English but I want to use Turkish number format. Number format should follow hass number format. not hass.language

            computeState(a, decimals) {
                if (0 < this.config.state_map.length) {
                    var f = Number.isInteger(a) ? this.config.state_map[a] : this.config.state_map.find(b => b.value === a);
                    if (f) return f.label;
                    td("value [".concat(a, "] not found in state_map"))
                }
                var b = "string" == typeof a ? parseFloat(a.replace(/,/g, ".")) : +a;
                var c = decimals;
                    d = 10 ** this.config.value_factor;
                if (c === void 0 || O(c) || O(b)) return this.numberFormat(Ra(100 * (b * d)) / 100, "tr-TR"); // Dil ayarı "tr-TR" olarak sabitleniyor
                var e = 10 ** c;
                return this.numberFormat((Ra(b * d * e) / e).toFixed(c), "tr-TR", c); // Burada da "tr-TR" sabitlendi
            }

            numberFormat(a, b, c) {
                return !O(+a) && Intl ? new Intl.NumberFormat("tr-TR", { // Dil parametresi "tr-TR" olarak ayarlandı
                    minimumFractionDigits: c
                }).format(+a) : a.toString();
            }

new lines

            computeDecimal(a) {
                return this.config.entities[a].decimals || this.config.decimals || this.entity[a].attributes.decimals || "";
            }

updated renderState function

            renderState(a, b) {
                var c = 0 === b;
                if (c || a.show_state) {
                  var { entity: d, value: e } = this.tooltip, 
                      f = this.getEntityState(b),
                      // Get the decimal value here:
                      decimals = this.computeDecimal(c && d || b);  
              
                  return Db(B(), 
                            !c && "state--small", 
                            a => this.handlePopup(a, this.entity[b]), 
                            a.state_adaptive_color ? "color: ".concat(this.computeColor(f, b), ";") : "", 
                            a.show_indicator ? this.renderIndicator(f, b) : "", 
                            // Pass the decimals to computeState:
                            this.computeState(c && e !== void 0 ? e : f, decimals),  
                            this.computeUom(c && d || b), 
                            c && this.renderStateTime() || "");
                }
            }

@SeBsZ