Statistic

이름 붙은 수치 하나를 보여 줍니다. 이전 값을 함께 주면 변화량을 계산해 옆에 표시합니다.

import { Statistic } from 'neba';

<Statistic label="월 반복 매출" value={48210} prefix="$" previousValue={42800} />;

Props

Prop	타입	기본값	설명
label	ReactNode	—	숫자의 이름. Card가 title이라 부르는 자리지만, 여기 있는 것은 *값*의 이름이고 그것은 라이브러리가 이미 label이라 쓰고 있는 것입니다
value *	ReactNode	—	수치. 숫자는 형식이 적용되고, 그 밖의 것은 그대로 렌더링됩니다. 숫자가 아닌 값("3h 42m", "A+")이나, AnimateCounter처럼 들어오는 길에 무언가를 하는 노드를 위해서
format	Intl.NumberFormatOptions	—	숫자를 어떻게 쓸지. 진행 표시기가 받는 것과 같은 prop이고, 없으면 읽는 사람의 로케일대로 자릿수만 끊습니다
locale	string	the reader's	수치를 어떤 언어로 쓸지. 모든 차트가 받는 것과 같은 prop입니다. 대시보드에서 Statistic은 차트들 옆에 서므로 한쪽에 걸 수 있는 로케일은 다른 쪽에도 걸 수 있어야 합니다
prefix	ReactNode	—	수치 앞, 통화 기호
unit	ReactNode	—	수치 뒤, %, MB, 명. prefix와 따로인 이유는 둘이 조판상 다른 것이기 때문입니다: 통화 기호는 숫자 앞에 서고 단위는 뒤에 섭니다
icon	ReactNode	—	라벨 앞의 글리프
previousValue	number	—	비교 대상이 되는 수치, 지난달 값, 목표치. 이 값을 주는 것이 차이 표시를 켜는 스위치입니다
delta	'percent' | 'absolute' | 'both' | 'none'	'percent'	차이를 어떻게 쓸지. 기본이 백분율인 이유는 보고서가 대개 "몇 개 늘었나"가 아니라 "얼마나 움직였나"를 묻기 때문입니다. previousValue가 0이면 나눌 것이 없으므로 차이 자체로 내려앉습니다
betterWhen	'up' | 'down'	'up'	어느 쪽이 좋은 방향인지, 그래서 차이를 어느 색으로 칠할지. 매출은 up, 이탈률·오류율·페이지 용량은 down입니다
caption	ReactNode	—	수치 아래 한 줄, "지난달 대비"
align공통	'start' | 'center' | 'end'	'start'	카드 안에서 블록이 앉는 자리. 한 줄로 늘어놓는 타일이면 center
variant공통	'solid' | 'outline' | 'text'	'outline'	표면의 무게. Box의 것 그대로, Statistic은 배치가 얹힌 Box입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	수치의 타입 스케일과 시트의 여백·모서리
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
children	ReactNode	—	caption 아래 무엇이든, 스파크라인, 목표 대비 ProgressLinear
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="zoom"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요

<div>의 native 속성과 Box의 모든 prop이 그대로 전달됩니다. 변화량은 Chip으로 렌더링됩니다.

예시

previousValue · delta · betterWhen

previousValue를 주면 현재 값과의 변화량이 계산되어 표시됩니다. delta는 그 변화를 비율로 쓸지, 차이로 쓸지, 둘 다 쓸지를 정합니다.

betterWhen은 어느 방향이 좋은 소식인지 알려 줍니다. 매출은 올라가는 쪽이, 이탈률은 내려가는 쪽이 좋으므로, 이 값이 없으면 변화량의 색을 정할 수 없습니다.

import { Grid, GridContainer, Statistic } from 'neba';

/**
 * `betterWhen` is the whole reason the delta can be trusted. Both cards below
 * went *up*; only one of them is good news, and the colour has to say which.
 */
