oolib 2.198.2 → 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 (4) hide show
  1. package/dist/v2/components/Typo2/index.styled.js +1 -1
  2. package/dist/v2/components/dataviz/HeatMapGrid/index.js +7 -6
  3. package/dist/v2/components/dataviz/PieChart/index.js +26 -13
  4. 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/HeatMapGrid/index.js CHANGED
@@ -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 _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.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
104
- var _h = (0, usePrepareData_1.usePrepareData)({
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 = _h.data, dataMaxValue = _h.dataMaxValue, dataToSummarize = _h.dataToSummarize;
114
+ }), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
114
115
  var scrollableRef = (0, react_1.useRef)(null);
115
- var _j = (0, useFader_1.useFader)(scrollableRef), setFader = _j.setFader, showFader = _j.showFader, showHorizontalFader = _j.showHorizontalFader;
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 _k = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _k.xWidth, yWidth = _k.yWidth, setHorizontalRef = _k.setHorizontalRef, setVerticalRef = _k.setVerticalRef;
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",
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.2",
3
+ "version": "2.198.4",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",