PyramidChart

Data Visualization

인구 피라미드형 좌우 대칭 가로 막대 차트.

Usage

연령·성별처럼 두 집단의 범주별 분포를 좌우 대칭 막대로 비교할 때 사용한다.

import

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

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

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

API Reference

PyramidChart Props

Prop

Type

Default

categoryKey

필수

string

지정 안 함

data

필수

TDatum[]

지정 안 함

leftKey

필수

string

지정 안 함

rightKey

필수

string

지정 안 함

className

string

지정 안 함

leftColor

string

지정 안 함

leftLabel

string

지정 안 함

legendPosition

"bottom" | "left" | "right" | "top"

bottom

margin

Partial<ChartMargin>

지정 안 함

rightColor

string

지정 안 함

rightLabel

string

지정 안 함

showLegend

boolean

false

showTooltip

boolean

false

showValueText

boolean

false

예제

기본

코드

Open in Playground

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

const gradeData = [
  { grade: '중1', male: 124, female: 118 },
  { grade: '중2', male: 136, female: 141 },
  { grade: '중3', male: 152, female: 148 },
  { grade: '고1', male: 168, female: 172 },
  { grade: '고2', male: 145, female: 139 },
  { grade: '고3', male: 121, female: 127 },
];

const PyramidChartBasicExample = () => (
    <PyramidChart
      data={gradeData}
      categoryKey="grade"
      leftKey="male"
      rightKey="female"
      leftLabel="남학생"
      rightLabel="여학생"
      showLegend
    />
  );

export default PyramidChartBasicExample;

Hover Tooltip

코드

Open in Playground

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

const gradeData = [
  { grade: '중1', male: 124, female: 118 },
  { grade: '중2', male: 136, female: 141 },
  { grade: '중3', male: 152, female: 148 },
  { grade: '고1', male: 168, female: 172 },
  { grade: '고2', male: 145, female: 139 },
  { grade: '고3', male: 121, female: 127 },
];

const PyramidChartHoverTooltipExample = () => (
    <PyramidChart
      data={gradeData}
      categoryKey="grade"
      leftKey="male"
      rightKey="female"
      leftLabel="남학생"
      rightLabel="여학생"
      showTooltip
    />
  );

export default PyramidChartHoverTooltipExample;

값 라벨

코드

Open in Playground

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

const gradeData = [
  { grade: '중1', male: 124, female: 118 },
  { grade: '중2', male: 136, female: 141 },
  { grade: '중3', male: 152, female: 148 },
  { grade: '고1', male: 168, female: 172 },
  { grade: '고2', male: 145, female: 139 },
  { grade: '고3', male: 121, female: 127 },
];

const PyramidChartWithValueTextExample = () => (
    <PyramidChart
      data={gradeData}
      categoryKey="grade"
      leftKey="male"
      rightKey="female"
      leftLabel="남학생"
      rightLabel="여학생"
      showValueText
      showLegend
    />
  );

export default PyramidChartWithValueTextExample;

커스텀 색상 — 반별 단원 정답 수

코드

Open in Playground

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

const classData = [
  { unit: '1단원', classA: 42, classB: 38 },
  { unit: '2단원', classA: 35, classB: 44 },
  { unit: '3단원', classA: 48, classB: 40 },
  { unit: '4단원', classA: 31, classB: 36 },
];

const PyramidChartCustomColorsExample = () => (
    <PyramidChart
      data={classData}
      categoryKey="unit"
      leftKey="classA"
      rightKey="classB"
      leftLabel="A반"
      rightLabel="B반"
      leftColor={token('colors.purple.light.400')}
      rightColor={token('colors.lime.light.300')}
      showValueText
      showLegend
      showTooltip
    />
  );

export default PyramidChartCustomColorsExample;

값이 0인 경우

코드

Open in Playground

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

const zeroData = [
  { grade: '중1', male: 124, female: 0 },
  { grade: '중2', male: 0, female: 141 },
  { grade: '중3', male: 0, female: 0 },
  { grade: '고1', male: 168, female: 172 },
];

const PyramidChartWithZeroValuesExample = () => (
    <PyramidChart
      data={zeroData}
      categoryKey="grade"
      leftKey="male"
      rightKey="female"
      leftLabel="남학생"
      rightLabel="여학생"
      showValueText
      showLegend
    />
  );

export default PyramidChartWithZeroValuesExample;

데이터 1개

코드

Open in Playground

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

const PyramidChartSingleDatumExample = () => (
    <PyramidChart
      data={[{ grade: '고1', male: 168, female: 172 }]}
      categoryKey="grade"
      leftKey="male"
      rightKey="female"
      leftLabel="남학생"
      rightLabel="여학생"
      showValueText
    />
  );

export default PyramidChartSingleDatumExample;

빈 배열

코드

Open in Playground

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

const PyramidChartEmptyExample = () => (
    <PyramidChart
      data={[]}
      categoryKey="grade"
      leftKey="male"
      rightKey="female"
      leftLabel="남학생"
      rightLabel="여학생"
      showLegend
    />
  );

export default PyramidChartEmptyExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

const gradeData = [
  { grade: '중1', male: 124, female: 118 },
  { grade: '중2', male: 136, female: 141 },
  { grade: '중3', male: 152, female: 148 },
  { grade: '고1', male: 168, female: 172 },
  { grade: '고2', male: 145, female: 139 },
  { grade: '고3', male: 121, female: 127 },
];

const PyramidChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([280, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w }}>
          <div style={{ marginBottom: 4, fontSize: 11, color: '#888' }}>{w}px</div>
          <div style={{ width: w, height: 240 }}>
            <PyramidChart
              data={gradeData}
              categoryKey="grade"
              leftKey="male"
              rightKey="female"
              leftLabel="남학생"
              rightLabel="여학생"
              showLegend
            />
          </div>
        </div>
      ))}
    </div>
  );

export default PyramidChartResponsiveExample;