대시보드

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

모니터링 화면의 데이터 패널을 한 격자에 두세요. Dashboard.Root는 20rem 패널이 들어가는 만큼 열을 두고, 폰에서는 한 열입니다. Dashboard.Panel은 카드 한 장에 제목, 정보 버튼 뒤의 설명(선택), 제목 바로 뒤에 놓는 내용용 컨트롤(항목을 묶는 방식 같은), 머리글 끝의 동작, 데이터 상태를 담습니다. 첫 데이터가 오기 전에는 자리표시자를, 실패하면 다시 시도가 있는 메시지를, 기간이 비면 문장을 보여 줍니다. 새로 고치는 동안에는 내용을 그대로 두고 제목 옆에 스피너를 띄웁니다. 새로 고치는 패널은 그 사이에도 refreshing={false}를 주어 스피너 자리를 지키게 하면, 뒤의 툴바가 움직이지 않습니다. 보조 패널은 collapsible로 제목과 요약 한 줄로 접고, 방문이 바뀌어도 기억하게 할 수 있습니다. 접힌 패널은 제 높이를 지키므로 더 높은 패널 옆에서는 줄의 나머지가 빈 채로 남습니다. 촘촘한 대시보드는 SizeProvider size='small' density='compact'로 감싸세요. 패널 간격과 안쪽 여백이 12px이 되고, 제목은 label 역할을 쓰며, 안의 차트와 표도 compact가 됩니다.

• 새로 고치는 동안 패널을 비우지 마세요. 마지막 값을 두고 refreshing을 주세요.
• 페이지의 다른 구획을 패널에 넣지 마세요. 모든 블록이 카드인 곳은 대시보드뿐입니다.
• 촘촘한 차트에 패널 제목을 되풀이하지 마세요. 차트 제목은 보조 기술에만 남습니다.

구성

Root(grid) → Panel: Card(role=group, aria-labelledby, aria-busy) → header(Title(toggle button?), summary?, info Popover?, Spinner room?, toolbar?, actions?) + body(DataState: Skeleton | InlineMessage + Retry | empty text | children), not rendered while folded

키보드와 접근성

패널마다 제목이 이름인 묶음이고, 불러오거나 새로 고치는 동안 busy입니다. 정보 버튼은 설명을 팝오버로 열고 Escape가 닫습니다. 다시 시도와 머리글 동작은 보통 버튼입니다. 다시 시도로 오류가 사라져 버튼이 없어지면 포커스는 패널 제목으로 옮겨 갑니다. 접을 수 있는 패널의 제목은 펼침 여부를 알리는 버튼이고, Enter나 Space로 접고 펼칩니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Dashboard } from '@surflane/ui/dashboard'
import { SizeProvider, Stat } from '@surflane/ui'

<SizeProvider size='small' density='compact'>
  <Dashboard.Root aria-label='Cluster overview'>
    <Dashboard.Panel
      title='GPU temperature'
      description='The hottest GPU on each node, every 10 minutes.'
      span={2}
      state={query.isPending ? 'loading' : query.isError ? 'error' : 'ready'}
      refreshing={query.isFetching}
      onRetry={() => query.refetch()}
    >
      <LineChart density='compact' xScale='time' {...gpuChart} />
    </Dashboard.Panel>
  </Dashboard.Root>
</SizeProvider>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