jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-27 04:52:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust gauge again (#51613)

Browse Source
This commit is contained in:
Simon Lamon
2026-04-19 07:55:54 +02:00
committed by GitHub
parent 509443fbb2
commit da1c2bdee4
2 changed files with 37 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
gallery/src/pages/lovelace/gauge-card.ts
View File

@@ -149,6 +149,38 @@ const CONFIGS = [
max: 1.9
unit: GBP/h`,
},
{
heading: "A lot of segments",
config: `
- type: gauge
needle: true
name: Percent gauge
entity: sensor.brightness_high
unit: "%"
min: 0
max: 100
segments:
- from: 0
color: "#db4437"
- from: 10
color: "#cc4d39"
- from: 20
color: "#bd563a"
- from: 30
color: "#ad603c"
- from: 40
color: "#9e693d"
- from: 50
color: "#8f723f"
- from: 60
color: "#807b41"
- from: 70
color: "#718442"
- from: 80
color: "#618e44"
- from: 90
color: "#43a047"`,
},
];
@customElement("demo-lovelace-gauge-card")

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

@@ -132,8 +132,6 @@ export class HaGauge extends LitElement {
const x1 = -arcRadius * Math.cos((startAngle * Math.PI) / 180);
const y1 = -arcRadius * Math.sin((startAngle * Math.PI) / 180);
const x2 = -arcRadius * Math.cos((endAngle * Math.PI) / 180);
const y2 = -arcRadius * Math.sin((endAngle * Math.PI) / 180);
const isFirst = i === 0;
const isLast = i === arr.length - 1;
@@ -144,7 +142,7 @@ export class HaGauge extends LitElement {
class="level"
stroke="${level.stroke}"
style="stroke-linecap: butt"
d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0"
/>
`;
}
@@ -157,9 +155,9 @@ export class HaGauge extends LitElement {
return svg`
<path class="level" stroke="${level.stroke}" style="stroke-linecap: butt"
d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${xm} ${ym}" />
d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0" />
<path class="level" stroke="${level.stroke}" style="stroke-linecap: butt"
d="M ${xm} ${ym} A ${arcRadius} ${arcRadius} 0 0 1 ${x2} ${y2}" />
d="M ${xm} ${ym} A ${arcRadius} ${arcRadius} 0 0 1 40 0" />
`;
}
@@ -168,7 +166,7 @@ export class HaGauge extends LitElement {
class="level"
stroke="${level.stroke}"
style="stroke-linecap: butt"
d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0"
></path>
`;
})}
@@ -178,7 +176,7 @@ export class HaGauge extends LitElement {
? svg`
<path
class="needle"
d="M -34,-3 L -48,-1 A 1,1,0,0,0,-48,1 L -34,3 A 2,2,0,0,0,-34,-3 Z"
d="M -34,-3 L -40,-1 A 1,1,0,0,0,-40,1 L -34,3 A 2,2,0,0,0,-34,-3 Z"
style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
/>