API Reference
GraphicWalker, GraphicRenderer, TableWalker
Props
| Name | Type | Description |
|---|---|---|
| i18nLang | string | the language of the i18n resources. |
| i18nResources | { [lang: string]: Record<string, string | any> } | the i18n resources. |
| vizThemeConfig | IThemeKey | GWGlobalConfig | the chart theme config. see here |
| toolbar | { extra?: ToolbarItemProps[]; exclude?: string[]; } | the toolbar config. you can add new items in extra, and remove items by exclude. |
| geoList | IGeoDataItem[] | The droplist item in GeoJSON config panel. |
| scales | IChannelScales | The scales config of color, opacity, size, radius and theta. |
| appearance | IDarkMode | The dark mode config. can be 'dark' | 'light' | 'media'. |
| uiTheme | IUIThemeConfig | The UI theme config. see here |
| storeRef | React.MutableRefObject<VizSpecStore | null> | the ref to our VizSpecStore. See the next section for more details. |
| keepAlive | boolean | string | a key to keep VizSpecStore not to be destoryed when component unmount. |
| fields | IMutField[] | the meta info of your data. |
| onMetaChange | (fid: string, meta: Partial | When user changes the meta in Table, you will get the fid and the changed meta. |
| defaultConfig | IDefaultConfig | The default config of the chart. |
| data | any[] | the raw data of the chart. |
| computationTimeout | number | the timeout of the computation. |
| computation | IComputationFunction | the computation function to fetch the data in remote. you must provide either computation or data. |
| vlSpec | any | a Vega-lite spec to be the initial chart. |
| chart | IChart[] | IVisSpec[] | The initial chart. |
| hideChartNav | boolean | Whether to hide the chart navigation. |
VizSpecStore
Properties
visLength
number
The length of the visualization list.
viewFilters
IFilterField[]
The current filters on the view.
sort
ISortMode
The current sorting of the chart.
sortedEncoding
"none" | "row" | "column"
The sorted encoding of the chart.
config
IVisualConfigNew
The current config of the chart.
layout
IVisualLayout
The current layout config of the chart.
workflow
IDataQueryWorkflowStep[]
The current workflow of the chart.
canUndo
boolean
Whether the undo action is available.
canRedo
boolean
Whether the redo action is available.
Methods
undo
Parameters: none
Returns: void
vizStore.undo()
Undo the last action on the chart.
redo
Parameters: none
Returns: void
vizStore.redo()
Redo the last action on the chart.
setVisName
Parameters: index: number, name: string
Returns: void
vizStore.setVisName(0, 'New Name')
Set the name of the visualization at the given index.
setMeta
Parameters: meta: IMutField[]
Returns: void
vizStore.setMeta(meta)
Set the meta info of the data.
setDefaultConfig
Parameters: defaultConfig?: IDefaultConfig
Returns: void
vizStore.setDefaultConfig(defaultConfig)
Set the default config of the chart.
resetVisualization
Parameters: name?: string
Returns: void
vizStore.resetVisualization()
Reset all visualizations. the state will be reset to a empty chart.
addVisualization
Parameters: defaultName?: string | ((index: number) => string)
Returns: void
vizStore.addVisualization('Chart 2')
Add a new empty visualization.
removeVisualization
Parameters: index: number
Returns: void
vizStore.removeVisualization(0)
Remove the visualization at the given index.
duplicateVisualization
Parameters: index: number
Returns: void
vizStore.duplicateVisualization(0)
Duplicate the visualization at the given index.
setSegmentKey
Parameters: sk: 'vis' | 'data'
Returns: void
vizStore.setSegmentKey('vis')
Set the current tab to Visualization or Data.
setVisualConfig
Parameters: ...args: KVTuple
Returns: void
vizStore.setVisualConfig('defaultAggregated', true)
Set a config of the chart.
setCoordSystem
Parameters: mode: ICoordMode
Returns: void
vizStore.setCoordSystem('generic')
Set the coordinate system of the chart. will also change the geom of the chart.
setVisualLayout
Parameters: ...args: KVTuple
Returns: void
vizStore.setVisualLayout('stack', 'none')
Set a layout config of the chart.
reorderField
Parameters: stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number
Returns: void
vizStore.reorderField('rows', 0, 1)
Reorder the field in the given channel.
moveField
Parameters: sourceKey: keyof DraggableFieldState, sourceIndex: number, destinationKey: keyof DraggableFieldState, destinationIndex: number
Returns: void
vizStore.moveField('rows', 0, 'columns', 0)
Move the field from source channel to destination channel.
modFilter
Parameters: index: number, sourceKey: keyof Omit<DraggableFieldState, 'filters'>, sourceIndex: number
Returns: void
vizStore.modFilter(0, 'rows', 0)
Modify the filter of given index to a filter of given channel and index.
removeField
Parameters: sourceKey: keyof DraggableFieldState, sourceIndex: number
Returns: void
vizStore.removeField('rows', 0)
Remove the field in the given channel.
writeFilter
Parameters: index: number, rule: IFilterRule | null
Returns: void
vizStore.writeFilter(0, { type: 'one of', value: [1, 2, 3] })
Write the filter of given index to a filter rule.
transpose
Parameters: none
Returns: void
vizStore.transpose()
Transpose the chart.
createBinField
Parameters: stateKey: keyof Omit<DraggableFieldState, 'filters'>, index: number, binType: 'bin' | 'binCount', binNumber?: number
Returns: string
const newFid = vizStore.createBinField('measure', 0, 'bin', 10)
Create a new bin field for the given channel and index with the given bin type and bin number.
createLogField
Parameters: stateKey: keyof Omit<DraggableFieldState, 'filters'>, index: number, scaleType: 'log10' | 'log2' | 'log', logNumber?: number
Returns: void
vizStore.createLogField('measure', 0, 'log10')
Create a new log field for the given channel and index with the given scale type and log number.
renameFieldInChart
Parameters: stateKey: keyof Omit<DraggableFieldState, 'filters'>, index: number, newName: string
Returns: void
vizStore.renameFieldInChart('measure', 0, 'New Name')
Rename the field in the given channel and index to the new name.
createDateTimeDrilledField
Parameters: stateKey: keyof Omit<DraggableFieldState, 'filters'>, index: number, drillLevel: (typeof DATE_TIME_DRILL_LEVELS)[number], name: string, format: string, offset: number | undefined
Returns: void
vizStore.createDateTimeDrilledField('dimension', 0, 'year', 'New Field', '%Y-%m-%dT%H:%M:%S', 0)
Create a new datetime field for the given channel and index with the given drill level, name, format and offset.
createDateFeatureField
Parameters: stateKey: keyof Omit<DraggableFieldState, 'filters'>, index: number, drillLevel: (typeof DATE_TIME_FEATURE_LEVELS)[number], name: string, format: string, offset: number | undefined
Returns: void
vizStore.createDateFeatureField('dimension', 0, 'year', 'New Field', '%Y-%m-%dT%H:%M:%S', 0)
Create a new date feature field for the given channel and index with the given drill level, name, format and offset.
setFieldAggregator
Parameters: stateKey: keyof Omit<DraggableFieldState, 'filters'>, index: number, aggName: IAggregator
Returns: void
vizStore.setFieldAggregator('rows', 0, 'sum')
Set the aggregator of the field in the given channel and index.
setFilterAggregator
Parameters: index: number, aggName: IAggregator | ''
Returns: void
vizStore.setFilterAggregator(0, 'sum')
Set the aggregator of the filter in the given index.
applyDefaultSort
Parameters: sortType?: ISortMode
Returns: void
vizStore.applyDefaultSort('ascending')
Apply a sort to the chart.
exportCurrentChart
Parameters: none
Returns: string
const rawChart = vizStore.exportCurrentChart()
Export the current chart with actions to a string.
exportAllCharts
Parameters: none
Returns: string[]
const rawCharts = vizStore.exportAllCharts()
Export all charts with actions to an array of strings.
exportCode
Parameters: none
Returns: IChart[]
const specs = vizStore.exportCode()
Export all charts's current state to a IChart Array.
importCode
Parameters: data: IChart[]
Returns: void
vizStore.importCode(specs)
Import charts from a IChart Array.
appendRaw
Parameters: data: string
Returns: void
vizStore.appendRaw(rawChart)
Append a chart to current GraphicWalker that exports from exportCurrentChart or exportAllCharts.
importRaw
Parameters: data: string[]
Returns: void
vizStore.importRaw(rawCharts)
Import charts from an array of strings that exports from exportAllCharts.
appendFromCode
Parameters: data: IChart
Returns: void
vizStore.appendFromCode(spec)
Append a chart to current GraphicWalker that exports from exportCode.
replaceNow
Parameters: chart: IChart
Returns: void
vizStore.replaceNow(spec)
Replace the current chart with the given chart that exports from exportCode.
selectVisualization
Parameters: index: number
Returns: void
vizStore.selectVisualization(0)
Switch the current visualization to the given index.
updateCurrentDatasetMetas
Parameters: fid: string, diffMeta: Partial
Returns: void
vizStore.updateCurrentDatasetMetas('date', { semanticType: 'temporal' })
Update the meta of the field with the given fid.
changeSemanticType
Parameters: stateKey: keyof Omit<DraggableFieldState, 'filters'>, index: number, semanticType: ISemanticType
Returns: void
vizStore.changeSemanticType('dimension', 0, 'temporal')
Change the semantic type of the field in the given channel and index.
upsertComputedField
Parameters: fid: string, name: string, sql: string
Returns: void
vizStore.upsertComputedField('newField', 'New Field', 'SUM(scores)')
Upsert a computed field with the given fid, name and sql.