oolib 2.198.3 → 2.198.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.
Files changed (3) hide show
  1. package/dist/v2/components/Typo2/index.styled.js +1 -1
  2. package/dist/v2/components/dataviz/PieChart/index.js +26 -13
  3. package/package.json +1 -1
package/dist/v2/components/Typo2/index.styled.js CHANGED
@@ -56,5 +56,5 @@ exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(template
56
56
  exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_QUOTE);
57
57
  exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
58
58
  exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
59
- exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\n ", "\n } \n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\n ", "\n }\n\n .UI_TAG {\n ", "\n }\n \n .UI_TAG {\n ", "\n }\n\n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"], ["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\n ", "\n } \n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\n ", "\n }\n\n .UI_TAG {\n ", "\n }\n \n .UI_TAG {\n ", "\n }\n\n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD_DF, typo_1.typo.UI_BODY_BOLD_SM_DF, typo_1.typo.UI_BODY_DF, typo_1.typo.UI_BODY_SM_DF, typo_1.typo.UI_BODY_SEMIBOLD_DF, typo_1.typo.UI_BODY_SEMIBOLD_SM_DF, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_CAPTION_BOLD, typo_1.typo.UI_CAPTION_DF, typo_1.typo.UI_CAPTION_BOLD_DF, typo_1.typo.UI_TAG, typo_1.typo.UI_TAG_DF, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
59
+ exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\n ", "\n } \n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_SEMIBOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\n ", "\n }\n\n .UI_CAPTION_SEMIBOLD_DF {\n ", "\n }\n\n .UI_TAG {\n ", "\n }\n \n .UI_TAG {\n ", "\n }\n\n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"], ["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\n ", "\n } \n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_SEMIBOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\n ", "\n }\n\n .UI_CAPTION_SEMIBOLD_DF {\n ", "\n }\n\n .UI_TAG {\n ", "\n }\n \n .UI_TAG {\n ", "\n }\n\n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD_DF, typo_1.typo.UI_BODY_BOLD_SM_DF, typo_1.typo.UI_BODY_DF, typo_1.typo.UI_BODY_SM_DF, typo_1.typo.UI_BODY_SEMIBOLD_DF, typo_1.typo.UI_BODY_SEMIBOLD_SM_DF, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_CAPTION_BOLD, typo_1.typo.UI_CAPTION_SEMIBOLD, typo_1.typo.UI_CAPTION_DF, typo_1.typo.UI_CAPTION_BOLD_DF, typo_1.typo.UI_CAPTION_SEMIBOLD_DF, typo_1.typo.UI_TAG, typo_1.typo.UI_TAG_DF, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
60
60
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
package/dist/v2/components/dataviz/PieChart/index.js CHANGED
@@ -43,6 +43,9 @@ var __importStar = (this && this.__importStar) || (function () {
43
43
  return result;
44
44
  };
45
45
  })();
46
+ var __importDefault = (this && this.__importDefault) || function (mod) {
47
+ return (mod && mod.__esModule) ? mod : { "default": mod };
48
+ };
46
49
  Object.defineProperty(exports, "__esModule", { value: true });
47
50
  exports.PieChart = void 0;
48
51
  var react_1 = __importStar(require("react"));
@@ -52,6 +55,8 @@ var Legend_1 = require("../BarChart/comps/Legend");
52
55
  var __1 = require("../../../..");
53
56
  var BarChart_1 = require("../BarChart");
54
57
  var usePrepareData_1 = require("../utils/usePrepareData");
58
+ var BarChart_2 = require("../BarChart");
59
+ var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
55
60
  var chartColors = [
56
61
  "#5C80FF",
57
62
  "#FFA800",
@@ -110,27 +115,29 @@ var CustomLabel = function (_a) {
110
115
  };
111
116
  var RADIAN = Math.PI / 180;
112
117
  var renderCustomizedLabel = function (_a) {
113
- var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, percent = _a.percent, dataKey = _a.dataKey, index = _a.index;
118
+ var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, percent = _a.percent, index = _a.index, payload = _a.payload;
119
+ // Only show label if percentage is above a threshold (e.g., 5%)
120
+ if (percent < 0.05)
121
+ return null;
114
122
  // Calculate position closer to the center of the slice
115
- var radius = innerRadius + (outerRadius - innerRadius) * 0.45; // Moved closer to center
123
+ var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
116
124
  var x = cx + radius * Math.cos(-midAngle * RADIAN);
117
125
  var y = cy + radius * Math.sin(-midAngle * RADIAN);
118
- return (react_1.default.createElement("text", { key: index, x: x, y: y, fill: "black" // Changed to white for better contrast
119
- , textAnchor: "middle" // Always center the text
120
- , dominantBaseline: "central", className: "UI_CAPTION_SEMIBOLD" }, "".concat((percent * 100).toFixed(0), "%")));
126
+ return (react_1.default.createElement("text", { key: "label-".concat(index), x: x, y: y, fill: __1.colors2.black, textAnchor: "middle", dominantBaseline: "central", className: "UI_CAPTION_SEMIBOLD_DF" }, "".concat((percent * 100).toFixed(0), "%")));
121
127
  };
122
128
  var renderActiveShape = function (props) {
123
- var _a, _b;
124
129
  var cx = props.cx, cy = props.cy, innerRadius = props.innerRadius, outerRadius = props.outerRadius, startAngle = props.startAngle, endAngle = props.endAngle, fill = props.fill, payload = props.payload, midAngle = props.midAngle;
125
130
  var radius = innerRadius + (outerRadius - innerRadius) * 0.45; // Moved closer to center
126
131
  var x = cx + radius * Math.cos(-midAngle * RADIAN);
127
132
  var y = cy + radius * Math.sin(-midAngle * RADIAN);
128
133
  return (react_1.default.createElement("g", null,
129
- react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 8, startAngle: startAngle, endAngle: endAngle, fill: fill }),
130
- react_1.default.createElement("text", { x: x, y: y, fill: "black", textAnchor: "middle", dominantBaseline: "central", className: "UI_CAPTION_SEMIBOLD" }, "".concat((((_b = (_a = payload.payload) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.percentage) || 0).toFixed(0), "%"))));
134
+ react_1.default.createElement(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 6, startAngle: startAngle, endAngle: endAngle, fill: fill })));
131
135
  };
