테마 및 외관
Graphic Walker는 다크 모드, 차트 렌더링 테마, 전체 UI 색상 커스터마이즈 등 여러 수준의 시각적 커스터마이즈를 제공합니다.
다크 모드
appearance prop으로 다크 모드를 제어하세요:
// Follow user's OS preference (default)
<GraphicWalker appearance="media" />
// Always light
<GraphicWalker appearance="light" />
// Always dark
<GraphicWalker appearance="dark" />차트 테마
vizThemeConfig prop은 차트가 렌더링되는 방식을 제어합니다. 내장 테마를 선택하거나 커스텀 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 prop을 사용하면 차트 테마와 별도로 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 | Yes | 페이지/컴포넌트 배경 색상 |
foreground | Yes | 기본 텍스트 색상 |
primary | Yes | 기본 액션 색상 (버튼, 링크) |
primary-foreground | Yes | 기본 색상 요소 위의 텍스트 |
muted | Yes | 음소거된 배경 (선택된 항목, 구분선) |
muted-foreground | Yes | 설명/보조 텍스트 색상 |
border | Yes | 컨테이너 테두리 색상 |
ring | Yes | 포커스 링 색상 |
card | No | 카드 배경 (background 기본값) |
card-foreground | No | 카드 텍스트 색상 (foreground 기본값) |
popover | No | 팝오버 배경 (background 기본값) |
popover-foreground | No | 팝오버 텍스트 색상 (foreground 기본값) |
secondary | No | 보조 버튼 배경 (muted 기본값) |
secondary-foreground | No | 보조 버튼 텍스트 (primary 기본값) |
accent | No | 호버 상태 배경 (muted 기본값) |
accent-foreground | No | 호버 상태 텍스트 (primary 기본값) |
destructive | No | 위험/삭제 액션 색상 |
destructive-foreground | No | 위험 요소 위의 텍스트 |
dimension | No | 차원 필드 뱃지 색상 |
measure | No | 측정값 필드 뱃지 색상 |
input | No | 입력 테두리 색상 (border 기본값) |
색상 팔레트
IVisualLayout의 colorPalette 속성을 사용하거나 scales prop을 통해 채널별로 차트 인코딩에 사용되는 색상 팔레트를 제어하세요.
범주형 팔레트
명목 데이터용: 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',
}),
}}
/>