Scatter chart

미리보기

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

사용법

품질과 뉴스 감성에 따른 종목, 처리량과 지연에 따른 모델처럼 항목마다 두 측정값을 점 하나로 놓으세요. 제목, 사실 그대로의 요약, 두 축의 이름을 주고, 값에 단위가 있으면 단위도 주세요. groups는 정렬과 괴리처럼 점을 차트의 범주 색과 표식으로 나눕니다. 그룹 색은 직접 고를 수도 있습니다. 없으면 모든 점이 한 잉크입니다. references는 중간값이나 목표처럼 x나 y에 선을 긋습니다. 축마다 하나씩 있으면 플롯이 나뉘고, quadrants가 네 부분의 이름을 모서리에 씁니다. 점수의 0~10처럼 정해진 척도에는 xDomain과 yDomain을 주세요. 없으면 축은 점과 선을 감싸는 반올림한 값을 씁니다.

• 시간에 따른 측정에는 ScatterChart를 쓰지 마세요. LineChart를 쓰세요.
• 점을 사분면만으로 색칠하지 마세요. group을 주어 표식으로도 말하게 하거나, 사분면 이름이 위치를 말하게 하세요.
• description prop이 자동으로 추론한 분석이라고 기대하지 마세요. 호출하는 쪽이 쓴 사실 요약입니다.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

figure → figcaption(title + summary) + legend (groups, references) + named axes + focusable plot (Recharts ScatterChart) + persistent inline value readout + details → Table.Container → table of every point

키보드와 접근성

• Tab으로 플롯과 데이터 표 토글에 갑니다.
• 플롯에 포커스가 있으면 왼쪽/오른쪽으로 점을 왼쪽부터 차례로 살핍니다. x가 같으면 아래 점이 먼저입니다. Home과 End는 처음과 마지막 점입니다. Escape는 자세히 보기를 지웁니다.
• 포인터, 터치, 화살표 키는 점에 고리를 두르고 그 옆 상자에 이름과 값을 보여 줍니다. 같은 값이 플롯 아래 자세히 보기 영역(polite 라이브 영역)에도 채워지고, 상자는 접근성 트리 밖에 둡니다.
• 읽기와 표는 점마다 그룹과 사분면을 말합니다. 두 값이 다 없는 점은 플롯 밖, 표 안에 남습니다.
• 원, 사각형, 삼각형 표식이 색 말고도 그룹을 나누고, 고대비 모드에서도 남습니다.
• 사이드바가 움직이는 동안처럼 차트의 자리가 계속 바뀌면, 플롯은 마지막으로 그린 폭을 지키고 차트 밖으로 넘치는 부분은 잘라 둔 채 자리가 멈추면 다시 그립니다.

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

예시 코드

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

import { ScatterChart } from '@surflane/ui/scatter-chart'

<ScatterChart
  title='Quality against news sentiment'
  description='Each holding by its quality score and its news sentiment, both out of 10.'
  data={[
    { id: 'northwind', label: 'Northwind Chips', x: 8.2, y: 7.1, group: 'aligned' },
    { id: 'atlas', label: 'Atlas Telecom', x: 6.1, y: 3.8, group: 'diverged' },
  ]}
  groups={[
    { key: 'aligned', label: 'Aligned' },
    { key: 'diverged', label: 'Diverged' },
  ]}
  xLabel='Quality score'
  yLabel='News sentiment'
  xDomain={[0, 10]}
  yDomain={[0, 10]}
  references={[
    { x: 5, label: 'Quality midpoint' },
    { y: 5, label: 'Sentiment midpoint' },
  ]}
  quadrants={{ topRight: 'Strong and liked', bottomRight: 'Strong but disliked' }}
/>

주요 API

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

관련 토큰