@vizzly/dashboard 0.15.0-dev-6114a3b52b10e59a48578b0bad33d5be5e0d850d → 0.15.0-dev-825e222034d95127ba57aec3c08d7617ffa39237

package/dist/dashboard.esm.js

@@ -7224,7 +7224,10 @@ var attributesSchema$a = function attributesSchema(config) {
       subsetDimension: Joi.string().required().description('The ID of the field in the data set to drill down by.')
     })).description('Drilldown configuration for a pivot table.'),
     summarizeKPIs: Joi["boolean"]()["default"](false).description('Enable/disable KPI summarisation above column headers.'),
-    visualFormatColumns: Joi.array().items(Joi.string().min(1))["default"]([]).sparse(false).description('Array of column names to display as horizontal bars.'),
+    visualFormatColumns: Joi.array().items(Joi.object({
+      field: Joi.string(),
+      "function": Joi.string()
+    }))["default"]([]).description('Array of metrics to display as horizontal bars.'),
     results: Joi.array().items(Joi.object({
       content: Joi.array().required(),
       fields: Joi.array().items(Joi.object({
@@ -7243,17 +7246,27 @@ var attributesSchema$a = function attributesSchema(config) {
 
 var setAttributes$a = (function (config) {
   return function (dataTable, partial) {
-    var _partial$dimension;
+    var _partial$measure;
     var newAttributes = setAttributes(dataTable, partial, attributesSchema$a(config));
-    var numOfColumnsInDataTable = dataTable.dimension.filter(function (d) {
-      return d.pivot === 'y';
-    }).length;
-    var numOfColumnsInPartial = (_partial$dimension = partial.dimension) == null ? void 0 : _partial$dimension.filter(function (d) {
-      return d.pivot === 'y';
-    }).length;
-    var dimensionColumnsHasChanged = numOfColumnsInPartial === undefined ? false : numOfColumnsInDataTable !== numOfColumnsInPartial;
-    var shouldRemoveVisualFormatColumns = dimensionColumnsHasChanged && !partial.visualFormatColumns;
-    if (shouldRemoveVisualFormatColumns) newAttributes.visualFormatColumns = [];
+    var numOfMeasuresInDataTable = dataTable.measure.length;
+    var numOfMeasuresInPartial = (_partial$measure = partial.measure) == null ? void 0 : _partial$measure.length;
+    var hasRemovedMetrics = numOfMeasuresInPartial === undefined ? false : numOfMeasuresInDataTable > numOfMeasuresInPartial;
+    if (hasRemovedMetrics) {
+      var removedMetrics = dataTable.measure.filter(function (metric) {
+        var _partial$measure2;
+        return !((_partial$measure2 = partial.measure) != null && _partial$measure2.some(function (partialMetric) {
+          return partialMetric.field === metric.field && partialMetric["function"] === metric["function"];
+        }));
+      });
+      newAttributes.visualFormatColumns = (dataTable.visualFormatColumns || []).filter(function (column) {
+        var isColumnUsingRemovedMetric = removedMetrics.some(function (removedMetric) {
+          var fieldId = column.field;
+          var aggregateFunction = column["function"];
+          return removedMetric.field === fieldId && removedMetric["function"] === aggregateFunction;
+        });
+        return !isColumnUsingRemovedMetric;
+      });
+    }
     newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
     return newAttributes;
   };
@@ -7374,6 +7387,13 @@ var CONSTANTS$a = {
   }
 };
 
+function filterOutOldVisualFormatContract(visualFormat) {
+  var withoutOldContract = visualFormat.filter(function (measure) {
+    return typeof measure !== 'string';
+  });
+  return withoutOldContract;
+}
+
 // Get the dimensions for a particular pivot.
 var dimensionsForPivot = function dimensionsForPivot(dimension, pivot) {
   return dimension.filter(function (d) {
@@ -7427,7 +7447,7 @@ var DataTable = function DataTable(config) {
         tags: (_dumped$tags = dumped.tags) != null ? _dumped$tags : [],
         hiddenFields: (_dumped$hiddenFields = dumped.hiddenFields) != null ? _dumped$hiddenFields : [],
         summarizeKPIs: (_dumped$summarizeKPIs = dumped.summarizeKPIs) != null ? _dumped$summarizeKPIs : false,
-        visualFormatColumns: (_dumped$visualFormatC = dumped.visualFormatColumns) != null ? _dumped$visualFormatC : []
+        visualFormatColumns: filterOutOldVisualFormatContract((_dumped$visualFormatC = dumped.visualFormatColumns) != null ? _dumped$visualFormatC : [])
       };
     },
     setAttributes: setAttributes$a(config),
@@ -54216,11 +54236,13 @@ var calculatePercentage = function calculatePercentage(value, max) {
 var VisualFormatCell = function VisualFormatCell(_ref) {
   var value = _ref.value,
     displayValue = _ref.displayValue,
-    columnName = _ref.columnName,
+    column = _ref.column,
     visualFormatColumns = _ref.visualFormatColumns,
     columnValues = _ref.columnValues,
     conditionalFormattingColor = _ref.conditionalFormattingColor;
-  var shouldShowHorizontalBar = visualFormatColumns.includes(columnName);
+  var shouldShowHorizontalBar = visualFormatColumns.some(function (vf) {
+    return vf.field === column.fieldId && vf["function"] === column["function"];
+  });
   var numericValue = Number(value);
   var isNumeric = !isNaN(numericValue);
   if (!shouldShowHorizontalBar && !isNumeric) {
@@ -54231,7 +54253,7 @@ var VisualFormatCell = function VisualFormatCell(_ref) {
   if (isNumeric) {
     var actualMax = Math.max.apply(Math, columnValues);
     var percentage = calculatePercentage(numericValue, actualMax);
-    var barColor = conditionalFormattingColor || (shouldShowHorizontalBar ? '#2196f3' : '#4caf50');
+    var barColor = conditionalFormattingColor != null ? conditionalFormattingColor : '#4caf50';
     return jsxs("div", {
       style: {
         display: 'flex',
@@ -54265,20 +54287,20 @@ var VisualFormatCell = function VisualFormatCell(_ref) {
           } : {
             name: "1qyjf6m-VisualFormatCell",
             styles: "cursor:pointer;transition:width 0.3s ease;label:VisualFormatCell;",
-            map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZpc3VhbEZvcm1hdENlbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZEeUIiLCJmaWxlIjoiVmlzdWFsRm9ybWF0Q2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgVGFibGVDb250ZW50IH0gZnJvbSAnc2hhcmVkLWxvZ2ljL3NyYy9EYXRhVGFibGUvdHlwZXMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJztcblxuaW50ZXJmYWNlIFZpc3VhbEZvcm1hdENlbGxQcm9wcyB7XG4gIHZhbHVlOiBUYWJsZUNvbnRlbnRbJ3ZhbHVlJ107XG4gIGRpc3BsYXlWYWx1ZTogVGFibGVDb250ZW50WydkaXNwbGF5VmFsdWUnXTtcbiAgY29sdW1uTmFtZTogc3RyaW5nO1xuICB2aXN1YWxGb3JtYXRDb2x1bW5zOiBzdHJpbmdbXTtcbiAgY29sdW1uVmFsdWVzOiBudW1iZXJbXTtcbiAgY29uZGl0aW9uYWxGb3JtYXR0aW5nQ29sb3I/OiBzdHJpbmc7XG59XG5cbmNvbnN0IGNhbGN1bGF0ZVBlcmNlbnRhZ2UgPSAodmFsdWU6IG51bWJlciwgbWF4OiBudW1iZXIpOiBudW1iZXIgPT4ge1xuICBpZiAobWF4ID09PSAwKSByZXR1cm4gMDtcbiAgaWYgKHZhbHVlIDwgMCkgcmV0dXJuIDA7XG4gIHJldHVybiAodmFsdWUgLyBtYXgpICogMTAwO1xufTtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbEZvcm1hdENlbGw6IFJlYWN0LkZDPFZpc3VhbEZvcm1hdENlbGxQcm9wcz4gPSAoe1xuICB2YWx1ZSxcbiAgZGlzcGxheVZhbHVlLFxuICBjb2x1bW5OYW1lLFxuICB2aXN1YWxGb3JtYXRDb2x1bW5zLFxuICBjb2x1bW5WYWx1ZXMsXG4gIGNvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbG9yLFxufSkgPT4ge1xuICBjb25zdCBzaG91bGRTaG93SG9yaXpvbnRhbEJhciA9IHZpc3VhbEZvcm1hdENvbHVtbnMuaW5jbHVkZXMoY29sdW1uTmFtZSk7XG5cbiAgY29uc3QgbnVtZXJpY1ZhbHVlID0gTnVtYmVyKHZhbHVlKTtcbiAgY29uc3QgaXNOdW1lcmljID0gIWlzTmFOKG51bWVyaWNWYWx1ZSk7XG5cbiAgaWYgKCFzaG91bGRTaG93SG9yaXpvbnRhbEJhciAmJiAhaXNOdW1lcmljKSB7XG4gICAgcmV0dXJuIDxzcGFuPntkaXNwbGF5VmFsdWUgfHwgdmFsdWV9PC9zcGFuPjtcbiAgfVxuXG4gIGlmIChpc051bWVyaWMpIHtcbiAgICBjb25zdCBhY3R1YWxNYXggPSBNYXRoLm1heCguLi5jb2x1bW5WYWx1ZXMpO1xuICAgIGNvbnN0IHBlcmNlbnRhZ2UgPSBjYWxjdWxhdGVQZXJjZW50YWdlKG51bWVyaWNWYWx1ZSwgYWN0dWFsTWF4KTtcbiAgICBjb25zdCBiYXJDb2xvciA9IGNvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbG9yIHx8IChzaG91bGRTaG93SG9yaXpvbnRhbEJhciA/ICcjMjE5NmYzJyA6ICcjNGNhZjUwJyk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgICAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICAgICAgICBnYXA6ICcwLjVyZW0nLFxuICAgICAgICAgIHBhZGRpbmc6ICcycHgnLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICB7ISF2YWx1ZSAmJiAoXG4gICAgICAgICAgPHN2ZyB3aWR0aD1cIjcwJVwiIGhlaWdodD1cIjIwXCIgc3R5bGU9e3sgZmxleFNocmluazogMCB9fT5cbiAgICAgICAgICAgIDxyZWN0IHg9ezB9IHk9ezJ9IHdpZHRoPVwiMTAwJVwiIGhlaWdodD1cIjE2XCIgZmlsbD1cIiNlMGUwZTBcIiByeD17Mn0gLz5cbiAgICAgICAgICAgIDxyZWN0XG4gICAgICAgICAgICAgIGtleT17J2JhclJlY3RLZXknfVxuICAgICAgICAgICAgICB4PXswfVxuICAgICAgICAgICAgICB5PXsyfVxuICAgICAgICAgICAgICB3aWR0aD17YCR7TWF0aC5tYXgoNCwgKHBlcmNlbnRhZ2UgLyAxMDApICogMTAwKX0lYH1cbiAgICAgICAgICAgICAgaGVpZ2h0PVwiMTZcIlxuICAgICAgICAgICAgICBmaWxsPXtiYXJDb2xvcn1cbiAgICAgICAgICAgICAgcng9ezJ9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17Y3NzKHtcbiAgICAgICAgICAgICAgICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgICAgICAgICAgICAgICB0cmFuc2l0aW9uOiAnd2lkdGggMC4zcyBlYXNlJyxcbiAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvc3ZnPlxuICAgICAgICApfVxuICAgICAgICA8c3BhblxuICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICBmb250U2l6ZTogJzAuODEyNXJlbScsXG4gICAgICAgICAgICBtaW5XaWR0aDogJ2ZpdC1jb250ZW50JyxcbiAgICAgICAgICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgICAgICAgICAgZm9udFdlaWdodDogc2hvdWxkU2hvd0hvcml6b250YWxCYXIgPyAnYm9sZCcgOiAnbm9ybWFsJyxcbiAgICAgICAgICAgIG1hcmdpbkxlZnQ6ICdhdXRvJyxcbiAgICAgICAgICAgIGZsZXhTaHJpbms6IDAsXG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIHtkaXNwbGF5VmFsdWUgfHwgdmFsdWV9IHtzaG91bGRTaG93SG9yaXpvbnRhbEJhciA/ICfimIUnIDogJyd9XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gPHNwYW4+e2Rpc3BsYXlWYWx1ZSB8fCB2YWx1ZX08L3NwYW4+O1xufTtcbiJdfQ== */",
+            map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZpc3VhbEZvcm1hdENlbGwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlFeUIiLCJmaWxlIjoiVmlzdWFsRm9ybWF0Q2VsbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IFRhYmxlQ29udGVudCB9IGZyb20gJ3NoYXJlZC1sb2dpYy9zcmMvRGF0YVRhYmxlL3R5cGVzJztcbmltcG9ydCAqIGFzIERhdHVtS2V5IGZyb20gJ3NoYXJlZC1sb2dpYy9zcmMvRGF0dW1LZXknO1xuaW1wb3J0IHsgUXVlcnlBdHRyaWJ1dGVzIH0gZnJvbSAnc2hhcmVkLWxvZ2ljL3NyYy9RdWVyeUF0dHJpYnV0ZXMvdHlwZXMnO1xuXG5pbnRlcmZhY2UgVmlzdWFsRm9ybWF0Q2VsbFByb3BzIHtcbiAgdmFsdWU6IFRhYmxlQ29udGVudFsndmFsdWUnXTtcbiAgZGlzcGxheVZhbHVlOiBUYWJsZUNvbnRlbnRbJ2Rpc3BsYXlWYWx1ZSddO1xuICBjb2x1bW46IERhdHVtS2V5LlBhcnNlZERhdHVtS2V5O1xuICB2aXN1YWxGb3JtYXRDb2x1bW5zOiBRdWVyeUF0dHJpYnV0ZXMuTWVhc3VyZVtdO1xuICBjb2x1bW5WYWx1ZXM6IG51bWJlcltdO1xuICBjb25kaXRpb25hbEZvcm1hdHRpbmdDb2xvcj86IHN0cmluZztcbn1cblxuY29uc3QgY2FsY3VsYXRlUGVyY2VudGFnZSA9ICh2YWx1ZTogbnVtYmVyLCBtYXg6IG51bWJlcik6IG51bWJlciA9PiB7XG4gIGlmIChtYXggPT09IDApIHJldHVybiAwO1xuICBpZiAodmFsdWUgPCAwKSByZXR1cm4gMDtcbiAgcmV0dXJuICh2YWx1ZSAvIG1heCkgKiAxMDA7XG59O1xuXG5leHBvcnQgY29uc3QgVmlzdWFsRm9ybWF0Q2VsbDogUmVhY3QuRkM8VmlzdWFsRm9ybWF0Q2VsbFByb3BzPiA9ICh7XG4gIHZhbHVlLFxuICBkaXNwbGF5VmFsdWUsXG4gIGNvbHVtbixcbiAgdmlzdWFsRm9ybWF0Q29sdW1ucyxcbiAgY29sdW1uVmFsdWVzLFxuICBjb25kaXRpb25hbEZvcm1hdHRpbmdDb2xvcixcbn0pID0+IHtcbiAgY29uc3Qgc2hvdWxkU2hvd0hvcml6b250YWxCYXIgPSB2aXN1YWxGb3JtYXRDb2x1bW5zLnNvbWUoXG4gICAgKHZmKSA9PiB2Zi5maWVsZCA9PT0gY29sdW1uLmZpZWxkSWQgJiYgdmYuZnVuY3Rpb24gPT09IGNvbHVtbi5mdW5jdGlvbixcbiAgKTtcblxuICBjb25zdCBudW1lcmljVmFsdWUgPSBOdW1iZXIodmFsdWUpO1xuICBjb25zdCBpc051bWVyaWMgPSAhaXNOYU4obnVtZXJpY1ZhbHVlKTtcblxuICBpZiAoIXNob3VsZFNob3dIb3Jpem9udGFsQmFyICYmICFpc051bWVyaWMpIHtcbiAgICByZXR1cm4gPHNwYW4+e2Rpc3BsYXlWYWx1ZSB8fCB2YWx1ZX08L3NwYW4+O1xuICB9XG5cbiAgaWYgKGlzTnVtZXJpYykge1xuICAgIGNvbnN0IGFjdHVhbE1heCA9IE1hdGgubWF4KC4uLmNvbHVtblZhbHVlcyk7XG4gICAgY29uc3QgcGVyY2VudGFnZSA9IGNhbGN1bGF0ZVBlcmNlbnRhZ2UobnVtZXJpY1ZhbHVlLCBhY3R1YWxNYXgpO1xuICAgIGNvbnN0IGJhckNvbG9yID0gY29uZGl0aW9uYWxGb3JtYXR0aW5nQ29sb3IgPz8gJyM0Y2FmNTAnO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXZcbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgICAgICAgZ2FwOiAnMC41cmVtJyxcbiAgICAgICAgICBwYWRkaW5nOiAnMnB4JyxcbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgeyEhdmFsdWUgJiYgKFxuICAgICAgICAgIDxzdmcgd2lkdGg9XCI3MCVcIiBoZWlnaHQ9XCIyMFwiIHN0eWxlPXt7IGZsZXhTaHJpbms6IDAgfX0+XG4gICAgICAgICAgICA8cmVjdCB4PXswfSB5PXsyfSB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCIxNlwiIGZpbGw9XCIjZTBlMGUwXCIgcng9ezJ9IC8+XG4gICAgICAgICAgICA8cmVjdFxuICAgICAgICAgICAgICBrZXk9eydiYXJSZWN0S2V5J31cbiAgICAgICAgICAgICAgeD17MH1cbiAgICAgICAgICAgICAgeT17Mn1cbiAgICAgICAgICAgICAgd2lkdGg9e2Ake01hdGgubWF4KDQsIChwZXJjZW50YWdlIC8gMTAwKSAqIDEwMCl9JWB9XG4gICAgICAgICAgICAgIGhlaWdodD1cIjE2XCJcbiAgICAgICAgICAgICAgZmlsbD17YmFyQ29sb3J9XG4gICAgICAgICAgICAgIHJ4PXsyfVxuICAgICAgICAgICAgICBjbGFzc05hbWU9e2Nzcyh7XG4gICAgICAgICAgICAgICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogJ3dpZHRoIDAuM3MgZWFzZScsXG4gICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgKX1cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgZm9udFNpemU6ICcwLjgxMjVyZW0nLFxuICAgICAgICAgICAgbWluV2lkdGg6ICdmaXQtY29udGVudCcsXG4gICAgICAgICAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6ICdub3JtYWwnLFxuICAgICAgICAgICAgbWFyZ2luTGVmdDogJ2F1dG8nLFxuICAgICAgICAgICAgZmxleFNocmluazogMCxcbiAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAge2Rpc3BsYXlWYWx1ZSA/PyB2YWx1ZX1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiA8c3Bhbj57ZGlzcGxheVZhbHVlIHx8IHZhbHVlfTwvc3Bhbj47XG59O1xuIl19 */",
             toString: _EMOTION_STRINGIFIED_CSS_ERROR__$b
           })
         }, 'barRectKey')]
-      }), jsxs("span", {
+      }), jsx("span", {
         style: {
           fontSize: '0.8125rem',
           minWidth: 'fit-content',
           whiteSpace: 'nowrap',
-          fontWeight: shouldShowHorizontalBar ? 'bold' : 'normal',
+          fontWeight: 'normal',
           marginLeft: 'auto',
           flexShrink: 0
         },
-        children: [displayValue || value, " ", shouldShowHorizontalBar ? '★' : '']
+        children: displayValue != null ? displayValue : value
       })]
     });
   }
@@ -54329,18 +54351,11 @@ var DataTableTR = function DataTableTR(props) {
       var component = props.renderTableCell(rowIndex, cellIndex, cell.value, field.datumKey);
       var shouldApplyVisualFormat = false;
       if (props.visualFormatColumns && field.dataType === 'number') {
-        var groupedValues = props.visualFormatColumns.map(function (column) {
-          return {
-            originalValue: column,
-            splitValues: column.split(',').map(function (val) {
-              return val.trim();
-            })
-          };
-        });
-        shouldApplyVisualFormat = groupedValues.some(function (group) {
-          return group.splitValues.every(function (value) {
-            return field.datumKey && field.datumKey.includes(value) || field.id && field.id.includes(value);
-          });
+        shouldApplyVisualFormat = props.visualFormatColumns.some(function (group) {
+          var isSameField = parse(field.datumKey).fieldId === group.field;
+          var isCustomMetric = group["function"] === 'none';
+          var isSameAggregateFunction = parse(field.datumKey)["function"] === group["function"];
+          return isSameField && (isCustomMetric || isSameAggregateFunction);
         });
       }
       var columnWidth = buildColumnWidth(field.datumKey, props == null ? void 0 : props.sizing, props == null ? void 0 : props.defaultColumnWidth, props == null ? void 0 : props.alternativeColumnSizing);
@@ -54362,7 +54377,7 @@ var DataTableTR = function DataTableTR(props) {
         cellContent = jsx(VisualFormatCell, {
           value: cell.value,
           displayValue: cell.displayValue,
-          columnName: field.datumKey || field.id,
+          column: parse(field.datumKey),
           visualFormatColumns: props.visualFormatColumns || [],
           columnValues: columnValues,
           conditionalFormattingColor: conditionalFormattingColor
@@ -55098,7 +55113,7 @@ var DataTableView = function DataTableView(props) {
                 children: groupingHeading.content
               }, groupingHeading + "_" + headerIndex);
             })
-          }), props.summarizeKPIs && props.dimension.length > 0 && jsx(KPISummaryHeader, {
+          }), props.summarizeKPIs && dimensionXFields.length > 0 && jsx(KPISummaryHeader, {
             tableRepresentation: tableRepresentation,
             numberFormat: props.numberFormat,
             numberFormatOptions: props.numberFormatOptions,
@@ -67485,55 +67500,17 @@ var WaterfallColorsSection = function WaterfallColorsSection(props) {
 };
 
 var VisualFormatSection = function VisualFormatSection(props) {
-  var _props$attributes$dim;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     textOverride = _useDashboardBehaviou.textOverride,
-    mode = _useDashboardBehaviou.mode;
-  var previousYDimensionsRef = useRef([]);
-  var editor = useEditor();
-  var dashboardBehaviour = useDashboardBehaviourContext();
-  var kpiSummaryQuery = _extends({}, props.attributes, {
-    dimension: ((_props$attributes$dim = props.attributes.dimension) == null ? void 0 : _props$attributes$dim.filter(function (dim) {
-      return dim.pivot === 'y';
-    })) || [],
-    measure: [],
-    limit: undefined,
-    offset: undefined
-  });
-  var _useQueryEffect = useQueryEffect(kpiSummaryQuery, (editor == null ? void 0 : editor.runQueriesCallback) || function () {
-      return Promise.resolve([]);
-    }, {
-      localFilters: (editor == null ? void 0 : editor.component.localFilters) || [],
-      globalFilters: []
-    }, props.dataSet, undefined, dashboardBehaviour.variables),
-    results = _useQueryEffect.results;
-  var yDimensionsChanged = function yDimensionsChanged() {
-    var _props$attributes$dim2;
-    var currentYDimensions = ((_props$attributes$dim2 = props.attributes.dimension) == null ? void 0 : _props$attributes$dim2.filter(function (dim) {
-      return dim.pivot === 'y';
-    })) || [];
-    var deepEqual = function deepEqual(a, b) {
-      if (a.length !== b.length) return false;
-      return a.every(function (item, index) {
-        var _b$index, _b$index2, _b$index3;
-        return item.field === ((_b$index = b[index]) == null ? void 0 : _b$index.field) && item["function"] === ((_b$index2 = b[index]) == null ? void 0 : _b$index2["function"]) && item.pivot === ((_b$index3 = b[index]) == null ? void 0 : _b$index3.pivot);
-      });
-    };
-    var hasChanged = deepEqual(currentYDimensions, previousYDimensionsRef.current);
-    if (hasChanged) previousYDimensionsRef.current = currentYDimensions;
-    return hasChanged;
-  };
-  useEffect(function () {
-    var _props$attributes$vis;
-    if (yDimensionsChanged() && (((_props$attributes$vis = props.attributes.visualFormatColumns) == null ? void 0 : _props$attributes$vis.length) || 0) > 0) {
-      props.setAttributes({
-        visualFormatColumns: []
-      });
-    }
-  }, [props.attributes.dimension]);
+    mode = _useDashboardBehaviou.mode,
+    queryEngineConfig = _useDashboardBehaviou.queryEngineConfig;
   var handleColumnAdd = function handleColumnAdd(field) {
-    var currentColumns = props.attributes.visualFormatColumns || [];
-    if (field && !currentColumns.includes(field)) {
+    var _props$attributes$vis;
+    var currentColumns = (_props$attributes$vis = props.attributes.visualFormatColumns) != null ? _props$attributes$vis : [];
+    var alreadyExists = currentColumns.some(function (col) {
+      return col.field === field.field && col["function"] === field["function"];
+    });
+    if (!alreadyExists) {
       var newColumns = [].concat(currentColumns, [field]);
       props.setAttributes({
         visualFormatColumns: newColumns
@@ -67553,18 +67530,26 @@ var VisualFormatSection = function VisualFormatSection(props) {
       visualFormatColumns: newColumns
     });
   };
-  var firstResult = results == null ? void 0 : results[0];
-  var uniqueFirstValues = (firstResult == null ? void 0 : firstResult.content) || [];
-  var availableFields = uniqueFirstValues.map(function (value) {
+  var availableFields = props.attributes.measure.map(function (measure) {
+    var _aggregateFunction$va;
+    var field = findField(props.dataSet, measure.field);
+    var options = supportedAggregateOptions(field, queryEngineConfig.supportedAggregates);
+    var aggregateFunction = options.find(function (opt) {
+      return opt.value === measure["function"];
+    });
+    var isCustomMetric = (aggregateFunction == null ? void 0 : aggregateFunction.label) === undefined;
     return {
-      title: value.join(', '),
-      icon: 'string',
-      value: value.join(', ')
+      title: isCustomMetric ? "" + field.publicName : field.publicName + " ( " + (aggregateFunction == null ? void 0 : aggregateFunction.label) + " )",
+      icon: 'number',
+      value: {
+        field: field.id,
+        "function": (_aggregateFunction$va = aggregateFunction == null ? void 0 : aggregateFunction.value) != null ? _aggregateFunction$va : 'none'
+      }
     };
   });
-  var selectedItems = (props.attributes.visualFormatColumns || []).map(function (columnId) {
+  var selectedItems = (props.attributes.visualFormatColumns || []).map(function (visualFormat) {
     var field = availableFields.find(function (f) {
-      return f.title === columnId;
+      return f.value.field === visualFormat.field;
     });
     return field || null;
   }).filter(function (item) {
@@ -67591,7 +67576,7 @@ var VisualFormatSection = function VisualFormatSection(props) {
         fontStyle: 'italic',
         margin: '1rem 0'
       },
-      children: textOverride('visual_format.no_columns', 'No numeric columns available')
+      children: textOverride('visual_format.no_columns', 'No metrics available')
     })]
   });
 };

package/dist/shared-logic/src/Component/types.d.ts

@@ -394,7 +394,7 @@ export declare namespace Component {
     export type DataTableAttributes = BaseAttributes & Omit<BaseQueryAttributes, 'timeDimension'> & TableAttributes & {
         type: 'dataTable';
         summarizeKPIs?: boolean;
-        visualFormatColumns?: string[];
+        visualFormatColumns?: QueryAttributes.Measure[];
         protectedFields?: ProtectedFields;
         /**
          * @deprecated

package/dist/shared-logic/src/DataTable/VisualFormat/upcast.d.ts

@@ -0,0 +1,2 @@
+import { QueryAttributes } from '../../QueryAttributes/types';
+export declare function filterOutOldVisualFormatContract(visualFormat: QueryAttributes.Measure[]): QueryAttributes.Measure[];

package/dist/shared-ui/src/base/ListView/ListView.d.ts

@@ -11,7 +11,7 @@ export declare type InitValue<T> = {
 };
 declare type NewItemProps<T> = {
     testId?: string;
-    onNew?: (selectedInitValue: any) => void;
+    onNew?: (newItem: any) => void;
     callToAction: string;
     hide?: boolean;
     initValues: InitValue<T>[];

package/dist/shared-ui/src/components/DataTable/DataTableRow.d.ts

@@ -33,7 +33,7 @@ export declare type DataTableRowProps = {
     cellStyles: React.CSSProperties;
     setShowMore: React.Dispatch<React.SetStateAction<string | null>>;
     queriesAreChanging?: boolean;
-    visualFormatColumns?: string[];
+    visualFormatColumns?: QueryAttributes.Measure[];
     rowSpan: (number | undefined)[];
 };
 export declare const DataTableRow: FunctionComponent<DataTableRowProps & {

package/dist/shared-ui/src/components/DataTable/DataTableTR.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode } from 'react';
-import { DataTableRowProps } from './DataTableRow';
 import { TableRepresentation } from '../../../../shared-logic/src/DataTable/types';
+import { DataTableRowProps } from './DataTableRow';
 export declare const DataTableTR: FunctionComponent<DataTableRowProps & {
     drilldownAction?: {
         onExpanded: (rowIndex?: number) => void;
@@ -10,6 +10,5 @@ export declare const DataTableTR: FunctionComponent<DataTableRowProps & {
     subsetTableRepresentation?: TableRepresentation;
     onViewClick: (rowIndex: number, cellIndex: number, value: string | number, datumKey: string) => void;
     renderTableCell: (rowIndex: number, cellIndex: number, value: string | number, datumKey: string) => ReactNode | string;
-    visualFormatColumns?: string[];
     rowSpan: (number | undefined)[];
 }>;

package/dist/shared-ui/src/components/DataTable/VisualFormatCell.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { TableContent } from '../../../../shared-logic/src/DataTable/types';
+import * as DatumKey from '../../../../shared-logic/src/DatumKey';
+import { QueryAttributes } from '../../../../shared-logic/src/QueryAttributes/types';
 interface VisualFormatCellProps {
     value: TableContent['value'];
     displayValue: TableContent['displayValue'];
-    columnName: string;
-    visualFormatColumns: string[];
+    column: DatumKey.ParsedDatumKey;
+    visualFormatColumns: QueryAttributes.Measure[];
     columnValues: number[];
     conditionalFormattingColor?: string;
 }

package/dist/shared-ui/src/library/StylePanel/VisualFormatSection.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
-import { VizzlyComponents } from '../../types';
 import { VisualFormatSection as VisualFormatSectionType } from '../../../../shared-logic/src/FormatPanelConfig/types';
+import { VizzlyComponents } from '../../types';
 declare type VisualFormatSectionProps = VizzlyComponents.ComponentOverrides.Props.SectionProps<VisualFormatSectionType> & VizzlyComponents.EditorSectionProps<any>;
 export declare const VisualFormatSection: FunctionComponent<VisualFormatSectionProps>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.15.0-dev-6114a3b52b10e59a48578b0bad33d5be5e0d850d",
+  "version": "0.15.0-dev-825e222034d95127ba57aec3c08d7617ffa39237",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",