export default function StatisticComparison() {
  return (
    <GridContainer spacing={3} padded={false}>
      <Grid span={{ xs: 12, sm: 6 }}>
        <Statistic
          label="Signups"
          value={3120}
          previousValue={2740}
          caption="betterWhen up (the default)"
          className="h-full"
        />
      </Grid>
      <Grid span={{ xs: 12, sm: 6 }}>
        <Statistic
          label="p95 latency"
          value={412}
          unit="ms"
          previousValue={366}
          betterWhen="down"
          caption="betterWhen down"
          className="h-full"
        />
      </Grid>

      <Grid span={{ xs: 12, sm: 6 }}>
        <Statistic
          label="Open incidents"
          value={7}
          previousValue={12}
          betterWhen="down"
          delta="absolute"
          caption='delta="absolute"'
          className="h-full"
        />
      </Grid>
      <Grid span={{ xs: 12, sm: 6 }}>
        <Statistic
          label="Seats used"
          value={188}
          previousValue={160}
          delta="both"
          caption='delta="both"'
          className="h-full"
        />
      </Grid>
    </GridContainer>
  );
}

수치와 변화량은 색과 함께 모양도 바뀝니다. 오를 때는 상승 화살표, 내릴 때는 하락 화살표, 변화가 없을 때는 짧은 선입니다. 색만으로 방향을 표현하지 않습니다.

icon · unit · caption · align

icon은 라벨 앞, unit은 수치 뒤에 놓입니다. children은 수치 아래 자리로, 목표 대비 ProgressLinear나 Sparkline을 넣을 수 있습니다. align="center"는 여러 타일을 한 줄로 늘어놓을 때 씁니다.

prefix와 unit이 따로 있는 이유는 조판 위치가 다르기 때문입니다. 통화 기호는 숫자 앞, 단위는 뒤에 옵니다.

import { Grid, GridContainer, Icon, ProgressLinear, Statistic } from 'neba';

function UsersIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <circle cx="6" cy="5.5" r="2.5" stroke="currentColor" strokeWidth="1.5" />
      <path
        d="M1.75 13c0-2.3 1.9-3.75 4.25-3.75S10.25 10.7 10.25 13"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
      <path
        d="M11 4.5a2 2 0 0 1 0 4M12 9.75c1.4.45 2.25 1.6 2.25 3.25"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

/**
 * The slots, and what a Statistic looks like when it is asked to carry more than
 * a number: an icon on the label, a unit on the figure, and something of your
 * own underneath.
 */
export default function StatisticAnatomy() {
  return (
    <GridContainer spacing={3} padded={false}>
      <Grid span={{ xs: 12, sm: 6 }}>
        <Statistic
          icon={<Icon icon={<UsersIcon />} size="sm" />}
          label="Seats"
          value={188}
          unit="/ 250"
          caption="75% of the plan"
          className="h-full"
        >
          <ProgressLinear value={75} label="Seats used" />
        </Statistic>
      </Grid>

      <Grid span={{ xs: 12, sm: 3 }}>
        <Statistic
          label="Uptime"
          value="99.98%"
          align="center"
          variant="solid"
          color="success"
          className="h-full"
        />
      </Grid>

      <Grid span={{ xs: 12, sm: 3 }}>
        <Statistic
          label="Median build"
          value="3m 12s"
          align="center"
          variant="text"
          size="sm"
          className="h-full"
        />
      </Grid>
    </GridContainer>
  );
}

format

format은 Intl.NumberFormat 옵션으로 그대로 전달됩니다. 생략하면 읽는 사람의 locale에 맞춰 자릿수만 구분합니다. value에 문자열을 주면 서식을 적용하지 않고 그대로 출력하므로, 숫자가 아닌 수치도 표시할 수 있습니다.

<Statistic label="매출" value={48210} format={{ style: 'currency', currency: 'KRW' }} />
<Statistic label="전환율" value={0.0423} format={{ style: 'percent', maximumFractionDigits: 1 }} />
<Statistic label="빌드 중앙값" value="3m 12s" />

previousValue가 0이면 비율을 계산할 수 없으므로, delta 설정과 무관하게 차이 값만 표시합니다.

locale

locale은 수치와 차이 값을 어느 언어로 쓸지 정합니다. 모든 차트가 받는 것과 같은 prop이므로, 대시보드 한 장에 놓인 Statistic과 LineChart에 같은 값을 걸 수 있습니다. 생략하면 읽는 사람의 locale을 따릅니다.

<Statistic label="매출" value={1234.5} locale="de-DE" format={{ minimumFractionDigits: 1 }} />