Skip to content
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

Jump to bottom

feat: add show_legend_state #1082

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: add show_legend_state #1082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19e0b56
add show_legend_state
ljmerza Feb 20, 2024
a13ea01
add show_legend_state
ljmerza Feb 20, 2024
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ properties of the Entity object detailed in the following table (as per `sensor.
| 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 | | Display the current state with the legend.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even though this is not the case for most of the other entries: please state the default value as false. Let's be a good example. ;-)

| 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.
Expand Down
30 changes: 21 additions & 9 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,17 +338,29 @@ class MiniGraphCard extends LitElement {

renderLegend() {
if (this.visibleLegends.length <= 1 || !this.config.show.legend) return;


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.entity[entity.index].state, entity.index)}
<span class="ellipsis">${this.computeName(entity.index)}</span>
</div>
`)}
${this.visibleLegends.map((entity) => {
let legend = this.computeName(entity.index);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please properly indent the code.

const state = this.getEntityState(entity.index);

const { show_legend_state } = this.config.entities[entity.index];
if (show_legend_state) {
legend += ` (${this.computeState(state)}${this.computeUom(entity.index)})`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you put the state in an additional span with a suitable class? (If there already are suitable classes for state and UOM, you could maybe reuse them.)

I think there is a CSS property then to add the braces to the content.

That way users could use card-mod to style the appearance of the state as they wish.

Please make sure the defaults look good in different situations, e.g. long and short state names.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

put the state in an additional span

Absolutely correct.

Also, please think about an order: in some cases a user may want to have UoM before a value.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think, a separate span should do the trick for that as well, together with the CSS direction property.

}

return html`
<div class="graph__legend__item"
@click=${e => this.handlePopup(e, this.entity[entity.index])}
@mouseenter=${() => this.setTooltip(entity.index, -1, state, 'Current')}
@mouseleave=${() => (this.tooltip = {})}>
${this.renderIndicator(this.entity[entity.index].state, entity.index)}
<span class="ellipsis">${legend}</span>
</div>
`;
})}
</div>
`;
}
Expand Down
Loading