Gauge

Live Demo

When to Use

Gauge는 단일 측정값의 현재 상태나 진행 수준을 180° 반원 아크(arc)로 표현합니다. 값은 트랙의 최소(min)–최대(max) 범위 위의 한 지점으로 나타나며, 채워진 아크의 길이로 목표(max) 대비 현재 위치를 직관적으로 보여줍니다. 단일 값 전용이며, 축은 사용하지 않습니다. 주로 대시보드에서 사용량·달성률·점수 등 하나의 핵심 지표를 강조할 때 사용합니다.

여러 대상을 비교해야 하는 경우에는 gauge 대신 Bar Gauge를 사용합니다.

Anatomy

1. Title (optional)
2. Track
3. Progress
4. Value
5. Label (optional)
6. Zone scale ring (optional)

Content

Structure

Gauge는 하나의 데이터 값을 반원 아크 위에 표현합니다. Track은 측정 범위 전체(min–max, 기본 0–100)를, progress 아크는 현재 값을 나타내며, 채워진 아크의 비율이 목표(max) 대비 현재 값의 상대적 위치를 의미합니다. 값은 min–max 범위로 클램프됩니다.

현재 값과 캡션(label)은 아크 중앙에 배치하여, 정확한 수치를 시각적 위치와 함께 즉시 인지할 수 있도록 합니다. 값의 표기는 valueFormatter로 단위·포맷을 지정합니다.

Status Zones

상태 구간(zones)이 필요한 경우, 진행 아크는 값이 속한 구간의 색으로 칠해지고 아크를 따라 얇은 스케일 링이 함께 표시됩니다. 구간은 하한(from) 기준 오름차순으로 정의하며, 색을 지정하지 않으면 기본 램프(green → yellow → red)가 적용됩니다.

상태 구간을 사용하지 않으면 진행 아크는 단색(chart sequence의 첫 번째 색)으로 표현됩니다.

Data Display

상태를 색상으로 표현할 때는 색상만으로 의미를 전달하지 않고, 값·라벨과 함께 제공하여 색상 인지가 어려운 환경에서도 상태를 파악할 수 있도록 합니다.

✓DoRecommended

현재 값과 캡션을 아크 중앙에 함께 표시합니다.

✓DoRecommended

상태 구간은 하한 값 기준 오름차순으로 정의합니다.

✕Don'tRecommended

하나의 gauge에 여러 값을 표현하지 않습니다. 여러 대상 비교는 bar gauge를 사용합니다.