PlStat

숫자 하나와 그 숫자에 일어난 변화를 함께 보여 줍니다. 숫자만 있으면 지금 어떤지를, 옆에 움직임이 있으면 어디로 가고 있는지를 보여 줍니다.

React

import { PlStat } from 'plass-ui';

<PlStat label="Revenue" value="£48,120" change={12.4} description="vs last month" />;

import 'package:plass_ui/plass_ui.dart';

PlStat(
  label: const Text('Revenue'),
  value: const Text('₩48,120'),
  change: 12.4,
  description: const Text('vs last month'),
);

Props

Prop	타입	기본값	설명
label	ReactNode	—	무엇의 숫자인지. 위의 줄입니다
value	ReactNode	—	이미 서식이 정해진 숫자 그 자체. 숫자 타입이 아닌 이유는 통화 · 자릿수 · 소수점 · 로케일이 페이지의 결정이기 때문입니다
description	ReactNode	—	숫자 아래 한 줄. 보통 무엇과 비교했는지
icon	ReactNode	—	label 옆의 글리프
change	number	—	얼마나 움직였는지, 퍼센트로. 화살표와 함께 그려지고, 부호가 아니라 좋은 소식인지로 색이 정해집니다
changeLabel	ReactNode	—	퍼센트 대신 변화가 말할 것. 비율이 아니라 개수로 움직인 숫자를 위한 것
improvesWhen	'up' | 'down'	'up'	어느 쪽이 좋은 소식인지. 이탈률 · 지연 시간 · 비용에는 down
loading	boolean	false	숫자가 올 자리에 skeleton을 그립니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	숫자와 그 주위 글자의 타입 스케일
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	아이콘이 쓰는 색 역할
density공통	'default' | 'compact'	'default'	세 줄 사이의 간격만 바꿉니다

Prop	타입	기본값	설명
label	Widget?	—	무엇의 숫자인지. 위의 줄입니다
value	Widget?	—	이미 서식이 정해진 숫자 그 자체. 숫자 타입이 아닌 이유는 통화 · 자릿수 · 소수점 · 로케일이 화면의 결정이고, 이 패키지에는 짐작할 의존성이 없기 때문입니다
description	Widget?	—	숫자 아래 한 줄. 보통 무엇과 비교했는지
icon	Widget?	—	label 옆의 글리프
change	double?	—	얼마나 움직였는지, 퍼센트로. 화살표와 함께 그려지고, 부호가 아니라 좋은 소식인지로 색이 정해집니다
changeLabel	Widget?	—	퍼센트 대신 변화가 말할 것. 비율이 아니라 개수로 움직인 숫자를 위한 것
improvesWhen	PlStatDirection	PlStatDirection.up	어느 쪽이 좋은 소식인지. 이탈률 · 지연 시간 · 비용에는 down
loading	bool	false	숫자가 올 자리에 skeleton을 그립니다
size공통	PlassSize	PlassSize.md	숫자와 그 주위 글자의 타입 스케일
color공통	PlassColor	PlassColor.primary	아이콘이 쓰는 색 역할
density공통	PlassDensity	PlassDensity.standard	세 줄 사이의 간격만 바꿉니다

네이티브 <div> 속성은 그대로 통과합니다. 공유 축이 라이브러리 전체에서 무엇을 뜻하는지는 prop 규약에 있습니다.

improvesWhen

순진한 구현이 틀리는 딱 하나입니다. 움직임의 색은 부호가 아니라 그것이 좋은 변화인지로 정합니다. 이탈률이 오르는 것은 좋은 소식이 아니고, 거기 붙은 초록 화살표는 누군가에게 잘못된 신호를 주는 대시보드입니다.

기본은 up이고 대부분은 그것이 맞습니다. 대시보드의 숫자 중 3분의 1쯤에는 improvesWhen="down"을 주세요: 이탈률, 이탈율(bounce rate), p95 지연, 지원 대기열, 비용.

