@vizzly/dashboard 0.15.0-dev-d2bab4f67568f04c6c8cdd5854027babfdc4a1a0 → 0.15.0-dev-5e07d50132303e93a31030ec29ea7a18de5d4c24

package/dist/dashboard.esm.js

@@ -5058,9 +5058,7 @@ var SunburstChart = function SunburstChart(config) {
     },
     formatPanelConfig: function formatPanelConfig() {
       var _CONSTANTS$format_pan, _CONSTANTS$format_pan2, _CONSTANTS$format_pan3;
-      return [headingConstant(CONSTANTS$4), _extends({}, namespace(CONSTANTS$4, 'conditional_formatting'), {
-        ruleType: 'backgroundColor'
-      }), _extends({}, namespace(CONSTANTS$4, 'chart_styles'), {
+      return [headingConstant(CONSTANTS$4), _extends({}, namespace(CONSTANTS$4, 'chart_styles'), {
         subSection: [(_CONSTANTS$format_pan = CONSTANTS$4.format_panel.chart_styles) == null ? void 0 : _CONSTANTS$format_pan.subSectionDefinition.legend, (_CONSTANTS$format_pan2 = CONSTANTS$4.format_panel.chart_styles) == null ? void 0 : _CONSTANTS$format_pan2.subSectionDefinition.labels, (_CONSTANTS$format_pan3 = CONSTANTS$4.format_panel.chart_styles) == null ? void 0 : _CONSTANTS$format_pan3.subSectionDefinition.number_format]
       })];
     },
@@ -26142,33 +26140,6 @@ var buildFilterQuery = function buildFilterQuery(dataSet, fieldId, optionsFilter
   };
 };
 
-/** Returns a key to be used in an useEffect dependency, that changes if there's any change to a field in a data set. */
-var watchDataSetFieldChanges = function watchDataSetFieldChanges(dataSet, queryable) {
-  if ('dataSetId' in queryable) {
-    var watchFields = usedFields(queryable).map(function (field) {
-      return field.fieldId;
-    });
-
-    // Custom fields are the only ones that can have their definition changed. So
-    // we only need to watch them.
-    var watchedCustomFields = watchFields.flatMap(function (fieldId) {
-      try {
-        var dataSetField = findField(dataSet, fieldId);
-        if (isCustomField(dataSetField)) return [dataSetField];
-        return [];
-      } catch (err) {
-        if (err instanceof FieldNotFoundInDataSet) {
-          return [];
-        }
-        throw err;
-      }
-    });
-    return JSON.stringify(watchedCustomFields);
-  } else {
-    return '';
-  }
-};
-
 function processPercentageField(dataSetField, processFiltersCallback) {
   return [].concat(processFiltersCallback(dataSetField == null ? void 0 : dataSetField.denominatorFilter), processFiltersCallback(dataSetField == null ? void 0 : dataSetField.numeratorFilter));
 }
@@ -26318,6 +26289,33 @@ var useVariablesInDataSet = function useVariablesInDataSet(dataSet, queryable, v
   };
 };
 
+/** Returns a key to be used in an useEffect dependency, that changes if there's any change to a field in a data set. */
+var watchDataSetFieldChanges = function watchDataSetFieldChanges(dataSet, queryable) {
+  if ('dataSetId' in queryable) {
+    var watchFields = usedFields(queryable).map(function (field) {
+      return field.fieldId;
+    });
+
+    // Custom fields are the only ones that can have their definition changed. So
+    // we only need to watch them.
+    var watchedCustomFields = watchFields.flatMap(function (fieldId) {
+      try {
+        var dataSetField = findField(dataSet, fieldId);
+        if (isCustomField(dataSetField)) return [dataSetField];
+        return [];
+      } catch (err) {
+        if (err instanceof FieldNotFoundInDataSet) {
+          return [];
+        }
+        throw err;
+      }
+    });
+    return JSON.stringify(watchedCustomFields);
+  } else {
+    return '';
+  }
+};
+
 // How to make sure the queries run when a field in a data set has been changed.
 // need to pass in the data sets here
 
@@ -26339,27 +26337,40 @@ var useQueryEffect = function useQueryEffect(queries, runQueriesCallback, filter
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              if (shouldFetch(queries, componentType)) {
+                _context.next = 3;
+                break;
+              }
+              setResults([]);
+              return _context.abrupt("return");
+            case 3:
               setQueriesAreChanging(true);
-              _context.next = 3;
+              _context.next = 6;
               return fetch(queries, runQueriesCallback, abortController.signal, filterConfig);
-            case 3:
+            case 6:
               hasResults = _context.sent;
-              if (hasResults) {
-                setQueriesAreChanging(false);
-                if (!abortController.signal.aborted) {
-                  // Only set the results if the signal was not aborted...
-                  setResults(hasResults);
-                }
-              } else {
-                if (Array.isArray(queries)) {
-                  setResults(queries.map(function (_q) {
-                    return null;
-                  }));
-                } else {
-                  setResults([null]);
-                }
+              if (!hasResults) {
+                _context.next = 11;
+                break;
               }
-            case 5:
+              setQueriesAreChanging(false);
+              if (!abortController.signal.aborted) {
+                // Only set the results if the signal was not aborted...
+                setResults(hasResults);
+              }
+              return _context.abrupt("return");
+            case 11:
+              if (!Array.isArray(queries)) {
+                _context.next = 14;
+                break;
+              }
+              setResults(queries.map(function (_q) {
+                return null;
+              }));
+              return _context.abrupt("return");
+            case 14:
+              setResults([null]);
+            case 15:
             case "end":
               return _context.stop();
           }
@@ -26386,6 +26397,16 @@ var useQueryEffect = function useQueryEffect(queries, runQueriesCallback, filter
     queriesAreChanging: queriesAreChanging
   };
 };
+var shouldFetch = function shouldFetch(queries, componentType) {
+  if (!componentType) {
+    return true;
+  }
+  if (!ALL_COMPONENT_TYPES.includes(componentType)) {
+    return false;
+  }
+  var componentInterface = getComponentInterface(componentType);
+  return componentInterface.isRunnable(queries);
+};
 
 /** Fetches unique field values for a given field. */
 var useUniqueFieldValues = function useUniqueFieldValues(dataSet, fieldId) {
@@ -37600,112 +37621,54 @@ var ScatterChart$3 = function ScatterChart(props) {
   }));
 };
 
