ChartExport

한눈에#

ChartExport는 차트를 CSV(데이터)·PNG(이미지)·SVG(벡터) 로 내보내는 드롭다운 컨트롤입니다. 차트를 ref로 감싸고 그 ref를 넘기면, 컨테이너 안의 데이터 표와 SVG를 읽어 export합니다 — 그래서 모든 WDS 차트(Line·Bar·Area·Combo·Scatter·Stock·Pie)에 그대로 동작하며 차트 컴포넌트를 바꿀 필요가 없습니다.

어떻게 동작하나#

WDS 차트는 데이터를 sr-only <table>(접근성 정본)으로, 시각을 <svg> 로 렌더합니다. ChartExport는 컨테이너에서 이 둘을 찾아:

• CSV — 데이터 표의 행을 직렬화(RFC 4180 이스케이프). 표가 없는 차트(Sparkline=글랜스 이미지)는 CSV를 생략합니다.
• SVG — SVG를 복제하고 계산된 색·stroke를 인라인합니다(CSS 클래스·var()는 standalone에서 안 먹으므로). 독립 실행 가능한 벡터 파일.
• PNG — 인라인된 SVG를 Image로 로드해 2배 해상도 캔버스에 래스터화.

데이터 정본(표)과 시각(SVG)을 따로 내보내므로, 분석용(CSV)과 문서용(PNG/SVG) 모두 커버합니다.

사용#

const ref = useRef<HTMLDivElement>(null);

<div ref={ref}>
  <LineChart series={series} label="주간 방문자" />
</div>
<ChartExport targetRef={ref} filename="주간 방문자" formats={['csv', 'png', 'svg']} />

formats로 일부 포맷만 제공할 수 있습니다(기본 셋 다). 트리거는 WDS DropdownMenu의 아이콘 트리거(triggerVariant="icon")로, 카드 헤더 우측에 ghost 아이콘 버튼으로 놓여 대시보드 위젯 툴바 관용구를 따릅니다 — 텍스트 버튼이 빈 공간에 떠 있지 않습니다.

웹 전용#

다운로드는 브라우저 기능(Blob·anchor)이라 ChartExport는 웹 전용입니다. Flutter에선 share/save가 별도 패러다임이라 패리티 대상이 아닙니다.

토큰#