Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-02 00:27:49 +01:00
Code Activity

Gauge card improvements (#30149)

Browse Source 
* Gauge card improvements

* Decrease stroke width

* Feedback

* Remove show more, move text to bottom

* Remove _handleMoreInfo method from hui-gauge-card

Removed the _handleMoreInfo method from hui-gauge-card.

* Remove unused fireEvent import from hui-gauge-card

Removed unused import for fireEvent.

* Fix up padding

* Better alignment from previous card

* Decrease padding

* Apply suggestions from code review

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
Simon Lamon
2026-03-24 07:56:29 +01:00
committed by GitHub
parent 823c222a55
commit 40b9f9dccb
2 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ha-gauge.ts
View File

@@ -76,10 +76,12 @@ export class HaGauge extends LitElement {
const arcRadius = 40;
const arcLength = Math.PI * arcRadius;
const valueAngle = getAngle(this.value, this.min, this.max);
const strokeOffset = arcLength * (1 - valueAngle / 180);
const strokeOffset = this._updated
? arcLength * (1 - valueAngle / 180)
: arcLength;
return svg`
<svg viewBox="-50 -50 100 60" class="gauge">
<svg viewBox="-50 -50 100 55" class="gauge">
<path
class="levels-base"
d="M -40 0 A 40 40 0 0 1 40 0"
@@ -181,7 +183,7 @@ export class HaGauge extends LitElement {
<text
class="value-text"
x="0"
y="-10"
y="-5"
dominant-baseline="middle"
text-anchor="middle"
>
@@ -222,22 +224,22 @@ export class HaGauge extends LitElement {
.levels-base {
fill: none;
stroke: var(--primary-background-color);
stroke-width: 10;
stroke-width: 8;
stroke-linecap: round;
}
.level {
fill: none;
stroke-width: 10;
stroke-width: 8;
stroke-linecap: butt;
}
.value {
fill: none;
stroke-width: 10;
stroke-width: 8;
stroke: var(--gauge-color);
stroke-linecap: round;
transition: all 1s ease 0s;
transition: stroke-dashoffset 1s ease 0s;
}
.needle {
@@ -249,6 +251,7 @@ export class HaGauge extends LitElement {
}
.value-text {
font-size: var(--ha-font-size-l);
fill: var(--primary-text-color);
direction: ltr;
}

28
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@@ -167,7 +167,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
.needle=${this._config!.needle}
.levels=${this._config!.needle ? this._severityLevels() : undefined}
></ha-gauge>
<div class="name" .title=${name}>${name}</div>
<p class="title" .title=${name}>${name}</p>
</ha-card>
`;
}
@@ -282,10 +282,15 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
}
static styles = css`
:host {
position: relative;
display: block;
height: 100%;
}
ha-card {
height: 100%;
overflow: hidden;
padding: 16px;
padding: var(--ha-space-3);
display: flex;
align-items: center;
justify-content: center;
@@ -301,16 +306,23 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
outline: none;
}
ha-gauge {
.title {
width: 100%;
font-size: var(--ha-font-size-l);
line-height: var(--ha-line-height-expanded);
padding: 0px 0px var(--ha-space-2) 0px;
margin: 0;
text-align: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: none;
color: var(--primary-text-color);
}
.name {
text-align: center;
line-height: initial;
color: var(--primary-text-color);
ha-gauge {
width: 100%;
font-size: var(--ha-font-size-m);
}
`;
}