Gauge

A visual component for conveying a percentage.

HVAC Time States (24H)

Time in Temperature Zones (24h)

System Utilization (%)

Energy Consumption Breakdown

Comfort Zone Distribution

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>
  );
}

Usage

import { Gauge } from "@smartacteam/ambient-web/gauge";

<Gauge.Root>
  <Gauge.Caption>Sample Gauge</Gauge.Caption>
  <Gauge.Indicator value={data} />
</Gauge.Root>

Examples

Indicator Types

HVAC Time States (24H)

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>
  );
}

Custom formatter

HVAC Time States (24H)

"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>
  );
}

Custom Indicator Styles

HVAC Time States (24H)

"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>
  );
}