Cartesian
공통 data/series 모델을 쓰는 선, 막대, 영역, 비교 차트
Package Docs · data visualization
opt-ui에서 분리된 데이터 시각화 패키지입니다. Recharts 의존성, chart data 타입, SVG 기반 분석 시각화, chart-specific shell을 한 곳에서 관리합니다. 기존 opt-ui chart export는 호환 re-export로 남아 있지만 새 코드는 opt-charts에서 직접 import합니다.
시계열/카테고리 비교는 ChartDataPoint + ChartSeriesDef로 시작하고, 퍼널/게이지/히트맵처럼 의미가 다른 차트는 전용 타입을 사용합니다.
LineChart, BarChart, PieChart 같은 visuals는 순수 시각화 경계로 두고, MetricsCard, TrendChart, ReportWidget은 제품 화면의 카드/위젯 조합에만 사용합니다.
height, aria-label, formatter, empty state, animation, lazy loading을 PR 기준으로 점검해 대시보드 회귀를 줄입니다.
설치, import boundary, 첫 차트, opt-ui compatibility re-export에서 직접 import로 옮기는 기준을 정리합니다.
visuals와 shells의 책임, ChartContainer, Recharts 접근성 계층, token 기반 색상 흐름을 설명합니다.
ChartDataPoint, ChartSeriesDef, 특수 차트 타입, formatter, empty state, 색상 할당 전략을 코드 기준으로 분류합니다.
반응형 크기, SSR/client 경계, 성능, 접근성, release smoke를 배포 전 체크리스트로 묶습니다.
ChartContainer는 ResponsiveContainer를 감싸며 role="img"와 aria-label/aria-describedby를 전달합니다.
Cartesian 계열은 Recharts accessibilityLayer를 켜고, showGrid/showTooltip/showLegend/showAxis 플래그로 운영 화면 밀도를 조절합니다.
ReportWidget은 chart type별 동적 import와 loading/empty label을 갖춘 builder용 얇은 shell입니다.
색상은 기본 5색 팔레트와 16색 확장 팔레트를 코드에 고정하고, series.color가 있으면 우선합니다.
공통 data/series 모델을 쓰는 선, 막대, 영역, 비교 차트
Recharts 래퍼, tooltip, legend, 미니 추세 표현
구성비, 흐름, 리텐션, 분포, 누적 변동을 다루는 전문 차트
대시보드 카드와 report builder용 chart-specific 조합
root export는 visuals와 shells를 함께 노출합니다. 번들 경계를 더 명확히 하고 싶다면 subpath export를 사용합니다.
import { LineChart, ChartContainer } from "@reopt-ai/opt-charts";
import type { ChartDataPoint, ChartSeriesDef } from "@reopt-ai/opt-charts";import { LineChart } from "@reopt-ai/opt-charts/visuals";
import { ReportWidget } from "@reopt-ai/opt-charts/shells";Recharts 기반 차트, SVG 시각화, chart-specific shell, 시각화 메타데이터와 예제를 담당합니다.
opt-ui는 Core, Shells, Surfaces를 소유하고, 차트는 opt-charts가 소유합니다. opt-ui visuals의 legacy chart export는 기존 소비자를 깨지 않기 위한 호환 경로입니다. 신규 문서, 신규 코드, 배포 검증은 opt-charts를 source of truth로 봅니다.