PureRenderer

PureRendererは、可視化仕様から単一の読み取り専用チャートをレンダリングします。最小限のUI（ツールバーなし、チャートタブなし、フィールドリストなし）で動作します。ダッシュボード、記事、または静的な可視化が必要なあらゆるコンテキストへのチャート埋め込みに最適です。

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

使い分け

コンポーネント	インタラクティブ	ツールバー	複数チャート	フィールドリスト
`GraphicWalker`	完全な編集	あり	あり	あり
`GraphicRenderer`	閲覧のみ	あり	あり	なし
`PureRenderer`	閲覧のみ	なし	なし	なし

最小のフットプリントでチャートを表示する必要がある場合にPureRendererを使用します。

プロパティ

ローカルモード（クライアント側データ）

プロパティ	型	必須	説明
`rawData`	`IRow[]`	はい	データレコードの配列。
`type`	`'local'`	いいえ	ローカルモードを明示的に設定（デフォルト）。

リモートモード（サーバー側データ）

プロパティ	型	必須	説明
`computation`	`IComputationFunction`	はい	サーバー側処理の計算関数。
`type`	`'remote'`	はい	`'remote'`に設定する必要があります。

可視化状態

プロパティ	型	必須	説明
`visualState`	`DraggableFieldState`	はい	フィールドエンコーディング（行、列、色、サイズなど）。
`visualConfig`	`IVisualConfigNew`	はい	可視化設定（集計、ジオメトリタイプ、座標系）。
`visualLayout`	`IVisualLayout`	いいえ	レイアウト設定（サイズ、スタックモード、フォーマット）。未指定の場合は`visualConfig`にフォールバック。

外観プロパティ

プロパティ	型	デフォルト	説明
`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`	カスタムスケール設定。

その他のプロパティ

プロパティ	型	説明
`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} />;
}