@dhis2/analytics 24.10.12 → 24.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [24.11.0](https://github.com/dhis2/analytics/compare/v24.10.13...v24.11.0) (2024-11-04)
+
+
+### Features
+
+* **pivot-table:** truncate title and show full in tooltip ([#1579](https://github.com/dhis2/analytics/issues/1579)) ([#1622](https://github.com/dhis2/analytics/issues/1622)) ([f62b0c2](https://github.com/dhis2/analytics/commit/f62b0c21b76ac4139d451567ff07108160428996))
+
+## [24.10.13](https://github.com/dhis2/analytics/compare/v24.10.12...v24.10.13) (2024-06-27)
+
+
+### Bug Fixes
+
+* apply legend to all numeric and boolean types (DHIS2-17611) [24.x] ([#1687](https://github.com/dhis2/analytics/issues/1687)) ([9e3f166](https://github.com/dhis2/analytics/commit/9e3f1668aaef693393e5a7a46dc839f9aad5bce5))
+
 ## [24.10.12](https://github.com/dhis2/analytics/compare/v24.10.11...v24.10.12) (2024-06-25)
 
 

package/build/cjs/__demo__/PivotTable.stories.js

@@ -1170,4 +1170,42 @@ ResizingPivotTable.propTypes = {
     data: degsData,
     visualization: visualization
   }));
+});
+(0, _react.storiesOf)('PivotTable', module).add('Truncated header cell', (_, _ref50) => {
+  let {
+    pivotTableOptions
+  } = _ref50;
+  const widths = [250, 200, 500];
+  const [width, setWidth] = (0, _react2.useState)(250);
+
+  const toggleWidth = () => setWidth(currentWidth => {
+    var _widths;
+
+    return (_widths = widths[widths.indexOf(currentWidth) + 1]) !== null && _widths !== void 0 ? _widths : widths[0];
+  });
+
+  const visualization = { ..._narrativeVisualization.default,
+    ...visualizationReset,
+    ...pivotTableOptions,
+    columns: _narrativeVisualization.default.filters,
+    filters: _narrativeVisualization.default.columns,
+    rowTotals: true,
+    colTotals: true
+  };
+  const data = { ...narrativeData,
+    rows: [narrativeData.rows[0]]
+  };
+  return /*#__PURE__*/_react2.default.createElement("div", {
+    style: {
+      width,
+      height: 600,
+      marginTop: 50,
+      transition: 'width 1s'
+    }
+  }, /*#__PURE__*/_react2.default.createElement("button", {
+    onClick: toggleWidth
+  }, "Toggle width"), /*#__PURE__*/_react2.default.createElement(_index.PivotTable, {
+    data: data,
+    visualization: visualization
+  }));
 });

package/build/cjs/components/PivotTable/PivotTableTitleRow.js

@@ -7,6 +7,8 @@ exports.PivotTableTitleRow = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _ui = require("@dhis2/ui");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -24,35 +26,73 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const PivotTableTitleRow = _ref => {
+  var _scrollPosition$x;
+
   let {
     title,
     scrollPosition,
-    containerWidth,
-    totalWidth
+    containerWidth
   } = _ref;
+  const containerRef = (0, _react.useRef)(null);
+  const [scrollWidth, setScrollWidth] = (0, _react.useState)(0);
+  const [isTitleTruncated, setIsTitleTruncated] = (0, _react.useState)(false);
   const engine = (0, _PivotTableEngineContext.usePivotTableEngine)();
   const columnCount = engine.width + engine.rowDepth;
-  const [position, setPosition] = (0, _react.useState)(scrollPosition.x);
+  const maxWidth = containerWidth - (engine.cellPadding * 2 + 2);
+  const marginLeft = Math.max(0, (_scrollPosition$x = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.x) !== null && _scrollPosition$x !== void 0 ? _scrollPosition$x : 0);
   (0, _react.useEffect)(() => {
-    setPosition(Math.max(0, Math.min(scrollPosition.x, totalWidth - containerWidth)));
-  }, [containerWidth, scrollPosition.x, totalWidth]);
+    if (containerRef.current) {
+      /* Only set `scrollWidth` once, because during a CSS transition
+       * the reported value can sometimes be equal to `clientWidth`
+       * even though the text doesn't fit. Due to `white-space: nowrap`
+       * and `overflow: hidden` the `scrollWidth` should remain constant,
+       * so we can assume this initial value is correct. */
+      if (!scrollWidth) {
+        setScrollWidth(containerRef.current.scrollWidth);
+      }
+
+      const currentScrollWidth = scrollWidth !== null && scrollWidth !== void 0 ? scrollWidth : containerRef.current.scrollWidth;
+      const newIsTitleTruncated = currentScrollWidth > containerRef.current.clientWidth;
+
+      if (newIsTitleTruncated !== isTitleTruncated) {
+        setIsTitleTruncated(newIsTitleTruncated);
+      }
+    }
+  }, [containerWidth, scrollWidth, isTitleTruncated]);
   return /*#__PURE__*/_react.default.createElement("tr", {
     className: "jsx-".concat(_PivotTableStyle.cell.__hash)
   }, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _PivotTableStyle.cell.__hash
   }, _PivotTableStyle.cell), /*#__PURE__*/_react.default.createElement(_PivotTableCell.PivotTableCell, {
     isHeader: true,
-    classes: ['column-header', 'title'],
+    classes: ['column-header', 'title-cell'],
     colSpan: columnCount
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginLeft: position,
-      maxWidth: containerWidth,
-      textAlign: 'center'
+      marginLeft,
+      maxWidth
     },
+    ref: containerRef,
     "data-test": "visualization-title",
-    className: "jsx-".concat(_PivotTableStyle.cell.__hash)
-  }, title)));
+    className: "jsx-".concat(_PivotTableStyle.cell.__hash) + " " + "title-cell-content"
+  }, isTitleTruncated ? /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    content: title
+  }, _ref2 => {
+    let {
+      ref: tooltipRef,
+      onMouseOver,
+      onMouseOut
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: tooltipRef,
+      onMouseOver: onMouseOver,
+      onMouseOut: onMouseOut,
+      style: {
+        maxWidth
+      },
+      className: "jsx-".concat(_PivotTableStyle.cell.__hash) + " " + "title-cell-content"
+    }, title);
+  }) : title)));
 };
 
 exports.PivotTableTitleRow = PivotTableTitleRow;
