oolib 2.193.2 → 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.
|
@@ -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) {
|