Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gauge: no value arc at the minimum

Browse Source 
At 0 the value arc is a zero-length dash (pathLength 0), and its round
caps still painted a primary dot on the dial in every look. The arc is
now transparent while its fraction is not above 0. The widget spec puts
a gauge at 0 on its panel and checks it in each look; its tile count,
stale since the buttons widget, is 11.
This commit is contained in:
Melvin Strobl
2026-10-14 12:29:07 +02:00
parent 13e885ee4b
commit 9bed078c41
4 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Dashboard/ui/fluksio/Data.tsx
+4 -1
View File
@@ -64,6 +64,9 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
? 0
: Math.min(1, Math.max(0, (value - min) / (max - min || 1))),
)
// At the minimum the reading is a zero-length dash, and its round caps would
// still paint a dot on the dial. Nothing reads there, so nothing is drawn.
const drawn = useTransform(fraction, (at) => (at > 0 ? 1 : 0))
const { label: reading, numeric } = useAnimatedNumber(value, precision)
return (
<div className="flex min-h-0 flex-1 items-center justify-center">
@@ -86,7 +89,7 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
fraction itself. */}
<motion.path
d={arcPath(GAUGE_START, GAUGE_START + GAUGE_SWEEP)}
style={{ pathLength: fraction }}
style={{ pathLength: fraction, opacity: drawn }}
fill="none"
stroke="var(--primary)"
strokeWidth={9}
frontend/src/components/Dashboard/ui/glass/Data.tsx
+4
View File
@@ -63,6 +63,9 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
? 0
: Math.min(1, Math.max(0, (value - min) / (max - min || 1))),
)
// At the minimum the reading is a zero-length dash, and its round caps would
// still paint a dot on the dial. Nothing reads there, so nothing is drawn.
const drawn = useTransform(fraction, (at) => (at > 0 ? 1 : 0))
const { label: reading, numeric } = useAnimatedNumber(value, precision)
return (
<div className="flex min-h-0 flex-1 items-center justify-center">
@@ -91,6 +94,7 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
// fills and the active controls do.
style={{
pathLength: fraction,
opacity: drawn,
filter: "drop-shadow(0 0 4px var(--primary))",
}}
fill="none"
frontend/src/components/Dashboard/ui/material/Data.tsx
+4 -1
View File
@@ -62,6 +62,9 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
? 0
: Math.min(1, Math.max(0, (value - min) / (max - min || 1))),
)
// At the minimum the reading is a zero-length dash, and its round caps would
// still paint a dot on the dial. Nothing reads there, so nothing is drawn.
const drawn = useTransform(fraction, (at) => (at > 0 ? 1 : 0))
const { label: reading, numeric } = useAnimatedNumber(value, precision)
return (
<div className="flex min-h-0 flex-1 items-center justify-center">
@@ -84,7 +87,7 @@ export function Gauge({ value, min, max, precision, unit, label }: GaugeProps) {
fraction itself. */}
<motion.path
d={arcPath(GAUGE_START, GAUGE_START + GAUGE_SWEEP)}
style={{ pathLength: fraction }}
style={{ pathLength: fraction, opacity: drawn }}
fill="none"
stroke="var(--primary)"
strokeWidth={9}