@@ -61,6 +101,5 @@ PivotTableTitleRow.propTypes = {
   scrollPosition: _propTypes.default.shape({
     x: _propTypes.default.number.isRequired
   }).isRequired,
-  title: _propTypes.default.string.isRequired,
-  totalWidth: _propTypes.default.number.isRequired
+  title: _propTypes.default.string.isRequired
 };

package/build/cjs/components/PivotTable/PivotTableTitleRows.js

@@ -28,18 +28,15 @@ const PivotTableTitleRows = _ref => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, engine.options.title ? /*#__PURE__*/_react.default.createElement(_PivotTableTitleRow.PivotTableTitleRow, {
     title: engine.options.title,
     scrollPosition: clippingResult.scrollPosition,
-    containerWidth: width,
-    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+    containerWidth: width
   }) : null, engine.options.subtitle ? /*#__PURE__*/_react.default.createElement(_PivotTableTitleRow.PivotTableTitleRow, {
     title: engine.options.subtitle,
     scrollPosition: clippingResult.scrollPosition,
-    containerWidth: width,
-    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+    containerWidth: width
   }) : null, (_engine$visualization = engine.visualization.filters) !== null && _engine$visualization !== void 0 && _engine$visualization.length ? /*#__PURE__*/_react.default.createElement(_PivotTableTitleRow.PivotTableTitleRow, {
     title: (0, _getFilterText.default)(engine.visualization.filters, engine.rawData.metaData),
     scrollPosition: clippingResult.scrollPosition,
-    containerWidth: width,
-    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+    containerWidth: width
   }) : null);
 };
 

package/build/cjs/components/PivotTable/PivotTableValueCell.js

@@ -56,10 +56,9 @@ const PivotTableValueCell = _ref => {
       ref: cellRef,
       classes: [cellContent.cellType, isClickable && 'clickable']
     });
-  } // TODO: Add support for 'INTEGER' type (requires server changes)
+  }
 
