jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 18:56:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix #11041: The gauge card doesn't render correctly on iOS 15.2 / macOS 12.1 in the companion apps (#11363)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Radu Cotescu <radu-likes-to-code@cotescu.com>
This commit is contained in:
Radu Cotescu 2022-01-24 18:58:02 +01:00 committed by GitHub
parent b32438dc18
commit 30fa92c120
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,10 @@
import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { styleMap } from "lit/directives/style-map";
import { formatNumber } from "../common/number/format_number";
import { afterNextRender } from "../common/util/render-status";
import { FrontendLocaleData } from "../data/translation";
import { getValueInPercentage, normalize } from "../util/calculate";
import { isSafari } from "../util/is_safari";
// Safari version 15.2 and up behaves differently than other Safari versions.
// https://github.com/home-assistant/frontend/issues/10766
const isSafari152 = isSafari && /Version\/15\.[^0-1]/.test(navigator.userAgent);
const getAngle = (value: number, min: number, max: number) => {
const percentage = getValueInPercentage(normalize(value, min, max), min, max);
@ -65,12 +59,12 @@ export class Gauge extends LitElement {
protected render() {
return svg`
<svg viewBox="0 0 100 50" class="gauge">
<svg viewBox="-50 -50 100 50" class="gauge">
${
!this.needle || !this.levels
? svg`<path
class="dial"
d="M 10 50 A 40 40 0 0 1 90 50"
d="M -40 0 A 40 40 0 0 1 40 0"
></path>`
: ""
}
@ -87,9 +81,9 @@ export class Gauge extends LitElement {
stroke="var(--info-color)"
class="level"
d="M
${50 - 40 * Math.cos((angle * Math.PI) / 180)}
${50 - 40 * Math.sin((angle * Math.PI) / 180)}
A 40 40 0 0 1 90 50
${0 - 40 * Math.cos((angle * Math.PI) / 180)}
${0 - 40 * Math.sin((angle * Math.PI) / 180)}
A 40 40 0 0 1 40 0
"
></path>`;
}
@ -98,9 +92,9 @@ export class Gauge extends LitElement {
stroke="${level.stroke}"
class="level"
d="M
${50 - 40 * Math.cos((angle * Math.PI) / 180)}
${50 - 40 * Math.sin((angle * Math.PI) / 180)}
A 40 40 0 0 1 90 50
${0 - 40 * Math.cos((angle * Math.PI) / 180)}
${0 - 40 * Math.sin((angle * Math.PI) / 180)}
A 40 40 0 0 1 40 0
"
></path>`;
})
@ -110,46 +104,16 @@ export class Gauge extends LitElement {
this.needle
? svg`<path
class="needle"
d="M 25 47.5 L 2.5 50 L 25 52.5 z"
style=${ifDefined(
!isSafari
? styleMap({ transform: `rotate(${this._angle}deg)` })
: undefined
)}
transform=${ifDefined(
isSafari
? `rotate(${this._angle}${isSafari152 ? "" : " 50 50"})`
: undefined
)}
d="M -25 -2.5 L -47.5 0 L -25 2.5 z"
style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
>
`
: svg`<path
class="value"
d="M 90 50.001 A 40 40 0 0 1 10 50"
style=${ifDefined(
!isSafari
? styleMap({ transform: `rotate(${this._angle}deg)` })
: undefined
)}
transform=${ifDefined(
isSafari
? `rotate(${this._angle}${isSafari152 ? "" : " 50 50"})`
: undefined
)}
d="M -40 0 A 40 40 0 1 0 40 0"
style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
>`
}
${
// Workaround for https://github.com/home-assistant/frontend/issues/6467
isSafari
? svg`<animateTransform
attributeName="transform"
type="rotate"
from="0 50 50"
to="${this._angle} 50 50"
dur="1s"
/>`
: ""
}
</path>
</svg>
<svg class="text">
@ -187,12 +151,10 @@ export class Gauge extends LitElement {
fill: none;
stroke-width: 15;
stroke: var(--gauge-color);
transform-origin: 50% 100%;
transition: all 1s ease 0s;
}
.needle {
fill: var(--primary-text-color);
transform-origin: 50% 100%;
transition: all 1s ease 0s;
}
.level {