@dhis2/analytics 26.0.20 → 26.1.0
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/visualizations/config/adapters/dhis_highcharts/chart.js +1 -1
- package/build/cjs/visualizations/config/generators/highcharts/index.js +5 -4
- 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/visualizations/config/adapters/dhis_highcharts/chart.js +1 -1
- package/build/es/visualizations/config/generators/highcharts/index.js +5 -4
- 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";
|
|
@@ -25,7 +25,7 @@ const getEvents = () => ({
|
|
|
25
25
|
this.legend.allItems.forEach(item => {
|
|
26
26
|
if (item.legendSymbol) {
|
|
27
27
|
item.legendSymbol.attr({
|
|
28
|
-
translateY: -(item.legendItem.getBBox().height * 0.75 / 4) + item.legendSymbol.r / 2
|
|
28
|
+
translateY: -(item.legendItem.label.getBBox().height * 0.75 / 4) + item.legendSymbol.r / 2
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
});
|
|
@@ -23,6 +23,7 @@ function drawLegendSymbolWrap() {
|
|
|
23
23
|
const pick = _highcharts.default.pick;
|
|
24
24
|
_highcharts.default.wrap(_highcharts.default.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {
|
|
25
25
|
var _this$options$legendS, _this$options$legendS2;
|
|
26
|
+
const legendItem = item.legendItem;
|
|
26
27
|
if ((_this$options$legendS = this.options.legendSet) !== null && _this$options$legendS !== void 0 && (_this$options$legendS2 = _this$options$legendS.legends) !== null && _this$options$legendS2 !== void 0 && _this$options$legendS2.length) {
|
|
27
28
|
const ys = legend.baseline - legend.symbolHeight + 1,
|
|
28
29
|
// y start
|
|
@@ -32,18 +33,18 @@ function drawLegendSymbolWrap() {
|
|
|
32
33
|
const legends = this.options.legendSet.legends.sort((a, b) => a.startValue - b.startValue);
|
|
33
34
|
this.chart.renderer.path(['M', x, ys, 'A', 1, 1, 0, 0, 0, x, ye, 'V', ys]).attr({
|
|
34
35
|
fill: legends[legends.length >= 5 ? 1 : 0].color
|
|
35
|
-
}).add(
|
|
36
|
+
}).add(legendItem.group);
|
|
36
37
|
this.chart.renderer.path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye]).attr({
|
|
37
38
|
fill: legends[legends.length >= 5 ? legends.length - 2 : legends.length - 1].color
|
|
38
|
-
}).add(
|
|
39
|
+
}).add(legendItem.group);
|
|
39
40
|
} else {
|
|
40
41
|
var options = legend.options,
|
|
41
42
|
symbolHeight = legend.symbolHeight,
|
|
42
43
|
square = options.squareSymbol,
|
|
43
44
|
symbolWidth = square ? symbolHeight : legend.symbolWidth;
|
|
44
|
-
|
|
45
|
+
legendItem.symbol = this.chart.renderer.rect(square ? (legend.symbolWidth - symbolHeight) / 2 : 0, legend.baseline - symbolHeight + 1, symbolWidth, symbolHeight, pick(legend.options.symbolRadius, symbolHeight / 2)).addClass('highcharts-point').attr({
|
|
45
46
|
zIndex: 3
|
|
46
|
-
}).add(
|
|
47
|
+
}).add(legendItem.group);
|
|
47
48
|
}
|
|
48
49
|
});
|
|
49
50
|
}
|
|
@@ -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";
|
|
@@ -18,7 +18,7 @@ const getEvents = () => ({
|
|
|
18
18
|
this.legend.allItems.forEach(item => {
|
|
19
19
|
if (item.legendSymbol) {
|
|
20
20
|
item.legendSymbol.attr({
|
|
21
|
-
translateY: -(item.legendItem.getBBox().height * 0.75 / 4) + item.legendSymbol.r / 2
|
|
21
|
+
translateY: -(item.legendItem.label.getBBox().height * 0.75 / 4) + item.legendSymbol.r / 2
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
});
|
|
@@ -17,6 +17,7 @@ function drawLegendSymbolWrap() {
|
|
|
17
17
|
const pick = H.pick;
|
|
18
18
|
H.wrap(H.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {
|
|
19
19
|
var _this$options$legendS, _this$options$legendS2;
|
|
20
|
+
const legendItem = item.legendItem;
|
|
20
21
|
if ((_this$options$legendS = this.options.legendSet) !== null && _this$options$legendS !== void 0 && (_this$options$legendS2 = _this$options$legendS.legends) !== null && _this$options$legendS2 !== void 0 && _this$options$legendS2.length) {
|
|
21
22
|
const ys = legend.baseline - legend.symbolHeight + 1,
|
|
22
23
|
// y start
|
|
@@ -26,18 +27,18 @@ function drawLegendSymbolWrap() {
|
|
|
26
27
|
const legends = this.options.legendSet.legends.sort((a, b) => a.startValue - b.startValue);
|
|
27
28
|
this.chart.renderer.path(['M', x, ys, 'A', 1, 1, 0, 0, 0, x, ye, 'V', ys]).attr({
|
|
28
29
|
fill: legends[legends.length >= 5 ? 1 : 0].color
|
|
29
|
-
}).add(
|
|
30
|
+
}).add(legendItem.group);
|
|
30
31
|
this.chart.renderer.path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye]).attr({
|
|
31
32
|
fill: legends[legends.length >= 5 ? legends.length - 2 : legends.length - 1].color
|
|
32
|
-
}).add(
|
|
33
|
+
}).add(legendItem.group);
|
|
33
34
|
} else {
|
|
34
35
|
var options = legend.options,
|
|
35
36
|
symbolHeight = legend.symbolHeight,
|
|
36
37
|
square = options.squareSymbol,
|
|
37
38
|
symbolWidth = square ? symbolHeight : legend.symbolWidth;
|
|
38
|
-
|
|
39
|
+
legendItem.symbol = this.chart.renderer.rect(square ? (legend.symbolWidth - symbolHeight) / 2 : 0, legend.baseline - symbolHeight + 1, symbolWidth, symbolHeight, pick(legend.options.symbolRadius, symbolHeight / 2)).addClass('highcharts-point').attr({
|
|
39
40
|
zIndex: 3
|
|
40
|
-
}).add(
|
|
41
|
+
}).add(legendItem.group);
|
|
41
42
|
}
|
|
42
43
|
});
|
|
43
44
|
}
|