Gauge
A visual component for conveying a percentage.
Usage
import { Gauge } from "@smartacteam/ambient-web/gauge";<Gauge.Root>
<Gauge.Caption>Sample Gauge</Gauge.Caption>
<Gauge.Indicator value={data} />
</Gauge.Root>import { Gauge } from "@smartacteam/ambient-web/gauge";
import {
getComfortZones,
getEnergyBreakdown,
getHVACTimeStates,
getSystemUtilization,
getTemperatureZones,
} from "./data/gauge-data";
export function GaugeDemo() {
const hvacStates = getHVACTimeStates();
const tempZones = getTemperatureZones();
const systemUtil = getSystemUtilization();
const energyData = getEnergyBreakdown();
const comfortData = getComfortZones();
return (
<div className="flex w-full flex-col gap-8">
<Gauge.Root>
<Gauge.Caption>HVAC Time States (24H)</Gauge.Caption>
<Gauge.Indicator value={hvacStates} />
</Gauge.Root>
<Gauge.Root>
<Gauge.Caption>Time in Temperature Zones (24h)</Gauge.Caption>
<Gauge.Indicator value={tempZones} />
</Gauge.Root>
<Gauge.Root>
<Gauge.Caption>System Utilization (%)</Gauge.Caption>
<Gauge.Indicator value={systemUtil} />
</Gauge.Root>
<Gauge.Root>
<Gauge.Caption>Energy Consumption Breakdown</Gauge.Caption>
<Gauge.Indicator value={energyData} />
</Gauge.Root>
<Gauge.Root>
<Gauge.Caption>Comfort Zone Distribution</Gauge.Caption>
<Gauge.Indicator value={comfortData} />
</Gauge.Root>
</div>
);
}import { Gauge } from "@smartacteam/ambient-web/gauge";
import { getHVACTimeStates } from "./data/gauge-data";
export function GaugeIndicatorDemo() {
const hvacStates = getHVACTimeStates();
return (
<div className="flex w-full flex-col gap-8">
<Gauge.Root>
<Gauge.Caption>HVAC Time States (24H)</Gauge.Caption>
<Gauge.Indicator indicator="line" value={hvacStates} />
</Gauge.Root>
<Gauge.Root>
<Gauge.Caption>HVAC Time States (24H)</Gauge.Caption>
<Gauge.Indicator indicator="dashed" value={hvacStates} />
</Gauge.Root>
<Gauge.Root>
<Gauge.Caption>HVAC Time States (24H)</Gauge.Caption>
<Gauge.Indicator indicator="dot" value={hvacStates} />
</Gauge.Root>
<Gauge.Root>
<Gauge.Caption>HVAC Time States (24H)</Gauge.Caption>
<Gauge.Indicator hideIndicator value={hvacStates} />
</Gauge.Root>
</div>
);
}"use client";
import { Gauge } from "@smartacteam/ambient-web/gauge";
import { getHVACTimeStates } from "./data/gauge-data";
export function GaugeIndicatorDemo() {
const hvacStates = getHVACTimeStates();
return (
<div className="flex w-full flex-col gap-8">
<Gauge.Root>
<Gauge.Caption>HVAC Time States (24H)</Gauge.Caption>
<Gauge.Indicator
indicator="line"
value={hvacStates}
formatter={(item) => (
<div className="flex flex-1 items-center justify-between leading-none">
<span className="text-text-secondary">{item.label}</span>
<span className="font-medium text-text-primary tabular-nums">
{item.value.toLocaleString(undefined, {
maximumFractionDigits: item.decimalPlaces ?? undefined,
})}
{(item.unit ?? item?.unit)
? ` ${item?.unit ?? item?.unit}`
: ""}
</span>
</div>
)}
/>
</Gauge.Root>
</div>
);
}"use client";
import { Gauge } from "@smartacteam/ambient-web/gauge";
import { getHVACTimeStates } from "./data/gauge-data";
export function GaugeIndicatorDemo() {
const hvacStates = getHVACTimeStates();
return (
<div className="flex w-full flex-col gap-8">
<Gauge.Root>
<Gauge.Caption>HVAC Time States (24H)</Gauge.Caption>
<Gauge.Indicator
value={hvacStates}
className="gap-0 rounded-full **:data-[slot=gauge-item]:rounded-none"
/>
</Gauge.Root>
</div>
);
}