@vizzly/dashboard 0.15.0-dev-22a3a4d82d007a71e3d303cc3550ce20bed7a1e9 → 0.15.0-dev-f6507ed8045dad10d9fb36c61aa24ece44161d7f

package/dist/dashboard.esm.js

@@ -5261,6 +5261,16 @@ var CONSTANTS$4 = {
       type: 'conditionalFormatting',
       title: 'Conditional Formatting',
       description: ''
+    },
+    visual_format: {
+      type: 'visualFormat',
+      title: 'Visual Format',
+      description: 'Configure how group columns are visually represented'
+    },
+    kpi_summarisation: {
+      type: 'kpiSummarisation',
+      title: '',
+      description: 'Show aggregate statistics above column headers'
     }
   }
 };
@@ -5370,7 +5380,7 @@ var BasicTable = function BasicTable(config) {
         subSection: [(_CONSTANTS$format_pan = CONSTANTS$4.format_panel.format) == null ? void 0 : _CONSTANTS$format_pan.subSectionDefinition.time]
       }), namespace(CONSTANTS$4, 'prefixes'), _extends({}, namespace(CONSTANTS$4, 'conditional_formatting'), {
         ruleType: 'backgroundColor'
-      })];
+      }), namespace(CONSTANTS$4, 'visual_format'), namespace(CONSTANTS$4, 'kpi_summarisation')];
     },
     supportedCustomFields: {
       percentages: false,
@@ -7098,13 +7108,38 @@ var attributesSchema$a = function attributesSchema(config) {
     hiddenFields: Joi.array().items(Joi.string()),
     tableDrilldown: Joi.array().items(Joi.object({
       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.')
+    })).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.'),
+    results: Joi.array().items(Joi.object({
+      content: Joi.array().required(),
+      fields: Joi.array().items(Joi.object({
+        id: Joi.string().required(),
+        publicName: Joi.string().required(),
+        dataType: Joi.string().required(),
+        hidden: Joi["boolean"](),
+        fieldId: Joi.string().required(),
+        "function": Joi.string().required(),
+        outputDataType: Joi.string().required()
+      }).unknown(true)).required(),
+      hasMoreResults: Joi.alternatives([Joi["boolean"](), Joi.valid(null)])
+    }).unknown(true)).description('Query results data structure containing fields and content.')
   }));
 };
 
 var setAttributes$a = (function (config) {
   return function (dataTable, partial) {
+    var _partial$dimension;
     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 = [];
     newAttributes = removeUnusedOrderFieldsFromTimeSeriesComponent(newAttributes);
     return newAttributes;
   };
@@ -7189,6 +7224,16 @@ var CONSTANTS$a = {
         }
       }
     },
+    kpi_summarisation: {
+      type: 'kpiSummarisation',
+      title: '',
+      description: 'Show aggregate statistics above each column.'
+    },
+    visual_format: {
+      type: 'visualFormat',
+      title: 'Visual Format',
+      description: 'Configure how the group column is displayed visually.'
+    },
     format: {
       type: 'format',
       title: 'Format',
@@ -7240,7 +7285,7 @@ var DataTable = function DataTable(config) {
       return hydrated;
     },
     load: function load(dumped) {
-      var _dumped$tags, _dumped$hiddenFields;
+      var _dumped$tags, _dumped$hiddenFields, _dumped$summarizeKPIs, _dumped$visualFormatC;
       return {
         type: dumped.type,
         measure: upcastMeasure(dumped.measure),
@@ -7266,7 +7311,9 @@ var DataTable = function DataTable(config) {
         sizing: dumped.sizing,
         tableDrilldown: upcastTableDrilldown(dumped.tableDrilldown),
         tags: (_dumped$tags = dumped.tags) != null ? _dumped$tags : [],
-        hiddenFields: (_dumped$hiddenFields = dumped.hiddenFields) != null ? _dumped$hiddenFields : []
+        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 : []
       };
     },
     setAttributes: setAttributes$a(config),
@@ -7296,7 +7343,9 @@ var DataTable = function DataTable(config) {
         sizing: {},
         tableDrilldown: [],
         tags: [],
-        hiddenFields: []
+        hiddenFields: [],
+        summarizeKPIs: false,
+        visualFormatColumns: []
       }, overrides);
     },
     schema: attributesSchema$a(config),
@@ -7360,12 +7409,8 @@ var DataTable = function DataTable(config) {
           return dimensionsForPivot(attrs.dimension, 'x');
         },
         testId: 'add-dimension'
