jonah/mini-graph-card
1
0
Fork 0
mirror of https://github.com/kalkih/mini-graph-card.git synced 2025-12-20 00:35:56 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add show_legend_state (#1173)

Browse Source 
---------

Co-authored-by: Leonardo Merza <ljmerza@gmail.com>
This commit is contained in:
Julien Deveaux
2024-12-20 23:06:06 +01:00
committed by GitHub
parent cbfba7a6a4
commit 3b1c82793a
2 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@@ -123,23 +123,24 @@ properties of the Entity object detailed in the following table (as per `sensor.
| Name | Type | Default | Description |
|------|:----:|:-------:|-------------|
| entity ***(required)*** | string | | Entity id of the sensor.
| attribute | string | | Retrieves an attribute or [sub-attribute (attr1.attr2...)](#accessing-attributes-in-complex-structures) instead of the state
| name | string | | Set a custom display name, defaults to entity's friendly_name.
| 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.
| aggregate_func | string | | Override for aggregate function used to calculate point on the graph, `avg`, `median`, `min`, `max`, `first`, `last`, `sum`.
| show_state | boolean | | Display the current state.
| show_indicator | boolean | | Display a color indicator next to the state, (only when more than two states are visible).
| show_graph | boolean | | Set to false to completely hide the entity in the graph.
| show_line | boolean | | Set to false to hide the line.
| show_fill | boolean | | Set to false to hide the fill.
| 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.
| 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.
| entity ***(required)*** | string | | Entity id of the sensor.
| attribute | string | | Retrieves an attribute or [sub-attribute (attr1.attr2...)](#accessing-attributes-in-complex-structures) instead of the state
| name | string | | Set a custom display name, defaults to entity's friendly_name.
| 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.
| aggregate_func | string | | Override for aggregate function used to calculate point on the graph, `avg`, `median`, `min`, `max`, `first`, `last`, `sum`.
| 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).
| show_graph | boolean | | Set to false to completely hide the entity in the graph.
| show_line | boolean | | Set to false to hide the line.
| show_fill | boolean | | Set to false to hide the fill.
| 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.
| 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.
```yaml
entities:

37
src/main.js
View File

@@ -336,21 +336,40 @@ class MiniGraphCard extends LitElement {
</div>` : '';
}
computeLegend(index) {
let legend = this.computeName(index);
const state = this.getEntityState(index);
const { show_legend_state = false } = this.config.entities[index];
if (show_legend_state) {
legend += ` (${this.computeState(state)} ${this.computeUom(index)})`;
}
return legend;
}
renderLegend() {
if (this.visibleLegends.length <= 1 || !this.config.show.legend) return;
/* eslint-disable indent */
return html`
<div class="graph__legend">
${this.visibleLegends.map(entity => html`
<div class="graph__legend__item"
@click=${e => this.handlePopup(e, this.entity[entity.index])}
@mouseenter=${() => this.setTooltip(entity.index, -1, this.getEntityState(entity.index), 'Current')}
@mouseleave=${() => (this.tooltip = {})}>
${this.renderIndicator(this.getEntityState(entity.index), entity.index)}
<span class="ellipsis">${this.computeName(entity.index)}</span>
</div>
`)}
${this.visibleLegends.map((entity) => {
const legend = this.computeLegend(entity.index);
return html`
<div class="graph__legend__item"
@click=${e => this.handlePopup(e, this.entity[entity.index])}
@mouseenter=${() => this.setTooltip(entity.index, -1, this.getEntityState(entity.index), 'Current')}
@mouseleave=${() => (this.tooltip = {})}>
${this.renderIndicator(this.getEntityState(entity.index), entity.index)}
<span class="ellipsis">${legend}</span>
</div>
`;
})}
</div>
`;
/* eslint-enable indent */
}
renderIndicator(state, index) {