Skip to content

feat: Add "decimals" per entity & "decimals_secondary" options #1233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

feat: Add "decimals" per entity & "decimals_secondary" options #1233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6388d7e
add decimals per entity, decimals_secondary
ildar170975 Apr 23, 2025
b8f265a
add decimals per entity, decimals_secondary
ildar170975 Apr 23, 2025
4c38959
Merge branch 'dev' into decimals
ildar170975 Apr 29, 2025
545f81f
Merge branch 'dev' into decimals
ildar170975 Apr 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 29 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ This card is available in [HACS](https://hacs.xyz/) (Home Assistant Community St
2. Grab `mini-graph-card-bundle.js`:

```console
$ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.12.1/mini-graph-card-bundle.js
$ wget https://github.com/kalkih/mini-graph-card/releases/download/v0.12.1/mini-graph-card-bundle.js
```

3. Add the resource reference as decribed below.
Expand Down Expand Up @@ -98,7 +98,8 @@ We recommend looking at the [Example usage section](#example-usage) to understan
| line_color | string/list | `var(--accent-color)` | v0.0.1 | Set a custom color for the graph line, provide a list of colors for multiple graph entries.
| color_thresholds | list | | v0.2.3 | Set thresholds for dynamic graph colors, see [Line color object](#line-color-object).
| color_thresholds_transition | string | `smooth` | v0.4.3 | Color threshold transition, `smooth` or `hard`.
| decimals | integer | | v0.0.9 | Specify the exact number of decimals to show for states.
| decimals | integer | | v0.0.9 | Specify the exact number of decimals to show for number values, see [Number format](#number-format).
| decimals_secondary | integer | | v0.13.0 | Specify the exact number of decimals to show for secondary Y-axis labels, see [Number format](#number-format).
| hour24 | boolean | `false` | v0.2.1 | Set to `true` to display times in 24-hour format.
| font_size | number | `100` | v0.0.3 | Adjust the font size of the state, as percentage of the original size.
| font_size_header | number | `14` | v0.3.1 | Adjust the font size of the header, size in pixels.
Expand Down Expand Up @@ -129,6 +130,7 @@ properties of the Entity object detailed in the following table (as per `sensor.
| color | string | | Set a custom color, overrides all other color options including thresholds.
| unit | string | | Set a custom unit of measurement, overrides `unit` set in base config (`''` value for an empty unit).
| aggregate_func | string | | Override for aggregate function used to calculate point on the graph, `avg`, `median`, `min`, `max`, `first`, `last`, `sum`.
| decimals | integer | | Override the exact number of decimals to show for number values, see [Number format](#number-format).
| show_state | boolean | | Display the current state.
| show_legend_state | boolean | false | Display the current state as part of the legend.
| show_indicator | boolean | | Display a color indicator next to the state, (only when more than two states are visible).
Expand All @@ -138,7 +140,7 @@ properties of the Entity object detailed in the following table (as per `sensor.
| show_points | boolean | | Set to false to hide the points.
| show_legend | boolean | | Set to false to turn hide from the legend.
| state_adaptive_color | boolean | | Make the color of the state adapt to the entity color.
| y_axis | string | | If 'secondary', displays using the secondary y-axis on the right.
| y_axis | string | | If 'secondary', displays using the secondary Y-axis on the right.
| fixed_value | boolean | | Set to true to graph the entity's current state as a fixed value instead of graphing its state history.
| smoothing | boolean | | Override for a flag indicating whether to make graph line smooth.

Expand Down Expand Up @@ -255,6 +257,26 @@ These buckets are converted later to single point/bar on the graph. Aggregate fu
| `delta` | v0.9.4 | Calculates difference between max and min value
| `diff` | v0.11.0 | Calculates difference between first and last value

### Number format

Options `decimals` defined "card-wide" and/or for some entity are used to set an exact number of decimals according to the following rules:
1. For states:
- if none `decimals` option is defined - a default presentation is used;
- if "card-wide" `decimals` is defined - this value is used;
- if `decimals` for some entity is defined - this value is used for this entity.
2. For extrema & average values:
- if none `decimals` option is defined - a default presentation is used;
- if "card-wide" `decimals` is defined - this value is used;
- if `decimals` is defined for the 1st entity - this value is used.
3. For primary Y-axis labels:
- if "card-wide" `decimals` option is not defined - a default presentation is used;
- otherwise - this value is used.
4. For secondary Y-axis labels:
- if "card-wide" `decimals` & `decimals_secondary` option are not defined - a default presentation is used;
- if "card-wide" `decimals` option is defined - this value is used;
- if "card-wide" `decimals_secondary` option is defined - this value is used.


### Theme variables
The following theme variables can be set in your HA theme to customize the appearance of the card.

Expand Down Expand Up @@ -393,11 +415,11 @@ color_thresholds:
color: "#c0392b"
```

#### Alternate y-axis
Have one or more series plot on a separate y-axis, which appears on the right side of the graph. This example also
#### Alternate Y-axis
Have one or more series plot on a separate Y-axis, which appears on the right side of the graph. This example also
shows turning off the line, points and legend.

![Alternate y-axis](https://user-images.githubusercontent.com/373079/60764115-63cf2780-a0c6-11e9-8b9a-97fc47161180.png)
![Alternate Y-axis](https://user-images.githubusercontent.com/373079/60764115-63cf2780-a0c6-11e9-8b9a-97fc47161180.png)

```yaml
type: custom:mini-graph-card
Expand Down Expand Up @@ -496,6 +518,7 @@ state_map:
label: Detected
```


#### Showing additional info on the card

![изображение](https://user-images.githubusercontent.com/71872483/170584118-ef826b60-dce3-42ec-a005-0f467616cd37.png)
Expand Down
27 changes: 20 additions & 7 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ class MiniGraphCard extends LitElement {
style=${entityConfig.state_adaptive_color ? `color: ${this.computeColor(value, entity)}` : ''}>
${entityConfig.show_indicator ? this.renderIndicator(value, entity) : ''}
<span class="state__value ellipsis">
${this.computeState(value)}
${this.computeState(value, entity)}
</span>
<span class="state__uom ellipsis">
${this.computeUom(entity)}
Expand Down Expand Up @@ -356,7 +356,7 @@ class MiniGraphCard extends LitElement {
const { show_legend_state = false } = this.config.entities[index];

if (show_legend_state) {
legend += ` (${this.computeState(state)}`;
legend += ` (${this.computeState(state, index)}`;
if (!(['unavailable'].includes(state))) {
const uom = this.computeUom(index);
if (!(['%', ''].includes(uom)))
Expand Down Expand Up @@ -615,8 +615,8 @@ class MiniGraphCard extends LitElement {
if (!this.config.show.labels_secondary || this.secondaryYaxisSeries.length === 0) return;
return html`
<div class="graph__labels --secondary flex">
<span class="label--max">${this.computeState(this.boundSecondary[1])}</span>
<span class="label--min">${this.computeState(this.boundSecondary[0])}</span>
<span class="label--max">${this.computeState(this.boundSecondary[1], -1)}</span>
<span class="label--min">${this.computeState(this.boundSecondary[0], -1)}</span>
</div>
`;
}
Expand All @@ -628,7 +628,7 @@ class MiniGraphCard extends LitElement {
<div class="info__item">
<span class="info__item__type">${entry.type}</span>
<span class="info__item__value">
${this.computeState(entry.state)} ${this.computeUom(0)}
${this.computeState(entry.state, 0)} ${this.computeUom(0)}
</span>
<span class="info__item__time">
${entry.type !== 'avg' ? getTime(new Date(entry.last_changed), this.config.format, this._hass.language) : ''}
Expand Down Expand Up @@ -725,7 +725,7 @@ class MiniGraphCard extends LitElement {
);
}

computeState(inState) {
computeState(inState, index) {
if (this.config.state_map.length > 0) {
const stateMap = Number.isInteger(inState)
? this.config.state_map[inState]
Expand All @@ -744,7 +744,20 @@ class MiniGraphCard extends LitElement {
} else {
state = Number(inState);
}
const dec = this.config.decimals;

let dec;
if (index === undefined) {
dec = this.config.decimals;
} else if (index === -1) {
dec = this.config.decimals_secondary !== undefined
? this.config.decimals_secondary
: this.config.decimals;
} else {
dec = this.config.entities[index].decimals !== undefined
? this.config.entities[index].decimals
: this.config.decimals;
}

const value_factor = 10 ** this.config.value_factor;

if (dec === undefined || Number.isNaN(dec) || Number.isNaN(state)) {
Expand Down