밀당 DS

시작하기

BarList

Data Visualization

라벨을 바 위에 얹고 값을 우측에 정렬하는 막대 목록.

Usage

항목별 값과 순위를 짧은 가로 막대 목록으로 빠르게 비교할 때 사용한다.

import

import

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

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

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

API Reference

BarList Props

Prop

Type

Default

ariaLabel
필수

string

지정 안 함

data
필수

BarListDatum[]

지정 안 함

className

string

지정 안 함

color

string

지정 안 함

sortOrder

"ascending" | "descending" | "none"

descending

valueFormatter

(value: number) => ReactNode

(value: number) => value.toLocaleString('ko-KR')

예제

기본

코드

Open in Playground
import { BarList } from '@mildang/design-system/Chart';

const subjects = [
  { label: '영어', value: 14200 },
  { label: '수학', value: 12800 },
  { label: '국어', value: 9340 },
  { label: '과학', value: 7000 },
  { label: '사회', value: 4200 },
];

const BarListDefaultExample = () => <BarList data={subjects} ariaLabel="과목별 학습 시간" valueFormatter={(v) => `${v.toLocaleString('ko-KR')}분`} />;

export default BarListDefaultExample;

커스텀 색상

코드

Open in Playground
import { BarList } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';

const subjects = [
  { label: '영어', value: 14200 },
  { label: '수학', value: 12800 },
  { label: '국어', value: 9340 },
  { label: '과학', value: 7000 },
  { label: '사회', value: 4200 },
];

const BarListCustomColorExample = () => (
    <BarList
      data={subjects}
      ariaLabel="과목별 학습 시간"
      color={token('colors.positive.surface.base')}
      valueFormatter={(v) => `${v.toLocaleString('ko-KR')}분`}
    />
  );

export default BarListCustomColorExample;