oolib 2.193.1 → 2.193.3
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.
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.ListItem = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
4
8
|
var styled_components_1 = require("styled-components");
|
|
5
9
|
var TextLoader_1 = require("../../../../components/LoadersAndProgress/TextLoader");
|
|
6
10
|
// import { genProfileImg } from "../../Dropdowns/utils/genProfileImg";
|
|
@@ -24,26 +28,26 @@ var ListItem = function (_a) {
|
|
|
24
28
|
}
|
|
25
29
|
};
|
|
26
30
|
if (loading) {
|
|
27
|
-
return (
|
|
28
|
-
|
|
31
|
+
return (react_1.default.createElement(styled_1.StyledListItemWrapper, { isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", S: S },
|
|
32
|
+
react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })));
|
|
29
33
|
}
|
|
30
34
|
var opIsSelected = function (thisOpData) {
|
|
31
35
|
return value === null || value === void 0 ? void 0 : value.some(function (d) { return d.value === thisOpData.value; });
|
|
32
36
|
};
|
|
33
|
-
return (
|
|
34
|
-
|
|
37
|
+
return (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none" } },
|
|
38
|
+
react_1.default.createElement("div", { ref: observerRef, style: {
|
|
35
39
|
display: "flex",
|
|
36
40
|
alignItems: "flex-start",
|
|
37
41
|
maxWidth: "36rem",
|
|
38
42
|
gap: icon ? "0.6rem" : "0.8rem",
|
|
39
43
|
} },
|
|
40
|
-
(image || icon || color || isMulti) && (
|
|
44
|
+
(image || icon || color || isMulti) && (react_1.default.createElement("div", { style: {
|
|
41
45
|
marginTop: "0.1rem",
|
|
42
46
|
display: "flex",
|
|
43
47
|
alignItems: "center",
|
|
44
48
|
gap: "0.5rem"
|
|
45
49
|
} },
|
|
46
|
-
isMulti && !isTagsStyle ?
|
|
50
|
+
isMulti && !isTagsStyle ? react_1.default.createElement(RadioAndCheckbox_1.CheckboxButton, { isSelected: opIsSelected(option) }) : null,
|
|
47
51
|
icon &&
|
|
48
52
|
(0, genIcon_1.genIcon)({
|
|
49
53
|
icon: icon,
|
|
@@ -52,8 +56,8 @@ var ListItem = function (_a) {
|
|
|
52
56
|
disabled: disabled
|
|
53
57
|
}),
|
|
54
58
|
color && (0, genColor_1.genColor)({ color: color }))),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
desc && (
|
|
59
|
+
react_1.default.createElement("div", null,
|
|
60
|
+
react_1.default.createElement(TypoComp, { semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || ""), style: { color: disabled ? grey40 : grey80 } }, (0, getText_1.getText)(display)),
|
|
61
|
+
desc && (react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { className: "OKE-Dropdown__optionDesc", style: { color: disabled ? grey40 : grey60, marginTop: "0.2rem" } }, (0, getText_1.getText)(desc)))))));
|
|
58
62
|
};
|
|
59
63
|
exports.ListItem = ListItem;
|
|
@@ -149,44 +149,45 @@ var renderBar = function (_a) {
|
|
|
149
149
|
? dataToRender[0].length
|
|
150
150
|
: 1;
|
|
151
151
|
var currentStackId = activeConfig.getStackId(stackIndex, breakdownDisplayTypeToRender);
|
|
152
|
-
return (react_1.default.createElement(
|
|
153
|
-
react_1.default.createElement(recharts_1.
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
: CALC_GROUPED_BAR_SECTION_Y_POS(index, stackIndex, dataToRender[0].length) + CHART_OFFSET_TOP, key: "cell-".concat(index, "-").concat(stackIndex), opacity: 1, height: _base_barchart_ui_configs_1._base_barchart_ui_configs.barHeight, fill: activeConfig.getCellFill(colorIdx, stackIndex, colors_1.dataVizColors) })); }))));
|
|
152
|
+
return (react_1.default.createElement(recharts_1.Bar, { key: "stack-".concat(stackIndex), radius: activeConfig.getBarRadius(stackIndex, breakdownDisplayTypeToRender, totalStacks), dataKey: activeConfig.getDataKey(stackIndex), stackId: currentStackId },
|
|
153
|
+
(!isBreakdownToRender || stackIndex === 0) && (react_1.default.createElement(recharts_1.LabelList, { dataKey: isBreakdownToRender ? function (dataPoint) { return dataPoint; } : "labels", offset: 0, position: "bottom", content: function (props) { return (react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, __assign({ CALC_SINGLE_BAR_SECTION_Y_POS: CALC_SINGLE_BAR_SECTION_Y_POS, TOT_HEIGHT_SINGLE_BAR_SECTION: TOT_HEIGHT_SINGLE_BAR_SECTION, TOT_HEIGHT_GROUPED_BAR_SECTION: isBreakdownToRender &&
|
|
154
|
+
breakdownDisplayTypeToRender === "grouped"
|
|
155
|
+
? CALC_TOTAL_HEIGHT_GROUPED_BAR_SECTION(dataToRender[0].length)
|
|
156
|
+
: undefined,
|
|
157
|
+
breakdownDisplayType: breakdownDisplayTypeToRender,
|
|
158
|
+
y: props.y,
|
|
159
|
+
width: props.width,
|
|
160
|
+
height: props.height,
|
|
161
|
+
value: isBreakdownToRender
|
|
162
|
+
? dataToRender[props.index].map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColorsText[(colorIdx + idx) % colors_1.dataVizColorsText.length] })); })
|
|
163
|
+
: props.value, showPercent: showPercent, showCount: showCount, showSumOfBreakdownValues: showSumOfBreakdownValues, opacity: 1, activeBar: activeBar, _base_barchart_ui_configs: _base_barchart_ui_configs_1._base_barchart_ui_configs, _debug_controls: _debug_controls }, (onClick
|
|
164
|
+
? {
|
|
165
|
+
onMouseOver: function (e, value) {
|
|
166
|
+
setActiveBar(isBreakdownToRender
|
|
167
|
+
? dataToRender[props.index][0].labels.name
|
|
168
|
+
: value.name);
|
|
169
|
+
},
|
|
170
|
+
onMouseOut: function () { return setActiveBar(undefined); },
|
|
171
|
+
onMouseDown: function (e, value) {
|
|
172
|
+
var name = isBreakdownToRender
|
|
173
|
+
? dataToRender[props.index][0].labels.name
|
|
174
|
+
: value.name;
|
|
175
|
+
setActiveBar(name);
|
|
176
|
+
onClick(name);
|
|
177
|
+
},
|
|
178
|
+
}
|
|
179
|
+
: {})))); } })),
|
|
180
|
+
dataToRender.map(function (d, index) { return (react_1.default.createElement(recharts_1.Cell, { y: !isBreakdownToRender || breakdownDisplayTypeToRender === "stacked"
|
|
181
|
+
? CALC_SINGLE_BAR_SECTION_Y_POS(index) + CHART_OFFSET_TOP
|
|
182
|
+
: CALC_GROUPED_BAR_SECTION_Y_POS(index, stackIndex, dataToRender[0].length) + CHART_OFFSET_TOP, key: "cell-".concat(index, "-").concat(stackIndex), opacity: 1, height: _base_barchart_ui_configs_1._base_barchart_ui_configs.barHeight, fill: activeConfig.getCellFill(colorIdx, stackIndex, colors_1.dataVizColors) })); })));
|
|
184
183
|
};
|
|
185
184
|
var BarChartRenderer = function (_a) {
|
|
186
185
|
var data = _a.data, isBreakdown = _a.isBreakdown, breakdownDisplayType = _a.breakdownDisplayType, showSumOfBreakdownValues = _a.showSumOfBreakdownValues, colorIdx = _a.colorIdx, showPercent = _a.showPercent, showCount = _a.showCount, activeBar = _a.activeBar, setActiveBar = _a.setActiveBar, onClick = _a.onClick,
|
|
187
186
|
//
|
|
188
|
-
mousePosition = _a.mousePosition, dataMaxValue = _a.dataMaxValue;
|
|
189
|
-
return (
|
|
187
|
+
mousePosition = _a.mousePosition, dataMaxValue = _a.dataMaxValue, containerWidth = _a.containerWidth;
|
|
188
|
+
return (
|
|
189
|
+
// <ResponsiveContainer width="100%" height="100%">
|
|
190
|
+
react_1.default.createElement(recharts_1.BarChart, { width: containerWidth, height: CALC_TOTAL_HEIGHT_OF_CHART({
|
|
190
191
|
isBreakdown: isBreakdown,
|
|
191
192
|
breakdownDisplayType: breakdownDisplayType,
|
|
192
193
|
data: data
|
|
@@ -234,10 +235,12 @@ var BarChartRenderer = function (_a) {
|
|
|
234
235
|
activeBar: activeBar,
|
|
235
236
|
setActiveBar: setActiveBar,
|
|
236
237
|
onClick: onClick,
|
|
237
|
-
}))
|
|
238
|
+
}))
|
|
239
|
+
// </ResponsiveContainer>
|
|
240
|
+
);
|
|
238
241
|
};
|
|
239
242
|
var BarChart = function (_a) {
|
|
240
|
-
var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f, _g = _a.summarizeAfterIdx, summarizeAfterIdx = _g === void 0 ?
|
|
243
|
+
var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f, _g = _a.summarizeAfterIdx, summarizeAfterIdx = _g === void 0 ? 3 : _g;
|
|
241
244
|
var isBreakdown = Array.isArray(valuePath);
|
|
242
245
|
var _h = (0, usePrepareData_1.usePrepareData)({
|
|
243
246
|
_data: _data,
|
|
@@ -252,6 +255,22 @@ var BarChart = function (_a) {
|
|
|
252
255
|
var _j = (0, react_1.useState)(undefined), activeBar = _j[0], setActiveBar = _j[1];
|
|
253
256
|
var mousePosition = (0, exports.useTrackMousePosition)().mousePosition;
|
|
254
257
|
// menu options for grouped and stacked
|
|
258
|
+
if (data.length === 0)
|
|
259
|
+
return react_1.default.createElement("div", null, "No data available");
|
|
260
|
+
// At the top of your component
|
|
261
|
+
var _k = (0, react_1.useState)(undefined), containerWidth = _k[0], setContainerWidth = _k[1];
|
|
262
|
+
// Use a ref and useEffect to measure parent width
|
|
263
|
+
var containerRef = (0, react_1.useRef)(null);
|
|
264
|
+
(0, react_1.useEffect)(function () {
|
|
265
|
+
var updateWidth = function () {
|
|
266
|
+
if (containerRef.current) {
|
|
267
|
+
setContainerWidth(containerRef.current.getBoundingClientRect().width);
|
|
268
|
+
}
|
|
269
|
+
};
|
|
270
|
+
updateWidth();
|
|
271
|
+
window.addEventListener('resize', updateWidth);
|
|
272
|
+
return function () { return window.removeEventListener('resize', updateWidth); };
|
|
273
|
+
}, []);
|
|
255
274
|
return (react_1.default.createElement("div", { style: {
|
|
256
275
|
height: "".concat(CALC_TOTAL_HEIGHT_OF_CHART({
|
|
257
276
|
isBreakdown: isBreakdown,
|
|
@@ -265,12 +284,11 @@ var BarChart = function (_a) {
|
|
|
265
284
|
width: "100%",
|
|
266
285
|
background: _debug_controls.chartWrapperBgColor,
|
|
267
286
|
} },
|
|
268
|
-
react_1.default.createElement(
|
|
269
|
-
react_1.default.createElement(
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
showSumOfBreakdownValues: true, colorIdx: colorIdx, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue }))))));
|
|
287
|
+
react_1.default.createElement("div", { ref: containerRef, style: { width: '100%', height: '100%' } },
|
|
288
|
+
react_1.default.createElement(BarChartRenderer, { containerWidth: containerWidth, data: data, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, colorIdx: colorIdx, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue }),
|
|
289
|
+
dataToSummarize && (react_1.default.createElement(BarChartRenderer, { containerWidth: containerWidth, data: dataToSummarize,
|
|
290
|
+
isBreakdown: true,
|
|
291
|
+
breakdownDisplayType: "stacked",
|
|
292
|
+
showSumOfBreakdownValues: true, colorIdx: colorIdx, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue })))));
|
|
275
293
|
};
|
|
276
294
|
exports.BarChart = BarChart;
|
|
@@ -28,6 +28,8 @@ var usePrepareData = function (_a) {
|
|
|
28
28
|
var _data = _a._data, labelPath = _a.labelPath, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, isBreakdown = _a.isBreakdown, showPercent = _a.showPercent, summarizeAfterIdx = _a.summarizeAfterIdx;
|
|
29
29
|
return (0, react_1.useMemo)(function () {
|
|
30
30
|
var finalData = __spreadArray([], _data, true);
|
|
31
|
+
if (finalData.length === 0)
|
|
32
|
+
return ({ data: finalData, dataToSummarize: [], dataMaxValue: 0 });
|
|
31
33
|
var totalCount = !isBreakdown
|
|
32
34
|
? (0, getTotalCount_1.getTotalCount)({ data: finalData, countPath: valuePath })
|
|
33
35
|
: finalData.map(function (d) {
|