PureRenderer

PureRenderer는 시각화 사양에서 단일 읽기 전용 차트를 렌더링합니다. 최소한의 UI로 -- 툴바, 차트 탭, 필드 목록이 없습니다. 대시보드, 아티클 또는 정적 시각화가 필요한 모든 컨텍스트에 차트를 임베드하는 데 이상적입니다.

import { PureRenderer } from '@kanaries/graphic-walker';

사용 시기

컴포넌트	인터랙티브	툴바	다중 차트	필드 목록
`GraphicWalker`	전체 편집	Yes	Yes	Yes
`GraphicRenderer`	보기 전용	Yes	Yes	No
`PureRenderer`	보기 전용	No	No	No

가장 작은 풋프린트로 차트를 표시해야 할 때 PureRenderer를 사용하세요.

Props

로컬 모드 (클라이언트 측 데이터)

Prop	타입	필수	설명
`rawData`	`IRow[]`	Yes	데이터 레코드 배열.
`type`	`'local'`	No	로컬 모드를 명시적으로 설정 (기본값).

리모트 모드 (서버 측 데이터)

Prop	타입	필수	설명
`computation`	`IComputationFunction`	Yes	서버 측 처리를 위한 연산 함수.
`type`	`'remote'`	Yes	`'remote'`로 설정해야 합니다.

시각화 상태

Prop	타입	필수	설명
`visualState`	`DraggableFieldState`	Yes	필드 인코딩 (행, 열, 색상, 크기 등).
`visualConfig`	`IVisualConfigNew`	Yes	시각화 구성 (집계, geom 타입, 좌표계).
`visualLayout`	`IVisualLayout`	No	레이아웃 구성 (크기, 스택 모드, 포맷). 미제공 시 `visualConfig`으로 대체.

외관 Props

Prop	타입	기본값	설명
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	다크 모드 설정.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	차트 테마.
`uiTheme`	`IUIThemeConfig`	`undefined`	커스텀 UI 색상.
`overrideSize`	`{ mode: 'auto' \| 'fixed' \| 'full'; width: number; height: number }`	`undefined`	사양에서의 크기 오버라이드.
`scales`	`IChannelScales`	`undefined`	커스텀 스케일 구성.

기타 Props

Prop	타입	설명
`name`	`string`	차트 이름 (내보내기 시 사용).
`className`	`string`	루트 요소의 CSS 클래스.
`locale`	`string`	숫자/날짜 포맷의 로케일. 기본값: `'en-US'`.
`disableCollapse`	`boolean`	접이식 차트 컨테이너 비활성화.

예시

로컬 모드

import { PureRenderer } from '@kanaries/graphic-walker';
import type { DraggableFieldState, IVisualConfigNew, IVisualLayout } from '@kanaries/graphic-walker';
 
const data = [
  { category: 'A', value: 100 },
  { category: 'B', value: 200 },
  { category: 'C', value: 150 },
];
 
const visualState: DraggableFieldState = {
  dimensions: [],
  measures: [],
  rows: [{ fid: 'value', name: 'Value', analyticType: 'measure', semanticType: 'quantitative' }],
  columns: [{ fid: 'category', name: 'Category', analyticType: 'dimension', semanticType: 'nominal' }],
  color: [],
  opacity: [],
  size: [],
  shape: [],
  theta: [],
  radius: [],
  longitude: [],
  latitude: [],
  geoId: [],
  details: [],
  filters: [],
  text: [],
};
 
const visualConfig: IVisualConfigNew = {
  defaultAggregated: true,
  geoms: ['bar'],
  coordSystem: 'generic',
  limit: -1,
};
 
const visualLayout: IVisualLayout = {
  showTableSummary: false,
  stack: 'stack',
  showActions: false,
  interactiveScale: false,
  zeroScale: true,
  size: { mode: 'auto', width: 600, height: 400 },
  format: {},
  resolve: {},
};
 
function ChartEmbed() {
  return (
    <PureRenderer
      rawData={data}
      visualState={visualState}
      visualConfig={visualConfig}
      visualLayout={visualLayout}
    />
  );
}

리모트 모드

import { PureRenderer } from '@kanaries/graphic-walker';
import type { IComputationFunction } from '@kanaries/graphic-walker';
 
const computation: IComputationFunction = async (payload) => {
  const res = await fetch('/api/query', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' },
  });
  return res.json();
};
 
function RemoteChart() {
  return (
    <PureRenderer
      type="remote"
      computation={computation}
      visualState={visualState}
      visualConfig={visualConfig}
      visualLayout={visualLayout}
    />
  );
}

고정 크기 사용

<PureRenderer
  rawData={data}
  visualState={visualState}
  visualConfig={visualConfig}
  overrideSize={{ mode: 'fixed', width: 400, height: 300 }}
/>

GraphicWalker에서 상태 추출하기

storeRef를 사용하여 GraphicWalker 인스턴스에서 visualState, visualConfig, visualLayout을 가져온 후 PureRenderer에 전달할 수 있습니다:

import { useRef } from 'react';
import { GraphicWalker, PureRenderer } from '@kanaries/graphic-walker';
import type { VizSpecStore } from '@kanaries/graphic-walker';
 
function App() {
  const storeRef = useRef<VizSpecStore>(null);
 
  const handleExport = () => {
    if (!storeRef.current) return;
    const chart = storeRef.current.exportCurrentChart();
    // chart contains encodings, config, layout
    // Pass these to PureRenderer elsewhere
  };
 
  return <GraphicWalker data={data} fields={fields} storeRef={storeRef} />;
}