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 Preferences",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
}
},
{
"type": "conditionalFormatting",
"title": "Conditional Formatting",
"description": "",
"ruleType": "backgroundColor"
},
{
"type": "goalLine",
"title": "Goal Lines",
"description": ""
}
]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 Preferences",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"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 Preferences",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
}
},
{
"type": "goalLine",
"title": "Goal Lines",
"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 Preferences",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
}
},
{
"type": "goalLine",
"title": "Goal Lines",
"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 Preferences",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
}
},
{
"type": "goalLine",
"title": "Goal Lines",
"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": ""
},
"count": {
"title": "Label count",
"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 Preferences",
"description": "",
"y": {
"title": "Y Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
},
"x": {
"title": "X Axis",
"description": "",
"prefix": {
"title": "Prefix",
"description": ""
},
"postfix": {
"title": "Postfix",
"description": ""
},
"format": {
"title": "Format",
"description": ""
},
"count": {
"title": "Label count",
"description": ""
},
"axisTitle": {
"title": "Title",
"description": ""
}
}
},
{
"type": "conditionalFormatting",
"title": "Conditional Formatting",
"description": "",
"ruleType": "backgroundColor",
"subSection": [
{
"title": "Bar",
"propKey": "bar"
}
]
},
{
"type": "goalLine",
"title": "Goal Lines",
"description": ""
}
]Country map
[
{
"type": "heading",
"title": "Heading",
"description": "",
"subSection": [
{
"type": "title",
"title": "Title",
"description": ""
},
{
"type": "subject",
"title": "Subject",
"description": ""
}
]
},
{
"type": "chartStyles",
"title": "Map Settings",
"description": "",
"subSection": [
{
"type": "numberFormat",
"title": "Value format",
"description": ""
}
]
},
{
"type": "mapColors",
"title": "Map colors",
"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.