feat(pivot-table): truncate title and show full in tooltip (v24) (#1579)

src/__demo__/PivotTable.stories.js

@@ -1119,3 +1119,44 @@ storiesOf('PivotTable', module).add('DEGS', (_, { pivotTableOptions }) => {
         </div>
     )
 })
+
+storiesOf('PivotTable', module).add(
+    'Truncated header cell',
+    (_, { pivotTableOptions }) => {
+        const widths = [250, 200, 500]
+        const [width, setWidth] = useState(250)
+        const toggleWidth = () =>
+            setWidth(
+                (currentWidth) =>
+                    widths[widths.indexOf(currentWidth) + 1] ?? 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 (
+            <div
+                style={{
+                    width,
+                    height: 600,
+                    marginTop: 50,
+                    transition: 'width 1s',
+                }}
+            >
+                <button onClick={toggleWidth}>Toggle width</button>
+                <PivotTable data={data} visualization={visualization} />
+            </div>
+        )
+    }
+)

src/components/PivotTable/PivotTableTitleRow.js

@@ -1,5 +1,6 @@
+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'
@@ -8,34 +9,66 @@ export const PivotTableTitleRow = ({
     title,
     scrollPosition,
     containerWidth,
-    totalWidth,
 }) => {
+    const containerRef = useRef(null)
+    const [scrollWidth, setScrollWidth] = useState(0)
+    const [isTitleTruncated, setIsTitleTruncated] = useState(false)
     const engine = usePivotTableEngine()
     const columnCount = engine.width + engine.rowDepth
+    const maxWidth = containerWidth - (engine.cellPadding * 2 + 2)
+    const marginLeft = Math.max(0, scrollPosition?.x ?? 0)
 
-    const [position, setPosition] = useState(scrollPosition.x)
     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 ?? containerRef.current.scrollWidth
+            const newIsTitleTruncated =
+                currentScrollWidth > containerRef.current.clientWidth
+            if (newIsTitleTruncated !== isTitleTruncated) {
+                setIsTitleTruncated(newIsTitleTruncated)
+            }
+        }
+    }, [containerWidth, scrollWidth, isTitleTruncated])
+
     return (
         <tr>
             <style jsx>{cellStyle}</style>
             <PivotTableCell
                 isHeader
-                classes={['column-header', 'title']}
+                classes={['column-header', 'title-cell']}
                 colSpan={columnCount}
             >
                 <div
-                    style={{
-                        marginLeft: position,
-                        maxWidth: containerWidth,
-                        textAlign: 'center',
-                    }}
+                    style={{ marginLeft, maxWidth }}
+                    ref={containerRef}
                     data-test="visualization-title"
+                    className="title-cell-content"
                 >
-                    {title}
+                    {isTitleTruncated ? (
+                        <Tooltip content={title}>
+                            {({ ref: tooltipRef, onMouseOver, onMouseOut }) => (
+                                <div
+                                    ref={tooltipRef}
+                                    onMouseOver={onMouseOver}
+                                    onMouseOut={onMouseOut}
+                                    className="title-cell-content"
+                                    style={{ maxWidth }}
+                                >
+                                    {title}
+                                </div>
+                            )}
+                        </Tooltip>
+                    ) : (
+                        title
+                    )}
                 </div>
             </PivotTableCell>
         </tr>
@@ -47,5 +80,4 @@ PivotTableTitleRow.propTypes = {
     scrollPosition: PropTypes.shape({ x: PropTypes.number.isRequired })
         .isRequired,
     title: PropTypes.string.isRequired,
-    totalWidth: PropTypes.number.isRequired,
 }

src/components/PivotTable/PivotTableTitleRows.js

@@ -13,21 +13,13 @@ export const PivotTableTitleRows = ({ clippingResult, width }) => {
                     title={engine.options.title}
                     scrollPosition={clippingResult.scrollPosition}
                     containerWidth={width}
-                    totalWidth={
-                        engine.adaptiveClippingController.columns.totalSize +
-                        engine.adaptiveClippingController.columns.headerSize
-                    }
                 />
             ) : null}
             {engine.options.subtitle ? (
                 <PivotTableTitleRow
                     title={engine.options.subtitle}
                     scrollPosition={clippingResult.scrollPosition}
                     containerWidth={width}
-                    totalWidth={
-                        engine.adaptiveClippingController.columns.totalSize +
-                        engine.adaptiveClippingController.columns.headerSize
-                    }
                 />
             ) : null}
             {engine.visualization.filters?.length ? (
@@ -38,10 +30,6 @@ export const PivotTableTitleRows = ({ clippingResult, width }) => {
                     )}
                     scrollPosition={clippingResult.scrollPosition}
                     containerWidth={width}
-                    totalWidth={
-                        engine.adaptiveClippingController.columns.totalSize +
-                        engine.adaptiveClippingController.columns.headerSize
-                    }
                 />
             ) : null}
         </>

src/components/PivotTable/styles/PivotTable.style.js

@@ -111,9 +111,25 @@ export const cell = css`
         align-items: center;
         justify-content: center;
     }
-    .title {
+    .title-cell {
         font-weight: bold;
         background-color: #cddaed;
+        padding: 0;
+    }
+    .title-cell-content {
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .title-cell.displaydensity-COMPACT > .title-cell-content {
+        padding: ${DISPLAY_DENSITY_PADDING_COMPACT}px;
+    }
+    .title-cell.displaydensity-NORMAL > .title-cell-content {
+        padding: ${DISPLAY_DENSITY_PADDING_NORMAL}px;
+    }
+    .title-cell.displaydensity-COMFORTABLE > .title-cell-content {
+        padding: ${DISPLAY_DENSITY_PADDING_COMFORTABLE}px;
     }
     .row-header {
         background-color: #dae6f8;