Types & Interfaces
This page documents the core TypeScript types exported from @kanaries/graphic-walker. Import them for type-safe usage:
import type {
IMutField,
IChart,
DraggableFieldState,
IVisualConfigNew,
IVisualLayout,
IFilterRule,
IComputationFunction,
IThemeKey,
IDarkMode,
IUIThemeConfig,
IChannelScales,
} from '@kanaries/graphic-walker';Field Types
ISemanticType
type ISemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';Describes the nature of the data in a field.
| Value | Description | Examples |
|---|---|---|
'quantitative' | Continuous numeric values | revenue, temperature, count |
'nominal' | Unordered categories | product name, country |
'ordinal' | Ordered categories | rating level, education level |
'temporal' | Date/time values | order date, timestamp |
IAnalyticType
type IAnalyticType = 'dimension' | 'measure';Determines how the field is used in aggregation.
| Value | Description |
|---|---|
'dimension' | Used for grouping (GROUP BY) |
'measure' | Used for aggregation (SUM, AVG, etc.) |
IMutField
interface IMutField {
fid: string; // Field ID — must match a key in your data objects
name?: string; // Display name shown in the UI
semanticType: ISemanticType; // Data type classification
analyticType: IAnalyticType; // Analysis role
basename?: string; // Base name for derived fields
disable?: boolean; // Hide this field from the UI
path?: string[]; // Path for nested data
offset?: number; // Timezone offset for temporal fields
}IViewField
Extends IField with sorting:
interface IViewField extends IField {
sort?: 'none' | 'ascending' | 'descending';
}IFilterField
Extends IViewField with filter rules:
interface IFilterField extends IViewField {
rule: IFilterRule | null;
enableAgg?: boolean;
}Chart Specification
IChart
The complete specification for a single chart:
interface IChart {
visId: string; // Unique identifier for this chart
name?: string; // Display name
encodings: DraggableFieldState; // Field-to-channel mappings
config: IVisualConfigNew; // Visualization config
layout: IVisualLayout; // Layout config
}DraggableFieldState
Maps fields to visual encoding channels:
interface DraggableFieldState {
dimensions: IViewField[]; // Available dimension fields
measures: IViewField[]; // Available measure fields
rows: IViewField[]; // Y-axis encoding
columns: IViewField[]; // X-axis encoding
color: IViewField[]; // Color encoding
opacity: IViewField[]; // Opacity encoding
size: IViewField[]; // Size encoding
shape: IViewField[]; // Shape encoding
theta: IViewField[]; // Angle encoding (for pie/donut charts)
radius: IViewField[]; // Radius encoding
longitude: IViewField[]; // Longitude for maps
latitude: IViewField[]; // Latitude for maps
geoId: IViewField[]; // Geographic ID for choropleth
details: IViewField[]; // Detail level (no visual encoding)
filters: IFilterField[]; // Active filters
text: IViewField[]; // Text labels
}IVisualConfigNew
Controls visualization behavior:
interface IVisualConfigNew {
defaultAggregated: boolean; // Whether to aggregate measures by default
geoms: string[]; // Geometry types: 'bar', 'line', 'area', 'point', 'circle', 'tick', 'rect', 'arc', 'boxplot', 'table', 'poi', 'choropleth'
coordSystem?: 'generic' | 'geographic'; // Coordinate system
limit: number; // Row limit (-1 for no limit)
folds?: string[]; // Fields to fold/unpivot
timezoneDisplayOffset?: number; // Timezone offset for display
}IVisualLayout
Controls chart layout and appearance:
interface IVisualLayout {
showTableSummary: boolean;
format: {
numberFormat?: string;
timeFormat?: string;
normalizedNumberFormat?: string;
};
primaryColor?: string;
colorPalette?: string;
scale?: IConfigScaleSet;
resolve: {
x?: boolean;
y?: boolean;
color?: boolean;
opacity?: boolean;
shape?: boolean;
size?: boolean;
};
size: {
mode: 'auto' | 'fixed' | 'full';
width: number;
height: number;
};
useSvg?: boolean;
interactiveScale: boolean;
stack: IStackMode;
showActions: boolean;
zeroScale: boolean;
background?: string;
scaleIncludeUnmatchedChoropleth?: boolean;
showAllGeoshapeInChoropleth?: boolean;
renderer?: 'vega-lite' | 'observable-plot';
geoMapTileUrl?: string;
geojson?: FeatureCollection;
geoKey?: string;
geoUrl?: { type: 'GeoJSON' | 'TopoJSON'; url: string };
}Filter Types
IFilterRule
type IFilterRule =
| { type: 'range'; value: [number | null, number | null] }
| { type: 'temporal range'; value: [number | null, number | null]; offset?: number; format?: string }
| { type: 'one of'; value: any[] }
| { type: 'not in'; value: any[] }
| { type: 'regexp'; value: string; caseSensitive?: boolean };| Type | Description | Example |
|---|---|---|
'range' | Numeric range filter | { type: 'range', value: [0, 100] } |
'temporal range' | Date range filter | { type: 'temporal range', value: [startTs, endTs] } |
'one of' | Include matching values | { type: 'one of', value: ['A', 'B'] } |
'not in' | Exclude matching values | { type: 'not in', value: ['C'] } |
'regexp' | Regex pattern match | { type: 'regexp', value: '^test' } |
IVisFilter
interface IVisFilter {
fid: string; // Field ID to filter on
rule: IFilterRule; // The filter rule
}Computation Types
IComputationFunction
The signature for server-side computation:
type IComputationFunction = (payload: IDataQueryPayload) => Promise<IRow[]>;IDataQueryPayload
interface IDataQueryPayload {
workflow: IDataQueryWorkflowStep[]; // Processing pipeline
limit?: number;
offset?: number;
}Workflow Steps
The computation pipeline consists of sequential steps:
// Filter step — apply row-level filters
interface IFilterWorkflowStep {
type: 'filter';
filters: IVisFilter[];
}
// Transform step — compute derived fields
interface ITransformWorkflowStep {
type: 'transform';
transform: IFieldTransform[];
}
// View step — aggregate or select fields
interface IViewWorkflowStep {
type: 'view';
query: IViewQuery[]; // IAggQuery | IFoldQuery | IBinQuery | IRawQuery
}
// Sort step — order results
interface ISortWorkflowStep {
type: 'sort';
sort: 'ascending' | 'descending';
by: string[];
}Aggregation Types
IAggregator
type IAggregator = 'sum' | 'count' | 'max' | 'min' | 'mean' | 'median' | 'variance' | 'stdev' | 'distinctCount' | 'expr';Appearance Types
IThemeKey
type IThemeKey = 'vega' | 'g2' | 'streamlit';IDarkMode
type IDarkMode = 'media' | 'light' | 'dark';IStackMode
type IStackMode = 'none' | 'stack' | 'normalize' | 'zero' | 'center';IUIThemeConfig
Custom UI colors for light and dark modes:
interface IUIThemeConfig {
light: IColorSet;
dark: IColorSet;
}
interface IColorSet {
background: string;
foreground: string;
primary: string;
'primary-foreground': string;
muted: string;
'muted-foreground': string;
border: string;
ring: string;
// Optional overrides
card?: string;
'card-foreground'?: string;
popover?: string;
'popover-foreground'?: string;
secondary?: string;
'secondary-foreground'?: string;
accent?: string;
'accent-foreground'?: string;
destructive?: string;
'destructive-foreground'?: string;
dimension?: string;
measure?: string;
input?: string;
}IChannelScales
Custom scales for visual channels:
interface IChannelScales {
row?: IScale | ((info: IFieldInfos) => IScale);
column?: IScale | ((info: IFieldInfos) => IScale);
color?: IColorScale | ((info: IFieldInfos) => IColorScale);
opacity?: IScale | ((info: IFieldInfos) => IScale);
size?: IScale | ((info: IFieldInfos) => IScale);
radius?: IScale | ((info: IFieldInfos) => IScale);
theta?: IScale | ((info: IFieldInfos) => IScale);
}Geographic Types
IGeographicData
type IGeographicData =
| { type: 'GeoJSON'; data: FeatureCollection }
| { type: 'TopoJSON'; data: Topology; objectKey?: string };IGeoDataItem
type IGeoDataItem = {
type: 'GeoJSON' | 'TopoJSON';
name: string;
url: string;
};Chart Export Types
IChartExportResult
interface IChartExportResult<T extends 'svg' | 'data-url'> {
mode: T;
title: string;
nCols: number;
nRows: number;
charts: {
colIndex: number;
rowIndex: number;
width: number;
height: number;
canvasWidth: number;
canvasHeight: number;
data: string; // SVG string or data URL
canvas(): HTMLCanvasElement | SVGSVGElement | null;
}[];
container(): HTMLDivElement | null;
chartType?: string;
}IGWHandler
interface IGWHandler {
chartCount: number;
chartIndex: number;
openChart: (index: number) => void;
renderStatus: 'computing' | 'rendering' | 'idle' | 'error';
onRenderStatusChange: (cb: (status: IRenderStatus) => void) => () => void;
exportChart: (mode?: 'svg' | 'data-url') => Promise<IChartExportResult>;
exportChartList: (mode?: 'svg' | 'data-url') => AsyncGenerator<IChartListExportResult>;
}