GraphicRenderer

GraphicRenderer는 Graphic Walker 사양에서 사전 구성된 차트를 렌더링합니다. 전체 편집 인터페이스 없이 차트를 표시합니다 -- 사용자는 차트를 보고 인터랙션할 수 있지만 필드 인코딩을 수정할 수는 없습니다.

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

사용 시기

컴포넌트	사용 시기
`GraphicWalker`	전체 드래그 앤 드롭 탐색 인터페이스가 필요할 때
`GraphicRenderer`	저장된 차트를 툴바 컨트롤과 함께 표시할 때
`PureRenderer`	UI 크롬 없이 최소한의 읽기 전용 차트를 원할 때

Props

GraphicRenderer는 GraphicWalker와 동일한 모든 props를 수용하며, 추가로:

Prop	타입	기본값	설명
`containerClassName`	`string`	`undefined`	차트 컨테이너의 CSS 클래스.
`containerStyle`	`React.CSSProperties`	`undefined`	차트 컨테이너의 인라인 스타일.
`overrideSize`	`{ mode: 'auto' \| 'fixed' \| 'full'; width: number; height: number }`	`undefined`	사양에서의 차트 크기 오버라이드.

GraphicWalker의 모든 데이터, 외관, i18n 및 ref props도 여기에 적용됩니다.

예시

import { GraphicRenderer } from '@kanaries/graphic-walker';
import type { IChart } from '@kanaries/graphic-walker';
 
const savedCharts: IChart[] = [
  {
    visId: 'chart-1',
    name: 'Monthly Revenue',
    encodings: {
      dimensions: [],
      measures: [],
      rows: [{ fid: 'revenue', name: 'Revenue', analyticType: 'measure', semanticType: 'quantitative' }],
      columns: [{ fid: 'month', name: 'Month', analyticType: 'dimension', semanticType: 'temporal' }],
      color: [],
      opacity: [],
      size: [],
      shape: [],
      theta: [],
      radius: [],
      longitude: [],
      latitude: [],
      geoId: [],
      details: [],
      filters: [],
      text: [],
    },
    config: {
      defaultAggregated: true,
      geoms: ['line'],
      coordSystem: 'generic',
      limit: -1,
    },
    layout: {
      showTableSummary: false,
      stack: 'none',
      showActions: false,
      interactiveScale: true,
      zeroScale: true,
      size: { mode: 'auto', width: 800, height: 400 },
      format: {},
      resolve: {},
    },
  },
];
 
function Dashboard() {
  return (
    <GraphicRenderer
      data={data}
      fields={fields}
      chart={savedCharts}
      appearance="media"
    />
  );
}

고정 크기 사용

<GraphicRenderer
  data={data}
  fields={fields}
  chart={savedCharts}
  overrideSize={{ mode: 'fixed', width: 600, height: 400 }}
/>

GraphicWalker PureRenderer