reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui202opt-charts39opt-datagrid7opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 소개
  • 문의
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/opt-charts/VennDiagram

VennDiagram

차트

2~3개 집합을 면적 비례 원으로 그리는 순수 SVG 벤 다이어그램. 2집합은 겹침 면적을 정확히 풀고, 3집합은 쌍별 거리로 근사합니다. 배타 영역별 hover/클릭과 숨김 표를 제공합니다.

관련 문서
bun add @reopt-ai/opt-charts
100%

두 집합 — 겹침 면적이 정확히 맞는다

구매자만: 900명뉴스레터 구독자만: 500명구매자 ∩ 뉴스레터 구독자: 300명구매자뉴스레터 구독자900명500명300명
영역별 크기
영역크기
구매자만900명
뉴스레터 구독자만500명
구매자 ∩ 뉴스레터 구독자300명

세 집합 — 영역 클릭

플랫폼별 활성 사용자

웹만: 2,240명iOS만: 1,360명Android만: 1,100명웹 ∩ iOS: 480명웹 ∩ Android: 340명iOS ∩ Android: 120명웹 ∩ iOS ∩ Android: 140명웹iOSAndroid2,240명1,360명1,100명480명340명120명140명
영역별 크기
영역크기
웹만2,240명
iOS만1,360명
Android만1,100명
웹 ∩ iOS480명
웹 ∩ Android340명
iOS ∩ Android120명
웹 ∩ iOS ∩ Android140명

선택한 영역: 없음

겹침 없음 / 완전 포함

무료 플랜만: 900명엔터프라이즈만: 300명무료 플랜 ∩ 엔터프라이즈: 0명무료 플랜엔터프라이즈900명300명
영역별 크기
영역크기
무료 플랜만900명
엔터프라이즈만300명
무료 플랜 ∩ 엔터프라이즈0명
전체 사용자만: 1,500명이번 주 활성만: 0명전체 사용자 ∩ 이번 주 활성: 500명전체 사용자이번 주 활성1,500명500명
영역별 크기
영역크기
전체 사용자만1,500명
이번 주 활성만0명
전체 사용자 ∩ 이번 주 활성500명

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

VennDiagram 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

관련 컴포넌트

PathFlowChart

단계별 사용자 경로 흐름. 각 단계의 상위 항목 카드와 단계 사이 전환 리본, 단계에서 끝난·시작한 세션을 함께 그립니다. 고정 높이 grid와 카운트 비례 sankey 두 변형, 호버 시 연결 경로 강조와 툴팁을 제공합니다.

TimeSeriesChart

시간축 기반 시계열 차트. 조회 구간에 고정된 시간 스케일, 자동 틱/라벨, 미완료 버킷 표시, 드래그 구간 선택(줌), 주석·임계선, 비교 기간 오버레이를 지원합니다.

TimeSeriesTooltip

시계열 전용 툴팁. 전체 타임스탬프와 타임존, 값 내림차순 정렬, 합계, 이전 기간 대비 델타, 미완료 버킷 경고를 표시합니다.

SmallMultiples

브레이크다운 값마다 작은 시계열 패널 하나씩을 격자로 그리는 트렐리스. y축을 공유해 크기를 비교 가능하게 유지하고, 상위 값부터 정렬하며 긴 꼬리는 접는다. 한 패널에 커서를 올리면 모든 패널의 크로스헤어가 함께 움직인다.

EventSparkline

이벤트 스파크라인. 라벨, 값, 변화량과 미니 차트를 표시합니다.

표시

ChartContainer

Recharts ResponsiveContainer를 감싸는 반응형 차트 컨테이너. 접근성 속성과 스타일링을 지원합니다.

히트맵
이전SmallMultiples다음MetricsCard

Journey grid

Hover a card or a ribbon.
Step 12,000 sessions
Step 21,460 sessions
Step 3860 sessions
Step 4560 sessions
/
1,20060%
/pricing
42021%
/blog/launch
26013%
Other
1206%
Ends here
34017%
/pricing
56038.4%
/docs
38026%
/signup
30020.5%
Other
22015.1%
Ends here
41028.1%
/signup
42048.8%
/docs/quickstart
21024.4%
/pricing
14016.3%
Other
9010.5%
Ends here
19022.1%
/dashboard
38067.9%
/signup
12021.4%
Other
6010.7%

Localized, end-anchored

1단계300 sessions
2단계300 sessions
3단계440 sessions
/
300100%
여기서 시작
300100%
/pricing
22073.3%
/docs
8026.7%
여기서 시작
14046.7%
/signup
440100%

Time axis

Trailing bucket still filling

The last bar covers a day that is only half over. It is shaded rather than presented as a collapse.

Drag to zoom

Drag across the plot to pick a window.

Comparison period

Annotations and thresholds

Gaps in the data

Broken at the gap (default)

Drawn through the gap

Sorted, with a full timestamp

Hover the chart. Series are ranked by value, so the eye does not have to chase the legend order.

Total and time zone

Comparison folded into a delta

Rendered on its own

Static preview

Aug 24, 2026

Still filling

Web430
Mobile320
API180
Total930