GaugeChart

GaugeChart

KPI와 상태 표시를 위한 방사형 게이지 차트예요. 단일 값을 원호(arc)에 표시할 때 사용해요. @mantine/charts의 대부분 차트와 달리 recharts를 사용하지 않고 일반 svg 요소로 렌더링돼요.

출처: 문서

본문

Usage

GaugeChart는 방사형 원호에 단일 값을 표시해요. KPI, 사용률, 상태 표시기에 사용하세요. 원호는 min(기본 0)부터 value까지 채워지고, 값은 차트 중앙에 표시돼요.

@mantine/charts의 대부분 차트와 달리 GaugeChart는 recharts를 사용하지 않아요. 일반 svg 요소로 렌더링돼요.

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} />;
}

Sections

sections는 원호를 임계값 밴드로 나눠요. 각 섹션은 이전 섹션의 상한부터 자기 value까지 채워지므로 마지막 섹션은 max에서 끝나야 해요. 섹션은 value 기준으로 자동 정렬돼요.

sections가 설정되면 원호는 현재 값이 아니라 임계값을 나타낸다는 점에 주의하세요. 원호 전체가 색칠되고 value는 중앙 라벨에만 표시돼요. 값이 원호의 어디에 있는지 표시하려면 target marker를 사용하세요.

Target marker

target은 주어진 값에 원호를 가로지르는 라인 마커를 그려요. 현재 값 옆에 목표를 표시하거나, sections가 있는 게이지에서 현재 값을 가리킬 때 사용해요. targetColor는 색을, targetSize는 두께를 제어해요.

Start and end angle

startAngle과 endAngle은 도 단위로 원호의 범위를 제어해요. 기본값은 -120, 120이고(0은 차트 상단, 양수는 시계 방향), 결과 원호로 차트의 viewBox가 계산되므로 원의 일부만 사용하는 원호는 차트 주위에 빈 공간을 남기지 않아요.

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} startAngle={-90} endAngle={90} />;
}

360도 이상의 범위는 전체 원을 렌더링하고, endAngle을 startAngle보다 낮게 설정하면 원호가 반시계 방향으로 그려져요. sections와 target도 같은 방향을 따라요.

Thickness

thickness는 원호의 너비(px)를, size는 차트의 너비와 높이를 제어해요.

Custom label

기본적으로 중앙 라벨은 valueFormatter로 형식화된 value를 표시해요. label prop으로 대신 어떤 React 노드든 렌더링할 수 있어요.

import { GaugeChart } from '@mantine/charts';
import { Text } from '@mantine/core';

function Demo() {
  return (
    <GaugeChart
      value={72}
      label={
        <Text ta="center">
          72%
          CPU Usage
        </Text>
      }
    />
  );
}

Round caps

roundCaps를 설정하면 원호의 끝점을 둥글게 만들어요. sections가 있으면 첫 번째와 마지막 섹션의 바깥쪽 끝만 둥글게 되고, 인접한 섹션은 서로 겹치지 않도록 직선 가장자리를 유지해요.

Accessibility

루트 svg 요소는 role="meter"이며 aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext 속성을 가져요. aria-label을 설정해 게이지에 접근 가능한 이름을 부여하세요.

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} aria-label="CPU usage" />;
}

더 알아보기 (Learn more)

• BulletChart
• WaffleChart