Merge branch 'master' into DHIS2-15781-show-warning-text-below-rich-t…

…ext-editor

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [26.1.1](https://github.com/dhis2/analytics/compare/v26.1.0...v26.1.1) (2023-10-05)
+
+
+### Bug Fixes
+
+* **translations:** sync translations from transifex (master) ([dd9c23f](https://github.com/dhis2/analytics/commit/dd9c23f34a0489cae89f5f5c10ab1dc17e2c13ef))
+
+# [26.1.0](https://github.com/dhis2/analytics/compare/v26.0.21...v26.1.0) (2023-10-03)
+
+
+### Features
+
+* **pivot-table:** truncate title and show full in tooltip ([#1579](https://github.com/dhis2/analytics/issues/1579)) ([c37ba2d](https://github.com/dhis2/analytics/commit/c37ba2d1a187963b3b5aeee5b951bcf9c129dcd2))
+
+## [26.0.21](https://github.com/dhis2/analytics/compare/v26.0.20...v26.0.21) (2023-09-28)
+
+
+### Bug Fixes
+
+* avoid crash in DV with some chart types DHIS2-15882 ([#1582](https://github.com/dhis2/analytics/issues/1582)) ([f6c89e1](https://github.com/dhis2/analytics/commit/f6c89e1481dbbc2ea2cfe80a3c9ed7f81a63c83c))
+
 ## [26.0.20](https://github.com/dhis2/analytics/compare/v26.0.19...v26.0.20) (2023-09-25)
 
 

i18n/nb.po

@@ -1,15 +1,15 @@
 # 
 # Translators:
-# Karoline Tufte Lien <[email protected]>, 2022
 # Caroline Hesthagen Holen <[email protected]>, 2023
 # Jen Jones Arnesen <[email protected]>, 2023
+# Karoline Tufte Lien <[email protected]>, 2023
 # 
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
 "POT-Creation-Date: 2023-07-06T08:30:33.216Z\n"
 "PO-Revision-Date: 2020-04-28 22:05+0000\n"
-"Last-Translator: Jen Jones Arnesen <jennifer@dhis2.org>, 2023\n"
+"Last-Translator: Karoline Tufte Lien <karoline@dhis2.org>, 2023\n"
 "Language-Team: Norwegian Bokmål (https://app.transifex.com/hisp-uio/teams/100509/nb/)\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -451,7 +451,7 @@ msgid "No results found"
 msgstr "Ingen resultater funnet"
 
 msgid "Not available offline"
-msgstr ""
+msgstr "Ikke tilgjengelig i frakoblet modus"
 
 msgid "Created by"
 msgstr "Opprettet av"

package.json

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

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

@@ -109,9 +109,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;

src/visualizations/config/adapters/dhis_highcharts/chart.js

@@ -22,7 +22,11 @@ const getEvents = () => ({
                 if (item.legendSymbol) {
                     item.legendSymbol.attr({
                         translateY:
-                            -((item.legendItem.getBBox().height * 0.75) / 4) +
+                            -(
+                                (item.legendItem.label.getBBox().height *
+                                    0.75) /
+                                4
+                            ) +
                             item.legendSymbol.r / 2,
                     })
                 }

src/visualizations/config/generators/highcharts/index.js

@@ -20,6 +20,8 @@ function drawLegendSymbolWrap() {
         H.seriesTypes.column.prototype,
         'drawLegendSymbol',
         function (proceed, legend, item) {
+            const legendItem = item.legendItem
+
             if (this.options.legendSet?.legends?.length) {
                 const ys = legend.baseline - legend.symbolHeight + 1, // y start
                     x = legend.symbolWidth / 2 > 8 ? legend.symbolWidth / 2 : 8, // x start
@@ -32,7 +34,7 @@ function drawLegendSymbolWrap() {
                     .attr({
                         fill: legends[legends.length >= 5 ? 1 : 0].color,
                     })
-                    .add(this.legendGroup)
+                    .add(legendItem.group)
                 this.chart.renderer
                     .path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye])
                     .attr({
@@ -42,13 +44,14 @@ function drawLegendSymbolWrap() {
                                 : legends.length - 1
                         ].color,
                     })
-                    .add(this.legendGroup)
+                    .add(legendItem.group)
             } else {
                 var options = legend.options,
                     symbolHeight = legend.symbolHeight,
                     square = options.squareSymbol,
                     symbolWidth = square ? symbolHeight : legend.symbolWidth
-                item.legendSymbol = this.chart.renderer
+
+                legendItem.symbol = this.chart.renderer
                     .rect(
                         square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
                         legend.baseline - symbolHeight + 1,
@@ -60,7 +63,7 @@ function drawLegendSymbolWrap() {
                     .attr({
                         zIndex: 3,
                     })
-                    .add(item.legendGroup)
+                    .add(legendItem.group)
             }
         }
     )