dataPanel
Through the dataPanel property, you are able to control all aspects of the data panel.
Through this function prop, we will provide the configuration for each of the data sections, which you can modify the values of.
Default section configs
Column chart
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this bar chart?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fieldCollector",
"title": "Metric - Y Axis",
"description": "What do you want each bar to measure?",
"callToAction": "Add metric",
"namespace": "field_y_axis",
"fieldFilterOptions": {
"forComponent": "barChart",
"onlyMeasures": true
},
"testId": "metric-input"
},
{
"type": "drilldown",
"title": "Drilldown",
"description": "After clicking on a segment of this bar chart, what information do you want to see next?",
"namespace": "drilldown"
},
{
"type": "fieldCollector",
"title": "Grouping - X Axis",
"description": "What do you want each bar to represent? An example might be a `product category` field to represent each category as a bar.",
"callToAction": "Add grouping",
"namespace": "field_x_axis",
"fieldFilterOptions": {
"forComponent": "barChart",
"onlyDimensions": true
},
"preventDuplicates": true,
"maxAllowed": 2,
"testId": "add-dimension"
},
{
"type": "sort",
"title": "Sort",
"description": "Select the order of categories or time on the x Axis.",
"namespace": "sort"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want to use in this bar chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "limit",
"title": "Limit",
"description": "Set the maximum number of records to show on this bar chart.",
"namespace": "limit"
}
]Horizontal bar chart
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this bar chart?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fieldCollector",
"title": "Metric - Y Axis",
"description": "What do you want each bar to measure?",
"callToAction": "Add metric",
"namespace": "field_y_axis",
"fieldFilterOptions": {
"forComponent": "horizontalBarChart"
},
"testId": "metric-input"
},
{
"type": "drilldown",
"title": "Drilldown",
"description": "After clicking on a segment of this bar chart, what information do you want to see next?",
"namespace": "drilldown"
},
{
"type": "fieldCollector",
"title": "Grouping - X Axis",
"description": "What do you want each bar to represent? An example might be a `product category` field to represent each category as a bar.",
"callToAction": "Add grouping",
"namespace": "field_x_axis",
"fieldFilterOptions": {
"forComponent": "horizontalBarChart",
"onlyDimensions": true
},
"preventDuplicates": true,
"maxAllowed": 2,
"testId": "add-dimension"
},
{
"type": "sort",
"title": "Sort",
"description": "Select the order of categories or time on the x Axis.",
"namespace": "sort"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want to use in this bar chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "limit",
"title": "Limit",
"description": "Set the maximum number of records to show on this bar chart.",
"namespace": "limit"
}
]Area chart
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this area chart?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fieldCollector",
"title": "Metric - Y Axis",
"description": "What do you want each area to measure?",
"callToAction": "Add metric",
"namespace": "field_y_axis",
"fieldFilterOptions": {
"forComponent": "areaChart"
},
"testId": "metric-input"
},
{
"type": "fieldCollector",
"title": "Grouping - X Axis",
"description": "What do you want each area to represent? An example might be an employee ID to represent each employee.",
"callToAction": "Add grouping",
"namespace": "field_x_axis",
"fieldFilterOptions": {
"forComponent": "areaChart",
"onlyDimensions": true
},
"preventDuplicates": true,
"maxAllowed": 2,
"testId": "add-dimension"
},
{
"type": "sort",
"title": "Sort",
"description": "Select the order of categories or time on the x Axis.",
"namespace": "sort"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want to use in this area chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "limit",
"title": "Limit",
"description": "Set the maximum number of records to show on this area chart.",
"namespace": "limit"
}
]Line chart
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this line chart?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fieldCollector",
"title": "Metric - Y Axis",
"description": "What do you want each line to measure?",
"callToAction": "Add metric",
"namespace": "field_y_axis",
"fieldFilterOptions": {
"forComponent": "lineChart"
},
"testId": "metric-input"
},
{
"type": "fieldCollector",
"title": "Grouping - X Axis",
"description": "What do you want each line to represent? An example might be a `product category` field to represent each category as a line.",
"callToAction": "Add grouping",
"namespace": "field_x_axis",
"fieldFilterOptions": {
"forComponent": "lineChart",
"onlyDimensions": true
},
"preventDuplicates": true,
"maxAllowed": 2,
"testId": "add-dimension"
},
{
"type": "sort",
"title": "Sort",
"description": "Select the order of categories or time on the x Axis.",
"namespace": "sort"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want to use in this line chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "limit",
"title": "Limit",
"description": "Set the maximum number of records to show on this line chart.",
"namespace": "limit"
}
]Scatter chart
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this scatter chart?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "labelledMetrics",
"title": "Metric - Y Axis",
"description": "",
"subSectionDefinition": {
"xAxis": {
"type": "metrics",
"title": "X axis",
"namespace": "metrics.xAxis"
},
"yAxis": {
"type": "metrics",
"title": "Y axis",
"namespace": "metrics.yAxis"
}
},
"namespace": "labelled_metrics",
"subSection": [
{
"type": "metrics",
"title": "X axis",
"namespace": "metrics.xAxis",
"propKey": "xMeasure",
"allowsMultiple": false
},
{
"type": "metrics",
"title": "Y axis",
"namespace": "metrics.yAxis",
"propKey": "yMeasure",
"allowsMultiple": false
}
]
},
{
"type": "fieldCollector",
"title": "Grouping",
"description": "What do you want each dot to represent?",
"callToAction": "Add comparison",
"namespace": "field_grouping",
"fieldFilterOptions": {
"onlyDimensions": true,
"onlyFieldTypes": [
"boolean",
"number",
"string"
],
"removePercentage": true,
"removeSimpleMaths": true,
"removeAggregateMaths": true
},
"maxAllowed": 1,
"testId": "add-dimension"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want in this scatter chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "limit",
"title": "Limit",
"description": "Limit the number of data points shown on this scatter chart.",
"namespace": "limit"
}
]Pie chart
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this pie chart?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fieldCollector",
"title": "Metric",
"description": "What do you want each segment to measure?",
"callToAction": "Add metric",
"namespace": "field_metrics",
"fieldFilterOptions": {
"forComponent": "pieChart"
},
"maxAllowed": 1,
"testId": "metric-input"
},
{
"type": "fieldCollector",
"title": "Grouping",
"description": "How do you want to split each section of the pie chart?",
"callToAction": "Add comparison",
"namespace": "field_grouping",
"fieldFilterOptions": {
"onlyFieldTypes": [
"boolean",
"number",
"string"
],
"onlyDimensions": true,
"removePercentage": true,
"removeSimpleMaths": true,
"removeAggregateMaths": true
},
"maxAllowed": 1,
"testId": "add-dimension"
},
{
"type": "sort",
"title": "Sort",
"description": "Choose the order of segments in the pie chart",
"namespace": "sort"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want in this pie chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "limit",
"title": "Limit",
"description": "Limit the number of segments shown on this pie chart.",
"namespace": "limit"
}
]Single stat
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this single stat?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fieldCollector",
"title": "Metrics",
"description": "What do you want to show?",
"callToAction": "Add metric",
"namespace": "field_metrics",
"fieldFilterOptions": {
"forComponent": "singleStat"
},
"testId": "metric-input"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want in this scatter chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "comparison",
"title": "Comparison",
"description": "",
"namespace": "comparison"
}
]Pivot table
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this data table?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fieldCollector",
"title": "Group columns",
"callToAction": "Add group column",
"description": "",
"namespace": "field_columns",
"fieldFilterOptions": {
"onlyFieldTypes": [
"boolean",
"number",
"string",
"date_time"
],
"onlyDimensions": true,
"removePercentage": true,
"removeSimpleMaths": true,
"removeAggregateMaths": true
},
"preventDuplicates": true,
"testId": "add-pivot-dimension"
},
{
"type": "fieldCollector",
"title": "Group rows",
"description": "Which field do you want to group each row by? An example might be an employee ID or geographical location",
"callToAction": "Add group row",
"namespace": "field_rows",
"fieldFilterOptions": {
"onlyFieldTypes": [
"boolean",
"number",
"string",
"date_time"
],
"onlyDimensions": true,
"removePercentage": true,
"removeSimpleMaths": true,
"removeAggregateMaths": true
},
"preventDuplicates": true,
"testId": "add-dimension"
},
{
"type": "drilldown",
"title": "Drilldown",
"description": "Drilldowns in a pivot table reveals underlying data contributing to summarized figures upon clicking.",
"namespace": "drilldown"
},
{
"type": "fieldCollector",
"title": "Metrics",
"description": "Select the columns to show in the data table",
"callToAction": "Add metric",
"namespace": "field_metrics",
"fieldFilterOptions": {
"forComponent": "dataTable"
},
"testId": "metric-input"
},
{
"type": "sort",
"title": "Sort",
"description": "Select the order of categories or time on the x Axis.",
"namespace": "sort"
},
{
"type": "pagination",
"title": "Pagination",
"description": "Define the size for each page in the table",
"namespace": "pagination",
"options": [
3,
5,
10,
20,
50,
100,
200
]
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want to use in this data table.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
}
]Basic table
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this basic table?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fields",
"title": "Columns",
"description": "Select which values you want to see in this table",
"namespace": "fields"
},
{
"type": "sort",
"title": "Sort",
"description": "Select the order of categories or time on the x Axis.",
"namespace": "sort"
},
{
"type": "pagination",
"title": "Pagination",
"description": "Define the size for each page in the table",
"namespace": "pagination",
"options": [
3,
5,
10,
20,
50,
100,
200
]
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want to use in this basic table.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
}
]Combo chart
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this combo chart?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "labelledMetrics",
"title": "Metric - Y Axis",
"description": "What do you want each line and bar to measure?",
"subSectionDefinition": {
"line": {
"type": "metrics",
"title": "Line",
"namespace": "metrics.line"
},
"bar": {
"type": "metrics",
"title": "Bar",
"namespace": "metrics.bar"
}
},
"namespace": "labelled_metrics",
"subSection": [
{
"type": "metrics",
"title": "Line",
"namespace": "metrics.line",
"propKey": "lineMeasure",
"allowsMultiple": true
},
{
"type": "metrics",
"title": "Bar",
"namespace": "metrics.bar",
"propKey": "barMeasure",
"allowsMultiple": true
}
]
},
{
"type": "comboChartDimension",
"title": "Grouping - X Axis",
"description": "",
"namespace": "combo_chart_dimension"
},
{
"type": "sort",
"title": "Sort",
"description": "Select the order of categories or time on the x Axis.",
"namespace": "sort"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want to use in this combo chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "limit",
"title": "Limit",
"description": "Set the maximum number of records to show on this bar chart.",
"namespace": "limit"
}
]Country map
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use for this map?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "fieldCollector",
"title": "Metric",
"description": "What do you want to show?",
"callToAction": "Add metric",
"namespace": "field_metrics",
"fieldFilterOptions": {
"forComponent": "mercatorMap"
},
"maxAllowed": 1,
"testId": "metric-input"
},
{
"type": "fieldCollector",
"title": "Country",
"description": "Which field contains the country code required to group results on?",
"callToAction": "Set country",
"namespace": "field_country",
"fieldFilterOptions": {
"onlyDimensions": true,
"onlyFieldTypes": [
"string"
],
"removeRuleGrouping": false,
"removeSimpleMaths": true,
"removePercentage": true,
"removeAggregateMaths": true
},
"maxAllowed": 1,
"testId": "add-dimension"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want to use on this map.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
},
{
"type": "limit",
"title": "Limit",
"description": "Set the maximum number of records to show on this map.",
"namespace": "limit"
}
]Progress
[
{
"type": "dataSet",
"title": "Data set",
"description": "What data do you want to use in this progress?",
"namespace": "data_set"
},
{
"type": "views",
"title": "View",
"description": "",
"namespace": "views"
},
{
"type": "progressGoals",
"title": "Metric",
"description": "What do you want to show in each progress bar?",
"namespace": "progress_goals"
},
{
"type": "filter",
"title": "Filters",
"description": "Only include the information you want in this progress chart.",
"namespace": "filter"
},
{
"type": "customMetrics",
"title": "Custom metrics",
"description": "Build your own metrics, such as a percentage.",
"namespace": "custom_metrics"
}
]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.