テーマと外観

Graphic Walkerは、ダークモード、チャートレンダリングテーマ、完全なUIカラーカスタマイズなど、複数レベルのビジュアルカスタマイズを提供しています。

ダークモード

appearanceプロパティでダークモードを制御します:

// Follow user's OS preference (default)
<GraphicWalker appearance="media" />
 
// Always light
<GraphicWalker appearance="light" />
 
// Always dark
<GraphicWalker appearance="dark" />

チャートテーマ

vizThemeConfigプロパティはチャートのレンダリング方法を制御します。組み込みテーマを選択するか、カスタムVega設定オブジェクトを提供できます:

組み込みテーマ

テーマ	説明
`'vega'`	デフォルトのVega-Liteテーマ
`'g2'`	G2 (AntV) インスパイアのテーマ
`'streamlit'`	Streamlitインスパイアのテーマ

<GraphicWalker vizThemeConfig="streamlit" data={data} fields={fields} />

カスタムVega設定

チャートレンダリングの詳細な制御のために、完全なVega/Vega-Lite設定オブジェクトを渡します:

const customTheme = {
  arc: { fill: '#4c78a8' },
  area: { fill: '#4c78a8' },
  bar: { fill: '#4c78a8' },
  line: { stroke: '#4c78a8' },
  point: { fill: '#4c78a8' },
  axis: {
    domainColor: '#888888',
    gridColor: '#e0e0e0',
    tickColor: '#888888',
  },
};
 
<GraphicWalker vizThemeConfig={customTheme} data={data} fields={fields} />

カスタムUIカラー

uiThemeプロパティを使用して、チャートテーマとは別にUI要素（ボタン、パネル、テキスト）をカスタマイズできます。ライトモードとダークモードの両方のカラーセットを持つIUIThemeConfigを受け付けます:

const uiTheme = {
  light: {
    background: '#ffffff',
    foreground: '#1a1a1a',
    primary: '#6366f1',
    'primary-foreground': '#ffffff',
    muted: '#f1f5f9',
    'muted-foreground': '#64748b',
    border: '#e2e8f0',
    ring: '#6366f1',
  },
  dark: {
    background: '#0f172a',
    foreground: '#f8fafc',
    primary: '#818cf8',
    'primary-foreground': '#0f172a',
    muted: '#1e293b',
    'muted-foreground': '#94a3b8',
    border: '#334155',
    ring: '#818cf8',
  },
};
 
<GraphicWalker uiTheme={uiTheme} data={data} fields={fields} />

カラーセットのプロパティ

プロパティ	必須	説明
`background`	はい	ページ/コンポーネントの背景色
`foreground`	はい	プライマリテキスト色
`primary`	はい	プライマリアクション色（ボタン、リンク）
`primary-foreground`	はい	プライマリ色の要素上のテキスト
`muted`	はい	ミュートされた背景（選択項目、セパレーター）
`muted-foreground`	はい	説明/セカンダリテキスト色
`border`	はい	コンテナのボーダー色
`ring`	はい	フォーカスリング色
`card`	いいえ	カードの背景（デフォルトは`background`）
`card-foreground`	いいえ	カードのテキスト色（デフォルトは`foreground`）
`popover`	いいえ	ポップオーバーの背景（デフォルトは`background`）
`popover-foreground`	いいえ	ポップオーバーのテキスト色（デフォルトは`foreground`）
`secondary`	いいえ	セカンダリボタンの背景（デフォルトは`muted`）
`secondary-foreground`	いいえ	セカンダリボタンのテキスト（デフォルトは`primary`）
`accent`	いいえ	ホバー状態の背景（デフォルトは`muted`）
`accent-foreground`	いいえ	ホバー状態のテキスト（デフォルトは`primary`）
`destructive`	いいえ	危険/削除アクション色
`destructive-foreground`	いいえ	危険な要素上のテキスト
`dimension`	いいえ	ディメンションフィールドバッジの色
`measure`	いいえ	メジャーフィールドバッジの色
`input`	いいえ	入力ボーダー色（デフォルトは`border`）

カラーパレット

IVisualLayoutのcolorPaletteプロパティでチャートエンコーディングに使用するカラーパレットを制御するか、scalesプロパティでチャネルごとに制御します。

カテゴリパレット

名義データ用: accent、category10、category20、category20b、category20c、dark2、paired、pastel1、pastel2、set1、set2、set3、tableau10、tableau20

シーケンシャル単色

増加する定量的な値用: blues、tealblues、teals、greens、browns、oranges、reds、purples、warmgreys、greys

シーケンシャル多色

ヒートマップの定量データ用: viridis、magma、inferno、plasma、cividis、turbo、bluegreen、bluepurple、goldgreen、goldorange、goldred、greenblue、orangered、purplebluegreen、purpleblue、purplered、redpurple、yellowgreenblue、yellowgreen、yelloworangebrown、yelloworangered、darkblue、darkgold、darkgreen、darkmulti、darkred、lightgreyred、lightgreyteal、lightmulti、lightorange、lighttealblue

ダイバージング

意味のある中間点を持つデータ用: blueorange、brownbluegreen、purplegreen、pinkyellowgreen、purpleorange、redblue、redgrey、redyellowblue、redyellowgreen、spectral

循環

周期的なパターン用: rainbow、sinebow

カスタムスケールの例

<GraphicWalker
  data={data}
  fields={fields}
  scales={{
    color: {
      scheme: 'tableau10',
    },
    size: {
      rangeMin: 10,
      rangeMax: 100,
    },
  }}
/>

スケールはフィールド情報を受け取る関数にすることもできます:

<GraphicWalker
  data={data}
  fields={fields}
  scales={{
    color: (info) => ({
      scheme: info.semanticType === 'nominal' ? 'tableau10' : 'viridis',
    }),
  }}
/>

チャートタイプデータ計算