Default Configuration State of Graphic Walker
You can set the "defaultConfig" property of the GraphicWalker component to set the default configuration of the GraphicWalker.
export default function App() {
return (
<GraphicWalker data={data} fields={fields} defaultConfig={{
config: {
// Set the default configuration of the GraphicWalker
},
layout: {
// Set the default layout configuration of the GraphicWalker
}
}} />
);
}Available configurations
config
| Property | Type | Default | Description |
|---|---|---|---|
| defaultAggregated | boolean | true | Whether to aggregate the data by default. |
| geoms | string[] | ["auto"] | The geom of the chart. Only first value of this config is meaningful now, We will use it to support multi layer in the future. Available values: 'auto', 'bar', 'line', 'area', 'trail', 'point', 'circle', 'tick', 'rect', 'arc', 'text', 'boxplot', 'table'. |
| coordSystem | 'generic' | 'geographic' | "generic" | The coordinate system of the chart. you can set it to geographic, and you should set the geoms to ['poi'] or ['choropleth']. |
| limit | number | -1 | The limit of the data. -1 means unlimited. |
| folds | string[] | undefined | The folded fields of the data. it will be used when Mesuare Values and Measure Names are in the chart. |
| timezoneDisplayOffset | number | undefined | The timezone offset of the chart. |
layout
| Property | Type | Default | Description |
|---|---|---|---|
| showTableSummary | boolean | true | Whether to show the table summary. |
| format | { numberFormat?: string, timeFormat?: string, normalizedNumberFormat?: string } | {} | The formatting of the data. We use d3-format to format the data. |
| primaryColor | string | undefined | The primary color of the chart. |
| colorPalette | string | undefined | The color palette to be used of the chart. You can view available values in here (opens in a new tab) |
| scale | { opacity: { rangeMax?: number; rangeMin?: number; domainMin?: number; domainMax?: number }, size: { rangeMax?: number; rangeMin?: number; domainMin?: number; domainMax?: number } } | undefined | The scale of opacity and size channel the chart. |
| resolve | { x?: boolean, y?: boolean, color?: boolean, opacity?: boolean, shape?: boolean, size?: boolean } | {} | Independence of channels in chart facets. |
| size | { mode: 'auto' | 'fixed' | 'full', width: number, height: number } | { mode: 'auto', width: 320, height: 200 } | The size config of the chart. |
| useSvg | boolean | false | Whether to use SVG to render the chart. |
| geojson | GeojsonObject | undefined | The geojson data of the chart. |
| geoKey | string | undefined | The key of the geojson data. |
| geoUrl | { type: 'GeoJSON' | 'TopoJSON'; url: string } | undefined | The url of the geojson data, so you don't need to pass the full data to geojson. |
| geoMapTileUrl | string | undefined | The custom url of the map tile. if you passed a empty string, the map tiles won't be shown. |
| interactiveScale | boolean | false | Whether the scale is interactive or not. |
| stack | 'none' | 'stack' | 'normalize' | 'zero' | 'center' | "none" | The stack mode of the chart. |
| showActions | boolean | false | Whether to show the debugging actions of the chart. |
| zeroScale | boolean | true | Whether to show the zero scale of the chart. |
| background | string | undefined | The background color of the chart. |
| scaleIncludeUnmatchedChoropleth | boolean | false | Whether to include unmatched choropleth in the scale. |
| showAllGeoshapeInChoropleth | boolean | false | Whether to show all geoshape in the choropleth. |