132
136
  var PieChart = function (_a) {
133
137
  var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, breakdownCategoryName = _a.breakdownCategoryName, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.colors, colors = _c === void 0 ? chartColors : _c, _d = _a.colorIdx, colorIdx = _d === void 0 ? 0 : _d, _e = _a.plotDataPoint, plotDataPoint = _e === void 0 ? "percentage" : _e, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.showCount, showCount = _g === void 0 ? false : _g, innerLabel = _a.innerLabel, style = _a.style;
138
+ var mousePosition = (0, BarChart_2.useTrackMousePosition)().mousePosition; // Add this line
139
+ var _h = (0, react_1.useState)(false), showTooltip = _h[0], setShowTooltip = _h[1]; // Add this line
140
+ var _j = (0, react_1.useState)(null), tooltipData = _j[0], setTooltipData = _j[1]; // Add this line
134
141
  var isBreakdown = Array.isArray(valuePath);
135
142
  var barChartData = (0, usePrepareData_1.usePrepareData)({
136
143
  _data: _data,
@@ -145,15 +152,19 @@ var PieChart = function (_a) {
145
152
  }).data;
146
153
  // Adapt the BarChart data format to PieChart format
147
154
  var data = usePieChartData(barChartData, isBreakdown);
148
- var _h = (0, BarChart_1.useDecideLegendOrientation)({
155
+ var _k = (0, BarChart_1.useDecideLegendOrientation)({
149
156
  widthThreshold: 500
150
- }), vizWrapperRef = _h.vizWrapperRef, orientation = _h.orientation;
151
- var _j = (0, react_1.useState)(), activeIndex = _j[0], setActiveIndex = _j[1];
152
- var onPieEnter = function (_, index) {
157
+ }), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
158
+ var _l = (0, react_1.useState)(), activeIndex = _l[0], setActiveIndex = _l[1];
159
+ var onPieEnter = function (data, index) {
153
160
  setActiveIndex(index);
161
+ setShowTooltip(true);
162
+ setTooltipData(data.payload);
154
163
  };
155
164
  var onPieLeave = function () {
156
165
  setActiveIndex(undefined);
166
+ setShowTooltip(false);
167
+ setTooltipData(null);
157
168
  };
158
169
  var onPieClick = function (_, index) {
159
170
  if (onClick) {
@@ -162,12 +173,14 @@ var PieChart = function (_a) {
162
173
  };
163
174
  if (data.length === 0)
164
175
  return react_1.default.createElement("div", null, "No data available");
176
+ console.log({ mousePosition: mousePosition });
165
177
  return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative' }) },
178
+ showTooltip && tooltipData && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [tooltipData.labels], showPercent: showPercent, mousePosition: mousePosition })),
166
179
  react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
167
180
  react_1.default.createElement("div", { className: "w-full", style: { height: "300px" } },
168
181
  react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
169
182
  react_1.default.createElement(recharts_1.PieChart, null,
170
- react_1.default.createElement(recharts_1.Pie, { data: data, cx: "50%", cy: "50%", label: renderCustomizedLabel, fill: "#8884d8", dataKey: "labels.count", nameKey: "labels.name", innerRadius: 70, outerRadius: 140, labelLine: false, activeShape: renderActiveShape, onMouseEnter: onPieEnter, onMouseLeave: onPieLeave, onClick: onClick ? onPieClick : undefined, style: onClick ? { cursor: "pointer" } : {}, activeIndex: activeIndex }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: colors[(index + colorIdx) % colors.length], opacity: activeIndex !== undefined && activeIndex !== index ? 0.4 : 1 })); })))))),
183
+ react_1.default.createElement(recharts_1.Pie, { data: data, cx: "50%", cy: "50%", label: renderCustomizedLabel, fill: "#8884d8", dataKey: "labels.count", nameKey: "labels.name", innerRadius: 70, outerRadius: 140, labelLine: false, activeShape: renderActiveShape, onMouseEnter: onPieEnter, onMouseLeave: onPieLeave, onClick: onClick ? onPieClick : undefined, style: { cursor: "pointer" }, activeIndex: activeIndex }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: colors[(index + colorIdx) % colors.length] })); })))))),
171
184
  react_1.default.createElement("div", { style: __assign({ position: 'sticky' }, (orientation === 'vertical' ? { top: 0 } : { bottom: 0, background: __1.colors2.white })) },
172
185
  react_1.default.createElement(Legend_1.Legend, { orientation: orientation, label: breakdownCategoryName || "Categories", data: data.map(function (d, index) { return ({
173
186
  text: d.labels.tooltipLabel || d.labels.name,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.198.3",
3
+ "version": "2.198.4",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",