React

import { PlCard, PlStat } from 'plass-ui';

export default function StatDirection() {
  return (
    <div className="grid w-full max-w-lg gap-4 sm:grid-cols-2">
      <PlCard>
        <PlStat label="Revenue" value="£48,120" change={12.4} description="up is good" />
      </PlCard>
      <PlCard>
        <PlStat
          label="p95 latency"
          value="182ms"
          change={12.4}
          improvesWhen="down"
          description="the same number, down is good"
        />
      </PlCard>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class StatDirection extends StatelessWidget {
  const StatDirection({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 460,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const <Widget>[
          Expanded(
            child: PlCard(
              child: PlStat(
                label: Text('Revenue'),
                value: Text('£48,120'),
                change: 12.4,
                description: Text('up is good'),
              ),
            ),
          ),
          SizedBox(width: 16),
          Expanded(
            child: PlCard(
              child: PlStat(
                label: Text('p95 latency'),
                value: Text('182ms'),
                change: 12.4,
                improvesWhen: PlStatDirection.down,
                description: Text('the same number, down is good'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

value는 node를 받습니다

숫자가 아니고, 일부러 그렇습니다. 숫자를 어떻게 적을지(통화, 자릿수 구분, 소수점, 로케일)는 페이지의 결정이고 Intl.NumberFormat이 이미 그것을 내립니다. 숫자를 받는 컴포넌트라면 넷 다 짐작해야 합니다.

<PlStat
  label="Revenue"
  value={new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' }).format(total)}
/>

같은 이야기이고, 서식은 package:intl이 맡습니다. 이 패키지에는 그것을 할 의존성이 없고, 그것이 value가 위젯인 나머지 절반의 이유입니다.

PlStat(
  label: const Text('매출'),
  value: Text(NumberFormat.simpleCurrency(locale: 'ko_KR').format(total)),
);

위젯이 직접 쓰는 숫자는 PlStat.formatChange 하나뿐입니다. 소수점 한 자리까지, 상승에는 부호. 그보다 특정한 것이 필요하면 changeLabel이 그 자리입니다.

Examples

changeLabel

비율이 아니라 개수로 움직인 숫자를 위한 것입니다.

<PlStat label="Sign-ups" value="1,204" change={8.1} changeLabel="이번 주 +94" />

화살표와 색은 여전히 change가 정하고, changeLabel은 말만 정합니다.

loading

숫자가 올 자리에 skeleton을 그리고, 변화도 함께 붙잡아 둡니다. 아직 아무도 갖지 않은 숫자 옆의 움직임은 아무것도 아닌 것의 움직임입니다.

<PlStat label="Revenue" loading={pending} value={total} change={delta} />

Notes

• 표면을 그리지 않습니다. 숫자는 PlCard 안이나 그런 카드들의 줄에 놓이고, 시트 안의 시트는 시트 둘입니다.
• 숫자는 tabular-nums입니다. 그래서 타이머로 갱신되는 숫자 줄이 자릿수 폭이 바뀔 때마다 흔들리지 않습니다.

Accessibility

• 화살표는 aria-hidden이고 부호는 텍스트 안에 있습니다. "+12.4%"는 그 자체로 올바르게 읽히고, 스크린 리더가 삼각형에 대해 듣지 않습니다.
• 색이 방향을 나르는 유일한 것인 적이 없습니다. 같은 이유로, 부호와 화살표가 둘 다 그것을 나타냅니다.
• role도 heading도 없습니다. 숫자 줄은 페이지가 달리 정하지 않는 한 스크린 리더에게 <div> 몇 개입니다. 페이지가 무엇이냐에 따라 리스트에 넣거나 줄에 <h2>를 주세요.

화살표는 ExcludeSemantics 안에 있고 부호는 텍스트 안에 있습니다. 그래서 스크린 리더가 삼각형이 아니라 "+12.4%"를 듣습니다.