-
-  const legendStyle = cellContent.cellType === _pivotTableConstants.CELL_TYPE_VALUE && cellContent.valueType === _valueTypes.VALUE_TYPE_NUMBER ? (0, _applyLegendSet.applyLegendSet)(cellContent.rawValue, cellContent.dxDimension, engine) : undefined;
+  const legendStyle = cellContent.cellType === _pivotTableConstants.CELL_TYPE_VALUE && ((0, _valueTypes.isNumericValueType)(cellContent.valueType) || (0, _valueTypes.isBooleanValueType)(cellContent.valueType)) ? (0, _applyLegendSet.applyLegendSet)(cellContent.rawValue, cellContent.dxDimension, engine) : undefined;
   const width = engine.adaptiveClippingController.columns.sizes[engine.columnMap[column]].size;
   const height = engine.adaptiveClippingController.rows.sizes[engine.rowMap[row]].size;
   const style = { ...legendStyle,

package/build/cjs/components/PivotTable/styles/PivotTable.style.js

@@ -12,9 +12,9 @@ var _pivotTableConstants = require("../../../modules/pivotTable/pivotTableConsta
 const table = ["div.pivot-table-container.jsx-3572446209{font-family:'Roboto',Arial,sans-serif;overflow:auto;color:".concat(_ui.colors.grey900, ";}"), "div.pivot-table-container.jsx-3572446209 table{border-spacing:0;white-space:nowrap;box-sizing:border-box;text-align:center;border:1px solid ".concat(_pivotTableConstants.BORDER_COLOR, ";border-width:1px 1px 0 0;}"), "div.pivot-table-container.jsx-3572446209 table.fixed-headers{border-width:0 0 0 1px;}", "div.pivot-table-container.jsx-3572446209 table.fixed-headers tr th,div.pivot-table-container.jsx-3572446209 table.fixed-headers tr td{border-width:0 1px 1px 0;}", "div.pivot-table-container.jsx-3572446209 table.fixed-column-headers{border-width:0 1px 0 0;}", "div.pivot-table-container.jsx-3572446209 table.fixed-column-headers tr th,div.pivot-table-container.jsx-3572446209 table.fixed-column-headers tr td{border-width:0 0 1px 1px;}", "div.pivot-table-container.jsx-3572446209 table.fixed-headers thead tr:first-of-type th,div.pivot-table-container.jsx-3572446209 table.fixed-column-headers thead tr:first-of-type th{border-top:1px solid ".concat(_pivotTableConstants.BORDER_COLOR, ";}"), "div.pivot-table-container.jsx-3572446209 table.fixed-row-headers{border-width:0 0 1px 1px;}", "div.pivot-table-container.jsx-3572446209 table.fixed-row-headers tr th,div.pivot-table-container.jsx-3572446209 table.fixed-row-headers tr td{border-width:1px 1px 0 0;}"];
 exports.table = table;
 table.__hash = "3572446209";
-const cell = ["td.jsx-2757248239,th.jsx-2757248239{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(_pivotTableConstants.BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-2757248239{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-2757248239{font-size:".concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-2757248239{font-size:".concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-2757248239{font-size:".concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-2757248239{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-2757248239{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-2757248239{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-2757248239{background-color:#dae6f8;}", "div.column-header-inner.jsx-2757248239{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title.jsx-2757248239{font-weight:bold;background-color:#cddaed;}", ".row-header.jsx-2757248239{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-2757248239{text-align:left;}", ".empty-header.jsx-2757248239{background-color:#cddaed;}", ".total-header.jsx-2757248239{background-color:#bac6d8;}", ".value.jsx-2757248239{background-color:#ffffff;text-align:left;}", ".NUMBER.jsx-2757248239,.INTEGER.jsx-2757248239,.INTEGER_POSITIVE.jsx-2757248239,.INTEGER_NEGATIVE.jsx-2757248239,.INTEGER_ZERO_OR_POSITIVE.jsx-2757248239,.UNIT_INTERVAL.jsx-2757248239,.PERCENTAGE.jsx-2757248239,.BOOLEAN.jsx-2757248239,.TRUE_ONLY.jsx-2757248239{text-align:right;}", ".clickable.jsx-2757248239{cursor:pointer;}", ".value.jsx-2757248239:hover{background-color:#f3f3f3;}", ".subtotal.jsx-2757248239{background-color:#f4f4f4;}", ".total.jsx-2757248239{background-color:#d8d8d8;}", ".column-header-label.jsx-2757248239{overflow:hidden;text-overflow:ellipsis;}"];
+const cell = ["td.jsx-3234356038,th.jsx-3234356038{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(_pivotTableConstants.BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-3234356038{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-3234356038{font-size:".concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-3234356038{font-size:".concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-3234356038{font-size:".concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;line-height:").concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-3234356038{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-3234356038{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-3234356038{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-3234356038{background-color:#dae6f8;}", "div.column-header-inner.jsx-3234356038{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title-cell.jsx-3234356038{font-weight:bold;background-color:#cddaed;padding:0;}", ".title-cell-content.jsx-3234356038{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}", ".title-cell.displaydensity-COMPACT.jsx-3234356038>.title-cell-content.jsx-3234356038{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".title-cell.displaydensity-NORMAL.jsx-3234356038>.title-cell-content.jsx-3234356038{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".title-cell.displaydensity-COMFORTABLE.jsx-3234356038>.title-cell-content.jsx-3234356038{padding:".concat(_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".row-header.jsx-3234356038{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-3234356038{text-align:left;}", ".empty-header.jsx-3234356038{background-color:#cddaed;}", ".total-header.jsx-3234356038{background-color:#bac6d8;}", ".value.jsx-3234356038{background-color:#ffffff;text-align:left;}", ".NUMBER.jsx-3234356038,.INTEGER.jsx-3234356038,.INTEGER_POSITIVE.jsx-3234356038,.INTEGER_NEGATIVE.jsx-3234356038,.INTEGER_ZERO_OR_POSITIVE.jsx-3234356038,.UNIT_INTERVAL.jsx-3234356038,.PERCENTAGE.jsx-3234356038,.BOOLEAN.jsx-3234356038,.TRUE_ONLY.jsx-3234356038{text-align:right;}", ".clickable.jsx-3234356038{cursor:pointer;}", ".value.jsx-3234356038:hover{background-color:#f3f3f3;}", ".subtotal.jsx-3234356038{background-color:#f4f4f4;}", ".total.jsx-3234356038{background-color:#d8d8d8;}", ".column-header-label.jsx-3234356038{overflow:hidden;text-overflow:ellipsis;}"];
 exports.cell = cell;
-cell.__hash = "2757248239";
+cell.__hash = "3234356038";
 const sortIcon = [".fontsize-SMALL.jsx-2877616992{height:".concat(_pivotTableConstants.FONT_SIZE_SMALL, "px;margin-bottom:1px;margin-left:5px;}"), ".fontsize-NORMAL.jsx-2877616992{height:".concat(_pivotTableConstants.FONT_SIZE_NORMAL, "px;max-height:11px;margin-bottom:2px;margin-left:6px;}"), ".fontsize-LARGE.jsx-2877616992{height:".concat(_pivotTableConstants.FONT_SIZE_LARGE, "px;margin-bottom:2px;margin-left:7px;}")];
 exports.sortIcon = sortIcon;
 sortIcon.__hash = "2877616992";

package/build/cjs/modules/renderValue.js

@@ -63,7 +63,7 @@ const toFixedPrecisionString = (value, skipRounding) => {
 };
 
 const renderValue = (value, valueType, visualization) => {
-  if (!(0, _valueTypes.isNumericValueType)(valueType) || value === undefined) {
+  if (!((0, _valueTypes.isNumericValueType)(valueType) || (0, _valueTypes.isBooleanValueType)(valueType)) || value === undefined) {
     return String(value).replace(/[^\S\n]+/, ' ');
   }
 

package/build/cjs/modules/valueTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isNumericValueType = exports.VALUE_TYPE_USERNAME = exports.VALUE_TYPE_URL = exports.VALUE_TYPE_UNIT_INTERVAL = exports.VALUE_TYPE_TRUE_ONLY = exports.VALUE_TYPE_TIME = exports.VALUE_TYPE_TEXT = exports.VALUE_TYPE_PHONE_NUMBER = exports.VALUE_TYPE_PERCENTAGE = exports.VALUE_TYPE_ORGANISATION_UNIT = exports.VALUE_TYPE_NUMBER = exports.VALUE_TYPE_LONG_TEXT = exports.VALUE_TYPE_LETTER = exports.VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = exports.VALUE_TYPE_INTEGER_POSITIVE = exports.VALUE_TYPE_INTEGER_NEGATIVE = exports.VALUE_TYPE_INTEGER = exports.VALUE_TYPE_EMAIL = exports.VALUE_TYPE_DATETIME = exports.VALUE_TYPE_DATE = exports.VALUE_TYPE_BOOLEAN = exports.VALUE_TYPE_AGE = void 0;
+exports.isNumericValueType = exports.isBooleanValueType = exports.VALUE_TYPE_USERNAME = exports.VALUE_TYPE_URL = exports.VALUE_TYPE_UNIT_INTERVAL = exports.VALUE_TYPE_TRUE_ONLY = exports.VALUE_TYPE_TIME = exports.VALUE_TYPE_TEXT = exports.VALUE_TYPE_PHONE_NUMBER = exports.VALUE_TYPE_PERCENTAGE = exports.VALUE_TYPE_ORGANISATION_UNIT = exports.VALUE_TYPE_NUMBER = exports.VALUE_TYPE_LONG_TEXT = exports.VALUE_TYPE_LETTER = exports.VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE = exports.VALUE_TYPE_INTEGER_POSITIVE = exports.VALUE_TYPE_INTEGER_NEGATIVE = exports.VALUE_TYPE_INTEGER = exports.VALUE_TYPE_EMAIL = exports.VALUE_TYPE_DATETIME = exports.VALUE_TYPE_DATE = exports.VALUE_TYPE_BOOLEAN = exports.VALUE_TYPE_AGE = void 0;
 
 /* These types match the types in the backend
   https://github.com/dhis2/dhis2-core/blob/master/dhis-2/dhis-api/src/main/java/org/hisp/dhis/common/ValueType.java
@@ -51,7 +51,12 @@ exports.VALUE_TYPE_ORGANISATION_UNIT = VALUE_TYPE_ORGANISATION_UNIT;
 const VALUE_TYPE_AGE = 'AGE';
 exports.VALUE_TYPE_AGE = VALUE_TYPE_AGE;
 const NUMERIC_VALUE_TYPES = [VALUE_TYPE_NUMBER, VALUE_TYPE_UNIT_INTERVAL, VALUE_TYPE_PERCENTAGE, VALUE_TYPE_INTEGER, VALUE_TYPE_INTEGER_POSITIVE, VALUE_TYPE_INTEGER_NEGATIVE, VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE];
+const BOOLEAN_VALUE_TYPES = [VALUE_TYPE_BOOLEAN, VALUE_TYPE_TRUE_ONLY];
 
 const isNumericValueType = type => NUMERIC_VALUE_TYPES.includes(type);
 
-exports.isNumericValueType = isNumericValueType;
+exports.isNumericValueType = isNumericValueType;
+
+const isBooleanValueType = type => BOOLEAN_VALUE_TYPES.includes(type);
+
+exports.isBooleanValueType = isBooleanValueType;

package/build/es/__demo__/PivotTable.stories.js

@@ -1118,4 +1118,42 @@ storiesOf('PivotTable', module).add('DEGS', (_, _ref49) => {
     data: degsData,
     visualization: visualization
   }));
+});
+storiesOf('PivotTable', module).add('Truncated header cell', (_, _ref50) => {
+  let {
+    pivotTableOptions
+  } = _ref50;
+  const widths = [250, 200, 500];
+  const [width, setWidth] = useState(250);
+
+  const toggleWidth = () => setWidth(currentWidth => {
+    var _widths;
+
+    return (_widths = widths[widths.indexOf(currentWidth) + 1]) !== null && _widths !== void 0 ? _widths : widths[0];
+  });
+
+  const visualization = { ...narrativeVisualization,
+    ...visualizationReset,
+    ...pivotTableOptions,
+    columns: narrativeVisualization.filters,
+    filters: narrativeVisualization.columns,
+    rowTotals: true,
+    colTotals: true
+  };
+  const data = { ...narrativeData,
+    rows: [narrativeData.rows[0]]
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width,
+      height: 600,
+      marginTop: 50,
+      transition: 'width 1s'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: toggleWidth
+  }, "Toggle width"), /*#__PURE__*/React.createElement(PivotTable, {
+    data: data,
+    visualization: visualization
+  }));
 });

package/build/es/components/PivotTable/PivotTableTitleRow.js

@@ -1,45 +1,83 @@
 import _JSXStyle from "styled-jsx/style";
+import { Tooltip } from '@dhis2/ui';
 import PropTypes from 'prop-types';
-import React, { useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { PivotTableCell } from './PivotTableCell.js';
 import { usePivotTableEngine } from './PivotTableEngineContext.js';
 import { cell as cellStyle } from './styles/PivotTable.style.js';
 export const PivotTableTitleRow = _ref => {
+  var _scrollPosition$x;
+
   let {
     title,
     scrollPosition,
-    containerWidth,
-    totalWidth
+    containerWidth
   } = _ref;
+  const containerRef = useRef(null);
+  const [scrollWidth, setScrollWidth] = useState(0);
+  const [isTitleTruncated, setIsTitleTruncated] = useState(false);
   const engine = usePivotTableEngine();
   const columnCount = engine.width + engine.rowDepth;
-  const [position, setPosition] = useState(scrollPosition.x);
+  const maxWidth = containerWidth - (engine.cellPadding * 2 + 2);
+  const marginLeft = Math.max(0, (_scrollPosition$x = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.x) !== null && _scrollPosition$x !== void 0 ? _scrollPosition$x : 0);
   useEffect(() => {
-    setPosition(Math.max(0, Math.min(scrollPosition.x, totalWidth - containerWidth)));
-  }, [containerWidth, scrollPosition.x, totalWidth]);
+    if (containerRef.current) {
+      /* Only set `scrollWidth` once, because during a CSS transition
+       * the reported value can sometimes be equal to `clientWidth`
+       * even though the text doesn't fit. Due to `white-space: nowrap`
+       * and `overflow: hidden` the `scrollWidth` should remain constant,
+       * so we can assume this initial value is correct. */
+      if (!scrollWidth) {
+        setScrollWidth(containerRef.current.scrollWidth);
+      }
+
+      const currentScrollWidth = scrollWidth !== null && scrollWidth !== void 0 ? scrollWidth : containerRef.current.scrollWidth;
+      const newIsTitleTruncated = currentScrollWidth > containerRef.current.clientWidth;
+
+      if (newIsTitleTruncated !== isTitleTruncated) {
+        setIsTitleTruncated(newIsTitleTruncated);
+      }
+    }
+  }, [containerWidth, scrollWidth, isTitleTruncated]);
   return /*#__PURE__*/React.createElement("tr", {
     className: "jsx-".concat(cellStyle.__hash)
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: cellStyle.__hash
   }, cellStyle), /*#__PURE__*/React.createElement(PivotTableCell, {
     isHeader: true,
-    classes: ['column-header', 'title'],
+    classes: ['column-header', 'title-cell'],
     colSpan: columnCount
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      marginLeft: position,
-      maxWidth: containerWidth,
-      textAlign: 'center'
+      marginLeft,
+      maxWidth
     },
+    ref: containerRef,
     "data-test": "visualization-title",
-    className: "jsx-".concat(cellStyle.__hash)
-  }, title)));
+    className: "jsx-".concat(cellStyle.__hash) + " " + "title-cell-content"
+  }, isTitleTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: title
+  }, _ref2 => {
+    let {
+      ref: tooltipRef,
+      onMouseOver,
+      onMouseOut
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: tooltipRef,
+      onMouseOver: onMouseOver,
+      onMouseOut: onMouseOut,
+      style: {
+        maxWidth
+      },
+      className: "jsx-".concat(cellStyle.__hash) + " " + "title-cell-content"
+    }, title);
+  }) : title)));
 };
 PivotTableTitleRow.propTypes = {
   containerWidth: PropTypes.number.isRequired,
   scrollPosition: PropTypes.shape({
     x: PropTypes.number.isRequired
   }).isRequired,
-  title: PropTypes.string.isRequired,
-  totalWidth: PropTypes.number.isRequired
+  title: PropTypes.string.isRequired
 };