-var toKeyValueResults$1 = function toKeyValueResults(result) {
-  return [].concat(result.content).map(function (row) {
-    return reduce(row, function (acc, value, index) {
-      acc[result.fields[index].id] = value;
-      return acc;
-    }, {});
-  });
-};
-var getXFields = function getXFields(pivotConfig, query) {
-  var nonTimeDimensionFields = reject([].concat(pivotConfig.x), function (field) {
-    var _query$timeDimension;
-    return field == ((_query$timeDimension = query.timeDimension) == null ? void 0 : _query$timeDimension.field);
-  });
-  var xFields = query.timeDimension ? [query.timeDimension.field] : nonTimeDimensionFields;
-  return xFields;
-};
-var resultSet$1 = function resultSet(result, pivotConfig, query, as100PercentResultSet, nullReplacement) {
-  if (as100PercentResultSet === void 0) {
-    as100PercentResultSet = false;
-  }
-  var keyValueResult = toKeyValueResults$1(result);
-  var duplicateDataPoints = [].concat(keyValueResult).map(function (row) {
-    // Remove time dimension values from value prefix that allows groupings.
-    var xFields = getXFields(pivotConfig, query);
-    var xValues = xFields.map(function (xField) {
-      return toStringShort(row[xField], nullReplacement);
-    });
-    var yValues = {};
-    var hasMeasures = pivotConfig.y.includes('measures');
-    var yWithoutMeasures = hasMeasures ? [].concat(pivotConfig.y).slice(0, pivotConfig.y.length - 1) : [].concat(pivotConfig.y);
-    var yKeyValues = [].concat(yWithoutMeasures).map(function (k) {
-      return row[k];
-    });
-    query.measure.forEach(function (measure) {
-      var resultFieldId = id$2(measure);
-      var key$1 = key(yWithoutMeasures, yKeyValues, measure.field, measure["function"]);
-      yValues[key$1] = row[resultFieldId];
-    });
-    var dimensionValues = {};
-    xFields.forEach(function (xField) {
-      dimensionValues[xField] = row[xField];
-    });
-    return _extends({}, dimensionValues, {
-      x: xValues.join(', ')
-    }, yValues, {
-      xValues: xValues
-    });
-  });
-  var orderedRes = [];
-  var dataPoints = {};
-  duplicateDataPoints.forEach(function (dataPoint) {
-    var current = dataPoints[dataPoint.x];
-
-    // Only add the x data point once if it already exists.
-    if (!dataPoints[dataPoint.x]) {
-      orderedRes.push(dataPoint.x);
-    }
-    dataPoints[dataPoint.x] = merge({}, current, dataPoint);
-  });
-  var resultSet = orderedRes.map(function (k) {
-    return dataPoints[k];
-  });
-  return as100PercentResultSet ? to100PercentResultSet$1(resultSet) : resultSet;
-};
-var series$1 = function series(query, result, pivotConfig) {
-  var keyValueResult = toKeyValueResults$1(result);
-  var series = {};
-  keyValueResult.forEach(function (dataPoint) {
-    var yValues = [].concat(pivotConfig.y).map(function (k) {
-      return dataPoint[k];
-    });
-    query.measure.forEach(function (measure) {
-      var field = id$2(measure);
-      var key$1 = key(pivotConfig.y, yValues, measure.field, measure["function"]);
-      series[key$1] = {
-        key: key$1,
-        yValues: [].concat(yValues, [field]),
-        name: [].concat(yValues, [field]).join(', ')
+function buildPieOnViewClick(onViewClick, clickedValue, dataSet, viewId, dimension, timeDimension, runViewClickQuery) {
+  if (onViewClick) {
+    var parsedDatum = parse(clickedValue.key);
+    var objectToReturn = {
+      viewId: viewId != null ? viewId : '',
+      dataSet: {
+        id: dataSet.id,
+        name: dataSet.name,
+        fields: dataSet.fields,
+        description: dataSet.description
+      },
+      clicked: {
+        value: {
+          fieldId: parsedDatum.fieldId,
+          "function": parsedDatum["function"],
+          aggregate: 'none',
+          value: clickedValue.datum[clickedValue.key]
+        }
+      },
+      type: 'pieChart'
+    };
+    onViewClick(objectToReturn, /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(queries) {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(queries && runViewClickQuery)) {
+                _context.next = 4;
+                break;
+              }
+              _context.next = 3;
+              return runViewClickQuery(queries, buildClickedOnFieldForQuery(id, parse, dimension, timeDimension, clickedValue));
+            case 3:
+              return _context.abrupt("return", _context.sent);
+            case 4:
+              return _context.abrupt("return", Promise.resolve(null));
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
       };
-    });
-  });
-  return Object.values(series);
-};
-var to100PercentResultSet$1 = function to100PercentResultSet(resultSet) {
-  var ignoreKeys = ['x', 'xValues'];
-  return resultSet.map(function (serie) {
-    var newSerie = _extends({}, serie);
-    var total = sumBy(Object.entries(newSerie), function (_ref) {
-      var key = _ref[0],
-        value = _ref[1];
-      if (ignoreKeys.includes(key)) return 0;
-      if (isNumber(value)) {
-        return value;
-      }
-      return 0;
-    });
-    newSerie = mapValues(newSerie, function (value, key) {
-      if (ignoreKeys.includes(key)) return value;
-      if (isNumber(value)) {
-        return isPercentageOf(newSerie[key], total);
-      }
-      return value;
-    });
-    return newSerie;
-  });
-};
+    }());
+  }
+}
 
 var ComboChart$2 = /*#__PURE__*/forwardRef(function (props, ref) {
   var forceRerender = useChartForceRerender(ref);
@@ -38713,54 +38676,112 @@ var RichTextMenu = function RichTextMenu() {
   // );
 };
 
-function buildPieOnViewClick(onViewClick, clickedValue, dataSet, viewId, dimension, timeDimension, runViewClickQuery) {
-  if (onViewClick) {
-    var parsedDatum = parse(clickedValue.key);
-    var objectToReturn = {
-      viewId: viewId != null ? viewId : '',
-      dataSet: {
-        id: dataSet.id,
-        name: dataSet.name,
-        fields: dataSet.fields,
-        description: dataSet.description
-      },
-      clicked: {
-        value: {
-          fieldId: parsedDatum.fieldId,
-          "function": parsedDatum["function"],
-          aggregate: 'none',
-          value: clickedValue.datum[clickedValue.key]
-        }
-      },
-      type: 'pieChart'
-    };
-    onViewClick(objectToReturn, /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(queries) {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!(queries && runViewClickQuery)) {
-                _context.next = 4;
-                break;
-              }
-              _context.next = 3;
-              return runViewClickQuery(queries, buildClickedOnFieldForQuery(id, parse, dimension, timeDimension, clickedValue));
-            case 3:
-              return _context.abrupt("return", _context.sent);
-            case 4:
-              return _context.abrupt("return", Promise.resolve(null));
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
+var toKeyValueResults$1 = function toKeyValueResults(result) {
+  return [].concat(result.content).map(function (row) {
+    return reduce(row, function (acc, value, index) {
+      acc[result.fields[index].id] = value;
+      return acc;
+    }, {});
+  });
+};
+var getXFields = function getXFields(pivotConfig, query) {
+  var nonTimeDimensionFields = reject([].concat(pivotConfig.x), function (field) {
+    var _query$timeDimension;
+    return field == ((_query$timeDimension = query.timeDimension) == null ? void 0 : _query$timeDimension.field);
+  });
+  var xFields = query.timeDimension ? [query.timeDimension.field] : nonTimeDimensionFields;
+  return xFields;
+};
+var resultSet$1 = function resultSet(result, pivotConfig, query, as100PercentResultSet, nullReplacement) {
+  if (as100PercentResultSet === void 0) {
+    as100PercentResultSet = false;
   }
-}
+  var keyValueResult = toKeyValueResults$1(result);
+  var duplicateDataPoints = [].concat(keyValueResult).map(function (row) {
+    // Remove time dimension values from value prefix that allows groupings.
+    var xFields = getXFields(pivotConfig, query);
+    var xValues = xFields.map(function (xField) {
+      return toStringShort(row[xField], nullReplacement);
+    });
+    var yValues = {};
+    var hasMeasures = pivotConfig.y.includes('measures');
+    var yWithoutMeasures = hasMeasures ? [].concat(pivotConfig.y).slice(0, pivotConfig.y.length - 1) : [].concat(pivotConfig.y);
+    var yKeyValues = [].concat(yWithoutMeasures).map(function (k) {
+      return row[k];
+    });
+    query.measure.forEach(function (measure) {
+      var resultFieldId = id$2(measure);
+      var key$1 = key(yWithoutMeasures, yKeyValues, measure.field, measure["function"]);
+      yValues[key$1] = row[resultFieldId];
+    });
+    var dimensionValues = {};
+    xFields.forEach(function (xField) {
+      dimensionValues[xField] = row[xField];
+    });
+    return _extends({}, dimensionValues, {
+      x: xValues.join(', ')
+    }, yValues, {
+      xValues: xValues
+    });
+  });
+  var orderedRes = [];
+  var dataPoints = {};
+  duplicateDataPoints.forEach(function (dataPoint) {
+    var current = dataPoints[dataPoint.x];
+
+    // Only add the x data point once if it already exists.
+    if (!dataPoints[dataPoint.x]) {
+      orderedRes.push(dataPoint.x);
+    }
+    dataPoints[dataPoint.x] = merge({}, current, dataPoint);
+  });
+  var resultSet = orderedRes.map(function (k) {
+    return dataPoints[k];
+  });
+  return as100PercentResultSet ? to100PercentResultSet$1(resultSet) : resultSet;
+};
+var series$1 = function series(query, result, pivotConfig) {
+  var keyValueResult = toKeyValueResults$1(result);
+  var series = {};
+  keyValueResult.forEach(function (dataPoint) {
+    var yValues = [].concat(pivotConfig.y).map(function (k) {
+      return dataPoint[k];
+    });
+    query.measure.forEach(function (measure) {
+      var field = id$2(measure);
+      var key$1 = key(pivotConfig.y, yValues, measure.field, measure["function"]);
+      series[key$1] = {
+        key: key$1,
+        yValues: [].concat(yValues, [field]),
+        name: [].concat(yValues, [field]).join(', ')
+      };
+    });
+  });
+  return Object.values(series);
+};
+var to100PercentResultSet$1 = function to100PercentResultSet(resultSet) {
+  var ignoreKeys = ['x', 'xValues'];
+  return resultSet.map(function (serie) {
+    var newSerie = _extends({}, serie);
+    var total = sumBy(Object.entries(newSerie), function (_ref) {
+      var key = _ref[0],
+        value = _ref[1];
+      if (ignoreKeys.includes(key)) return 0;
+      if (isNumber(value)) {
+        return value;
+      }
+      return 0;
+    });
+    newSerie = mapValues(newSerie, function (value, key) {
+      if (ignoreKeys.includes(key)) return value;
+      if (isNumber(value)) {
+        return isPercentageOf(newSerie[key], total);
+      }
+      return value;
+    });
+    return newSerie;
+  });
+};
 
 var defaultProps$5 = {
   type: 'pieChart',
@@ -53096,9 +53117,11 @@ var SingleStat$2 = function SingleStat(props) {
   }));
 };
 
-var NONE_FIELD = 'none';
-var convertDataToSunburstData = function convertDataToSunburstData(formattedData) {
-  var _formattedData$fields;
+var convertDataToSunburstData = function convertDataToSunburstData(_ref) {
+  var _selectedMetric$publi, _selectedMetric$publi2;
+  var formattedData = _ref.formattedData,
+    metricAttribute = _ref.metricAttribute,
+    groupingAttributes = _ref.groupingAttributes;
   var fieldPublicNameMap = formattedData.fields.reduce(function (acc, field) {
     acc[field.fieldId] = field.publicName;
     return acc;
@@ -53110,11 +53133,13 @@ var convertDataToSunburstData = function convertDataToSunburstData(formattedData
     });
     return newItem;
   });
-  var selectedMetric = (_formattedData$fields = formattedData.fields.find(function (f) {
-    return f["function"] !== NONE_FIELD;
-  })) != null ? _formattedData$fields : formattedData.fields[0];
-  var groupingMetricFields = formattedData.fields.filter(function (f) {
-    return f["function"] === NONE_FIELD;
+  var selectedMetric = formattedData.fields.find(function (f) {
+    return f.fieldId === metricAttribute.field && f["function"] === metricAttribute["function"];
+  });
+  var groupingFields = formattedData.fields.filter(function (f) {
+    return groupingAttributes.some(function (g) {
+      return g.field === f.fieldId && g["function"] === f["function"];
+    });
   }).map(function (f) {
     return String(f.fieldId);
   });
@@ -53131,7 +53156,7 @@ var convertDataToSunburstData = function convertDataToSunburstData(formattedData
       var _item$selectedMetric$;
       var item = _step.value;
       var groupValue = String(item[groupFieldId]);
-      var metricValue = Number((_item$selectedMetric$ = item[selectedMetric.id]) != null ? _item$selectedMetric$ : 0);
+      var metricValue = selectedMetric ? Number((_item$selectedMetric$ = item[selectedMetric.id]) != null ? _item$selectedMetric$ : 0) : 0;
       if (uniqueValues.includes(groupValue)) {
         result[groupValue] = metricValue;
       }
@@ -53148,13 +53173,13 @@ var convertDataToSunburstData = function convertDataToSunburstData(formattedData
     if (parentColor === void 0) {
       parentColor = '';
     }
-    var currentGroupField = groupingMetricFields[depth];
+    var currentGroupField = groupingFields[depth];
     var uniqueValues = uniqBy(data, currentGroupField).map(function (d) {
       return String(d[currentGroupField]);
     });
     var metricValuesByGroup = calculateMetricValues(data, currentGroupField, uniqueValues);
     var publicName = fieldPublicNameMap[currentGroupField];
-    if (depth >= groupingMetricFields.length - 1) {
+    if (depth >= groupingFields.length - 1) {
       return uniqueValues.map(function (value, index) {
         return {
           name: value,
@@ -53179,9 +53204,9 @@ var convertDataToSunburstData = function convertDataToSunburstData(formattedData
     });
   };
   var convertedData = {
-    name: selectedMetric.publicName || '',
+    name: (_selectedMetric$publi = selectedMetric == null ? void 0 : selectedMetric.publicName) != null ? _selectedMetric$publi : '',
     children: _buildHierarchy(flattenedData, 0),
-    hierarchy: selectedMetric.publicName || '',
+    hierarchy: (_selectedMetric$publi2 = selectedMetric == null ? void 0 : selectedMetric.publicName) != null ? _selectedMetric$publi2 : '',
     parents: [],
     color: '#FFFFFF'
   };
@@ -53211,7 +53236,7 @@ function Partition(_ref) {
 }
 
 var SunburstChartView = function SunburstChartView(props) {
-  var _props$library, _props$attributes$vie;
+  var _props$library, _props$attributes$vie, _root$children$map, _root$children, _root$children$map2, _root$children2, _root$children$map3, _root$children3, _props$attributes$lab, _props$library2;
   var _useState = useState([0, 1]),
     xDomain = _useState[0],
     setXDomain = _useState[1];
@@ -53232,11 +53257,16 @@ var SunburstChartView = function SunburstChartView(props) {
     }),
     tooltipLabel = _useState5[0],
     setTooltipLabel = _useState5[1];
+  var defaultLabelFormat = '_vizzly_compact';
+  var theme = useTheme();
   var xScale = scaleLinear$1().domain(xDomain).range(xRange);
   var yScale = scaleSqrt().domain(yDomain).range(yRange);
   var width = props.width * 3 / 6;
-  var height = props.height * 0.9;
-  var minDimension = Math.min(props.width, props.height);
+  var titleHeight = props.attributes.displayTitle ? 24 : 0;
+  var subjectHeight = props.attributes.displaySubject ? 18 : 0;
+  var height = props.height - titleHeight - subjectHeight;
+  var adjustedHeight = adjustHeight(height * 0.95, props.attributes.legend);
+  var minDimension = Math.min(props.width, height);
   var centeredRatio = minDimension / 2.5;
   var sunburstChartComponent = getComponentInterface(props.attributes.type);
   var headerProps = {
@@ -53282,7 +53312,11 @@ var SunburstChartView = function SunburstChartView(props) {
       return null;
     }
     var formattedData = formatResult(props.result, props.formatResultParams);
-    return convertDataToSunburstData(formattedData);
+    return convertDataToSunburstData({
+      formattedData: formattedData,
+      metricAttribute: props.attributes.measure[0],
+      groupingAttributes: props.attributes.dimension
+    });
   }, [props.attributes, props.result, props.formatResultParams, sunburstChartComponent]);
   var root = useMemo(function () {
     return sunburstData && hierarchy(sunburstData).sum(function (d) {
@@ -53296,7 +53330,7 @@ var SunburstChartView = function SunburstChartView(props) {
   var _useTooltip = useTooltip$2({
       tooltipOpen: false,
       tooltipLeft: width / 2,
-      tooltipTop: height,
+      tooltipTop: adjustedHeight,
       tooltipData: 'Move me with your mouse or finger'
     }),
     showTooltip = _useTooltip.showTooltip,
@@ -53335,105 +53369,153 @@ var SunburstChartView = function SunburstChartView(props) {
       tooltipTop: containerY,
       tooltipData: JSON.stringify(node.data)
     });
-  }, [showTooltip, height, width, root]);
+  }, [showTooltip, adjustedHeight, width, root]);
   var innerWidth = width - DEFAULT_MARGINS.left - DEFAULT_MARGINS.right;
-  var innerHeight = height - DEFAULT_MARGINS.top - DEFAULT_MARGINS.bottom;
+  var innerHeight = adjustedHeight - DEFAULT_MARGINS.top - DEFAULT_MARGINS.bottom;
   var centerY = innerHeight / 2;
   var centerX = innerWidth / 2;
+  var totalFieldCount = props.attributes.measure.length + props.attributes.dimension.length;
   if (!sunburstChartComponent.isRunnable(props.attributes)) {
     return jsx(QueryUnderConstructionNotice, {
       title: "Missing parameters"
     });
   }
-  if (isLoading(props.result)) return jsx(LoadingComponent, {});
   if (hasFailed(props.result)) return jsx(FailedToLoadDataNotice, {});
+  if (isLoading(props.result) || props.result.fields.length !== totalFieldCount) return jsx(LoadingComponent, {});
   if (isEmpty(props.result)) return jsx(NoResultContentToShowNotice, _extends({}, headerProps));
-  return jsxs("div", {
-    children: [jsx("style", {
-      children: "" + TOOLTIP_ZINDEX
-    }), jsx(ChartWrapper, {
-      disabledFeatures: false,
-      children: jsx("svg", {
-        width: props.width,
-        height: height,
-        children: jsx(Partition, {
-          top: 0,
-          left: centerX + DEFAULT_MARGINS.left,
-          root: root,
-          children: jsx(Spring, {
-            reset: true,
-            from: {
-              t: 0
-            },
-            to: {
-              t: 1,
-              onFrame: function onFrame(_ref) {
-                var t = _ref.t;
-                return handleUpdate(t, xd, yd, yr);
+  var keys = (_root$children$map = root == null || (_root$children = root.children) == null ? void 0 : _root$children.map(function (child) {
+    return child.data.name;
+  })) != null ? _root$children$map : [];
+  var colors = (_root$children$map2 = root == null || (_root$children2 = root.children) == null ? void 0 : _root$children2.map(function (child) {
+    return child.data.color;
+  })) != null ? _root$children$map2 : [];
+  var typeIndex = (_root$children$map3 = root == null || (_root$children3 = root.children) == null ? void 0 : _root$children3.map(function (_, index) {
+    return {
+      index: index,
+      type: 'pie'
+    };
+  })) != null ? _root$children$map3 : [];
+  var showLabel = (theme == null ? void 0 : theme.detail) === 'verbose' && props.attributes.labels !== false || props.attributes.labels;
+  var labelFormat = (_props$attributes$lab = props == null ? void 0 : props.attributes.labelFormat) != null ? _props$attributes$lab : defaultLabelFormat;
+  var formatValue = function formatValue(value) {
+    return convertValueToFormat(toDp(value, 2), props == null ? void 0 : props.numberFormatOptions, labelFormat);
+  };
+  return jsx(Suspense, {
+    fallback: jsx(LoadingComponent, {}),
+    children: jsxs(ViewWrapper, {
+      id: props.id,
+      queriesAreChanging: props.queriesAreChanging,
+      children: [jsx(ViewHeader, _extends({}, headerProps)), jsxs(ChartWrapper, {
+        disabledFeatures: (_props$library2 = props.library) != null ? _props$library2 : false,
+        children: [jsx("style", {
+          children: "" + TOOLTIP_ZINDEX
+        }), jsx("svg", {
+          width: props.width,
+          height: adjustedHeight,
+          children: jsx(Partition, {
+            top: 0,
+            left: centerX + DEFAULT_MARGINS.left,
+            root: root,
+            children: jsx(Spring, {
+              reset: true,
+              from: {
+                t: 0
+              },
+              to: {
+                t: 1,
+                onFrame: function onFrame(_ref) {
+                  var t = _ref.t;
+                  return handleUpdate(t, xd, yd, yr);
+                }
+              },
+              config: {
+                mass: 5,
+                tension: 500,
+                friction: 100,
+                precision: 0.00001
+              },
+              children: function children(_ref2) {
+                var t = _ref2.t;
+                return jsxs(Group$2, {
+                  top: centerY + DEFAULT_MARGINS.top,
+                  left: centerX + DEFAULT_MARGINS.left,
+                  children: [root && root.descendants().map(function (node, i) {
+                    var _arc$centroid = arc$1.centroid(node),
+                      centroidX = _arc$centroid[0],
+                      centroidY = _arc$centroid[1];
+                    var hasSpaceForLabel = node.x1 - node.x0 >= 0.09;
+                    var nodeKey = node.data.name.toLowerCase().replaceAll(' ', '-') + "-" + i;
+                    var textColor = pickBestTextColor(node.data.color, ['white', 'black']);
+                    var displayLabelCondition = showLabel && hasSpaceForLabel && node.depth > 0;
+                    return jsxs("g", {
+                      children: [jsx(animated.path, {
+                        className: "path",
+                        d: t.to(function () {
+                          return arc$1(node);
+                        }),
+                        stroke: "#FFFFFF",
+                        strokeWidth: "2",
+                        fill: node.data.color,
+                        fillRule: "evenodd",
+                        onClick: function onClick() {
+                          return handleClick(node);
+                        },
+                        onMouseOver: function onMouseOver(event) {
+                          return handlePointerMove(event, node);
+                        },
+                        onMouseOut: function onMouseOut() {
+                          return hideTooltip();
+                        }
+                      }, i), displayLabelCondition && jsx(animated.g, {
+                        children: jsx("text", {
+                          fill: textColor,
+                          x: centroidX,
+                          y: centroidY,
+                          dy: ".33em",
+                          fontSize: 9,
+                          textAnchor: "middle",
+                          pointerEvents: "none",
+                          children: formatValue(node.value)
+                        })
+                      })]
+                    }, nodeKey);
+                  }), tooltipOpen && jsx(TooltipInPortal
+                  // style={buildTooltipStyles({ ...props.popOverMenuStyles, old: true })}
+                  , {
+                    top: tooltipTop,
+                    left: tooltipLeft,
+                    children: jsxs(TooltipWrapper, {
+                      sections: 1,
+                      children: [jsx(TooltipRow, {
+                        label: 'Category Name',
+                        value: tooltipLabel.categoryName
+                      }), tooltipLabel.path !== '' && jsx(TooltipRow, {
+                        label: 'Hierarchy Path',
+                        value: tooltipLabel.path
+                      }), jsx(TooltipRow, {
+                        label: 'Value',
+                        value: tooltipLabel.value
+                      }), tooltipLabel.percentOfParent !== '' && jsx(TooltipRow, {
+                        label: '% Of Parent',
+                        value: tooltipLabel.percentOfParent
+                      }), jsx(TooltipRow, {
+                        label: '% Of Total',
+                        value: tooltipLabel.percentOfTotal
+                      })]
+                    })
+                  }, v4())]
+                });
               }
-            },
-            config: {
-              mass: 5,
-              tension: 500,
-              friction: 100,
-              precision: 0.00001
-            },
-            children: function children(_ref2) {
-              var t = _ref2.t;
-              return jsxs(Group$2, {
-                top: centerY + DEFAULT_MARGINS.top,
-                left: centerX + DEFAULT_MARGINS.left,
-                children: [root && root.descendants().map(function (node, i) {
-                  return jsx(animated.path, {
-                    className: "path",
-                    d: t.to(function () {
-                      return arc$1(node);
-                    }),
-                    stroke: "#FFFFFF",
-                    strokeWidth: "2",
-                    fill: node.data.color,
-                    fillRule: "evenodd",
-                    onClick: function onClick() {
-                      return handleClick(node);
-                    },
-                    onMouseOver: function onMouseOver(event) {
-                      return handlePointerMove(event, node);
-                    },
-                    onMouseOut: function onMouseOut() {
-                      return hideTooltip();
-                    }
-                  }, i);
-                }), tooltipOpen && jsx(TooltipInPortal
-                // style={buildTooltipStyles({ ...props.popOverMenuStyles, old: true })}
-                , {
-                  top: tooltipTop,
-                  left: tooltipLeft,
-                  children: jsxs(TooltipWrapper, {
-                    sections: 1,
-                    children: [jsx(TooltipRow, {
-                      label: 'Category Name',
-                      value: tooltipLabel.categoryName
-                    }), tooltipLabel.path !== '' && jsx(TooltipRow, {
-                      label: 'Hierarchy Path',
-                      value: tooltipLabel.path
-                    }), jsx(TooltipRow, {
-                      label: 'Value',
-                      value: tooltipLabel.value
-                    }), tooltipLabel.percentOfParent !== '' && jsx(TooltipRow, {
-                      label: '% Of Parent',
-                      value: tooltipLabel.percentOfParent
-                    }), jsx(TooltipRow, {
-                      label: '% Of Total',
-                      value: tooltipLabel.percentOfTotal
-                    })]
-                  })
-                }, v4())]
-              });
-            }
+            })
           })
-        })
-      })
-    })]
+        }), showLegend(props.attributes.legend, (theme == null ? void 0 : theme.detail) === 'verbose') && jsx(Legend, {
+          colors: colors,
+          keys: keys,
+          typeIndex: typeIndex,
+          alignCenter: true
+        })]
+      })]
+    })
   });
 };
 
@@ -53443,7 +53525,8 @@ var SunburstChart$2 = function SunburstChart(props) {
       localFilters: props.component.localFilters,
       globalFilters: props.globalFilters
     }, props.dataSet, undefined, props.dashboardBehaviour.variables),
-    results = _useQueryEffect.results;
+    results = _useQueryEffect.results,
+    queriesAreChanging = _useQueryEffect.queriesAreChanging;
   var params = {
     defaultFormats: props.dashboardBehaviour.defaultFormats,
     dateTimeFormatOptions: props.dashboardBehaviour.dateTimeFormatOptions,
@@ -53458,6 +53541,8 @@ var SunburstChart$2 = function SunburstChart(props) {
   return jsx(ParentSize, {
     children: function children(parent) {
       return jsx(SunburstChartView, {
+        id: props.id,
+        queriesAreChanging: queriesAreChanging,
         attributes: attributes,
         dataSet: props.dataSet,
         localFilters: props.component.localFilters,
@@ -53465,10 +53550,12 @@ var SunburstChart$2 = function SunburstChart(props) {
         setPartialAttributes: function setPartialAttributes(changes) {
           return props.setPartialAttributes(changes);
         },
-        result: results[0],
+        result: results && results[0],
         width: parent == null ? void 0 : parent.width,
         height: parent == null ? void 0 : parent.height,
-        formatResultParams: params
+        formatResultParams: params,
+        numberFormatOptions: props.dashboardBehaviour.numberFormatOptions,
+        dateTimeFormatOptions: props.dashboardBehaviour.dateTimeFormatOptions
       });
     }
   });
@@ -62249,51 +62336,6 @@ var DataPropsEditor = function DataPropsEditor() {
   });
 };
 
-var HeadingSection = function HeadingSection(_ref) {
-  var _section$subSection;
-  var section = _ref.section,
-    setAttributes = _ref.setAttributes,
-    attributes = _ref.attributes;
-  var handleInputChange = useInputDebounce(setAttributes);
-  return jsx(Section, {
-    title: section.title,
-    tooltip: section == null ? void 0 : section.description,
-    children: jsx(Section.Grid, {
-      children: section == null || (_section$subSection = section.subSection) == null ? void 0 : _section$subSection.map(function (section, i) {
-        return jsxs(Fragment, {
-          children: [section.type === 'title' && jsx("div", {
-            children: jsx(Input, {
-              label: section == null ? void 0 : section.title,
-              "data-testid": "display-title-input",
-              id: "display-title-input",
-              type: "text",
-              onChange: function onChange(input) {
-                return handleInputChange({
-                  displayTitle: input.target.value
-                });
-              },
-              defaultValue: attributes.displayTitle
-            })
-          }), section.type === 'subject' && jsx("div", {
-            children: jsx(Input, {
-              label: section == null ? void 0 : section.title,
-              "data-testid": "display-subject-input",
-              id: "display-subject-input",
-              type: "text",
-              onChange: function onChange(input) {
-                return handleInputChange({
-                  displaySubject: input.target.value
-                });
-              },
-              defaultValue: attributes.displaySubject
-            })
-          })]
-        }, i);
-      })
-    })
-  });
-};
-
 var SelectNumberFormat = function SelectNumberFormat(props) {
   var _props$label;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
@@ -62320,6 +62362,196 @@ var SelectNumberFormat = function SelectNumberFormat(props) {
   });
 };
 
+var AxisPreferenceSection = function AxisPreferenceSection(props) {
+  var _props$attributes, _props$attributes2, _props$attributes3, _props$attributes4, _props$section, _props$section2, _props$section$y, _props$section$y$form, _props$section$y$axis, _props$attributes$axi, _props$section$x$form, _props$section$x, _props$section$x$axis, _props$attributes$axi2;
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride,
+    dateTimeFormatOptions = _useDashboardBehaviou.dateTimeFormatOptions;
+  var axisOptions = [{
+    label: textOverride('auto', 'Auto'),
+    value: 'auto'
+  }, {
+    label: textOverride('minimal', 'Minimal'),
+    value: 2
+  }, {
+    label: textOverride('None', 'None'),
+    value: 0
+  }];
+  var dateTimeFormatOptionsItems = Object.keys(dateTimeFormatOptions).map(function (key) {
+    var option = dateTimeFormatOptions[key];
+    return {
+      label: option.description,
+      value: key
+    };
+  });
+  var horizontal = props.attributes.type == 'horizontalBarChart';
+  var showXAxisNumberFormatter = ((_props$attributes = props.attributes) == null || (_props$attributes = _props$attributes.dimension) == null ? void 0 : _props$attributes.length) > 0 && findField(props.dataSet, (_props$attributes2 = props.attributes) == null || (_props$attributes2 = _props$attributes2.dimension[0]) == null ? void 0 : _props$attributes2.field).dataType === 'number' && !((_props$attributes3 = props.attributes) != null && _props$attributes3.timeDimension);
+  var showXAxisDateFormatOptions = !!((_props$attributes4 = props.attributes) != null && _props$attributes4.timeDimension);
+  var _ref = horizontal ? {
+      x: 'y',
+      y: 'x'
+    } : {
+      x: 'x',
+      y: 'y'
+    },
+    x = _ref.x,
+    y = _ref.y;
+  return jsx(Section, {
+    title: (_props$section = props.section) == null ? void 0 : _props$section.title,
+    tooltip: (_props$section2 = props.section) == null ? void 0 : _props$section2.description,
+    "data-component": "axis-preference-section",
+    children: jsxs(Section.Container, {
+      "data-component": "single-stats-labels",
+      children: [jsxs(Section.Panel, {
+        title: (_props$section$y = props.section[y]) == null ? void 0 : _props$section$y.title,
+        children: [jsxs(Section.Grid, {
+          columns: 2,
+          children: [jsx(TextInput, {
+            label: props.section[y].prefix.title,
+            setText: function setText(yAxisPrefix) {
+              return props.setAttributes({
+                yAxisPrefix: yAxisPrefix
+              });
+            },
+            currentValue: props.attributes.yAxisPrefix,
+            maxLength: 4,
+            id: "axis-" + y + "-prefix"
+          }), jsx(TextInput, {
+            label: props.section[y].postfix.title,
+            setText: function setText(yAxisPostfix) {
+              return props.setAttributes({
+                yAxisPostfix: yAxisPostfix
+              });
+            },
+            currentValue: props.attributes.yAxisPostfix,
+            maxLength: 4,
+            id: "axis-" + y + "-postfix"
+          })]
+        }), jsxs(Section.Grid, {
+          columns: 2,
+          children: [jsx(SelectNumberFormat, {
+            label: (_props$section$y$form = props.section[y].format) == null ? void 0 : _props$section$y$form.title,
+            id: "axis-" + y + "-format",
+            onChange: function onChange(yAxisFormat) {
+              return props.setAttributes({
+                yAxisFormat: yAxisFormat
+              });
+            },
+            currentValue: props.attributes.yAxisFormat,
+            testId: "axis-" + y + "-format"
+          }), jsx(FormatSelectInput, {
+            id: "axis-" + y + "-label-count",
+            label: props.section.y.count.title,
+            currentValue: props.attributes.approxYAxisLabelCount,
+            onSelect: function onSelect(approxYAxisLabelCount) {
+              return props.setAttributes({
+                approxYAxisLabelCount: approxYAxisLabelCount
+              });
+            },
+            options: axisOptions
+          })]
+        }), jsx(Section.Grid, {
+          children: props.section[y].axisTitle && jsx(TextInput, {
+            label: (_props$section$y$axis = props.section[y].axisTitle.title) != null ? _props$section$y$axis : '',
+            setText: function setText(axisTitle) {
+              var _axisTitles;
+              return props.setAttributes({
+                axisTitles: (_axisTitles = {}, _axisTitles[y] = axisTitle, _axisTitles)
+              });
+            },
+            currentValue: (_props$attributes$axi = props.attributes.axisTitles) == null ? void 0 : _props$attributes$axi[y],
+            id: "axis-" + [y] + "-axisTitle"
+          })
+        })]
+      }), jsxs(Section.Panel, {
+        title: props.section[x].title,
+        children: [jsxs(Section.Grid, {
+          columns: 2,
+          children: [jsx(TextInput, {
+            label: props.section[x].prefix.title,
+            setText: function setText(xAxisPrefix) {
+              return props.setAttributes({
+                xAxisPrefix: xAxisPrefix
+              });
+            },
+            currentValue: props.attributes.xAxisPrefix,
+            maxLength: 4,
+            id: "axis-" + x + "-prefix"
+          }), jsx(TextInput, {
+            label: props.section[x].postfix.title,
+            setText: function setText(xAxisPostfix) {
+              return props.setAttributes({
+                xAxisPostfix: xAxisPostfix
+              });
+            },
+            currentValue: props.attributes.xAxisPostfix,
+            maxLength: 4,
+            id: "axis-" + x + "-postfix"
+          })]
+        }), jsx(Section.Grid, {
+          columns: showXAxisNumberFormatter || showXAxisDateFormatOptions ? 2 : 1,
+          children: jsxs(Fragment$1, {
+            children: [showXAxisNumberFormatter && jsx(SelectNumberFormat, {
+              label: (_props$section$x$form = props.section[x].format) == null ? void 0 : _props$section$x$form.title,
+              id: "axis-" + x + "-format",
+              onChange: function onChange(xAxisFormat) {
+                props.setAttributes({
+                  xAxisFormat: xAxisFormat
+                });
+              },
+              currentValue: props.attributes.xAxisFormat,
+              testId: "axis-" + y + "-format"
+            }), showXAxisDateFormatOptions ? jsxs(Fragment$1, {
+              children: [jsx(FormatSelectInput, {
+                id: "axis-" + x + "-label-date-format",
+                label: ((_props$section$x = props.section.x) == null || (_props$section$x = _props$section$x.format) == null ? void 0 : _props$section$x.title) || 'Format',
+                currentValue: props.attributes.xAxisFormat,
+                onSelect: function onSelect(xAxisFormat) {
+                  return props.setAttributes({
+                    xAxisFormat: xAxisFormat
+                  });
+                },
+                options: dateTimeFormatOptionsItems
+              }), jsx(FormatSelectInput, {
+                id: "axis-" + x + "-label-count",
+                label: props.section.x.count.title,
+                currentValue: props.attributes.approxXAxisLabelCount,
+                onSelect: function onSelect(approxXAxisLabelCount) {
+                  return props.setAttributes({
+                    approxXAxisLabelCount: approxXAxisLabelCount
+                  });
+                },
+                options: axisOptions
+              })]
+            }) : jsx(Checkbox, {
+              label: textOverride('hide_labels', 'Hide Labels'),
+              onChange: function onChange(event) {
+                return props.setAttributes({
+                  approxXAxisLabelCount: event ? 0 : 'auto'
+                });
+              },
+              id: "hide-labels",
+              currentValue: props.attributes.approxXAxisLabelCount === 0 ? true : false
+            })]
+          })
+        }), jsx(Section.Grid, {
+          children: props.section[x].axisTitle && jsx(TextInput, {
+            label: (_props$section$x$axis = props.section[x].axisTitle.title) != null ? _props$section$x$axis : '',
+            setText: function setText(axisTitle) {
+              var _axisTitles2;
+              return props.setAttributes({
+                axisTitles: (_axisTitles2 = {}, _axisTitles2[x] = axisTitle, _axisTitles2)
+              });
+            },
+            currentValue: (_props$attributes$axi2 = props.attributes.axisTitles) == null ? void 0 : _props$attributes$axi2[x],
+            id: "axis-" + [x] + "-axisTitle"
+          })
+        })]
+      })]
+    })
+  });
+};
+
 var ChartSettingsSection = function ChartSettingsSection(_ref) {
   var section = _ref.section,
     attributes = _ref.attributes,
@@ -62440,196 +62672,6 @@ var ChartSettingsSection = function ChartSettingsSection(_ref) {
   });
 };
 
-var AxisPreferenceSection = function AxisPreferenceSection(props) {
-  var _props$attributes, _props$attributes2, _props$attributes3, _props$attributes4, _props$section, _props$section2, _props$section$y, _props$section$y$form, _props$section$y$axis, _props$attributes$axi, _props$section$x$form, _props$section$x, _props$section$x$axis, _props$attributes$axi2;
-  var _useDashboardBehaviou = useDashboardBehaviourContext(),
-    textOverride = _useDashboardBehaviou.textOverride,
-    dateTimeFormatOptions = _useDashboardBehaviou.dateTimeFormatOptions;
-  var axisOptions = [{
-    label: textOverride('auto', 'Auto'),
-    value: 'auto'
-  }, {
-    label: textOverride('minimal', 'Minimal'),
-    value: 2
-  }, {
-    label: textOverride('None', 'None'),
-    value: 0
-  }];
-  var dateTimeFormatOptionsItems = Object.keys(dateTimeFormatOptions).map(function (key) {
-    var option = dateTimeFormatOptions[key];
-    return {
-      label: option.description,
-      value: key
-    };
-  });
-  var horizontal = props.attributes.type == 'horizontalBarChart';
-  var showXAxisNumberFormatter = ((_props$attributes = props.attributes) == null || (_props$attributes = _props$attributes.dimension) == null ? void 0 : _props$attributes.length) > 0 && findField(props.dataSet, (_props$attributes2 = props.attributes) == null || (_props$attributes2 = _props$attributes2.dimension[0]) == null ? void 0 : _props$attributes2.field).dataType === 'number' && !((_props$attributes3 = props.attributes) != null && _props$attributes3.timeDimension);
-  var showXAxisDateFormatOptions = !!((_props$attributes4 = props.attributes) != null && _props$attributes4.timeDimension);
-  var _ref = horizontal ? {
-      x: 'y',
-      y: 'x'
-    } : {
-      x: 'x',
-      y: 'y'
-    },
-    x = _ref.x,
-    y = _ref.y;
-  return jsx(Section, {
-    title: (_props$section = props.section) == null ? void 0 : _props$section.title,
-    tooltip: (_props$section2 = props.section) == null ? void 0 : _props$section2.description,
-    "data-component": "axis-preference-section",
-    children: jsxs(Section.Container, {
-      "data-component": "single-stats-labels",
-      children: [jsxs(Section.Panel, {
-        title: (_props$section$y = props.section[y]) == null ? void 0 : _props$section$y.title,
-        children: [jsxs(Section.Grid, {
-          columns: 2,
-          children: [jsx(TextInput, {
-            label: props.section[y].prefix.title,
-            setText: function setText(yAxisPrefix) {
-              return props.setAttributes({
-                yAxisPrefix: yAxisPrefix
-              });
-            },
-            currentValue: props.attributes.yAxisPrefix,
-            maxLength: 4,
-            id: "axis-" + y + "-prefix"
-          }), jsx(TextInput, {
-            label: props.section[y].postfix.title,
-            setText: function setText(yAxisPostfix) {
-              return props.setAttributes({
-                yAxisPostfix: yAxisPostfix
-              });
-            },
-            currentValue: props.attributes.yAxisPostfix,
-            maxLength: 4,
-            id: "axis-" + y + "-postfix"
-          })]
-        }), jsxs(Section.Grid, {
-          columns: 2,
-          children: [jsx(SelectNumberFormat, {
-            label: (_props$section$y$form = props.section[y].format) == null ? void 0 : _props$section$y$form.title,
-            id: "axis-" + y + "-format",
-            onChange: function onChange(yAxisFormat) {
-              return props.setAttributes({
-                yAxisFormat: yAxisFormat
-              });
-            },
-            currentValue: props.attributes.yAxisFormat,
-            testId: "axis-" + y + "-format"
-          }), jsx(FormatSelectInput, {
-            id: "axis-" + y + "-label-count",
-            label: props.section.y.count.title,
-            currentValue: props.attributes.approxYAxisLabelCount,
-            onSelect: function onSelect(approxYAxisLabelCount) {
-              return props.setAttributes({
-                approxYAxisLabelCount: approxYAxisLabelCount
-              });
-            },
-            options: axisOptions
-          })]
-        }), jsx(Section.Grid, {
-          children: props.section[y].axisTitle && jsx(TextInput, {
-            label: (_props$section$y$axis = props.section[y].axisTitle.title) != null ? _props$section$y$axis : '',
-            setText: function setText(axisTitle) {
-              var _axisTitles;
-              return props.setAttributes({
-                axisTitles: (_axisTitles = {}, _axisTitles[y] = axisTitle, _axisTitles)
-              });
-            },
-            currentValue: (_props$attributes$axi = props.attributes.axisTitles) == null ? void 0 : _props$attributes$axi[y],
-            id: "axis-" + [y] + "-axisTitle"
-          })
-        })]
-      }), jsxs(Section.Panel, {
-        title: props.section[x].title,
-        children: [jsxs(Section.Grid, {
-          columns: 2,
-          children: [jsx(TextInput, {
-            label: props.section[x].prefix.title,
-            setText: function setText(xAxisPrefix) {
-              return props.setAttributes({
-                xAxisPrefix: xAxisPrefix
-              });
-            },
-            currentValue: props.attributes.xAxisPrefix,
-            maxLength: 4,
-            id: "axis-" + x + "-prefix"
-          }), jsx(TextInput, {
-            label: props.section[x].postfix.title,
-            setText: function setText(xAxisPostfix) {
-              return props.setAttributes({
-                xAxisPostfix: xAxisPostfix
-              });
-            },
-            currentValue: props.attributes.xAxisPostfix,
-            maxLength: 4,
-            id: "axis-" + x + "-postfix"
-          })]
-        }), jsx(Section.Grid, {
-          columns: showXAxisNumberFormatter || showXAxisDateFormatOptions ? 2 : 1,
-          children: jsxs(Fragment$1, {
-            children: [showXAxisNumberFormatter && jsx(SelectNumberFormat, {
-              label: (_props$section$x$form = props.section[x].format) == null ? void 0 : _props$section$x$form.title,
-              id: "axis-" + x + "-format",
-              onChange: function onChange(xAxisFormat) {
-                props.setAttributes({
-                  xAxisFormat: xAxisFormat
-                });
-              },
-              currentValue: props.attributes.xAxisFormat,
-              testId: "axis-" + y + "-format"
-            }), showXAxisDateFormatOptions ? jsxs(Fragment$1, {
-              children: [jsx(FormatSelectInput, {
-                id: "axis-" + x + "-label-date-format",
-                label: ((_props$section$x = props.section.x) == null || (_props$section$x = _props$section$x.format) == null ? void 0 : _props$section$x.title) || 'Format',
-                currentValue: props.attributes.xAxisFormat,
-                onSelect: function onSelect(xAxisFormat) {
-                  return props.setAttributes({
-                    xAxisFormat: xAxisFormat
-                  });
-                },
-                options: dateTimeFormatOptionsItems
-              }), jsx(FormatSelectInput, {
-                id: "axis-" + x + "-label-count",
-                label: props.section.x.count.title,
-                currentValue: props.attributes.approxXAxisLabelCount,
-                onSelect: function onSelect(approxXAxisLabelCount) {
-                  return props.setAttributes({
-                    approxXAxisLabelCount: approxXAxisLabelCount
-                  });
-                },
-                options: axisOptions
-              })]
-            }) : jsx(Checkbox, {
-              label: textOverride('hide_labels', 'Hide Labels'),
-              onChange: function onChange(event) {
-                return props.setAttributes({
-                  approxXAxisLabelCount: event ? 0 : 'auto'
-                });
-              },
-              id: "hide-labels",
-              currentValue: props.attributes.approxXAxisLabelCount === 0 ? true : false
-            })]
-          })
-        }), jsx(Section.Grid, {
-          children: props.section[x].axisTitle && jsx(TextInput, {
-            label: (_props$section$x$axis = props.section[x].axisTitle.title) != null ? _props$section$x$axis : '',
-            setText: function setText(axisTitle) {
-              var _axisTitles2;
-              return props.setAttributes({
-                axisTitles: (_axisTitles2 = {}, _axisTitles2[x] = axisTitle, _axisTitles2)
-              });
-            },
-            currentValue: (_props$attributes$axi2 = props.attributes.axisTitles) == null ? void 0 : _props$attributes$axi2[x],
-            id: "axis-" + [x] + "-axisTitle"
-          })
-        })]
-      })]
-    })
-  });
-};
-
 function updateAttributes(fromModal, existingArray, rule) {
   var newArray;
   if (typeof fromModal === 'object' && fromModal !== null) {
@@ -62920,72 +62962,195 @@ var FormatSection = function FormatSection(props) {
   });
 };
 
-var PrefixesSection = function PrefixesSection(props) {
-  var _props$section, _props$attributes$pre2;
-  var _useDashboardContext = useDashboardContext(),
-    dispatch = _useDashboardContext.dispatch;
+var GoalLineRules = function GoalLineRules(props) {
+  var _props$goalLines;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     mode = _useDashboardBehaviou.mode,
-    textOverride = _useDashboardBehaviou.textOverride;
-  var handleSavePrefix = function handleSavePrefix(prefix) {
-    if (prefix) {
-      var _props$attributes$pre;
-      props.setAttributes({
-        prefixes: [].concat((_props$attributes$pre = props.attributes.prefixes) != null ? _props$attributes$pre : [], [prefix])
-      });
-    }
+    textOverride = _useDashboardBehaviou.textOverride,
+    variables = _useDashboardBehaviou.variables;
+  var _useDashboardContext = useDashboardContext(),
+    dispatch = _useDashboardContext.dispatch;
+  var closeModal = function closeModal() {
     dispatch({
       type: 'setActiveModal',
       payload: {
-        modal: ModalType.Prefix,
+        modal: ModalType.GoalLines,
         attributes: undefined
       }
     });
   };
-  var handleOpen = function handleOpen() {
+  var handleModalDispatch = function handleModalDispatch(existingRule) {
     dispatch({
       type: 'setActiveModal',
       payload: {
-        modal: ModalType.Prefix,
+        modal: ModalType.GoalLines,
         attributes: {
           show: true,
-          onClose: handleSavePrefix,
-          measures: props.attributes.measure,
-          dataSet: props.dataSet
+          onClose: function onClose() {
+            return closeModal();
+          },
+          onSave: function onSave(newRule) {
+            var newGoalLineArray = updateAttributes(existingRule != null ? existingRule : true, props.goalLines, newRule);
+            props.onSetGoalLineRules(newGoalLineArray);
+            closeModal();
+          },
+          goalLine: existingRule != null ? existingRule : undefined
         }
       }
     });
   };
-  return jsx(Section, {
-    title: props == null ? void 0 : props.section.title,
-    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
+  return jsx(Fragment$1, {
     children: jsx(ListView, {
       mode: mode,
-      items: ((_props$attributes$pre2 = props.attributes.prefixes) != null ? _props$attributes$pre2 : []).map(function (prefix, index) {
-        var _Field$getQueryFieldI = getQueryFieldIdFromResultFieldId(prefix.field, props.queryEngineConfig),
-          queryFieldId = _Field$getQueryFieldI.fieldId,
-          func = _Field$getQueryFieldI["function"];
-        var dataSetField = findField(props.dataSet, queryFieldId);
-        var title = "" + dataSetField.publicName + (func != 'none' ? " (" + props.queryEngineConfig.supportedAggregates[func].publicName + ")" : '');
+      onOrderChange: function onOrderChange(index, toIndex) {
+        var newFormattingRules = reOrderItems([].concat(props.goalLines), index, toIndex);
+        props.onSetGoalLineRules(newFormattingRules);
+      },
+      purpose: "goal-lines",
+      items: ((_props$goalLines = props.goalLines) != null ? _props$goalLines : []).map(function (rule, index) {
+        var hasValidVariable = validate(rule.value, variables == null ? void 0 : variables.variables);
         return {
-          title: title,
-          subtext: prefix.prefix,
-          id: "prefix-" + index
+          title: jsxs(Flex, {
+            alignItems: "center",
+            gap: "0.25rem",
+            children: [jsx(Color.Swatch, {
+              color: rule.color
+            }), jsx("span", {
+              dangerouslySetInnerHTML: {
+                __html: textOverride('goal_line_configuration', 'Set to <strong>[[ruleValue]]</strong>', {
+                  ruleValue: rule.value
+                })
+              }
+            }), !hasValidVariable && jsx("div", {
+              "aria-label": textOverride('goal_line.variable_not_available', 'This variable is not available.'),
+              children: jsx(Tooltip, {
+                tooltipContent: function tooltipContent() {
+                  return jsx(Fragment, {
+                    children: textOverride('goal_line.variable_not_available', 'This variable is not available.')
+                  });
+                },
+                children: jsx(ErrorIcon, {})
+              })
+            })]
+          }),
+          onClick: function onClick() {
+            return handleModalDispatch(rule);
+          },
+          id: "goal-line-" + index
         };
       }),
       newItemBtn: {
-        callToAction: textOverride('add_prefix', 'Add Prefix'),
+        callToAction: textOverride('add_goal_line', 'Add Goal Line'),
         onClick: function onClick() {
-          return handleOpen();
+          return handleModalDispatch();
         }
       },
       onDeleteItem: function onDeleteItem(index) {
-        var _props$attributes$pre3;
-        var newPrefixes = [].concat((_props$attributes$pre3 = props.attributes.prefixes) != null ? _props$attributes$pre3 : []);
-        newPrefixes.splice(index, 1);
+        var _props$goalLines2;
+        var newRules = [].concat((_props$goalLines2 = props.goalLines) != null ? _props$goalLines2 : []);
+        newRules.splice(index, 1);
+        props.onSetGoalLineRules(newRules);
+      }
+    })
+  });
+};
+
+var GoalLineSection = function GoalLineSection(props) {
+  var _props$section;
+  return jsx(Section, {
+    title: props == null ? void 0 : props.section.title,
+    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
+    children: jsx(GoalLineRules, {
+      onSetGoalLineRules: function onSetGoalLineRules(goalLines) {
+        return props.setAttributes({
+          goalLines: goalLines
+        });
+      },
+      goalLines: props.attributes.goalLines
+    })
+  });
+};
+
+var HeadingSection = function HeadingSection(_ref) {
+  var _section$subSection;
+  var section = _ref.section,
+    setAttributes = _ref.setAttributes,
+    attributes = _ref.attributes;
+  var handleInputChange = useInputDebounce(setAttributes);
+  return jsx(Section, {
+    title: section.title,
+    tooltip: section == null ? void 0 : section.description,
+    children: jsx(Section.Grid, {
+      children: section == null || (_section$subSection = section.subSection) == null ? void 0 : _section$subSection.map(function (section, i) {
+        return jsxs(Fragment, {
+          children: [section.type === 'title' && jsx("div", {
+            children: jsx(Input, {
+              label: section == null ? void 0 : section.title,
+              "data-testid": "display-title-input",
+              id: "display-title-input",
+              type: "text",
+              onChange: function onChange(input) {
+                return handleInputChange({
+                  displayTitle: input.target.value
+                });
+              },
+              defaultValue: attributes.displayTitle
+            })
+          }), section.type === 'subject' && jsx("div", {
+            children: jsx(Input, {
+              label: section == null ? void 0 : section.title,
+              "data-testid": "display-subject-input",
+              id: "display-subject-input",
+              type: "text",
+              onChange: function onChange(input) {
+                return handleInputChange({
+                  displaySubject: input.target.value
+                });
+              },
+              defaultValue: attributes.displaySubject
+            })
+          })]
+        }, i);
+      })
+    })
+  });
+};
+
+var HeadlineSection = function HeadlineSection(props) {
+  var _props$section, _props$attributes$hea, _props$attributes$hea2;
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride;
+  if (props.dataSet.preAggregated) return null;
+  if (!canHaveHeadline(props.attributes.order, props.attributes.timeDimension)) return null;
+  var options = function () {
+    var builtOptions = [{
+      label: textOverride('none', 'None'),
+      value: null
+    }, {
+      label: textOverride('current', 'Current'),
+      value: 'current'
+    }];
+    return builtOptions;
+  }();
+  return jsx(Section, {
+    title: props == null ? void 0 : props.section.title,
+    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
+    children: jsx(Select$2, {
+      id: "headline-options",
+      label: textOverride('options', 'Options'),
+      labelHidden: true,
+      onChange: function onChange(value) {
         props.setAttributes({
-          prefixes: newPrefixes
+          headline: {
+            func: value
+          }
         });
+      },
+      options: options,
+      selected: (_props$attributes$hea = (_props$attributes$hea2 = props.attributes.headline) == null ? void 0 : _props$attributes$hea2.func) != null ? _props$attributes$hea : null,
+      textOverride: textOverride,
+      onClick: function onClick() {
+        safeScrollBy('bottom', 'editor-panel');
       }
     })
   });
@@ -63056,6 +63221,124 @@ var MapColorsSection = function MapColorsSection(props) {
   });
 };
 
+var PrefixesSection = function PrefixesSection(props) {
+  var _props$section, _props$attributes$pre2;
+  var _useDashboardContext = useDashboardContext(),
+    dispatch = _useDashboardContext.dispatch;
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    mode = _useDashboardBehaviou.mode,
+    textOverride = _useDashboardBehaviou.textOverride;
+  var handleSavePrefix = function handleSavePrefix(prefix) {
+    if (prefix) {
+      var _props$attributes$pre;
+      props.setAttributes({
+        prefixes: [].concat((_props$attributes$pre = props.attributes.prefixes) != null ? _props$attributes$pre : [], [prefix])
+      });
+    }
+    dispatch({
+      type: 'setActiveModal',
+      payload: {
+        modal: ModalType.Prefix,
+        attributes: undefined
+      }
+    });
+  };
+  var handleOpen = function handleOpen() {
+    dispatch({
+      type: 'setActiveModal',
+      payload: {
+        modal: ModalType.Prefix,
+        attributes: {
+          show: true,
+          onClose: handleSavePrefix,
+          measures: props.attributes.measure,
+          dataSet: props.dataSet
+        }
+      }
+    });
+  };
+  return jsx(Section, {
+    title: props == null ? void 0 : props.section.title,
+    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
+    children: jsx(ListView, {
+      mode: mode,
+      items: ((_props$attributes$pre2 = props.attributes.prefixes) != null ? _props$attributes$pre2 : []).map(function (prefix, index) {
+        var _Field$getQueryFieldI = getQueryFieldIdFromResultFieldId(prefix.field, props.queryEngineConfig),
+          queryFieldId = _Field$getQueryFieldI.fieldId,
+          func = _Field$getQueryFieldI["function"];
+        var dataSetField = findField(props.dataSet, queryFieldId);
+        var title = "" + dataSetField.publicName + (func != 'none' ? " (" + props.queryEngineConfig.supportedAggregates[func].publicName + ")" : '');
+        return {
+          title: title,
+          subtext: prefix.prefix,
+          id: "prefix-" + index
+        };
+      }),
+      newItemBtn: {
+        callToAction: textOverride('add_prefix', 'Add Prefix'),
+        onClick: function onClick() {
+          return handleOpen();
+        }
+      },
+      onDeleteItem: function onDeleteItem(index) {
+        var _props$attributes$pre3;
+        var newPrefixes = [].concat((_props$attributes$pre3 = props.attributes.prefixes) != null ? _props$attributes$pre3 : []);
+        newPrefixes.splice(index, 1);
+        props.setAttributes({
+          prefixes: newPrefixes
+        });
+      }
+    })
+  });
+};
+
+var ProgressTypeSection = function ProgressTypeSection(props) {
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride;
+  return jsx(Section, {
+    title: textOverride('type', 'Type'),
+    children: jsxs(Section.Grid, {
+      children: [props.attributes.goals.length === 0 && jsx(Alert, {
+        type: "info",
+        title: textOverride('progress.goals_need to be set', 'Goals need to be set')
+      }), jsx(OpacityOverlay, {
+        enabled: props.attributes.goals.length === 0,
+        children: jsx(FormatSelectInput, {
+          options: [{
+            value: ProgressType.Linear,
+            label: textOverride('linear', 'Linear')
+          }, {
+            value: ProgressType.Circular,
+            label: textOverride('circular', 'Circular')
+          }],
+          currentValue: defaultProgressType(props.attributes.progressType),
+          onSelect: function onSelect(progressType) {
+            var newProgressType = props.attributes.progressType.map(function (obj) {
+              return _extends({}, obj, {
+                value: progressType
+              });
+            });
+            props.setAttributes({
+              progressType: newProgressType
+            });
+          },
+          label: textOverride('type', 'Type'),
+          labelHidden: true
+        })
+      })]
+    })
+  });
+};
+
+var RichTextFormatSection = function RichTextFormatSection(props) {
+  var _props$section;
+  return jsx(Section, {
+    title: props == null ? void 0 : props.section.title,
+    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
+    children: jsx(RichTextMenu, {})
+  });
+};
+
 var StatsLabelsSection = function StatsLabelsSection(props) {
   var _props$section, _props$section2;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
@@ -63138,202 +63421,6 @@ var StatsLabelsSection = function StatsLabelsSection(props) {
   });
 };
 
-var GoalLineRules = function GoalLineRules(props) {
-  var _props$goalLines;
-  var _useDashboardBehaviou = useDashboardBehaviourContext(),
-    mode = _useDashboardBehaviou.mode,
-    textOverride = _useDashboardBehaviou.textOverride,
-    variables = _useDashboardBehaviou.variables;
-  var _useDashboardContext = useDashboardContext(),
-    dispatch = _useDashboardContext.dispatch;
-  var closeModal = function closeModal() {
-    dispatch({
-      type: 'setActiveModal',
-      payload: {
-        modal: ModalType.GoalLines,
-        attributes: undefined
-      }
-    });
-  };
-  var handleModalDispatch = function handleModalDispatch(existingRule) {
-    dispatch({
-      type: 'setActiveModal',
-      payload: {
-        modal: ModalType.GoalLines,
-        attributes: {
-          show: true,
-          onClose: function onClose() {
-            return closeModal();
-          },
-          onSave: function onSave(newRule) {
-            var newGoalLineArray = updateAttributes(existingRule != null ? existingRule : true, props.goalLines, newRule);
-            props.onSetGoalLineRules(newGoalLineArray);
-            closeModal();
-          },
-          goalLine: existingRule != null ? existingRule : undefined
-        }
-      }
-    });
-  };
-  return jsx(Fragment$1, {
-    children: jsx(ListView, {
-      mode: mode,
-      onOrderChange: function onOrderChange(index, toIndex) {
-        var newFormattingRules = reOrderItems([].concat(props.goalLines), index, toIndex);
-        props.onSetGoalLineRules(newFormattingRules);
-      },
-      purpose: "goal-lines",
-      items: ((_props$goalLines = props.goalLines) != null ? _props$goalLines : []).map(function (rule, index) {
-        var hasValidVariable = validate(rule.value, variables == null ? void 0 : variables.variables);
-        return {
-          title: jsxs(Flex, {
-            alignItems: "center",
-            gap: "0.25rem",
-            children: [jsx(Color.Swatch, {
-              color: rule.color
-            }), jsx("span", {
-              dangerouslySetInnerHTML: {
-                __html: textOverride('goal_line_configuration', 'Set to <strong>[[ruleValue]]</strong>', {
-                  ruleValue: rule.value
-                })
-              }
-            }), !hasValidVariable && jsx("div", {
-              "aria-label": textOverride('goal_line.variable_not_available', 'This variable is not available.'),
-              children: jsx(Tooltip, {
-                tooltipContent: function tooltipContent() {
-                  return jsx(Fragment, {
-                    children: textOverride('goal_line.variable_not_available', 'This variable is not available.')
-                  });
-                },
-                children: jsx(ErrorIcon, {})
-              })
-            })]
-          }),
-          onClick: function onClick() {
-            return handleModalDispatch(rule);
-          },
-          id: "goal-line-" + index
-        };
-      }),
-      newItemBtn: {
-        callToAction: textOverride('add_goal_line', 'Add Goal Line'),
-        onClick: function onClick() {
-          return handleModalDispatch();
-        }
-      },
-      onDeleteItem: function onDeleteItem(index) {
-        var _props$goalLines2;
-        var newRules = [].concat((_props$goalLines2 = props.goalLines) != null ? _props$goalLines2 : []);
-        newRules.splice(index, 1);
-        props.onSetGoalLineRules(newRules);
-      }
-    })
-  });
-};
-
-var GoalLineSection = function GoalLineSection(props) {
-  var _props$section;
-  return jsx(Section, {
-    title: props == null ? void 0 : props.section.title,
-    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
-    children: jsx(GoalLineRules, {
-      onSetGoalLineRules: function onSetGoalLineRules(goalLines) {
-        return props.setAttributes({
-          goalLines: goalLines
-        });
-      },
-      goalLines: props.attributes.goalLines
-    })
-  });
-};
-
-var ProgressTypeSection = function ProgressTypeSection(props) {
-  var _useDashboardBehaviou = useDashboardBehaviourContext(),
-    textOverride = _useDashboardBehaviou.textOverride;
-  return jsx(Section, {
-    title: textOverride('type', 'Type'),
-    children: jsxs(Section.Grid, {
-      children: [props.attributes.goals.length === 0 && jsx(Alert, {
-        type: "info",
-        title: textOverride('progress.goals_need to be set', 'Goals need to be set')
-      }), jsx(OpacityOverlay, {
-        enabled: props.attributes.goals.length === 0,
-        children: jsx(FormatSelectInput, {
-          options: [{
-            value: ProgressType.Linear,
-            label: textOverride('linear', 'Linear')
-          }, {
-            value: ProgressType.Circular,
-            label: textOverride('circular', 'Circular')
-          }],
-          currentValue: defaultProgressType(props.attributes.progressType),
-          onSelect: function onSelect(progressType) {
-            var newProgressType = props.attributes.progressType.map(function (obj) {
-              return _extends({}, obj, {
-                value: progressType
-              });
-            });
-            props.setAttributes({
-              progressType: newProgressType
-            });
-          },
-          label: textOverride('type', 'Type'),
-          labelHidden: true
-        })
-      })]
-    })
-  });
-};
-
-var HeadlineSection = function HeadlineSection(props) {
-  var _props$section, _props$attributes$hea, _props$attributes$hea2;
-  var _useDashboardBehaviou = useDashboardBehaviourContext(),
-    textOverride = _useDashboardBehaviou.textOverride;
-  if (props.dataSet.preAggregated) return null;
-  if (!canHaveHeadline(props.attributes.order, props.attributes.timeDimension)) return null;
-  var options = function () {
-    var builtOptions = [{
-      label: textOverride('none', 'None'),
-      value: null
-    }, {
-      label: textOverride('current', 'Current'),
-      value: 'current'
-    }];
-    return builtOptions;
-  }();
-  return jsx(Section, {
-    title: props == null ? void 0 : props.section.title,
-    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
-    children: jsx(Select$2, {
-      id: "headline-options",
-      label: textOverride('options', 'Options'),
-      labelHidden: true,
-      onChange: function onChange(value) {
-        props.setAttributes({
-          headline: {
-            func: value
-          }
-        });
-      },
-      options: options,
-      selected: (_props$attributes$hea = (_props$attributes$hea2 = props.attributes.headline) == null ? void 0 : _props$attributes$hea2.func) != null ? _props$attributes$hea : null,
-      textOverride: textOverride,
-      onClick: function onClick() {
-        safeScrollBy('bottom', 'editor-panel');
-      }
-    })
-  });
-};
-
-var RichTextFormatSection = function RichTextFormatSection(props) {
-  var _props$section;
-  return jsx(Section, {
-    title: props == null ? void 0 : props.section.title,
-    tooltip: props == null || (_props$section = props.section) == null ? void 0 : _props$section.description,
-    children: jsx(RichTextMenu, {})
-  });
-};
-
 var WaterfallColorsSection = function WaterfallColorsSection(props) {
   var _props$section;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),