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

dhis2 · Sep 25, 2023 · b020edd · b020edd
1 parent f3a6f3b
commit b020edd
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 15 deletions.
diff --git a/src/__demo__/PivotTable.stories.js b/src/__demo__/PivotTable.stories.js
@@ -1119,3 +1119,29 @@ storiesOf('PivotTable', module).add('DEGS', (_, { pivotTableOptions }) => {
         </div>
     )
 })
+
+storiesOf('PivotTable', module).add(
+    'Truncated header cell',
+    (_, { pivotTableOptions }) => {
+        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: 250, height: 600, marginTop: 50 }}>
+                <PivotTable data={data} visualization={visualization} />
+            </div>
+        )
+    }
+)
diff --git a/src/components/PivotTable/PivotTableTitleRow.js b/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, useMemo } from 'react'
 import { PivotTableCell } from './PivotTableCell.js'
 import { usePivotTableEngine } from './PivotTableEngineContext.js'
 import { cell as cellStyle } from './styles/PivotTable.style.js'
@@ -10,32 +11,55 @@ export const PivotTableTitleRow = ({
     containerWidth,
     totalWidth,
 }) => {
+    const containerRef = useRef(null)
     const engine = usePivotTableEngine()
     const columnCount = engine.width + engine.rowDepth
+    const maxWidth = useMemo(
+        () => containerWidth - (engine.cellPadding * 2 + 2),
+        [containerWidth, engine.cellPadding]
+    )
+    const marginLeft = useMemo(
+        () =>
+            Math.max(
+                0,
+                Math.min(scrollPosition?.x ?? 0, totalWidth - containerWidth)
+            ),
+        [containerWidth, scrollPosition.x, totalWidth]
+    )
+    const titleIsTruncated =
+        containerRef.current?.scrollWidth > containerRef.current?.clientWidth
 
-    const [position, setPosition] = useState(scrollPosition.x)
-    useEffect(() => {
-        setPosition(
-            Math.max(0, Math.min(scrollPosition.x, totalWidth - containerWidth))
-        )
-    }, [containerWidth, scrollPosition.x, totalWidth])
     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}
+                    {titleIsTruncated ? (
+                        <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>

diff --git a/src/components/PivotTable/styles/PivotTable.style.js b/src/components/PivotTable/styles/PivotTable.style.js
@@ -109,10 +109,16 @@ export const cell = css`
         align-items: center;
         justify-content: center;
     }
-    .title {
+    .title-cell {
         font-weight: bold;
         background-color: #cddaed;
     }
+    .title-cell-content {
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
     .row-header {
         background-color: #dae6f8;
     }