package/build/es/components/PivotTable/PivotTableTitleRows.js

@@ -14,18 +14,15 @@ export const PivotTableTitleRows = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, engine.options.title ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
     title: engine.options.title,
     scrollPosition: clippingResult.scrollPosition,
-    containerWidth: width,
-    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+    containerWidth: width
   }) : null, engine.options.subtitle ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
     title: engine.options.subtitle,
     scrollPosition: clippingResult.scrollPosition,
-    containerWidth: width,
-    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+    containerWidth: width
   }) : null, (_engine$visualization = engine.visualization.filters) !== null && _engine$visualization !== void 0 && _engine$visualization.length ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
     title: getFilterText(engine.visualization.filters, engine.rawData.metaData),
     scrollPosition: clippingResult.scrollPosition,
-    containerWidth: width,
-    totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
+    containerWidth: width
   }) : null);
 };
 PivotTableTitleRows.propTypes = {

package/build/es/components/PivotTable/PivotTableValueCell.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { applyLegendSet } from '../../modules/pivotTable/applyLegendSet.js';
 import { CELL_TYPE_VALUE } from '../../modules/pivotTable/pivotTableConstants.js';
-import { VALUE_TYPE_NUMBER } from '../../modules/valueTypes.js';
+import { isNumericValueType, isBooleanValueType } from '../../modules/valueTypes.js';
 import { PivotTableCell } from './PivotTableCell.js';
 import { PivotTableEmptyCell } from './PivotTableEmptyCell.js';
 import { usePivotTableEngine } from './PivotTableEngineContext.js';
@@ -35,10 +35,9 @@ export const PivotTableValueCell = _ref => {
       ref: cellRef,
       classes: [cellContent.cellType, isClickable && 'clickable']
     });
