@veltdev/react 1.0.96 → 1.0.97

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 (14) hide show
  1. package/cjs/index.js +68 -0
  2. package/cjs/index.js.map +1 -1
  3. package/cjs/types/components/Snippyly/Snippyly.stories.d.ts +1 -2
  4. package/cjs/types/components/VeltNivoChartComments/VeltNivoChartComments.d.ts +6 -0
  5. package/cjs/types/components/VeltNivoChartComments/index.d.ts +1 -0
  6. package/cjs/types/components/index.d.ts +1 -0
  7. package/esm/index.js +68 -1
  8. package/esm/index.js.map +1 -1
  9. package/esm/types/components/Snippyly/Snippyly.stories.d.ts +1 -2
  10. package/esm/types/components/VeltNivoChartComments/VeltNivoChartComments.d.ts +6 -0
  11. package/esm/types/components/VeltNivoChartComments/index.d.ts +1 -0
  12. package/esm/types/components/index.d.ts +1 -0
  13. package/index.d.ts +6 -1
  14. package/package.json +1 -1
package/cjs/index.js CHANGED
@@ -503,6 +503,73 @@ var VeltNotificationsHistoryPanel = function (props) {
503
503
  return (React__default["default"].createElement("velt-notifications-history-panel", { ref: ref, "embed-mode": [true, false].includes(embedMode) ? (embedMode ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }));
504
504
  };
505
505
 
506
+ var VeltNivoChartComments = function (_a) {
507
+ var _b, _c, _d;
508
+ var props = _a.props;
509
+ var polarToCartesian = function (centerX, centerY, radius, angleInRadians) {
510
+ return {
511
+ x: centerX + radius * Math.cos(angleInRadians - Math.PI / 2),
512
+ y: centerY + radius * Math.sin(angleInRadians - Math.PI / 2)
513
+ };
514
+ };
515
+ return (React__default["default"].createElement(React__default["default"].Fragment, null,
516
+ React__default["default"].createElement("foreignObject", null,
517
+ React__default["default"].createElement("style", null, "\n .nivo-chart-comment-point {\n opacity: 0 !important;\n visibility: hidden !important;\n }\n \n .nivo-chart-comment-tool {\n opacity: 0;\n }\n \n .nivo-chart-comment-tool:hover {\n opacity: 1;\n visibility: visible;\n transition: 0.3s;\n }\n \n .nivo-chart-comment-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n /* justify-content: center; */\n width: 100%;\n height: 100%;\n }\n \n .nivo-chart-comment-container velt-comment-tool {\n display: flex;\n cursor: pointer;\n }\n \n .nivo-chart-container snippyly-comment-pin-portal {\n /* hide it */\n display: none;\n }\n ")),
518
+ ((_b = props === null || props === void 0 ? void 0 : props.points) === null || _b === void 0 ? void 0 : _b.length) && props.points.map(function (point, index) {
519
+ var _a, _b;
520
+ var targetCommentElementId = "".concat((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.x, "-").concat((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.y);
521
+ return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x, ", ").concat(point.y, ")"), key: point.id },
522
+ React__default["default"].createElement("foreignObject", { x: -20, y: -40, width: "40", height: "40" },
523
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
524
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
525
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
526
+ React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
527
+ React__default["default"].createElement("div", { slot: 'button' },
528
+ React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
529
+ React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
530
+ React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
531
+ React__default["default"].createElement("div", { slot: 'content' },
532
+ React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: point.serieColor, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
533
+ React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
534
+ }),
535
+ ((_c = props === null || props === void 0 ? void 0 : props.bars) === null || _c === void 0 ? void 0 : _c.length) && props.bars.map(function (point, index) {
536
+ var _a, _b;
537
+ var targetCommentElementId = "".concat(point === null || point === void 0 ? void 0 : point.key, "-").concat((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.value);
538
+ return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
539
+ React__default["default"].createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
540
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
541
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
542
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
543
+ React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
544
+ React__default["default"].createElement("div", { slot: 'button' },
545
+ React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
546
+ React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
547
+ React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
548
+ React__default["default"].createElement("div", { slot: 'content' },
549
+ React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: ((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.fill) || point.color, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
550
+ React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
551
+ }),
552
+ ((_d = props === null || props === void 0 ? void 0 : props.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && props.dataWithArc.map(function (arcData, index) {
553
+ var midAngle = (arcData.arc.startAngle + arcData.arc.endAngle) / 2;
554
+ var radiusOffset = 20; // Extend beyond the outer radius for visibility
555
+ var position = polarToCartesian(props.centerX, props.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
556
+ var targetCommentElementId = "".concat(arcData === null || arcData === void 0 ? void 0 : arcData.id, "-").concat(arcData === null || arcData === void 0 ? void 0 : arcData.value);
557
+ return (React__default["default"].createElement("g", { transform: "translate(".concat(position.x, ", ").concat(position.y, ")"), key: arcData.id },
558
+ React__default["default"].createElement("foreignObject", { width: "100", height: "50", x: "-50", y: "-25", style: { overflow: 'visible' } },
559
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
560
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
561
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
562
+ React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
563
+ React__default["default"].createElement("div", { slot: 'button' },
564
+ React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
565
+ React__default["default"].createElement("path", { d: "M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" }))))),
566
+ React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
567
+ React__default["default"].createElement("div", { slot: 'content' },
568
+ React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: (arcData === null || arcData === void 0 ? void 0 : arcData.fill) || arcData.color, className: "bi bi-chat-fill", viewBox: "0 0 16 16" },
569
+ React__default["default"].createElement("path", { d: "M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15" }))))))));
570
+ })));
571
+ };
572
+
506
573
  /**
507
574
  * @beta This hook is in beta
508
575
  */
@@ -1148,6 +1215,7 @@ exports.VeltCommentsSidebar = SnippylyCommentsSidebar;
1148
1215
  exports.VeltCursor = SnippylyCursor;
1149
1216
  exports.VeltHuddle = SnippylyHuddle;
1150
1217
  exports.VeltHuddleTool = SnippylyHuddleTool;
1218
+ exports.VeltNivoChartComments = VeltNivoChartComments;
1151
1219
  exports.VeltNotificationsHistoryPanel = VeltNotificationsHistoryPanel;
1152
1220
  exports.VeltNotificationsPanel = VeltNotificationsPanel;
1153
1221
  exports.VeltNotificationsTool = VeltNotificationsTool;