oolib 2.197.2 → 2.197.4
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.
|
@@ -320,6 +320,7 @@ var BarChart = function (_a) {
|
|
|
320
320
|
summarizeAfterIdx: summarizeAfterIdx,
|
|
321
321
|
colorIdx: colorIdx
|
|
322
322
|
}), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
|
|
323
|
+
console.log({ data: data, valuePath: valuePath });
|
|
323
324
|
var _k = useDecideLegendOrientation({
|
|
324
325
|
widthThreshold: 500
|
|
325
326
|
}), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
|
|
@@ -115,112 +115,104 @@ var HeatMapGrid = function (_a) {
|
|
|
115
115
|
var _j = (0, useFader_1.useFader)(scrollableRef), setFader = _j.setFader, showFader = _j.showFader, showHorizontalFader = _j.showHorizontalFader;
|
|
116
116
|
// Replace: const { xAxisWidth, yAxisWidth, measurementRef } = useAxisDimensions(data, _configs.axisLabelWidth);
|
|
117
117
|
var _k = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _k.xWidth, yWidth = _k.yWidth, setHorizontalRef = _k.setHorizontalRef, setVerticalRef = _k.setVerticalRef;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
react_1.default.createElement(
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
118
|
+
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
|
+
react_1.default.createElement("div", { style: { gridRow: 1, gridColumn: 1 } }),
|
|
120
|
+
react_1.default.createElement(HiddenScrollContainer, { style: {
|
|
121
|
+
gridRow: 1,
|
|
122
|
+
gridColumn: 2,
|
|
123
|
+
overflowX: 'auto',
|
|
124
|
+
overflowY: 'hidden',
|
|
125
|
+
display: 'flex',
|
|
126
|
+
alignItems: 'flex-end',
|
|
127
|
+
}, onScroll: function (e) {
|
|
128
|
+
// Sync horizontal scroll with main content area
|
|
129
|
+
if (scrollableRef.current) {
|
|
130
|
+
scrollableRef.current.scrollLeft = e.target.scrollLeft;
|
|
131
|
+
}
|
|
126
132
|
} },
|
|
127
|
-
react_1.default.createElement("div", { style: {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
133
|
+
react_1.default.createElement("div", { style: {
|
|
134
|
+
display: "flex",
|
|
135
|
+
alignItems: "center",
|
|
136
|
+
gap: _configs.gridGap + "px",
|
|
137
|
+
minWidth: 'max-content',
|
|
138
|
+
} }, data[0].map(function (dd, index) { return (react_1.default.createElement("div", { key: dd.labels.tooltipLabel, style: {
|
|
139
|
+
width: _configs.cellSize + "px",
|
|
140
|
+
height: xWidth + "px",
|
|
141
|
+
display: "flex",
|
|
142
|
+
alignItems: "flex-end",
|
|
143
|
+
textWrap: "nowrap",
|
|
144
|
+
justifyContent: 'center',
|
|
145
|
+
position: "relative",
|
|
146
|
+
overflow: "visible",
|
|
147
|
+
flexShrink: 0,
|
|
140
148
|
} },
|
|
141
149
|
react_1.default.createElement("div", { style: {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
display: "flex",
|
|
150
|
-
alignItems: "flex-end",
|
|
151
|
-
textWrap: "nowrap",
|
|
152
|
-
justifyContent: 'center',
|
|
153
|
-
position: "relative",
|
|
154
|
-
overflow: "visible",
|
|
155
|
-
flexShrink: 0,
|
|
150
|
+
width: xWidth + "px",
|
|
151
|
+
position: "absolute",
|
|
152
|
+
bottom: 0,
|
|
153
|
+
left: '50%',
|
|
154
|
+
transformOrigin: "left bottom",
|
|
155
|
+
transform: "rotate(-90deg) translateY(50%)",
|
|
156
|
+
display: 'flex'
|
|
156
157
|
} },
|
|
157
|
-
react_1.default.createElement("div", {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
158
|
+
react_1.default.createElement("div", { ref: function (el) { return setHorizontalRef(index, el); } },
|
|
159
|
+
react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
|
|
160
|
+
whiteSpace: "normal",
|
|
161
|
+
} }, dd.labels.tooltipLabel))))); }))),
|
|
162
|
+
react_1.default.createElement(HiddenScrollContainer, { style: {
|
|
163
|
+
gridRow: 2,
|
|
164
|
+
gridColumn: 1,
|
|
165
|
+
overflowY: 'auto',
|
|
166
|
+
overflowX: 'hidden',
|
|
167
|
+
display: 'flex',
|
|
168
|
+
flexDirection: 'column',
|
|
169
|
+
gap: _configs.gridGap + "px",
|
|
170
|
+
}, onScroll: function (e) {
|
|
171
|
+
// Sync vertical scroll with main content area
|
|
172
|
+
if (scrollableRef.current) {
|
|
173
|
+
scrollableRef.current.scrollTop = e.target.scrollTop;
|
|
174
|
+
}
|
|
175
|
+
} }, data.map(function (d, idx) { return (react_1.default.createElement("div", { key: idx, style: {
|
|
176
|
+
height: _configs.cellSize + "px",
|
|
177
|
+
textAlign: "right",
|
|
178
|
+
display: "flex",
|
|
179
|
+
alignItems: "center",
|
|
180
|
+
justifyContent: "flex-end",
|
|
181
|
+
flexShrink: 0,
|
|
182
|
+
} },
|
|
183
|
+
react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
|
|
184
|
+
react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
|
|
185
|
+
maxWidth: yWidth + "px",
|
|
186
|
+
} }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name)))); })),
|
|
187
|
+
react_1.default.createElement("div", { ref: scrollableRef, style: {
|
|
188
|
+
gridRow: 2,
|
|
189
|
+
gridColumn: 2,
|
|
190
|
+
overflow: 'auto',
|
|
191
|
+
position: 'relative',
|
|
192
|
+
}, onScroll: function (e) {
|
|
193
|
+
// Sync scrolling with headers
|
|
194
|
+
var topHeader = e.target.parentElement.children[1]; // Top-right header
|
|
195
|
+
var leftHeader = e.target.parentElement.children[2]; // Bottom-left header
|
|
196
|
+
if (topHeader)
|
|
197
|
+
topHeader.scrollLeft = e.target.scrollLeft;
|
|
198
|
+
if (leftHeader)
|
|
199
|
+
leftHeader.scrollTop = e.target.scrollTop;
|
|
200
|
+
// Update fader visibility on scroll
|
|
201
|
+
setFader();
|
|
202
|
+
} },
|
|
203
|
+
react_1.default.createElement("div", { style: {
|
|
204
|
+
display: "flex",
|
|
205
|
+
flexDirection: "column",
|
|
177
206
|
gap: _configs.gridGap + "px",
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
if (scrollableRef.current) {
|
|
181
|
-
scrollableRef.current.scrollTop = e.target.scrollTop;
|
|
182
|
-
}
|
|
183
|
-
} }, data.map(function (d, idx) { return (react_1.default.createElement("div", { key: idx, style: {
|
|
184
|
-
height: _configs.cellSize + "px",
|
|
185
|
-
textAlign: "right",
|
|
207
|
+
minWidth: 'max-content',
|
|
208
|
+
} }, data.map(function (d, rowIdx) { return (react_1.default.createElement("div", { key: rowIdx, style: {
|
|
186
209
|
display: "flex",
|
|
187
210
|
alignItems: "center",
|
|
188
|
-
|
|
211
|
+
gap: _configs.gridGap + "px",
|
|
189
212
|
flexShrink: 0,
|
|
190
|
-
} },
|
|
191
|
-
react_1.default.createElement(
|
|
192
|
-
|
|
193
|
-
maxWidth: yWidth + "px",
|
|
194
|
-
} }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name)))); })),
|
|
195
|
-
react_1.default.createElement("div", { ref: scrollableRef, style: {
|
|
196
|
-
gridRow: 2,
|
|
197
|
-
gridColumn: 2,
|
|
198
|
-
overflow: 'auto',
|
|
199
|
-
position: 'relative',
|
|
200
|
-
}, onScroll: function (e) {
|
|
201
|
-
// Sync scrolling with headers
|
|
202
|
-
var topHeader = e.target.parentElement.children[1]; // Top-right header
|
|
203
|
-
var leftHeader = e.target.parentElement.children[2]; // Bottom-left header
|
|
204
|
-
if (topHeader)
|
|
205
|
-
topHeader.scrollLeft = e.target.scrollLeft;
|
|
206
|
-
if (leftHeader)
|
|
207
|
-
leftHeader.scrollTop = e.target.scrollTop;
|
|
208
|
-
// Update fader visibility on scroll
|
|
209
|
-
setFader();
|
|
210
|
-
} },
|
|
211
|
-
react_1.default.createElement("div", { style: {
|
|
212
|
-
display: "flex",
|
|
213
|
-
flexDirection: "column",
|
|
214
|
-
gap: _configs.gridGap + "px",
|
|
215
|
-
minWidth: 'max-content',
|
|
216
|
-
} }, data.map(function (d, rowIdx) { return (react_1.default.createElement("div", { key: rowIdx, style: {
|
|
217
|
-
display: "flex",
|
|
218
|
-
alignItems: "center",
|
|
219
|
-
gap: _configs.gridGap + "px",
|
|
220
|
-
flexShrink: 0,
|
|
221
|
-
} }, d.map(function (dd, colIdx) {
|
|
222
|
-
return react_1.default.createElement(HeatMapCell, { key: "".concat(rowIdx, "-").concat(colIdx), showPercent: false, dataMaxValue: dataMaxValue, value: dd });
|
|
223
|
-
}))); })))),
|
|
213
|
+
} }, d.map(function (dd, colIdx) {
|
|
214
|
+
return react_1.default.createElement(HeatMapCell, { key: "".concat(rowIdx, "-").concat(colIdx), showPercent: false, dataMaxValue: dataMaxValue, value: dd });
|
|
215
|
+
}))); }))),
|
|
224
216
|
showFader && react_1.default.createElement("div", { style: {
|
|
225
217
|
background: "linear-gradient(to top, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))"),
|
|
226
218
|
position: 'absolute',
|