-  } // TODO: Add support for 'INTEGER' type (requires server changes)
+  }
 
-
-  const legendStyle = cellContent.cellType === CELL_TYPE_VALUE && cellContent.valueType === VALUE_TYPE_NUMBER ? applyLegendSet(cellContent.rawValue, cellContent.dxDimension, engine) : undefined;
+  const legendStyle = cellContent.cellType === CELL_TYPE_VALUE && (isNumericValueType(cellContent.valueType) || isBooleanValueType(cellContent.valueType)) ? applyLegendSet(cellContent.rawValue, cellContent.dxDimension, engine) : undefined;
   const width = engine.adaptiveClippingController.columns.sizes[engine.columnMap[column]].size;
   const height = engine.adaptiveClippingController.rows.sizes[engine.rowMap[row]].size;
   const style = { ...legendStyle,

package/build/es/components/PivotTable/styles/PivotTable.style.js

@@ -2,7 +2,7 @@ import { colors } from '@dhis2/ui';
 import { BORDER_COLOR, DISPLAY_DENSITY_PADDING_COMPACT, DISPLAY_DENSITY_PADDING_NORMAL, DISPLAY_DENSITY_PADDING_COMFORTABLE, FONT_SIZE_SMALL, FONT_SIZE_NORMAL, FONT_SIZE_LARGE } from '../../../modules/pivotTable/pivotTableConstants.js';
 export const table = ["div.pivot-table-container.jsx-3572446209{font-family:'Roboto',Arial,sans-serif;overflow:auto;color:".concat(colors.grey900, ";}"), "div.pivot-table-container.jsx-3572446209 table{border-spacing:0;white-space:nowrap;box-sizing:border-box;text-align:center;border:1px solid ".concat(BORDER_COLOR, ";border-width:1px 1px 0 0;}"), "div.pivot-table-container.jsx-3572446209 table.fixed-headers{border-width:0 0 0 1px;}", "div.pivot-table-container.jsx-3572446209 table.fixed-headers tr th,div.pivot-table-container.jsx-3572446209 table.fixed-headers tr td{border-width:0 1px 1px 0;}", "div.pivot-table-container.jsx-3572446209 table.fixed-column-headers{border-width:0 1px 0 0;}", "div.pivot-table-container.jsx-3572446209 table.fixed-column-headers tr th,div.pivot-table-container.jsx-3572446209 table.fixed-column-headers tr td{border-width:0 0 1px 1px;}", "div.pivot-table-container.jsx-3572446209 table.fixed-headers thead tr:first-of-type th,div.pivot-table-container.jsx-3572446209 table.fixed-column-headers thead tr:first-of-type th{border-top:1px solid ".concat(BORDER_COLOR, ";}"), "div.pivot-table-container.jsx-3572446209 table.fixed-row-headers{border-width:0 0 1px 1px;}", "div.pivot-table-container.jsx-3572446209 table.fixed-row-headers tr th,div.pivot-table-container.jsx-3572446209 table.fixed-row-headers tr td{border-width:1px 1px 0 0;}"];
 table.__hash = "3572446209";
-export const cell = ["td.jsx-2757248239,th.jsx-2757248239{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-2757248239{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-2757248239{font-size:".concat(FONT_SIZE_SMALL, "px;line-height:").concat(FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-2757248239{font-size:".concat(FONT_SIZE_NORMAL, "px;line-height:").concat(FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-2757248239{font-size:".concat(FONT_SIZE_LARGE, "px;line-height:").concat(FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-2757248239{padding:".concat(DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-2757248239{padding:".concat(DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-2757248239{padding:".concat(DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-2757248239{background-color:#dae6f8;}", "div.column-header-inner.jsx-2757248239{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title.jsx-2757248239{font-weight:bold;background-color:#cddaed;}", ".row-header.jsx-2757248239{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-2757248239{text-align:left;}", ".empty-header.jsx-2757248239{background-color:#cddaed;}", ".total-header.jsx-2757248239{background-color:#bac6d8;}", ".value.jsx-2757248239{background-color:#ffffff;text-align:left;}", ".NUMBER.jsx-2757248239,.INTEGER.jsx-2757248239,.INTEGER_POSITIVE.jsx-2757248239,.INTEGER_NEGATIVE.jsx-2757248239,.INTEGER_ZERO_OR_POSITIVE.jsx-2757248239,.UNIT_INTERVAL.jsx-2757248239,.PERCENTAGE.jsx-2757248239,.BOOLEAN.jsx-2757248239,.TRUE_ONLY.jsx-2757248239{text-align:right;}", ".clickable.jsx-2757248239{cursor:pointer;}", ".value.jsx-2757248239:hover{background-color:#f3f3f3;}", ".subtotal.jsx-2757248239{background-color:#f4f4f4;}", ".total.jsx-2757248239{background-color:#d8d8d8;}", ".column-header-label.jsx-2757248239{overflow:hidden;text-overflow:ellipsis;}"];
-cell.__hash = "2757248239";
+export const cell = ["td.jsx-3234356038,th.jsx-3234356038{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-3234356038{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-3234356038{font-size:".concat(FONT_SIZE_SMALL, "px;line-height:").concat(FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-3234356038{font-size:".concat(FONT_SIZE_NORMAL, "px;line-height:").concat(FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-3234356038{font-size:".concat(FONT_SIZE_LARGE, "px;line-height:").concat(FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-3234356038{padding:".concat(DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-3234356038{padding:".concat(DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-3234356038{padding:".concat(DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-3234356038{background-color:#dae6f8;}", "div.column-header-inner.jsx-3234356038{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title-cell.jsx-3234356038{font-weight:bold;background-color:#cddaed;padding:0;}", ".title-cell-content.jsx-3234356038{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}", ".title-cell.displaydensity-COMPACT.jsx-3234356038>.title-cell-content.jsx-3234356038{padding:".concat(DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".title-cell.displaydensity-NORMAL.jsx-3234356038>.title-cell-content.jsx-3234356038{padding:".concat(DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".title-cell.displaydensity-COMFORTABLE.jsx-3234356038>.title-cell-content.jsx-3234356038{padding:".concat(DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".row-header.jsx-3234356038{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-3234356038{text-align:left;}", ".empty-header.jsx-3234356038{background-color:#cddaed;}", ".total-header.jsx-3234356038{background-color:#bac6d8;}", ".value.jsx-3234356038{background-color:#ffffff;text-align:left;}", ".NUMBER.jsx-3234356038,.INTEGER.jsx-3234356038,.INTEGER_POSITIVE.jsx-3234356038,.INTEGER_NEGATIVE.jsx-3234356038,.INTEGER_ZERO_OR_POSITIVE.jsx-3234356038,.UNIT_INTERVAL.jsx-3234356038,.PERCENTAGE.jsx-3234356038,.BOOLEAN.jsx-3234356038,.TRUE_ONLY.jsx-3234356038{text-align:right;}", ".clickable.jsx-3234356038{cursor:pointer;}", ".value.jsx-3234356038:hover{background-color:#f3f3f3;}", ".subtotal.jsx-3234356038{background-color:#f4f4f4;}", ".total.jsx-3234356038{background-color:#d8d8d8;}", ".column-header-label.jsx-3234356038{overflow:hidden;text-overflow:ellipsis;}"];
+cell.__hash = "3234356038";
 export const sortIcon = [".fontsize-SMALL.jsx-2877616992{height:".concat(FONT_SIZE_SMALL, "px;margin-bottom:1px;margin-left:5px;}"), ".fontsize-NORMAL.jsx-2877616992{height:".concat(FONT_SIZE_NORMAL, "px;max-height:11px;margin-bottom:2px;margin-left:6px;}"), ".fontsize-LARGE.jsx-2877616992{height:".concat(FONT_SIZE_LARGE, "px;margin-bottom:2px;margin-left:7px;}")];
 sortIcon.__hash = "2877616992";

package/build/es/modules/renderValue.js

@@ -1,5 +1,5 @@
 import { NUMBER_TYPE_ROW_PERCENTAGE, NUMBER_TYPE_COLUMN_PERCENTAGE } from './pivotTable/pivotTableConstants.js';
-import { isNumericValueType } from './valueTypes.js';
+import { isNumericValueType, isBooleanValueType } from './valueTypes.js';
 
 const trimTrailingZeros = stringValue => stringValue.replace(/\.?0+$/, '');
 
@@ -53,7 +53,7 @@ const toFixedPrecisionString = (value, skipRounding) => {
 };
 
 export const renderValue = (value, valueType, visualization) => {
-  if (!isNumericValueType(valueType) || value === undefined) {
+  if (!(isNumericValueType(valueType) || isBooleanValueType(valueType)) || value === undefined) {
     return String(value).replace(/[^\S\n]+/, ' ');
   }
 

package/build/es/modules/valueTypes.js

@@ -23,4 +23,6 @@ export const VALUE_TYPE_DATETIME = 'DATETIME';
 export const VALUE_TYPE_ORGANISATION_UNIT = 'ORGANISATION_UNIT';
 export const VALUE_TYPE_AGE = 'AGE';
 const NUMERIC_VALUE_TYPES = [VALUE_TYPE_NUMBER, VALUE_TYPE_UNIT_INTERVAL, VALUE_TYPE_PERCENTAGE, VALUE_TYPE_INTEGER, VALUE_TYPE_INTEGER_POSITIVE, VALUE_TYPE_INTEGER_NEGATIVE, VALUE_TYPE_INTEGER_ZERO_OR_POSITIVE];
-export const isNumericValueType = type => NUMERIC_VALUE_TYPES.includes(type);
+const BOOLEAN_VALUE_TYPES = [VALUE_TYPE_BOOLEAN, VALUE_TYPE_TRUE_ONLY];
+export const isNumericValueType = type => NUMERIC_VALUE_TYPES.includes(type);
+export const isBooleanValueType = type => BOOLEAN_VALUE_TYPES.includes(type);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "24.10.12",
+    "version": "24.11.0",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {