KpiCard

Data Visualization

큰 값과 증감·미니 스파크라인을 담는 KPI 지표 카드.

Usage

핵심 수치·증감·미니 추세를 한 카드에서 요약할 때 사용한다.

import

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

API Reference

KpiCard Props

Prop

Type

Default

label

필수

string

지정 안 함

value

필수

string | number

지정 안 함

className

string

지정 안 함

delta

number

지정 안 함

deltaFormat

(delta: number) => string

(delta: number) => Math.abs(delta).toLocaleString('ko-KR')

deltaLabel

string

지정 안 함

format

(value: number) => string

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

sparklineData

number[]

지정 안 함

unit

string

지정 안 함

예제

기본

코드

Open in Playground

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

const KpiCardBasicExample = () => <KpiCard label="평균 정답률" value={85.5} unit="%" />;

export default KpiCardBasicExample;

증감 배지

코드

Open in Playground

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

const KpiCardWithDeltaExample = () => (
    <KpiCard
      label="평균 정답률"
      value={85.5}
      unit="%"
      delta={1.5}
      deltaLabel="전월 대비"
      deltaFormat={(d) => `${Math.abs(d).toFixed(1)}%p`}
    />
  );

export default KpiCardWithDeltaExample;

하락 지표

코드

Open in Playground

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

const KpiCardNegativeDeltaExample = () => (
    <KpiCard
      label="주간 학습 시간"
      value={342}
      unit="분"
      delta={-28}
      deltaLabel="전주 대비"
      sparklineData={[410, 395, 388, 370, 342]}
    />
  );

export default KpiCardNegativeDeltaExample;

스파크라인

코드

Open in Playground

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

// 최근 6개월 평균 정답률 추이 (%)
const accuracyTrend = [78.2, 80.1, 79.4, 82.3, 84.0, 85.5];

const KpiCardWithSparklineExample = () => (
    <KpiCard
      label="평균 정답률"
      value={85.5}
      unit="%"
      delta={1.5}
      deltaLabel="전월 대비"
      deltaFormat={(d) => `${Math.abs(d).toFixed(1)}%p`}
      sparklineData={accuracyTrend}
    />
  );

export default KpiCardWithSparklineExample;

문자열 값

코드

Open in Playground

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

const KpiCardStringValueExample = () => <KpiCard label="이번 주 최우수 학생" value="김민준" deltaLabel="3주 연속" />;

export default KpiCardStringValueExample;

값 포맷 (매출)

코드

Open in Playground

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

const KpiCardCustomFormatExample = () => (
    <KpiCard
      label="월 매출"
      value={128500000}
      delta={12300000}
      deltaLabel="전월 대비"
      format={(v) => `${(v / 100000000).toFixed(1)}억원`}
      deltaFormat={(d) => `${(Math.abs(d) / 10000).toLocaleString('ko-KR')}만원`}
      sparklineData={[98000000, 104000000, 99000000, 116200000, 116200000, 128500000]}
    />
  );

export default KpiCardCustomFormatExample;

증감 0 (배지 미표시)

코드

Open in Playground

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

const KpiCardZeroDeltaExample = () => (
    <KpiCard label="단원 진도율" value={64} unit="%" delta={0} deltaLabel="전주 대비" />
  );

export default KpiCardZeroDeltaExample;

스파크라인 데이터 부족 (미표시)

코드

Open in Playground

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

const KpiCardEmptySparklineExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <KpiCard label="빈 배열" value={0} sparklineData={[]} />
      <KpiCard label="데이터 1개" value={72} unit="점" sparklineData={[72]} />
    </div>
  );

export default KpiCardEmptySparklineExample;

반응형 (카드 폭에 맞춰 늘어남)

코드

Open in Playground

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

// 최근 6개월 평균 정답률 추이 (%)
const accuracyTrend = [78.2, 80.1, 79.4, 82.3, 84.0, 85.5];

const KpiCardResponsiveExample = () => (
    <div style={{ display: 'flex', gap: 16 }}>
      {([160, 240, 360] as const).map((w) => (
        <div key={w} style={{ width: w }}>
          <KpiCard
            label="평균 정답률"
            value={85.5}
            unit="%"
            delta={1.5}
            deltaLabel="전월 대비"
            deltaFormat={(d) => `${Math.abs(d).toFixed(1)}%p`}
            sparklineData={accuracyTrend}
          />
        </div>
      ))}
    </div>
  );

export default KpiCardResponsiveExample;