oolib 2.198.3 → 2.198.5

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 (5) hide show
  1. package/dist/stories/v2/components/visualization/BarChart.stories.js +3 -3
  2. package/dist/v2/components/Typo2/index.styled.js +1 -1
  3. package/dist/v2/components/dataviz/BarChart/index.js +1 -1
  4. package/dist/v2/components/dataviz/PieChart/index.js +26 -13
  5. package/package.json +1 -1
package/dist/stories/v2/components/visualization/BarChart.stories.js CHANGED
@@ -42,7 +42,7 @@ var _BarChart = function (args) {
42
42
  react_1.default.createElement(BarChart_1.BarChart, { overflowAfterHeight: 300, showPercent: args.showPercent, data: [
43
43
  {
44
44
  display: "Logged In Once",
45
- stack1: 45, stack2: 23, stack3: 67, stack4: 12, stack5: 89,
45
+ stack1: 0, stack2: 23, stack3: 67, stack4: 12, stack5: 89,
46
46
  stack6: 34, stack7: 56, stack8: 78, stack9: 21, stack10: 43,
47
47
  stack11: 65, stack12: 87, stack13: 32, stack14: 54, stack15: 76,
48
48
  stack16: 19, stack17: 41, stack18: 63, stack19: 85, stack20: 28,
@@ -50,7 +50,7 @@ var _BarChart = function (args) {
50
50
  },
51
51
  {
52
52
  display: "Registered Users",
53
- stack1: 92, stack3: 71, stack4: 25, stack5: 84,
53
+ stack1: 0, stack3: 71, stack4: 25, stack5: 84,
54
54
  stack6: 47, stack7: 69, stack8: 13, stack9: 56, stack10: 91,
55
55
  stack11: 29, stack12: 73, stack13: 46, stack14: 82, stack15: 17,
56
56
  stack16: 64, stack17: 39, stack18: 75, stack19: 22, stack20: 58
@@ -110,7 +110,7 @@ var _BarChart = function (args) {
110
110
  },
111
111
  {
112
112
  display: "Wrote at least 3 stories With Over 2,000 Words Each and Received More Than 50 Positive Engagements from Other Community Members",
113
- stack1: 8
113
+ stack1: 0
114
114
  },
115
115
  {
116
116
  display: "Created Profile again After Deleting Their Previous One Due to Privacy Concerns or Desire to Start Fresh with New Information",
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/BarChart/index.js CHANGED
@@ -65,7 +65,7 @@ var useTrackMousePosition = function () {
65
65
  // Create a throttled version of the mouse move handler
66
66
  var throttledHandleMouseMove = (0, react_1.useCallback)(lodash_1.default.throttle(function (e) {
67
67
  setMousePosition({ x: e.clientX, y: e.clientY });
68
- }, 1000), // ~60fps (1000ms / 60 = 16.67ms)
68
+ }, 16), // ~60fps (1000ms / 60 = 16.67ms)
69
69
  []);
70
70
  (0, react_1.useEffect)(function () {
71
71
  window.addEventListener("mousemove", throttledHandleMouseMove);
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.5",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",