oolib 2.198.1 → 2.198.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.
|
@@ -133,7 +133,7 @@ var CustomTooltip = function (props) {
|
|
|
133
133
|
} },
|
|
134
134
|
react_1.default.createElement(LegendTooltipGlyph_1.LegendTooltipGlyph, { color: entry.barColor }),
|
|
135
135
|
react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, showPercent ? entry.percentage + "%" : entry.count || "0")))); })),
|
|
136
|
-
showPercent && (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { style: {
|
|
136
|
+
showPercent && (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" } }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
|
|
137
137
|
height: rowHeights[index]
|
|
138
138
|
? rowHeights[index] + "px"
|
|
139
139
|
: "auto",
|
|
@@ -144,7 +144,7 @@ var CustomTooltip = function (props) {
|
|
|
144
144
|
display: "flex",
|
|
145
145
|
flexDirection: "column",
|
|
146
146
|
gap: "1rem",
|
|
147
|
-
} }, value.map(function (entry, index) { return (react_1.default.createElement("div", { onMouseOver: function () { return setTooltipTextClampStates(function (prev) {
|
|
147
|
+
} }, value.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, onMouseOver: function () { return setTooltipTextClampStates(function (prev) {
|
|
148
148
|
var newState = __spreadArray([], prev, true);
|
|
149
149
|
newState[index] = false;
|
|
150
150
|
return newState;
|
|
@@ -153,7 +153,7 @@ var CustomTooltip = function (props) {
|
|
|
153
153
|
newState[index] = true;
|
|
154
154
|
return newState;
|
|
155
155
|
}); }, ref: function (el) { return (tooltipLabelLengthRefs.current[index] = el); } },
|
|
156
|
-
react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, { clampT: tooltipTextClampStates[index]
|
|
156
|
+
react_1.default.createElement(UI_CAPTION_DF_WITH_LINE_CLAMP, { clampT: tooltipTextClampStates[index] }, entry.tooltipLabel))); }))))));
|
|
157
157
|
};
|
|
158
158
|
exports.default = CustomTooltip;
|
|
159
159
|
var templateObject_1;
|
|
@@ -48,30 +48,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
48
48
|
};
|
|
49
49
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
50
|
exports.BarChart = exports.FadeGradientWhenScroll = exports.useDecideLegendOrientation = exports.useTrackMousePosition = void 0;
|
|
51
|
+
var lodash_1 = __importDefault(require("lodash"));
|
|
51
52
|
var react_1 = __importStar(require("react"));
|
|
52
53
|
var recharts_1 = require("recharts");
|
|
53
54
|
var CustomizedLabel_1 = require("./comps/CustomizedLabel");
|
|
54
|
-
var
|
|
55
|
+
var __1 = require("../../../..");
|
|
55
56
|
var usePrepareData_1 = require("../utils/usePrepareData");
|
|
56
57
|
var _base_barchart_ui_configs_1 = require("./_base_barchart_ui_configs");
|
|
58
|
+
var CustomTooltip_1 = __importDefault(require("./comps/CustomTooltip"));
|
|
57
59
|
var Legend_1 = require("./comps/Legend");
|
|
58
|
-
var __1 = require("../../../..");
|
|
59
60
|
var useTrackMousePosition = function () {
|
|
60
61
|
var _a = (0, react_1.useState)({
|
|
61
62
|
x: 0,
|
|
62
63
|
y: 0,
|
|
63
64
|
}), mousePosition = _a[0], setMousePosition = _a[1];
|
|
65
|
+
// Create a throttled version of the mouse move handler
|
|
66
|
+
var throttledHandleMouseMove = (0, react_1.useCallback)(lodash_1.default.throttle(function (e) {
|
|
67
|
+
setMousePosition({ x: e.clientX, y: e.clientY });
|
|
68
|
+
}, 1000), // ~60fps (1000ms / 60 = 16.67ms)
|
|
69
|
+
[]);
|
|
64
70
|
(0, react_1.useEffect)(function () {
|
|
65
|
-
|
|
66
|
-
setMousePosition({ x: e.clientX, y: e.clientY });
|
|
67
|
-
};
|
|
68
|
-
window.addEventListener("mousemove", handleMouseMove);
|
|
71
|
+
window.addEventListener("mousemove", throttledHandleMouseMove);
|
|
69
72
|
// Clean up
|
|
70
73
|
return function () {
|
|
71
|
-
window.removeEventListener("mousemove",
|
|
74
|
+
window.removeEventListener("mousemove", throttledHandleMouseMove);
|
|
75
|
+
// Cancel any pending throttled calls
|
|
76
|
+
throttledHandleMouseMove.cancel();
|
|
72
77
|
};
|
|
73
|
-
}, []);
|
|
74
|
-
return
|
|
78
|
+
}, [throttledHandleMouseMove]);
|
|
79
|
+
return { mousePosition: mousePosition };
|
|
75
80
|
};
|
|
76
81
|
exports.useTrackMousePosition = useTrackMousePosition;
|
|
77
82
|
// CHART_OFFSET_TOP & CHART_OFFSET_TOP_BREAKDOWN is the y shift on top of the entire chart, because otherwise the chart starts with bar 1 at 0,0 coordinates
|
|
@@ -326,6 +331,7 @@ var BarChart = function (_a) {
|
|
|
326
331
|
widthThreshold: 500
|
|
327
332
|
}), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
|
|
328
333
|
var _l = (0, react_1.useState)(undefined), activeBar = _l[0], setActiveBar = _l[1];
|
|
334
|
+
// const mousePosition = {x: 0, y: 0}
|
|
329
335
|
var mousePosition = (0, exports.useTrackMousePosition)().mousePosition;
|
|
330
336
|
// menu options for grouped and stacked
|
|
331
337
|
if (data.length === 0)
|
|
@@ -100,8 +100,9 @@ var HeatMapCell = function (_a) {
|
|
|
100
100
|
var STYLED_UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_SEMIBOLD_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), (0, __1.clampText)(2));
|
|
101
101
|
var HiddenScrollContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE and Edge */\n \n &::-webkit-scrollbar {\n display: none; /* Webkit browsers */\n }\n"], ["\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE and Edge */\n \n &::-webkit-scrollbar {\n display: none; /* Webkit browsers */\n }\n"])));
|
|
102
102
|
var HeatMapGrid = function (_a) {
|
|
103
|
-
var
|
|
104
|
-
var
|
|
103
|
+
var _b;
|
|
104
|
+
var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _c = _a.labelPath, labelPath = _c === void 0 ? "name" : _c, onClick = _a.onClick, _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 ? 5 : _g, _h = _a.style, style = _h === void 0 ? {} : _h;
|
|
105
|
+
var _j = (0, usePrepareData_1.usePrepareData)({
|
|
105
106
|
_data: _data,
|
|
106
107
|
labelPath: labelPath,
|
|
107
108
|
valuePath: valuePath,
|
|
@@ -110,11 +111,11 @@ var HeatMapGrid = function (_a) {
|
|
|
110
111
|
isBreakdown: true,
|
|
111
112
|
showPercent: showPercent,
|
|
112
113
|
summarizeAfterIdx: summarizeAfterIdx,
|
|
113
|
-
}), data =
|
|
114
|
+
}), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
|
|
114
115
|
var scrollableRef = (0, react_1.useRef)(null);
|
|
115
|
-
var
|
|
116
|
+
var _k = (0, useFader_1.useFader)(scrollableRef), setFader = _k.setFader, showFader = _k.showFader, showHorizontalFader = _k.showHorizontalFader;
|
|
116
117
|
// Replace: const { xAxisWidth, yAxisWidth, measurementRef } = useAxisDimensions(data, _configs.axisLabelWidth);
|
|
117
|
-
var
|
|
118
|
+
var _l = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _l.xWidth, yWidth = _l.yWidth, setHorizontalRef = _l.setHorizontalRef, setVerticalRef = _l.setVerticalRef;
|
|
118
119
|
return (react_1.default.createElement("div", { style: __assign({ display: "grid", gridTemplateColumns: "".concat(yWidth, "px 1fr"), gridTemplateRows: "".concat(xWidth, "px 1fr"), gap: _configs.gridGap + 'px', height: '100%', position: 'relative' }, style) },
|
|
119
120
|
react_1.default.createElement("div", { style: { gridRow: 1, gridColumn: 1 } }),
|
|
120
121
|
react_1.default.createElement(HiddenScrollContainer, { style: {
|
|
@@ -135,7 +136,7 @@ var HeatMapGrid = function (_a) {
|
|
|
135
136
|
alignItems: "center",
|
|
136
137
|
gap: _configs.gridGap + "px",
|
|
137
138
|
minWidth: 'max-content',
|
|
138
|
-
} }, data[0].map(function (dd, index) { return (react_1.default.createElement("div", { key: dd.labels.tooltipLabel, style: {
|
|
139
|
+
} }, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.map(function (dd, index) { return (react_1.default.createElement("div", { key: dd.labels.tooltipLabel, style: {
|
|
139
140
|
width: _configs.cellSize + "px",
|
|
140
141
|
height: xWidth + "px",
|
|
141
142
|
display: "flex",
|