RangedDotPlot

Data Visualization

visx 기반 덤벨 차트.

Usage

범주별 이전·이후 두 값의 차이와 방향을 점과 연결선으로 비교할 때 사용한다.

import

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

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

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

API Reference

RangedDotPlot Props

Prop

Type

Default

categoryKey

필수

string

지정 안 함

data

필수

TDatum[]

지정 안 함

endKey

필수

string

지정 안 함

startKey

필수

string

지정 안 함

className

string

지정 안 함

endColor

string

지정 안 함

endLabel

string

지정 안 함

layout

"horizontal" | "vertical"

horizontal

legendPosition

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

bottom

lineColor

string

지정 안 함

margin

Partial<ChartMargin>

지정 안 함

pointRadius

number

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

startColor

string

지정 안 함

startLabel

string

지정 안 함

valueFormat

(value: number) => string

지정 안 함

예제

기본 (가로)

코드

Open in Playground

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

// 단원별 진단평가 → 총괄평가 정답률 (%)
const unitData = [
  { unit: '수와 연산', before: 52, after: 78 },
  { unit: '문자와 식', before: 47, after: 70 },
  { unit: '함수', before: 38, after: 65 },
  { unit: '기하', before: 55, after: 72 },
  { unit: '확률과 통계', before: 61, after: 83 },
];

const RangedDotPlotDefaultExample = () => (
    <RangedDotPlot
      data={unitData}
      categoryKey="unit"
      startKey="before"
      endKey="after"
      startLabel="진단평가"
      endLabel="총괄평가"
      margin={{ left: 88 }}
      showLegend
    />
  );

export default RangedDotPlotDefaultExample;

세로 레이아웃

코드

Open in Playground

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

// 단원별 진단평가 → 총괄평가 정답률 (%)
const unitData = [
  { unit: '수와 연산', before: 52, after: 78 },
  { unit: '문자와 식', before: 47, after: 70 },
  { unit: '함수', before: 38, after: 65 },
  { unit: '기하', before: 55, after: 72 },
  { unit: '확률과 통계', before: 61, after: 83 },
];

const RangedDotPlotVerticalExample = () => (
    <RangedDotPlot
      data={unitData}
      categoryKey="unit"
      startKey="before"
      endKey="after"
      startLabel="진단평가"
      endLabel="총괄평가"
      layout="vertical"
      showLegend
    />
  );

export default RangedDotPlotVerticalExample;

Hover Tooltip

코드

Open in Playground

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

// 단원별 진단평가 → 총괄평가 정답률 (%)
const unitData = [
  { unit: '수와 연산', before: 52, after: 78 },
  { unit: '문자와 식', before: 47, after: 70 },
  { unit: '함수', before: 38, after: 65 },
  { unit: '기하', before: 55, after: 72 },
  { unit: '확률과 통계', before: 61, after: 83 },
];

const RangedDotPlotHoverTooltipExample = () => (
    <RangedDotPlot
      data={unitData}
      categoryKey="unit"
      startKey="before"
      endKey="after"
      startLabel="진단평가"
      endLabel="총괄평가"
      margin={{ left: 88 }}
      showTooltip
    />
  );

export default RangedDotPlotHoverTooltipExample;

커스텀 색상

코드

Open in Playground

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

// 단원별 진단평가 → 총괄평가 정답률 (%)
const unitData = [
  { unit: '수와 연산', before: 52, after: 78 },
  { unit: '문자와 식', before: 47, after: 70 },
  { unit: '함수', before: 38, after: 65 },
  { unit: '기하', before: 55, after: 72 },
  { unit: '확률과 통계', before: 61, after: 83 },
];

const RangedDotPlotCustomColorsExample = () => (
    <RangedDotPlot
      data={unitData}
      categoryKey="unit"
      startKey="before"
      endKey="after"
      startLabel="진단평가"
      endLabel="총괄평가"
      startColor={token('colors.orange.light.400')}
      endColor={token('colors.green.light.400')}
      lineColor={token('colors.neutral.border.high')}
      pointRadius={7}
      margin={{ left: 88 }}
      showLegend
    />
  );

export default RangedDotPlotCustomColorsExample;

빈 데이터

코드

Open in Playground

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

const RangedDotPlotEmptyExample = () => (
    <RangedDotPlot data={[]} categoryKey="unit" startKey="before" endKey="after" showLegend />
  );

export default RangedDotPlotEmptyExample;

데이터 1개

코드

Open in Playground

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

const RangedDotPlotSingleDatumExample = () => (
    <RangedDotPlot
      data={[{ unit: '함수', before: 38, after: 65 }]}
      categoryKey="unit"
      startKey="before"
      endKey="after"
      startLabel="진단평가"
      endLabel="총괄평가"
      showLegend
    />
  );

export default RangedDotPlotSingleDatumExample;

0값·동일값

코드

Open in Playground

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

const RangedDotPlotZeroAndEqualValuesExample = () => (
    <RangedDotPlot
      data={[
        { unit: '수와 연산', before: 0, after: 48 },
        { unit: '문자와 식', before: 55, after: 55 },
        { unit: '함수', before: 0, after: 0 },
      ]}
      categoryKey="unit"
      startKey="before"
      endKey="after"
      startLabel="진단평가"
      endLabel="총괄평가"
      margin={{ left: 88 }}
      showLegend
    />
  );

export default RangedDotPlotZeroAndEqualValuesExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

// 단원별 진단평가 → 총괄평가 정답률 (%)
const unitData = [
  { unit: '수와 연산', before: 52, after: 78 },
  { unit: '문자와 식', before: 47, after: 70 },
  { unit: '함수', before: 38, after: 65 },
  { unit: '기하', before: 55, after: 72 },
  { unit: '확률과 통계', before: 61, after: 83 },
];

const RangedDotPlotResponsiveExample = () => (
    <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 }}>
            <RangedDotPlot
              data={unitData}
              categoryKey="unit"
              startKey="before"
              endKey="after"
              startLabel="진단평가"
              endLabel="총괄평가"
              margin={{ left: 88 }}
              showLegend
            />
          </div>
        </div>
      ))}
    </div>
  );

export default RangedDotPlotResponsiveExample;