formatPanel
Through the formatPanel property, you are able to control all aspects of the format panel.
Through this function prop, we will provide the configuration for each of the format sections, which you can modify the values of.
Default section configs
Column chart
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "chartStyles",
"title": "Chart Settings",
"description": "",
"subSection": [
{
"type": "stacked",
"title": "Layout",
"description": ""
},
{
"type": "legend",
"title": "Show Legend",
"description": ""
}
]
},
{
"type": "axisLabels",
"title": "Axis Labels",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
}
},
{
"type": "conditionalFormatting",
"title": "Conditional Formatting",
"description": "",
"ruleType": "backgroundColor"
}
]Horizontal bar chart
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "chartStyles",
"title": "Chart Settings",
"description": "",
"subSection": [
{
"type": "stacked",
"title": "Layout",
"description": ""
},
{
"type": "legend",
"title": "Show Legend",
"description": ""
}
]
},
{
"type": "axisLabels",
"title": "Axis Labels",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
}
},
{
"type": "conditionalFormatting",
"title": "Conditional Formatting",
"description": "",
"ruleType": "backgroundColor"
}
]Area chart
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "chartStyles",
"title": "Chart Settings",
"description": "",
"subSection": [
{
"type": "stacked",
"title": "Layout",
"description": ""
},
{
"type": "curve",
"title": "Line Curve",
"description": ""
},
{
"type": "legend",
"title": "Show Legend",
"description": ""
}
]
},
{
"type": "axisLabels",
"title": "Axis Labels",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
}
}
]Line chart
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "chartStyles",
"title": "Chart Settings",
"description": "",
"subSection": [
{
"type": "curve",
"title": "Line Curve",
"description": ""
},
{
"type": "legend",
"title": "Show Legend",
"description": ""
}
]
},
{
"type": "axisLabels",
"title": "Axis Labels",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
}
}
]Scatter chart
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "chartStyles",
"title": "Chart Settings",
"description": "",
"subSection": [
{
"type": "legend",
"title": "Show Legend",
"description": ""
}
]
},
{
"type": "axisLabels",
"title": "Axis Labels",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
}
}
]Pie chart
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "conditionalFormatting",
"title": "Conditional Formatting",
"description": "",
"ruleType": "backgroundColor"
},
{
"type": "chartStyles",
"title": "Chart Settings",
"description": "",
"subSection": [
{
"type": "legend",
"title": "Show Legend",
"description": ""
},
{
"type": "numberFormat",
"title": "Format",
"description": ""
}
]
}
]Single stat
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "statsLabels",
"title": "Labels",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
},
{
"type": "format",
"title": "Format",
"description": "",
"subSection": [
{
"title": "Font Size",
"type": "fontSize",
"description": ""
}
]
},
{
"type": "conditionalFormatting",
"title": "Conditional Formatting",
"description": "",
"ruleType": "fontColor"
}
]Pivot table
[
{
"title": "Heading",
"type": "heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "format",
"title": "Format",
"description": "",
"subSection": [
{
"type": "time",
"title": "Time",
"description": ""
}
]
},
{
"type": "prefixes",
"title": "Prefixes",
"description": ""
},
{
"type": "conditionalFormatting",
"title": "Conditional Formatting",
"description": "",
"ruleType": "backgroundColor"
}
]Basic table
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "format",
"title": "Format",
"description": "",
"subSection": [
{
"type": "time",
"title": "Time",
"description": ""
}
]
},
{
"type": "prefixes",
"title": "Prefixes",
"description": ""
},
{
"type": "conditionalFormatting",
"title": "Conditional Formatting",
"description": "",
"ruleType": "backgroundColor"
}
]Combo chart
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "chartStyles",
"title": "Chart Settings",
"description": "",
"subSection": [
{
"type": "stacked",
"title": "Layout",
"description": ""
},
{
"type": "legend",
"title": "Show Legend",
"description": ""
}
]
},
{
"type": "axisLabels",
"title": "Axis Labels",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
}
}
}
]Custom
[]
Custom sections
To render your own section, you can provide a function in the config that renders a section of the panel.
We will call it with the following props;
attributes
View dependant properties that you can mutate using the setAttributes function.
dataSet
An object describing the currently chosen data set for the view.
dataSets
A list of all available data sets.
featureToggles
The currently active feature toggles.
setDataSet
A function that allows you to change the currently selected data set for the view.
setDataSet: (dataSetId: string) => void;setAttributes
A function that lets you update the attributes of the view.
setAttributes: (attributes: Partial<Attributes>) => void;setDataSets
A function that lets you mutate the data sets. This should only be used to set custom fields or if you have a custom Query Engine implementation that allows changes to the data set to be made in the editor.
setDataSets: (dataSets: Array<DataSet>) => void;queryEngineConfig
An object that defines the limitations of the query engine. For example, the available aggregate functions and time truncation functions.