GaugeChart

Data Visualization

visx 기반 반원 게이지.

Usage

하나의 지표가 목표 범위에서 어느 정도에 도달했는지 반원 게이지로 표시할 때 사용한다.

import

import { GaugeChart } from '@mildang/design-system/Chart';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

GaugeChart Props

Prop

Type

Default

value

필수

number

지정 안 함

bands

GaugeBand[]

지정 안 함

className

string

지정 안 함

color

string

지정 안 함

label

string

지정 안 함

margin

Partial<ChartMargin>

지정 안 함

max

number

100

min

number

showTicks

boolean

false

thickness

number

지정 안 함

trackColor

string

지정 안 함

valueFormat

(value: number) => string

(value: number) => value.toLocaleString()

예제

기본

코드

Open in Playground

import { GaugeChart } from '@mildang/design-system/Chart';

const percentFormat = (v: number) => `${v.toLocaleString()}%`;

const GaugeChartBasicExample = () => <GaugeChart value={72} label="목표 진도율" valueFormat={percentFormat} />;

export default GaugeChartBasicExample;

구간 밴드

코드

Open in Playground

import { GaugeChart } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';

const percentFormat = (v: number) => `${v.toLocaleString()}%`;

const GaugeChartWithBandsExample = () => (
    <GaugeChart
      value={91}
      label="단원 평가 정답률"
      valueFormat={percentFormat}
      bands={[
        { to: 60, color: token('colors.critical.surface.base') },
        { to: 85, color: token('colors.warning.surface.base') },
        { to: 100, color: token('colors.positive.surface.base') },
      ]}
    />
  );

export default GaugeChartWithBandsExample;

min/max 눈금

코드

Open in Playground

import { GaugeChart } from '@mildang/design-system/Chart';

const GaugeChartWithTicksExample = () => (
    <GaugeChart
      value={412}
      min={0}
      max={600}
      label="이번 달 학습 시간 (분)"
      showTicks
    />
  );

export default GaugeChartWithTicksExample;

커스텀 색·두께

코드

Open in Playground

import { GaugeChart } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';

const percentFormat = (v: number) => `${v.toLocaleString()}%`;

const GaugeChartCustomStyleExample = () => (
    <GaugeChart
      value={68}
      label="영어 단어 암기율"
      valueFormat={percentFormat}
      color={token('colors.blue.light.400')}
      trackColor={token('colors.blue.light.100')}
      thickness={28}
    />
  );

export default GaugeChartCustomStyleExample;

값 0 (엣지)

코드

Open in Playground

import { GaugeChart } from '@mildang/design-system/Chart';

const percentFormat = (v: number) => `${v.toLocaleString()}%`;

const GaugeChartZeroValueExample = () => <GaugeChart value={0} label="오늘 학습 진도율" valueFormat={percentFormat} showTicks />;

export default GaugeChartZeroValueExample;

최댓값 초과 (아크는 클램프, 텍스트는 실제 값)

코드

Open in Playground

import { GaugeChart } from '@mildang/design-system/Chart';

const percentFormat = (v: number) => `${v.toLocaleString()}%`;

const GaugeChartOverMaxExample = () => <GaugeChart value={112} label="월 매출 목표 달성률" valueFormat={percentFormat} />;

export default GaugeChartOverMaxExample;

반응형 (너비 자동 조정)

코드

Open in Playground

import { GaugeChart } from '@mildang/design-system/Chart';

const percentFormat = (v: number) => `${v.toLocaleString()}%`;

const GaugeChartResponsiveExample = () => (
    <div style={{ display: 'flex', gap: 32, alignItems: 'flex-end' }}>
      {([160, 240, 360] as const).map((w) => (
        <div key={w} style={{ width: w, height: w * 0.7 }}>
          <GaugeChart value={72} label={`${w}px`} valueFormat={percentFormat} />
        </div>
      ))}
    </div>
  );

export default GaugeChartResponsiveExample;