ChartExport

한눈에#

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

사용 시점#

차트를 다른 곳에서 다시 쓸 수 있게 할 때 답니다 — 분석가가 원본 데이터를 받아 가공하거나(CSV), 보고서·슬라이드에 차트를 박제할 때(PNG·SVG)입니다. 대시보드 차트 카드 헤더에 두는 것이 관용구입니다.

• CSV — 데이터를 표로 받아 스프레드시트·추가 분석에 쓸 때.
• PNG — 보고서·문서·메신저에 이미지로 붙일 때.
• SVG — 인쇄·디자인 툴에서 무손실 벡터가 필요할 때.

내보낼 일이 없는 정적 표시용 차트(읽기 전용 위젯)에는 굳이 달지 마세요 — 빈 어포던스는 군더더기입니다.

어떻게 동작하나#

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가 별도 패러다임이라 패리티 대상이 아닙니다.

접근성#

내보내기 트리거는 WDS DropdownMenu의 아이콘 버튼이라 키보드로 열고(Enter·Space·화살표 탐색) 닫을 수 있고, triggerAriaLabel로 스크린리더에 “내보내기”임을 알립니다. 메뉴 항목은 leadingIcon과 함께 텍스트 라벨(CSV·PNG·SVG)을 담아 색·아이콘에만 의존하지 않습니다. 내보낸 CSV는 차트의 sr-only 데이터 표(접근성 정본)를 그대로 직렬화하므로, 화면에서 읽던 값과 내보낸 값이 일치합니다.

토큰#