-      }), _extends({}, namespace(CONSTANTS$a, 'drilldown'), {
-        options: {
-          maxOptions: 1,
-          property: 'tableDrilldown'
-        }
-      }), _extends({}, namespace(CONSTANTS$a, 'field_metrics'), {
+      }), // { ...namespace<'drilldown'>(CONSTANTS, 'drilldown'), options: { maxOptions: 1, property: 'tableDrilldown' } },
+      _extends({}, namespace(CONSTANTS$a, 'field_metrics'), {
         fieldFilterOptions: {
           forComponent: 'dataTable'
         },
@@ -7384,7 +7429,7 @@ var DataTable = function DataTable(config) {
     },
     formatPanelConfig: function formatPanelConfig() {
       var _CONSTANTS$format_pan;
-      return [headingConstant(CONSTANTS$a), _extends({}, namespace(CONSTANTS$a, 'format'), {
+      return [headingConstant(CONSTANTS$a), namespace(CONSTANTS$a, 'kpi_summarisation'), namespace(CONSTANTS$a, 'visual_format'), _extends({}, namespace(CONSTANTS$a, 'format'), {
         subSection: [(_CONSTANTS$format_pan = CONSTANTS$a.format_panel.format) == null ? void 0 : _CONSTANTS$format_pan.subSectionDefinition.time]
       }), namespace(CONSTANTS$a, 'prefixes'), _extends({}, namespace(CONSTANTS$a, 'conditional_formatting'), {
         ruleType: 'backgroundColor'
@@ -52166,7 +52211,9 @@ var defaultProps$7 = {
   numberFormat: {},
   sizing: {},
   tableDrilldown: [],
-  tags: []
+  tags: [],
+  summarizeKPIs: false,
+  visualFormatColumns: []
 };
 
 function hasPrevious(offset) {
@@ -52290,6 +52337,11 @@ var thGroupRow = function thGroupRow(themedStyles) {
         2: {
           background: themedStyles == null || (_themedStyles$th11 = themedStyles.th) == null || (_themedStyles$th11 = _themedStyles$th11.level) == null ? void 0 : _themedStyles$th11[2].background
         }
+      },
+      alignTop: {
+        "true": {
+          verticalAlign: 'top'
+        }
       }
     }
   }));
@@ -52690,7 +52742,8 @@ var TH = /*#__PURE__*/forwardRef(function (props, ref) {
       }));
     } else if (props.scope === 'row') {
       return tableStyles.thGroupRow(theme == null ? void 0 : theme.tables)(_extends({}, styleOptions, {
-        deadSpace: props != null && props.deadSpace ? 'true' : undefined
+        deadSpace: props != null && props.deadSpace ? 'true' : undefined,
+        alignTop: true
       }));
     } else {
       var _theme$tables2;
@@ -52716,6 +52769,7 @@ var TH = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-clickenabled": clickEnabled ? 'true' : 'false',
     onClick: props == null ? void 0 : props.onClick,
     onKeyDown: handleRowClick,
+    rowSpan: props.rowSpan,
     children: [(props == null ? void 0 : props.dragSettings) && jsx(TableColumnResizer, _extends({}, props == null ? void 0 : props.dragSettings)), jsx("div", {
       style: props.columnStyles,
       className: styles({
@@ -52866,8 +52920,8 @@ var TR = function TR(props) {
   return jsx("tr", {
     "data-themeapi": props.odd ? 'tables.body.odd' : 'tables.body.even',
     className: "" + tableStyles.tr(theme == null ? void 0 : theme.tables)({
-      odd: props.odd && 'true',
-      even: props.even && 'true'
+      odd: props.odd && props.hover,
+      even: props.even && props.hover
     }),
     "data-chipposition": "top.left",
     "aria-expanded": props.expanded === true ? 'true' : (props == null ? void 0 : props.expanded) === false ? 'false' : undefined,
@@ -53281,7 +53335,8 @@ var button$4 = /*#__PURE__*/buildStyleOverrides({
   height: '1.25rem',
   width: '1.25rem',
   '&:disabled': {
-    opacity: 0.4
+    opacity: 0.4,
+    cursor: 'default'
   }
 });
 var text$2 = /*#__PURE__*/buildStyleOverrides({
@@ -53317,8 +53372,8 @@ var Pagination = function Pagination(props) {
 
 var getNumberFormat = function getNumberFormat(id, exportNames) {
   if (exportNames[id]) return exportNames[id];
-  if (isDatumKey(id)) return exportNames[toFieldId(id)];
-  return undefined;
+  if (isDatumKey(id) && exportNames[toFieldId(id)]) return exportNames[toFieldId(id)];
+  return '_vizzly_compact';
 };
 
 /**
@@ -53431,34 +53486,6 @@ var findPrefix = function findPrefix(prefixes, resultField) {
   })) == null ? void 0 : _prefixes$find.prefix;
 };
 
-var consolidateTableHeadings = function consolidateTableHeadings(titles) {
-  var result = [];
-  var _loop = function _loop() {
-    var content = _step.value;
-    var existingCell = result.find(function (c) {
-      return c.content === content.formatted;
-    });
-    if (existingCell) {
-      existingCell.colSpan += 1;
-    } else {
-      result.push({
-        content: content.formatted,
-        colSpan: 1,
-        unformatted: content.unformatted
-      });
-    }
-  };
-  for (var _iterator = _createForOfIteratorHelperLoose(titles), _step; !(_step = _iterator()).done;) {
-    _loop();
-  }
-  return result;
-};
-function processValues(parsedDatumKey, formatter) {
-  return parsedDatumKey.dimensionValues.map(function (value, valueIndex) {
-    var fieldId = parsedDatumKey.dimensionKeys[valueIndex];
-    return formatter(value, fieldId);
-  }).join(', ');
-}
 var getPivotTableGroupTitles = function getPivotTableGroupTitles(result, dimension, tableRepresentationFields, dateTimeFormatOptions, supportedTimeTruncFunctions) {
   var show = some(dimension, function (d) {
     return d.pivot == 'y';
@@ -53509,6 +53536,34 @@ var formatYAxisGroupValue = function formatYAxisGroupValue(result, resultFieldId
     return "" + value;
   }
 };
+var consolidateTableHeadings = function consolidateTableHeadings(titles) {
+  var result = [];
+  var _loop = function _loop() {
+    var content = _step.value;
+    var existingCell = result.find(function (c) {
+      return c.content === content.formatted;
+    });
+    if (existingCell) {
+      existingCell.colSpan += 1;
+    } else {
+      result.push({
+        content: content.formatted,
+        colSpan: 1,
+        unformatted: content.unformatted
+      });
+    }
+  };
+  for (var _iterator = _createForOfIteratorHelperLoose(titles), _step; !(_step = _iterator()).done;) {
+    _loop();
+  }
+  return result;
+};
+function processValues(parsedDatumKey, formatter) {
+  return parsedDatumKey.dimensionValues.map(function (value, valueIndex) {
+    var fieldId = parsedDatumKey.dimensionKeys[valueIndex];
+    return formatter(value, fieldId);
+  }).join(', ');
+}
 
 var getExportName = function getExportName(id, exportNames) {
   if (exportNames[id]) return exportNames[id];
@@ -53745,6 +53800,86 @@ function getFormattedByRule(_ref) {
   return {};
 }
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__$b() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var calculatePercentage = function calculatePercentage(value, max) {
+  if (max === 0) return 0;
+  if (value < 0) return 0;
+  return value / max * 100;
+};
+var VisualFormatCell = function VisualFormatCell(_ref) {
+  var value = _ref.value,
+    displayValue = _ref.displayValue,
+    columnName = _ref.columnName,
+    visualFormatColumns = _ref.visualFormatColumns,
+    columnValues = _ref.columnValues,
+    conditionalFormattingColor = _ref.conditionalFormattingColor;
+  var shouldShowHorizontalBar = visualFormatColumns.includes(columnName);
+  var numericValue = Number(value);
+  var isNumeric = !isNaN(numericValue);
+  if (!shouldShowHorizontalBar && !isNumeric) {
+    return jsx("span", {
+      children: displayValue || value
+    });
+  }
+  if (isNumeric) {
+    var actualMax = Math.max.apply(Math, columnValues);
+    var percentage = calculatePercentage(numericValue, actualMax);
+    var barColor = conditionalFormattingColor || (shouldShowHorizontalBar ? '#2196f3' : '#4caf50');
+    return jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        padding: '2px'
+      },
+      children: [!!value && jsxs("svg", {
+        width: "70%",
+        height: "20",
+        style: {
+          flexShrink: 0
+        },
+        children: [jsx("rect", {
+          x: 0,
+          y: 2,
+          width: "100%",
+          height: "16",
+          fill: "#e0e0e0",
+          rx: 2
+        }), jsx("rect", {
+          x: 0,
+          y: 2,
+          width: Math.max(4, percentage / 100 * 100) + "%",
+          height: "16",
+          fill: barColor,
+          rx: 2,
+          className: /*#__PURE__*/css$1(process.env.NODE_ENV === "production" ? {
+            name: "1sb6tbp",
+            styles: "cursor:pointer;transition:width 0.3s ease"
+          } : {
+            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== */",
+            toString: _EMOTION_STRINGIFIED_CSS_ERROR__$b
+          })
+        }, 'barRectKey')]
+      }), jsxs("span", {
+        style: {
+          fontSize: '0.8125rem',
+          minWidth: 'fit-content',
+          whiteSpace: 'nowrap',
+          fontWeight: shouldShowHorizontalBar ? 'bold' : 'normal',
+          marginLeft: 'auto',
+          flexShrink: 0
+        },
+        children: [displayValue || value, " ", shouldShowHorizontalBar ? '★' : '']
+      })]
+    });
+  }
+  return jsx("span", {
+    children: displayValue || value
+  });
+};
+
 var DataTableTR = function DataTableTR(props) {
   var row = props.row,
     rowIndex = props.rowIndex,
@@ -53753,7 +53888,8 @@ var DataTableTR = function DataTableTR(props) {
     conditionalFormattingRules = props.conditionalFormattingRules,
     dataSet = props.dataSet,
     protectedFields = props.protectedFields,
-    drilldownAction = props.drilldownAction;
+    drilldownAction = props.drilldownAction,
+    rowSpan = props.rowSpan;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     queryEngineConfig = _useDashboardBehaviou.queryEngineConfig,
     textOverride = _useDashboardBehaviou.textOverride;
@@ -53765,8 +53901,8 @@ var DataTableTR = function DataTableTR(props) {
       if (tableRepresentation == null) return null;
       var field = tableRepresentation.fields[cellIndex];
       var canShowArrow = props.drilldown.length > 0 && cellIndex === 0;
-      var width = buildColumnWidth(field.datumKey, props == null ? void 0 : props.sizing, props == null ? void 0 : props.defaultColumnWidth, props == null ? void 0 : props.alternativeColumnSizing);
       var conditionalStyled;
+      var conditionalFormattingToApply;
       if (isDatumKey(field.datumKey)) {
         var datum = parse(field.datumKey);
         var dataPoint = {};
@@ -53778,18 +53914,61 @@ var DataTableTR = function DataTableTR(props) {
         datum.dimensionKeys.forEach(function (key, i) {
           dataPoint[key] = datum.dimensionValues[i];
         });
-        var conditionalFormattingToApply = applyConditionFormattingRules(dimension, conditionalFormattingRules, dataPoint, field.datumKey, dataSet);
+        conditionalFormattingToApply = applyConditionFormattingRules(dimension, conditionalFormattingRules, dataPoint, field.datumKey, dataSet);
         if (conditionalFormattingToApply) {
           conditionalStyled = getFormattedByRule(conditionalFormattingToApply);
         }
       }
       var component = props.renderTableCell(rowIndex, cellIndex, cell.value, field.datumKey);
-      if (findDimension(dimension, field.id, {
+      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);
+          });
+        });
+      }
+      var columnWidth = buildColumnWidth(field.datumKey, props == null ? void 0 : props.sizing, props == null ? void 0 : props.defaultColumnWidth, props == null ? void 0 : props.alternativeColumnSizing);
+      var width = shouldApplyVisualFormat ? columnWidth * 1.5 : columnWidth;
+      var columnValues = shouldApplyVisualFormat ? tableRepresentation.content.map(function (row) {
+        var _row$cellIndex;
+        return Number((_row$cellIndex = row[cellIndex]) == null ? void 0 : _row$cellIndex.value);
+      }).filter(function (val) {
+        return !isNaN(val);
+      }) : [];
+      var cellContent = component ? jsx(CustomCell, {
+        component: component
+      }) : cell.displayValue !== 'undefined' ? cell.displayValue : '';
+      if (shouldApplyVisualFormat) {
+        var conditionalFormattingColor;
+        if (conditionalFormattingToApply && conditionalFormattingToApply.type === 'backgroundColor') {
+          conditionalFormattingColor = conditionalFormattingToApply.value;
+        }
+        cellContent = jsx(VisualFormatCell, {
+          value: cell.value,
+          displayValue: cell.displayValue,
+          columnName: field.datumKey || field.id,
+          visualFormatColumns: props.visualFormatColumns || [],
+          columnValues: columnValues,
+          conditionalFormattingColor: conditionalFormattingColor
+        });
+      }
+      var isDimensionColumn = findDimension(dimension, field.id, {
         supportedAggregates: queryEngineConfig.supportedAggregates,
         supportedTimeTruncFunctions: queryEngineConfig.supportedTimeTruncFunctions,
         supportedTransformationFunctions: undefined
-      })) {
+      });
+      if (isDimensionColumn) {
         var _props$level;
+        if (rowSpan[cellIndex] === undefined) return null;
         return jsx(Table.TH, {
           first: cellIndex === 0,
           last: cellIndex + 1 === row.length,
@@ -53807,9 +53986,11 @@ var DataTableTR = function DataTableTR(props) {
             label: "" + cell.displayValue
           } : undefined,
           level: (_props$level = props == null ? void 0 : props.level) != null ? _props$level : undefined,
-          children: component ? jsx(CustomCell, {
-            component: component
-          }) : cell.displayValue !== 'undefined' ? cell.displayValue : ''
+          rowSpan: rowSpan[cellIndex],
+          cellStyles: {
+            borderBottom: '1px solid #c3c6ca'
+          },
+          children: cellContent
         }, "table_row_" + rowIndex + "_cell_" + cellIndex);
       }
       return jsx(Table.TD, {
@@ -53821,7 +54002,7 @@ var DataTableTR = function DataTableTR(props) {
         align: field.dataType == 'number' ? 'alignRight' : 'alignLeft',
         clickEnabled: hasProtectedFields(protectedFields),
         simple: generatingPDF,
-        style: _extends({}, props == null ? void 0 : props.cellStyles, conditionalStyled ? conditionalStyled : {}, {
+        style: _extends({}, props == null ? void 0 : props.cellStyles, conditionalStyled && !shouldApplyVisualFormat ? conditionalStyled : {}, {
           width: width,
           maxWidth: width,
           minWidth: width
@@ -53830,10 +54011,8 @@ var DataTableTR = function DataTableTR(props) {
           return props == null ? void 0 : props.setShowMore(cell.displayValue);
         },
         showMoreLabel: textOverride('table_settings.show_more', 'Show more'),
-        customRender: !!component,
-        children: component ? jsx(CustomCell, {
-          component: component
-        }) : cell.displayValue !== undefined ? cell.displayValue : ''
+        customRender: !!component || shouldApplyVisualFormat,
+        children: cellContent
       }, "table_row_" + rowIndex + "_cell_" + cellIndex + "_" + JSON.stringify(cell.displayValue) + "}");
     })
   });
@@ -53907,6 +54086,7 @@ var DataTableRow = function DataTableRow(props) {
       even: rowIndex % 2 === 0,
       level: drilldown ? 1 : undefined,
       expanded: drilldown ? expanded : undefined,
+      hover: false,
       children: jsx(DataTableTR, _extends({}, props, {
         drilldownAction: hasDrilldown ? {
           onExpanded: handleOnExpand,
@@ -54241,6 +54421,115 @@ var buildConditionalFormattingBoundaries = function buildConditionalFormattingBo
   return conditionalFormattingBoundaries;
 };
 
+var KPISummaryHeader = function KPISummaryHeader(_ref) {
+  var tableRepresentation = _ref.tableRepresentation,
+    KPIResults = _ref.KPIResults,
+    dimensionXFields = _ref.dimensionXFields;
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride;
+  var _useDashboardContext = useDashboardContext(),
+    generatingPDF = _useDashboardContext.generatingPDF;
+  var cellStyles = {
+    backgroundColor: '#f8f9fa',
+    fontWeight: 'bold',
+    padding: '8px',
+    fontSize: '0.8125rem',
+    borderBottom: '1px solid #c3c6ca',
+    borderRight: '1px solid #c3c6ca'
+  };
+  var summaryDataFields = tableRepresentation.fields.slice(dimensionXFields.length);
+  var occurrencesMap = new Map();
+  var KPISummaryValues = summaryDataFields.map(function (field) {
+    var datumKey = parse(field.datumKey);
+    var value = KPIResults == null ? void 0 : KPIResults.content.find(function (result) {
+      return areAllStringsInArray(result.filter(function (item) {
+        return typeof item !== 'number';
+      }), datumKey.dimensionValues);
+    });
+    if (!value) return undefined;
+    var occurrenceKey = value.filter(function (item) {
+      return typeof item !== 'number';
+    }).join('|');
+    var offSet = (value.filter(function (item) {
+      return typeof item !== 'number';
+    }).length || 1) - 1;
+    if (occurrencesMap.has(occurrenceKey)) {
+      var occurrences = occurrencesMap.get(occurrenceKey) || 0;
+      occurrencesMap.set(occurrenceKey, occurrences + 1);
+      return value[offSet + occurrences + 1];
+    }
+    occurrencesMap.set(occurrenceKey, 1);
+    return value[offSet + 1];
+  });
+  return jsxs(Table.HeadTR, {
+    children: [jsx(Table.TH, {
+      cellStyles: cellStyles,
+      simple: generatingPDF,
+      colSpan: dimensionXFields.length,
+      children: textOverride('data_table.kpi_summary', 'KPI Summary')
+    }, "kpi-label"), summaryDataFields.map(function (field, fieldIndex) {
+      if (field.hidden) return null;
+      var KPIValue = KPISummaryValues ? KPISummaryValues[fieldIndex] : 0;
+      var isCustomMetric = field["function"] === 'none';
+      return jsx(Table.TH, {
+        cellStyles: cellStyles,
+        simple: generatingPDF,
+        children: jsxs("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: '0.8125rem',
+            gap: '3px'
+          },
+          children: [!isCustomMetric && jsxs(Fragment$1, {
+            children: [jsx("div", {
+              style: {
+                fontWeight: 'bold'
+              },
+              children: textOverride("aggregate." + field["function"], field["function"])
+            }), jsx("span", {
+              children: "\u2022"
+            })]
+          }), jsx("div", {
+            style: {
+              textTransform: 'uppercase'
+            },
+            children: formatKPIValue(KPIValue, field.dataType)
+          })]
+        })
+      }, "kpi-" + fieldIndex);
+    })]
+  });
+};
+var formatKPIValue = function formatKPIValue(value, dataType) {
+  if (value === undefined || isNaN(value)) {
+    return '-';
+  }
+  var Billion = 1000000000;
+  var Million = 1000000;
+  var Thousand = 1000;
+  if (dataType === 'number') {
+    if (Math.abs(value) >= Billion) {
+      return (value / Billion).toFixed(2) + 'B';
+    } else if (Math.abs(value) >= Million) {
+      return (value / Million).toFixed(2) + 'M';
+    } else if (Math.abs(value) >= 1000) {
+      return (value / Thousand).toFixed(2) + 'K';
+    } else {
+      return value.toLocaleString(undefined, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2
+      });
+    }
+  }
+  return value.toString();
+};
+function areAllStringsInArray(stringsToCheck, targetArray) {
+  return stringsToCheck.every(function (str) {
+    return targetArray.includes(str);
+  });
+}
+
 var DataTableView = function DataTableView(props) {
   var _props$library, _props$viewId, _props$result, _props$result2, _props$result3, _props$result4, _props$library2;
   var headerProps = {
@@ -54257,6 +54546,11 @@ var DataTableView = function DataTableView(props) {
     setPartialAttributes: props.setPartialAttributes
   };
   var sizing = props.sizing;
+  var _ref = props.pivotTablePagination || {},
+    _ref$paginationStartI = _ref.paginationStartIndex,
+    paginationStartIndex = _ref$paginationStartI === void 0 ? 0 : _ref$paginationStartI,
+    _ref$paginationEndInd = _ref.paginationEndIndex,
+    paginationEndIndex = _ref$paginationEndInd === void 0 ? 0 : _ref$paginationEndInd;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     labelFormat = _useDashboardBehaviou.labelFormat,
     textOverride = _useDashboardBehaviou.textOverride,
@@ -54267,8 +54561,6 @@ var DataTableView = function DataTableView(props) {
     tableRef = _useWidth[0],
     tableWidth = _useWidth[1];
   var defaultColumnWidth = buildDefaultColumnWidth(tableWidth, (((_props$result = props.result) == null ? void 0 : _props$result.fields) || []).length);
-
-  // const alternativeColumnSizing = useResizingColumn();
   var alternativeColumnSizing = {};
   var handleResizedColumn = function handleResizedColumn(options) {
     var _extends2;
@@ -54309,25 +54601,26 @@ var DataTableView = function DataTableView(props) {
       valueAlias: valueAlias
     });
   }, [props.measure, props.xMeasure, props.yMeasure, props.result, props.dateTimeFormat, props.numberFormat, props.prefixes, props.dateTimeFormatOptions, props.numberFormatOptions, props.supportedAggregates, props.supportedTimeTruncFunctions, props == null ? void 0 : props.dimension]);
-  var hidePaginations = ((_props$result2 = props.result) != null && _props$result2.content ? (_props$result3 = props.result) == null ? void 0 : _props$result3.content.length : 0) > (tableRepresentation ? tableRepresentation.content.length : 0);
+  var hidePaginations = props.pivotTablePagination ? props.pivotTablePagination.totalRows <= props.pivotTablePagination.pageSize : ((_props$result2 = props.result) != null && _props$result2.content ? (_props$result3 = props.result) == null ? void 0 : _props$result3.content.length : 0) > (tableRepresentation ? tableRepresentation.content.length : 0);
+  var isPivotTable = props.pivotTablePagination !== undefined;
   var TableFooter = useMemo(function () {
-    var _props$offset, _props$offset2, _props$limit;
-    return jsx(Fragment$1, {
-      children: props.result && !hidePaginations && jsx(Pagination, {
-        offset: props == null ? void 0 : props.offset,
-        limit: props == null ? void 0 : props.limit,
-        onNext: props == null ? void 0 : props.onNext,
-        onPrevious: props == null ? void 0 : props.onPrevious,
-        previousDisabled: !hasPrevious((_props$offset = props.offset) != null ? _props$offset : 0),
-        nextDisabled: !hasNext({
-          offset: (_props$offset2 = props.offset) != null ? _props$offset2 : 0,
-          limit: (_props$limit = props.limit) != null ? _props$limit : 0,
-          total: tableRepresentation ? tableRepresentation.content.length : 0
-        }),
-        textOverride: textOverride
-      })
+    var _props$offset, _props$limit, _props$offset2;
+    if (!props.result || hidePaginations || tableRepresentation === null) return null;
+    var isNextDisabled = isPivotTable ? paginationEndIndex >= tableRepresentation.content.length : !hasNext({
+      offset: (_props$offset = props.offset) != null ? _props$offset : 0,
+      limit: (_props$limit = props.limit) != null ? _props$limit : 0,
+      total: tableRepresentation ? tableRepresentation.content.length : 0
+    });
+    return jsx(Pagination, {
+      offset: props == null ? void 0 : props.offset,
+      limit: props == null ? void 0 : props.limit,
+      onNext: props == null ? void 0 : props.onNext,
+      onPrevious: props == null ? void 0 : props.onPrevious,
+      previousDisabled: !hasPrevious((_props$offset2 = props.offset) != null ? _props$offset2 : 0),
+      nextDisabled: isNextDisabled,
+      textOverride: textOverride
     });
-  }, [props.offset, props.limit, props.onPrevious, props.onNext, (_props$result4 = props.result) == null ? void 0 : _props$result4.content.length, hidePaginations]);
+  }, [props.offset, props.limit, props.onPrevious, props.onNext, (_props$result4 = props.result) == null ? void 0 : _props$result4.content.length, hidePaginations, tableRepresentation, isPivotTable, paginationEndIndex, textOverride]);
   var lastPivotColumnId = useMemo(function () {
     if (!tableRepresentation) return null;
     return getLastPivotColumn(tableRepresentation, props.dimension, props.supportedAggregates, props.supportedTimeTruncFunctions);
@@ -54361,6 +54654,13 @@ var DataTableView = function DataTableView(props) {
   var handleTableRender = function handleTableRender(rowIndex, cellIndex, value, fieldV2, additionalAttributes) {
     return buildTableCell(props, cellIndex, rowIndex, value, fieldV2, additionalAttributes);
   };
+  var dimensionXFields = props.dimension.filter(function (dim) {
+    return dim.pivot === 'x';
+  }).map(function (dim) {
+    return dim.field;
+  }) || [];
+  var tableBodyData = isPivotTable ? tableRepresentation.content.slice(paginationStartIndex, paginationEndIndex) : tableRepresentation.content;
+  var spanRowMatrix = createSpanRowMatrix(tableBodyData);
   return jsxs(ViewWrapper, {
     queriesAreChanging: props.queriesAreChanging,
     id: props.id,
@@ -54387,6 +54687,14 @@ var DataTableView = function DataTableView(props) {
                 children: groupingHeading.content
               }, groupingHeading + "_" + headerIndex);
             })
+          }), props.summarizeKPIs && jsx(KPISummaryHeader, {
+            tableRepresentation: tableRepresentation,
+            numberFormat: props.numberFormat,
+            numberFormatOptions: props.numberFormatOptions,
+            supportedAggregates: props.supportedAggregates,
+            supportedTimeTruncFunctions: props.supportedTimeTruncFunctions,
+            KPIResults: props.KPIResults,
+            dimensionXFields: dimensionXFields
           }), jsx(Table.HeadTR, {
             children: tableRepresentation.fields.map(function (field, headerIndex) {
               if (field.hidden) return null;
@@ -54433,7 +54741,7 @@ var DataTableView = function DataTableView(props) {
             })
           })]
         }), jsx(Table.Body, {
-          children: tableRepresentation.content.map(function (row, rowIndex) {
+          children: tableBodyData.map(function (row, rowIndex) {
             return jsx(DataTableRow, {
               protectedFields: props == null ? void 0 : props.protectedFields,
               dataSet: props == null ? void 0 : props.dataSet,
@@ -54448,10 +54756,12 @@ var DataTableView = function DataTableView(props) {
               handleOnChange: handleOnChange,
               handleTableCellRender: handleTableRender,
               cellStyles: cellStyles,
+              rowSpan: spanRowMatrix[rowIndex],
               setShowMore: setShowMore,
               drilldown: props.tableDrilldown,
               drilldownInputProps: props == null ? void 0 : props.drilldownInputProps,
-              queriesAreChanging: props.queriesAreChanging
+              queriesAreChanging: props.queriesAreChanging,
+              visualFormatColumns: props.visualFormatColumns
             }, rowIndex);
           })
         })]
@@ -54470,33 +54780,148 @@ var DataTableView$1 = (function (props) {
   return jsx(DataTableView, _extends({}, props));
 });
 
+/**
+ * Creates a matrix that tracks row span counts for each row in a table representation.
+ * Groups consecutive rows with identical pivot groups and calculates how many rows each group spans.
+ *
+ * @param tableRepresentationContent - The 2D array representing table content
+ * @returns A matrix where each cell contains the row span count for that position, or undefined if not a span start
+ */
+function createSpanRowMatrix(tableRepresentationContent) {
+  var spanRowMatrix = [];
+  var numRows = tableRepresentationContent.length;
+  if (numRows === 0) return spanRowMatrix;
+  var numCols = tableRepresentationContent[0].length;
+  for (var i = 0; i < numRows; i++) {
+    spanRowMatrix[i] = new Array(numCols).fill(undefined);
+  }
+  for (var col = 0; col < numCols; col++) {
+    var pivotRow = 0;
+    var spanCount = 0;
+    var pivotGroup = createPivotGroup(tableRepresentationContent[pivotRow], col);
+    for (var row = 0; row < numRows; row++) {
+      if (createPivotGroup(tableRepresentationContent[row], col) === pivotGroup) {
+        spanCount++;
+      } else {
+        spanRowMatrix[pivotRow][col] = spanCount;
+        spanCount = 1;
+        pivotRow = row;
+        pivotGroup = createPivotGroup(tableRepresentationContent[pivotRow], col);
+      }
+    }
+    spanRowMatrix[pivotRow][col] = spanCount;
+  }
+  return spanRowMatrix;
+}
+function createPivotGroup(row, col) {
+  var result = '';
+  for (var colIndex = 0; colIndex <= col; colIndex++) {
+    var _row$colIndex;
+    result += ((_row$colIndex = row[colIndex]) == null ? void 0 : _row$colIndex.displayValue) + ',';
+  }
+  return result;
+}
+
 var DataTable$2 = function DataTable(props) {
+  var _attributes$timeDimen, _attributes$timeDimen2;
   var _props$component = props.component,
     attributes = _props$component.attributes,
     localFilters = _props$component.localFilters;
-  var _useQueryEffect = useQueryEffect(attributes, props.runQueriesCallback, {
+  var isPivotTable = attributes.dimension.some(function (dim) {
+    return dim.pivot === 'y';
+  });
+  var attributesWithSortedDimension = _extends({}, attributes, {
+    dimension: [].concat(attributes.dimension.filter(function (dim) {
+      return dim.pivot !== 'y';
+    }), attributes.dimension.filter(function (dim) {
+      return dim.pivot === 'y';
+    }))
+  });
+  var queryAttributes = isPivotTable ? _extends({}, attributesWithSortedDimension, {
+    limit: 30000,
+    offset: undefined
+  }) : attributes;
+  var kpiSummaryQuery = _extends({}, attributes, {
+    limit: undefined,
+    offset: undefined,
+    dimension: attributes.dimension.filter(function (dim) {
+      return dim.pivot === 'y';
+    })
+  });
+  var queries = [_extends({}, queryAttributes, {
+    timeDimension: (_attributes$timeDimen = attributes.timeDimension) != null ? _attributes$timeDimen : null
+  }), _extends({}, kpiSummaryQuery, {
+    timeDimension: (_attributes$timeDimen2 = attributes.timeDimension) != null ? _attributes$timeDimen2 : null
+  })];
+  var _useQueryEffect = useQueryEffect(queries, props.runQueriesCallback, {
       localFilters: localFilters,
       globalFilters: props.globalFilters
     }, props.dataSet, undefined, props.dashboardBehaviour.variables),
-    queriesAreChanging = _useQueryEffect.queriesAreChanging,
-    results = _useQueryEffect.results;
+    results = _useQueryEffect.results,
+    queriesAreChanging = _useQueryEffect.queriesAreChanging;
+  var KPIResults = results[1];
+  var _useState = useState(0),
+    page = _useState[0],
+    setPage = _useState[1];
+  useEffect(function () {
+    setPage(0);
+  }, [attributes.dimension, attributes.measure, localFilters, props.globalFilters]);
+  var pageSize = attributes.limit || 10;
+  var _useMemo = useMemo(function () {
+      if (!isPivotTable || !results[0]) {
+        return {
+          paginatedResult: results[0],
+          totalPivotRows: 0,
+          paginationStartIndex: 0,
+          paginationEndIndex: 0
+        };
+      }
+      var fullResult = results[0];
+      var totalRows = fullResult.content.length;
+      var startGroupIndex = page * pageSize;
+      var endGroupIndex = Math.min(startGroupIndex + pageSize, totalRows);
+      return {
+        paginatedResult: _extends({}, fullResult, {
+          content: fullResult.content.slice(startGroupIndex, endGroupIndex)
+        }),
+        totalPivotRows: totalRows,
+        paginationStartIndex: startGroupIndex,
+        paginationEndIndex: endGroupIndex
+      };
+    }, [isPivotTable, results, page, pageSize]),
+    paginationStartIndex = _useMemo.paginationStartIndex,
+    paginationEndIndex = _useMemo.paginationEndIndex,
+    totalPivotRows = _useMemo.totalPivotRows;
+  var totalPages = isPivotTable ? Math.ceil(totalPivotRows / pageSize) : 1;
   var onNext = function onNext() {
-    var _attributes$limit, _attributes$offset, _results$0$content$le, _results$;
-    if (!hasNext({
-      limit: (_attributes$limit = attributes.limit) != null ? _attributes$limit : 0,
-      offset: (_attributes$offset = attributes.offset) != null ? _attributes$offset : 0,
-      total: (_results$0$content$le = (_results$ = results[0]) == null ? void 0 : _results$.content.length) != null ? _results$0$content$le : 0
-    })) return;
-    props.updateComponentAttributes(_extends({}, attributes, {
-      offset: nextOffset(attributes.offset, attributes.limit)
-    }));
+    if (isPivotTable) {
+      if (page < totalPages - 1) {
+        setPage(page + 1);
+      }
+    } else {
+      var _attributes$limit, _attributes$offset, _results$0$content$le, _results$;
+      if (!hasNext({
+        limit: (_attributes$limit = attributes.limit) != null ? _attributes$limit : 0,
+        offset: (_attributes$offset = attributes.offset) != null ? _attributes$offset : 0,
+        total: (_results$0$content$le = (_results$ = results[0]) == null ? void 0 : _results$.content.length) != null ? _results$0$content$le : 0
+      })) return;
+      props.updateComponentAttributes(_extends({}, attributes, {
+        offset: nextOffset(attributes.offset, attributes.limit)
+      }));
+    }
   };
   var onPrevious = function onPrevious() {
-    var _attributes$offset2;
-    if (!hasPrevious((_attributes$offset2 = attributes.offset) != null ? _attributes$offset2 : 0)) return;
-    props.updateComponentAttributes(_extends({}, attributes, {
-      offset: previousOffset(attributes.offset, attributes.limit)
-    }));
+    if (isPivotTable) {
+      if (page > 0) {
+        setPage(page - 1);
+      }
+    } else {
+      var _attributes$offset2;
+      if (!hasPrevious((_attributes$offset2 = attributes.offset) != null ? _attributes$offset2 : 0)) return;
+      props.updateComponentAttributes(_extends({}, attributes, {
+        offset: previousOffset(attributes.offset, attributes.limit)
+      }));
+    }
   };
   var onOrder = function onOrder(_ref) {
     var fieldId = _ref.fieldId,
@@ -54506,15 +54931,11 @@ var DataTable$2 = function DataTable(props) {
     var currentFieldIndex = currentOrder.findIndex(function (o) {
       return o.field === fieldId && o["function"] == func;
     });
-
-    // Unset the direction -> remove it from the order
     if (direction === null) {
       currentOrder.splice(currentFieldIndex, 1);
     } else if (currentFieldIndex > -1) {
-      // if the current field already has an ordering rule -> update the direction
       currentOrder[currentFieldIndex].direction = direction;
     } else {
-      // add a new order
       currentOrder.push({
         field: fieldId,
         direction: direction,
@@ -54534,7 +54955,7 @@ var DataTable$2 = function DataTable(props) {
   var onSetNumberFormat = function onSetNumberFormat(fieldId, numberFormatId) {
     var newNumberformats = _extends({}, attributes.numberFormat);
     if (!numberFormatId) {
-      delete newNumberformats[fieldId];
+      newNumberformats[fieldId] = 'none';
     } else {
       newNumberformats[fieldId] = numberFormatId;
     }
@@ -54548,13 +54969,9 @@ var DataTable$2 = function DataTable(props) {
     }));
   };
   var result = results[0];
-
-  // If the result doesn't match the query, then wait by returning null
   if (result && result.fields.length != attributes.dimension.length + attributes.measure.length) {
     return null;
   }
-
-  // Only show the table when the right result fields have been returned...
   var requiredMeasureIds = attributes.measure.map(function (m) {
     return id$2(m);
   });
@@ -54568,7 +54985,11 @@ var DataTable$2 = function DataTable(props) {
     return requiredDimensions.includes(field.id) || requiredMeasureIds.includes(field.id);
   });
   if (!show) return null;
-  return jsx(DataTableView$1, _extends({}, attributes, {
+  var effectiveAttributes = isPivotTable ? _extends({}, attributes, {
+    offset: page * pageSize,
+    limit: pageSize
+  }) : attributes;
+  return jsx(DataTableView$1, _extends({}, effectiveAttributes, {
     dataSet: props.dataSet,
     onSetExportName: onSetExportName,
     id: props.id,
@@ -54596,7 +55017,14 @@ var DataTable$2 = function DataTable(props) {
       runQueriesCallback: props.runQueriesCallback,
       globalFilters: props.globalFilters
     },
-    defaultFormats: props.dashboardBehaviour.defaultFormats
+    defaultFormats: props.dashboardBehaviour.defaultFormats,
+    KPIResults: KPIResults,
+    pivotTablePagination: isPivotTable ? {
+      totalRows: totalPivotRows,
+      pageSize: pageSize,
+      paginationStartIndex: paginationStartIndex,
+      paginationEndIndex: paginationEndIndex
+    } : undefined
   }));
 };
 
@@ -66567,6 +66995,137 @@ 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]);
+  var handleColumnAdd = function handleColumnAdd(field) {
+    var currentColumns = props.attributes.visualFormatColumns || [];
+    if (field && !currentColumns.includes(field)) {
+      var newColumns = [].concat(currentColumns, [field]);
+      props.setAttributes({
+        visualFormatColumns: newColumns
+      });
+    } else {
+      console.warn('Field is invalid or already exists:', field);
+    }
+  };
+  var handleColumnRemove = function handleColumnRemove(itemIndex) {
+    var currentColumns = props.attributes.visualFormatColumns || [];
+    var newColumns = currentColumns.filter(function (_, index) {
+      return index !== itemIndex;
+    }).filter(function (item) {
+      return item !== undefined && item !== null;
+    });
+    props.setAttributes({
+      visualFormatColumns: newColumns
+    });
+  };
+  var firstResult = results == null ? void 0 : results[0];
+  var uniqueFirstValues = (firstResult == null ? void 0 : firstResult.content) || [];
+  var availableFields = uniqueFirstValues.map(function (value) {
+    return {
+      title: value.join(', '),
+      icon: 'string',
+      value: value.join(', ')
+    };
+  });
+  var selectedItems = (props.attributes.visualFormatColumns || []).map(function (columnId) {
+    var field = availableFields.find(function (f) {
+      return f.title === columnId;
+    });
+    return field || null;
+  }).filter(function (item) {
+    return item !== null;
+  });
+  return jsxs(Section, {
+    title: props.section.title,
+    children: [jsx(ListView, {
+      mode: mode,
+      onDeleteItem: handleColumnRemove,
+      items: selectedItems,
+      newItem: {
+        callToAction: textOverride('visual_format.add_column', 'Add column'),
+        onNew: handleColumnAdd,
+        initValues: availableFields,
+        hide: availableFields.length === 0
+      },
+      purpose: "visualFormat",
+      testId: "visual-format-columns"
+    }), availableFields.length === 0 && jsx("p", {
+      style: {
+        color: '#9ca3af',
+        fontSize: '0.875rem',
+        fontStyle: 'italic',
+        margin: '1rem 0'
+      },
+      children: textOverride('visual_format.no_columns', 'No numeric columns available')
+    })]
+  });
+};
+
+var KPISummarisationSection = function KPISummarisationSection(props) {
+  var _useDashboardBehaviou = useDashboardBehaviourContext(),
+    textOverride = _useDashboardBehaviou.textOverride;
+  return jsx(Section, {
+    title: props.section.title,
+    children: jsx(Section.Grid, {
+      children: jsx(Checkbox, {
+        label: textOverride('kpi_summarisation.enable', 'Summarize KPIs'),
+        currentValue: props.attributes.summarizeKPIs || false,
+        onChange: function onChange(checked) {
+          props.setAttributes({
+            summarizeKPIs: checked
+          });
+        }
+      })
+    })
+  });
+};
+
 var QuadrantSection = function QuadrantSection(props) {
   var _props$attributes$qua, _props$attributes$qua2, _props$section;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
@@ -66704,6 +67263,10 @@ var FormatPanelFromConfig = function FormatPanelFromConfig(props) {
           section: section
         })), section.type === 'richText' && jsx(RichTextFormatSection, _extends({}, props, {
           section: section
+        })), section.type === 'visualFormat' && jsx(VisualFormatSection, _extends({}, props, {
+          section: section
+        })), section.type === 'kpiSummarisation' && jsx(KPISummarisationSection, _extends({}, props, {
+          section: section
         })), section.type == 'trends' && jsx(TrendsSection, _extends({}, props, {
           section: section
         }))]