@dhis2/analytics 26.0.21 → 26.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/__demo__/PivotTable.stories.js +37 -0
- package/build/cjs/components/PivotTable/PivotTableTitleRow.js +48 -13
- package/build/cjs/components/PivotTable/PivotTableTitleRows.js +3 -6
- package/build/cjs/components/PivotTable/styles/PivotTable.style.js +2 -2
- package/build/cjs/locales/nb/translations.json +1 -1
- package/build/es/__demo__/PivotTable.stories.js +37 -0
- package/build/es/components/PivotTable/PivotTableTitleRow.js +49 -14
- package/build/es/components/PivotTable/PivotTableTitleRows.js +3 -6
- package/build/es/components/PivotTable/styles/PivotTable.style.js +2 -2
- package/build/es/locales/nb/translations.json +1 -1
- package/package.json +1 -1
|
@@ -1166,4 +1166,41 @@ ResizingPivotTable.propTypes = {
|
|
|
1166
1166
|
data: degsData,
|
|
1167
1167
|
visualization: visualization
|
|
1168
1168
|
}));
|
|
1169
|
+
});
|
|
1170
|
+
(0, _react.storiesOf)('PivotTable', module).add('Truncated header cell', (_, _ref50) => {
|
|
1171
|
+
let {
|
|
1172
|
+
pivotTableOptions
|
|
1173
|
+
} = _ref50;
|
|
1174
|
+
const widths = [250, 200, 500];
|
|
1175
|
+
const [width, setWidth] = (0, _react2.useState)(250);
|
|
1176
|
+
const toggleWidth = () => setWidth(currentWidth => {
|
|
1177
|
+
var _widths;
|
|
1178
|
+
return (_widths = widths[widths.indexOf(currentWidth) + 1]) !== null && _widths !== void 0 ? _widths : widths[0];
|
|
1179
|
+
});
|
|
1180
|
+
const visualization = {
|
|
1181
|
+
..._narrativeVisualization.default,
|
|
1182
|
+
...visualizationReset,
|
|
1183
|
+
...pivotTableOptions,
|
|
1184
|
+
columns: _narrativeVisualization.default.filters,
|
|
1185
|
+
filters: _narrativeVisualization.default.columns,
|
|
1186
|
+
rowTotals: true,
|
|
1187
|
+
colTotals: true
|
|
1188
|
+
};
|
|
1189
|
+
const data = {
|
|
1190
|
+
...narrativeData,
|
|
1191
|
+
rows: [narrativeData.rows[0]]
|
|
1192
|
+
};
|
|
1193
|
+
return /*#__PURE__*/_react2.default.createElement("div", {
|
|
1194
|
+
style: {
|
|
1195
|
+
width,
|
|
1196
|
+
height: 600,
|
|
1197
|
+
marginTop: 50,
|
|
1198
|
+
transition: 'width 1s'
|
|
1199
|
+
}
|
|
1200
|
+
}, /*#__PURE__*/_react2.default.createElement("button", {
|
|
1201
|
+
onClick: toggleWidth
|
|
1202
|
+
}, "Toggle width"), /*#__PURE__*/_react2.default.createElement(_index.PivotTable, {
|
|
1203
|
+
data: data,
|
|
1204
|
+
visualization: visualization
|
|
1205
|
+
}));
|
|
1169
1206
|
});
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.PivotTableTitleRow = void 0;
|
|
7
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
8
|
+
var _ui = require("@dhis2/ui");
|
|
8
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
11
|
var _PivotTableCell = require("./PivotTableCell.js");
|
|
@@ -14,35 +15,70 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
14
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
17
|
const PivotTableTitleRow = _ref => {
|
|
18
|
+
var _scrollPosition$x;
|
|
17
19
|
let {
|
|
18
20
|
title,
|
|
19
21
|
scrollPosition,
|
|
20
|
-
containerWidth
|
|
21
|
-
totalWidth
|
|
22
|
+
containerWidth
|
|
22
23
|
} = _ref;
|
|
24
|
+
const containerRef = (0, _react.useRef)(null);
|
|
25
|
+
const [scrollWidth, setScrollWidth] = (0, _react.useState)(0);
|
|
26
|
+
const [isTitleTruncated, setIsTitleTruncated] = (0, _react.useState)(false);
|
|
23
27
|
const engine = (0, _PivotTableEngineContext.usePivotTableEngine)();
|
|
24
28
|
const columnCount = engine.width + engine.rowDepth;
|
|
25
|
-
const
|
|
29
|
+
const maxWidth = containerWidth - (engine.cellPadding * 2 + 2);
|
|
30
|
+
const marginLeft = Math.max(0, (_scrollPosition$x = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.x) !== null && _scrollPosition$x !== void 0 ? _scrollPosition$x : 0);
|
|
26
31
|
(0, _react.useEffect)(() => {
|
|
27
|
-
|
|
28
|
-
|
|
32
|
+
if (containerRef.current) {
|
|
33
|
+
/* Only set `scrollWidth` once, because during a CSS transition
|
|
34
|
+
* the reported value can sometimes be equal to `clientWidth`
|
|
35
|
+
* even though the text doesn't fit. Due to `white-space: nowrap`
|
|
36
|
+
* and `overflow: hidden` the `scrollWidth` should remain constant,
|
|
37
|
+
* so we can assume this initial value is correct. */
|
|
38
|
+
if (!scrollWidth) {
|
|
39
|
+
setScrollWidth(containerRef.current.scrollWidth);
|
|
40
|
+
}
|
|
41
|
+
const currentScrollWidth = scrollWidth !== null && scrollWidth !== void 0 ? scrollWidth : containerRef.current.scrollWidth;
|
|
42
|
+
const newIsTitleTruncated = currentScrollWidth > containerRef.current.clientWidth;
|
|
43
|
+
if (newIsTitleTruncated !== isTitleTruncated) {
|
|
44
|
+
setIsTitleTruncated(newIsTitleTruncated);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}, [containerWidth, scrollWidth, isTitleTruncated]);
|
|
29
48
|
return /*#__PURE__*/_react.default.createElement("tr", {
|
|
30
49
|
className: `jsx-${_PivotTableStyle.cell.__hash}`
|
|
31
50
|
}, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
32
51
|
id: _PivotTableStyle.cell.__hash
|
|
33
52
|
}, _PivotTableStyle.cell), /*#__PURE__*/_react.default.createElement(_PivotTableCell.PivotTableCell, {
|
|
34
53
|
isHeader: true,
|
|
35
|
-
classes: ['column-header', 'title'],
|
|
54
|
+
classes: ['column-header', 'title-cell'],
|
|
36
55
|
colSpan: columnCount
|
|
37
56
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
38
57
|
style: {
|
|
39
|
-
marginLeft
|
|
40
|
-
maxWidth
|
|
41
|
-
textAlign: 'center'
|
|
58
|
+
marginLeft,
|
|
59
|
+
maxWidth
|
|
42
60
|
},
|
|
61
|
+
ref: containerRef,
|
|
43
62
|
"data-test": "visualization-title",
|
|
44
|
-
className: `jsx-${_PivotTableStyle.cell.__hash}`
|
|
45
|
-
},
|
|
63
|
+
className: `jsx-${_PivotTableStyle.cell.__hash}` + " " + "title-cell-content"
|
|
64
|
+
}, isTitleTruncated ? /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
|
|
65
|
+
content: title
|
|
66
|
+
}, _ref2 => {
|
|
67
|
+
let {
|
|
68
|
+
ref: tooltipRef,
|
|
69
|
+
onMouseOver,
|
|
70
|
+
onMouseOut
|
|
71
|
+
} = _ref2;
|
|
72
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
73
|
+
ref: tooltipRef,
|
|
74
|
+
onMouseOver: onMouseOver,
|
|
75
|
+
onMouseOut: onMouseOut,
|
|
76
|
+
style: {
|
|
77
|
+
maxWidth
|
|
78
|
+
},
|
|
79
|
+
className: `jsx-${_PivotTableStyle.cell.__hash}` + " " + "title-cell-content"
|
|
80
|
+
}, title);
|
|
81
|
+
}) : title)));
|
|
46
82
|
};
|
|
47
83
|
exports.PivotTableTitleRow = PivotTableTitleRow;
|
|
48
84
|
PivotTableTitleRow.propTypes = {
|
|
@@ -50,6 +86,5 @@ PivotTableTitleRow.propTypes = {
|
|
|
50
86
|
scrollPosition: _propTypes.default.shape({
|
|
51
87
|
x: _propTypes.default.number.isRequired
|
|
52
88
|
}).isRequired,
|
|
53
|
-
title: _propTypes.default.string.isRequired
|
|
54
|
-
totalWidth: _propTypes.default.number.isRequired
|
|
89
|
+
title: _propTypes.default.string.isRequired
|
|
55
90
|
};
|
|
@@ -20,18 +20,15 @@ const PivotTableTitleRows = _ref => {
|
|
|
20
20
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, engine.options.title ? /*#__PURE__*/_react.default.createElement(_PivotTableTitleRow.PivotTableTitleRow, {
|
|
21
21
|
title: engine.options.title,
|
|
22
22
|
scrollPosition: clippingResult.scrollPosition,
|
|
23
|
-
containerWidth: width
|
|
24
|
-
totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
|
|
23
|
+
containerWidth: width
|
|
25
24
|
}) : null, engine.options.subtitle ? /*#__PURE__*/_react.default.createElement(_PivotTableTitleRow.PivotTableTitleRow, {
|
|
26
25
|
title: engine.options.subtitle,
|
|
27
26
|
scrollPosition: clippingResult.scrollPosition,
|
|
28
|
-
containerWidth: width
|
|
29
|
-
totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
|
|
27
|
+
containerWidth: width
|
|
30
28
|
}) : null, (_engine$visualization = engine.visualization.filters) !== null && _engine$visualization !== void 0 && _engine$visualization.length ? /*#__PURE__*/_react.default.createElement(_PivotTableTitleRow.PivotTableTitleRow, {
|
|
31
29
|
title: (0, _getFilterText.default)(engine.visualization.filters, engine.rawData.metaData),
|
|
32
30
|
scrollPosition: clippingResult.scrollPosition,
|
|
33
|
-
containerWidth: width
|
|
34
|
-
totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
|
|
31
|
+
containerWidth: width
|
|
35
32
|
}) : null);
|
|
36
33
|
};
|
|
37
34
|
exports.PivotTableTitleRows = PivotTableTitleRows;
|
|
@@ -9,9 +9,9 @@ var _pivotTableConstants = require("../../../modules/pivotTable/pivotTableConsta
|
|
|
9
9
|
const table = [`div.pivot-table-container{font-family:'Roboto',Arial,sans-serif;overflow:auto;color:${_ui.colors.grey900};}`, `table{border-spacing:0;white-space:nowrap;box-sizing:border-box;text-align:center;border:1px solid ${_pivotTableConstants.BORDER_COLOR};border-width:1px 1px 0 0;}`, "table.fixed-headers{border-width:0 0 0 1px;}", "table.fixed-headers tr th,table.fixed-headers tr td{border-width:0 1px 1px 0;}", "table.fixed-column-headers{border-width:0 1px 0 0;}", "table.fixed-column-headers tr th,table.fixed-column-headers tr td{border-width:0 0 1px 1px;}", `table.fixed-headers thead tr:first-of-type th,table.fixed-column-headers thead tr:first-of-type th{border-top:1px solid ${_pivotTableConstants.BORDER_COLOR};}`, "table.fixed-row-headers{border-width:0 0 1px 1px;}", "table.fixed-row-headers tr th,table.fixed-row-headers tr td{border-width:1px 1px 0 0;}"];
|
|
10
10
|
exports.table = table;
|
|
11
11
|
table.__hash = "712241344";
|
|
12
|
-
const cell = [`td.jsx-
|
|
12
|
+
const cell = [`td.jsx-2721390151,th.jsx-2721390151{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ${_pivotTableConstants.BORDER_COLOR};border-width:0 0 1px 1px;cursor:default;}`, "th.fixed-header.jsx-2721390151{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", `.fontsize-SMALL.jsx-2721390151{font-size:${_pivotTableConstants.FONT_SIZE_SMALL}px;line-height:${_pivotTableConstants.FONT_SIZE_SMALL}px;}`, `.fontsize-NORMAL.jsx-2721390151{font-size:${_pivotTableConstants.FONT_SIZE_NORMAL}px;line-height:${_pivotTableConstants.FONT_SIZE_NORMAL}px;}`, `.fontsize-LARGE.jsx-2721390151{font-size:${_pivotTableConstants.FONT_SIZE_LARGE}px;line-height:${_pivotTableConstants.FONT_SIZE_LARGE}px;}`, `.displaydensity-COMPACT.jsx-2721390151{padding:${_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMPACT}px;}`, `.displaydensity-NORMAL.jsx-2721390151{padding:${_pivotTableConstants.DISPLAY_DENSITY_PADDING_NORMAL}px;}`, `.displaydensity-COMFORTABLE.jsx-2721390151{padding:${_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMFORTABLE}px;}`, ".column-header.jsx-2721390151{background-color:#dae6f8;}", "div.column-header-inner.jsx-2721390151{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-2721390151{font-weight:bold;background-color:#cddaed;padding:0;}", ".title-cell-content.jsx-2721390151{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}", `.title-cell.displaydensity-COMPACT.jsx-2721390151>.title-cell-content.jsx-2721390151{padding:${_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMPACT}px;}`, `.title-cell.displaydensity-NORMAL.jsx-2721390151>.title-cell-content.jsx-2721390151{padding:${_pivotTableConstants.DISPLAY_DENSITY_PADDING_NORMAL}px;}`, `.title-cell.displaydensity-COMFORTABLE.jsx-2721390151>.title-cell-content.jsx-2721390151{padding:${_pivotTableConstants.DISPLAY_DENSITY_PADDING_COMFORTABLE}px;}`, ".row-header.jsx-2721390151{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-2721390151{text-align:left;}", ".empty-header.jsx-2721390151{background-color:#cddaed;}", ".total-header.jsx-2721390151{background-color:#bac6d8;}", ".value.jsx-2721390151{background-color:#ffffff;}", ".TEXT.jsx-2721390151{text-align:left;}", ".NUMBER.jsx-2721390151{text-align:right;}", ".clickable.jsx-2721390151{cursor:pointer;}", ".value.jsx-2721390151:hover{background-color:#f3f3f3;}", ".subtotal.jsx-2721390151{background-color:#f4f4f4;}", ".total.jsx-2721390151{background-color:#d8d8d8;}", ".column-header-label.jsx-2721390151{overflow:hidden;text-overflow:ellipsis;}"];
|
|
13
13
|
exports.cell = cell;
|
|
14
|
-
cell.__hash = "
|
|
14
|
+
cell.__hash = "2721390151";
|
|
15
15
|
const sortIcon = [`.fontsize-SMALL.jsx-2877616992{height:${_pivotTableConstants.FONT_SIZE_SMALL}px;margin-bottom:1px;margin-left:5px;}`, `.fontsize-NORMAL.jsx-2877616992{height:${_pivotTableConstants.FONT_SIZE_NORMAL}px;max-height:11px;margin-bottom:2px;margin-left:6px;}`, `.fontsize-LARGE.jsx-2877616992{height:${_pivotTableConstants.FONT_SIZE_LARGE}px;margin-bottom:2px;margin-left:7px;}`];
|
|
16
16
|
exports.sortIcon = sortIcon;
|
|
17
17
|
sortIcon.__hash = "2877616992";
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
"Search for a user": "",
|
|
141
141
|
"Searching for \"{{- searchText}}\"": "",
|
|
142
142
|
"No results found": "Ingen resultater funnet",
|
|
143
|
-
"Not available offline": "",
|
|
143
|
+
"Not available offline": "Ikke tilgjengelig i frakoblet modus",
|
|
144
144
|
"Created by": "Opprettet av",
|
|
145
145
|
"Anyone": "Hvem som helst",
|
|
146
146
|
"Only you": "Bare deg",
|
|
@@ -1161,4 +1161,41 @@ storiesOf('PivotTable', module).add('DEGS', (_, _ref49) => {
|
|
|
1161
1161
|
data: degsData,
|
|
1162
1162
|
visualization: visualization
|
|
1163
1163
|
}));
|
|
1164
|
+
});
|
|
1165
|
+
storiesOf('PivotTable', module).add('Truncated header cell', (_, _ref50) => {
|
|
1166
|
+
let {
|
|
1167
|
+
pivotTableOptions
|
|
1168
|
+
} = _ref50;
|
|
1169
|
+
const widths = [250, 200, 500];
|
|
1170
|
+
const [width, setWidth] = useState(250);
|
|
1171
|
+
const toggleWidth = () => setWidth(currentWidth => {
|
|
1172
|
+
var _widths;
|
|
1173
|
+
return (_widths = widths[widths.indexOf(currentWidth) + 1]) !== null && _widths !== void 0 ? _widths : widths[0];
|
|
1174
|
+
});
|
|
1175
|
+
const visualization = {
|
|
1176
|
+
...narrativeVisualization,
|
|
1177
|
+
...visualizationReset,
|
|
1178
|
+
...pivotTableOptions,
|
|
1179
|
+
columns: narrativeVisualization.filters,
|
|
1180
|
+
filters: narrativeVisualization.columns,
|
|
1181
|
+
rowTotals: true,
|
|
1182
|
+
colTotals: true
|
|
1183
|
+
};
|
|
1184
|
+
const data = {
|
|
1185
|
+
...narrativeData,
|
|
1186
|
+
rows: [narrativeData.rows[0]]
|
|
1187
|
+
};
|
|
1188
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1189
|
+
style: {
|
|
1190
|
+
width,
|
|
1191
|
+
height: 600,
|
|
1192
|
+
marginTop: 50,
|
|
1193
|
+
transition: 'width 1s'
|
|
1194
|
+
}
|
|
1195
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
1196
|
+
onClick: toggleWidth
|
|
1197
|
+
}, "Toggle width"), /*#__PURE__*/React.createElement(PivotTable, {
|
|
1198
|
+
data: data,
|
|
1199
|
+
visualization: visualization
|
|
1200
|
+
}));
|
|
1164
1201
|
});
|
|
@@ -1,45 +1,80 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
|
+
import { Tooltip } from '@dhis2/ui';
|
|
2
3
|
import PropTypes from 'prop-types';
|
|
3
|
-
import React, { useState, useEffect } from 'react';
|
|
4
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
4
5
|
import { PivotTableCell } from './PivotTableCell.js';
|
|
5
6
|
import { usePivotTableEngine } from './PivotTableEngineContext.js';
|
|
6
7
|
import { cell as cellStyle } from './styles/PivotTable.style.js';
|
|
7
8
|
export const PivotTableTitleRow = _ref => {
|
|
9
|
+
var _scrollPosition$x;
|
|
8
10
|
let {
|
|
9
11
|
title,
|
|
10
12
|
scrollPosition,
|
|
11
|
-
containerWidth
|
|
12
|
-
totalWidth
|
|
13
|
+
containerWidth
|
|
13
14
|
} = _ref;
|
|
15
|
+
const containerRef = useRef(null);
|
|
16
|
+
const [scrollWidth, setScrollWidth] = useState(0);
|
|
17
|
+
const [isTitleTruncated, setIsTitleTruncated] = useState(false);
|
|
14
18
|
const engine = usePivotTableEngine();
|
|
15
19
|
const columnCount = engine.width + engine.rowDepth;
|
|
16
|
-
const
|
|
20
|
+
const maxWidth = containerWidth - (engine.cellPadding * 2 + 2);
|
|
21
|
+
const marginLeft = Math.max(0, (_scrollPosition$x = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.x) !== null && _scrollPosition$x !== void 0 ? _scrollPosition$x : 0);
|
|
17
22
|
useEffect(() => {
|
|
18
|
-
|
|
19
|
-
|
|
23
|
+
if (containerRef.current) {
|
|
24
|
+
/* Only set `scrollWidth` once, because during a CSS transition
|
|
25
|
+
* the reported value can sometimes be equal to `clientWidth`
|
|
26
|
+
* even though the text doesn't fit. Due to `white-space: nowrap`
|
|
27
|
+
* and `overflow: hidden` the `scrollWidth` should remain constant,
|
|
28
|
+
* so we can assume this initial value is correct. */
|
|
29
|
+
if (!scrollWidth) {
|
|
30
|
+
setScrollWidth(containerRef.current.scrollWidth);
|
|
31
|
+
}
|
|
32
|
+
const currentScrollWidth = scrollWidth !== null && scrollWidth !== void 0 ? scrollWidth : containerRef.current.scrollWidth;
|
|
33
|
+
const newIsTitleTruncated = currentScrollWidth > containerRef.current.clientWidth;
|
|
34
|
+
if (newIsTitleTruncated !== isTitleTruncated) {
|
|
35
|
+
setIsTitleTruncated(newIsTitleTruncated);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}, [containerWidth, scrollWidth, isTitleTruncated]);
|
|
20
39
|
return /*#__PURE__*/React.createElement("tr", {
|
|
21
40
|
className: `jsx-${cellStyle.__hash}`
|
|
22
41
|
}, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
23
42
|
id: cellStyle.__hash
|
|
24
43
|
}, cellStyle), /*#__PURE__*/React.createElement(PivotTableCell, {
|
|
25
44
|
isHeader: true,
|
|
26
|
-
classes: ['column-header', 'title'],
|
|
45
|
+
classes: ['column-header', 'title-cell'],
|
|
27
46
|
colSpan: columnCount
|
|
28
47
|
}, /*#__PURE__*/React.createElement("div", {
|
|
29
48
|
style: {
|
|
30
|
-
marginLeft
|
|
31
|
-
maxWidth
|
|
32
|
-
textAlign: 'center'
|
|
49
|
+
marginLeft,
|
|
50
|
+
maxWidth
|
|
33
51
|
},
|
|
52
|
+
ref: containerRef,
|
|
34
53
|
"data-test": "visualization-title",
|
|
35
|
-
className: `jsx-${cellStyle.__hash}`
|
|
36
|
-
},
|
|
54
|
+
className: `jsx-${cellStyle.__hash}` + " " + "title-cell-content"
|
|
55
|
+
}, isTitleTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
56
|
+
content: title
|
|
57
|
+
}, _ref2 => {
|
|
58
|
+
let {
|
|
59
|
+
ref: tooltipRef,
|
|
60
|
+
onMouseOver,
|
|
61
|
+
onMouseOut
|
|
62
|
+
} = _ref2;
|
|
63
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
ref: tooltipRef,
|
|
65
|
+
onMouseOver: onMouseOver,
|
|
66
|
+
onMouseOut: onMouseOut,
|
|
67
|
+
style: {
|
|
68
|
+
maxWidth
|
|
69
|
+
},
|
|
70
|
+
className: `jsx-${cellStyle.__hash}` + " " + "title-cell-content"
|
|
71
|
+
}, title);
|
|
72
|
+
}) : title)));
|
|
37
73
|
};
|
|
38
74
|
PivotTableTitleRow.propTypes = {
|
|
39
75
|
containerWidth: PropTypes.number.isRequired,
|
|
40
76
|
scrollPosition: PropTypes.shape({
|
|
41
77
|
x: PropTypes.number.isRequired
|
|
42
78
|
}).isRequired,
|
|
43
|
-
title: PropTypes.string.isRequired
|
|
44
|
-
totalWidth: PropTypes.number.isRequired
|
|
79
|
+
title: PropTypes.string.isRequired
|
|
45
80
|
};
|
|
@@ -13,18 +13,15 @@ export const PivotTableTitleRows = _ref => {
|
|
|
13
13
|
return /*#__PURE__*/React.createElement(React.Fragment, null, engine.options.title ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
|
|
14
14
|
title: engine.options.title,
|
|
15
15
|
scrollPosition: clippingResult.scrollPosition,
|
|
16
|
-
containerWidth: width
|
|
17
|
-
totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
|
|
16
|
+
containerWidth: width
|
|
18
17
|
}) : null, engine.options.subtitle ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
|
|
19
18
|
title: engine.options.subtitle,
|
|
20
19
|
scrollPosition: clippingResult.scrollPosition,
|
|
21
|
-
containerWidth: width
|
|
22
|
-
totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
|
|
20
|
+
containerWidth: width
|
|
23
21
|
}) : null, (_engine$visualization = engine.visualization.filters) !== null && _engine$visualization !== void 0 && _engine$visualization.length ? /*#__PURE__*/React.createElement(PivotTableTitleRow, {
|
|
24
22
|
title: getFilterText(engine.visualization.filters, engine.rawData.metaData),
|
|
25
23
|
scrollPosition: clippingResult.scrollPosition,
|
|
26
|
-
containerWidth: width
|
|
27
|
-
totalWidth: engine.adaptiveClippingController.columns.totalSize + engine.adaptiveClippingController.columns.headerSize
|
|
24
|
+
containerWidth: width
|
|
28
25
|
}) : null);
|
|
29
26
|
};
|
|
30
27
|
PivotTableTitleRows.propTypes = {
|
|
@@ -2,7 +2,7 @@ import { colors } from '@dhis2/ui';
|
|
|
2
2
|
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';
|
|
3
3
|
export const table = [`div.pivot-table-container{font-family:'Roboto',Arial,sans-serif;overflow:auto;color:${colors.grey900};}`, `table{border-spacing:0;white-space:nowrap;box-sizing:border-box;text-align:center;border:1px solid ${BORDER_COLOR};border-width:1px 1px 0 0;}`, "table.fixed-headers{border-width:0 0 0 1px;}", "table.fixed-headers tr th,table.fixed-headers tr td{border-width:0 1px 1px 0;}", "table.fixed-column-headers{border-width:0 1px 0 0;}", "table.fixed-column-headers tr th,table.fixed-column-headers tr td{border-width:0 0 1px 1px;}", `table.fixed-headers thead tr:first-of-type th,table.fixed-column-headers thead tr:first-of-type th{border-top:1px solid ${BORDER_COLOR};}`, "table.fixed-row-headers{border-width:0 0 1px 1px;}", "table.fixed-row-headers tr th,table.fixed-row-headers tr td{border-width:1px 1px 0 0;}"];
|
|
4
4
|
table.__hash = "712241344";
|
|
5
|
-
export const cell = [`td.jsx-
|
|
6
|
-
cell.__hash = "
|
|
5
|
+
export const cell = [`td.jsx-2721390151,th.jsx-2721390151{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ${BORDER_COLOR};border-width:0 0 1px 1px;cursor:default;}`, "th.fixed-header.jsx-2721390151{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", `.fontsize-SMALL.jsx-2721390151{font-size:${FONT_SIZE_SMALL}px;line-height:${FONT_SIZE_SMALL}px;}`, `.fontsize-NORMAL.jsx-2721390151{font-size:${FONT_SIZE_NORMAL}px;line-height:${FONT_SIZE_NORMAL}px;}`, `.fontsize-LARGE.jsx-2721390151{font-size:${FONT_SIZE_LARGE}px;line-height:${FONT_SIZE_LARGE}px;}`, `.displaydensity-COMPACT.jsx-2721390151{padding:${DISPLAY_DENSITY_PADDING_COMPACT}px;}`, `.displaydensity-NORMAL.jsx-2721390151{padding:${DISPLAY_DENSITY_PADDING_NORMAL}px;}`, `.displaydensity-COMFORTABLE.jsx-2721390151{padding:${DISPLAY_DENSITY_PADDING_COMFORTABLE}px;}`, ".column-header.jsx-2721390151{background-color:#dae6f8;}", "div.column-header-inner.jsx-2721390151{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-2721390151{font-weight:bold;background-color:#cddaed;padding:0;}", ".title-cell-content.jsx-2721390151{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}", `.title-cell.displaydensity-COMPACT.jsx-2721390151>.title-cell-content.jsx-2721390151{padding:${DISPLAY_DENSITY_PADDING_COMPACT}px;}`, `.title-cell.displaydensity-NORMAL.jsx-2721390151>.title-cell-content.jsx-2721390151{padding:${DISPLAY_DENSITY_PADDING_NORMAL}px;}`, `.title-cell.displaydensity-COMFORTABLE.jsx-2721390151>.title-cell-content.jsx-2721390151{padding:${DISPLAY_DENSITY_PADDING_COMFORTABLE}px;}`, ".row-header.jsx-2721390151{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-2721390151{text-align:left;}", ".empty-header.jsx-2721390151{background-color:#cddaed;}", ".total-header.jsx-2721390151{background-color:#bac6d8;}", ".value.jsx-2721390151{background-color:#ffffff;}", ".TEXT.jsx-2721390151{text-align:left;}", ".NUMBER.jsx-2721390151{text-align:right;}", ".clickable.jsx-2721390151{cursor:pointer;}", ".value.jsx-2721390151:hover{background-color:#f3f3f3;}", ".subtotal.jsx-2721390151{background-color:#f4f4f4;}", ".total.jsx-2721390151{background-color:#d8d8d8;}", ".column-header-label.jsx-2721390151{overflow:hidden;text-overflow:ellipsis;}"];
|
|
6
|
+
cell.__hash = "2721390151";
|
|
7
7
|
export const sortIcon = [`.fontsize-SMALL.jsx-2877616992{height:${FONT_SIZE_SMALL}px;margin-bottom:1px;margin-left:5px;}`, `.fontsize-NORMAL.jsx-2877616992{height:${FONT_SIZE_NORMAL}px;max-height:11px;margin-bottom:2px;margin-left:6px;}`, `.fontsize-LARGE.jsx-2877616992{height:${FONT_SIZE_LARGE}px;margin-bottom:2px;margin-left:7px;}`];
|
|
8
8
|
sortIcon.__hash = "2877616992";
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
"Search for a user": "",
|
|
141
141
|
"Searching for \"{{- searchText}}\"": "",
|
|
142
142
|
"No results found": "Ingen resultater funnet",
|
|
143
|
-
"Not available offline": "",
|
|
143
|
+
"Not available offline": "Ikke tilgjengelig i frakoblet modus",
|
|
144
144
|
"Created by": "Opprettet av",
|
|
145
145
|
"Anyone": "Hvem som helst",
|
|
146
146
|
"Only you": "Bare deg",
|