@veltdev/react 1.0.112 → 1.0.113

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 (18) hide show
  1. package/cjs/index.js +464 -44
  2. package/cjs/index.js.map +1 -1
  3. package/cjs/types/components/VeltChartComment/VeltChartComment.d.ts +10 -0
  4. package/cjs/types/components/VeltChartComment/index.d.ts +1 -0
  5. package/cjs/types/components/VeltHighChartComments/VeltHighChartComments.d.ts +8 -0
  6. package/cjs/types/components/VeltHighChartComments/index.d.ts +1 -0
  7. package/cjs/types/components/VeltNivoChartComments/VeltNivoChartComments.d.ts +3 -1
  8. package/cjs/types/components/index.d.ts +2 -0
  9. package/esm/index.js +463 -45
  10. package/esm/index.js.map +1 -1
  11. package/esm/types/components/VeltChartComment/VeltChartComment.d.ts +10 -0
  12. package/esm/types/components/VeltChartComment/index.d.ts +1 -0
  13. package/esm/types/components/VeltHighChartComments/VeltHighChartComments.d.ts +8 -0
  14. package/esm/types/components/VeltHighChartComments/index.d.ts +1 -0
  15. package/esm/types/components/VeltNivoChartComments/VeltNivoChartComments.d.ts +3 -1
  16. package/esm/types/components/index.d.ts +2 -0
  17. package/index.d.ts +20 -2
  18. package/package.json +1 -1
package/cjs/index.js CHANGED
@@ -82,6 +82,16 @@ function __generator(thisArg, body) {
82
82
  } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
83
83
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
84
84
  }
85
+ }
86
+
87
+ function __spreadArray(to, from, pack) {
88
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
89
+ if (ar || !(i in from)) {
90
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
91
+ ar[i] = from[i];
92
+ }
93
+ }
94
+ return to.concat(ar || Array.prototype.slice.call(from));
85
95
  }
86
96
 
87
97
  var VeltContext = React.createContext({ client: null });
@@ -528,71 +538,479 @@ var VeltNotificationsHistoryPanel = function (props) {
528
538
  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 }));
529
539
  };
530
540
 
541
+ var VeltChartComment = function (props) {
542
+ var commentMetadata = props.commentMetadata, dialogMetadataTemplate = props.dialogMetadataTemplate, children = props.children, ghostComment = props.ghostComment;
543
+ return (React__default["default"].createElement("velt-chart-comment", { "comment-metadata": commentMetadata ? JSON.stringify(commentMetadata) : undefined, "dialog-metadata-template": (dialogMetadataTemplate === null || dialogMetadataTemplate === void 0 ? void 0 : dialogMetadataTemplate.length) ? JSON.stringify(dialogMetadataTemplate) : undefined, "ghost-comment": [true, false].includes(ghostComment) ? (ghostComment ? 'true' : 'false') : undefined }, children));
544
+ };
545
+
531
546
  var VeltNivoChartComments = function (_a) {
532
- var _b, _c, _d;
533
- var props = _a.props;
547
+ var _b, _c, _d, _e, _f;
548
+ var chartComputedData = _a.chartComputedData, dialogMetadataTemplate = _a.dialogMetadataTemplate, id = _a.id;
549
+ var client = useVeltClient().client;
550
+ var _g = React__default["default"].useState({ comments: [] }), ghostCommentsData = _g[0], setGhostCommentsData = _g[1];
551
+ var _h = React__default["default"].useState(null), documentPathsSubscription = _h[0], setDocumentPathsSubscription = _h[1];
552
+ var _j = React__default["default"].useState(null), commentSubscription = _j[0], setCommentSubscription = _j[1];
553
+ // Unsubscribe from the subscriptions when the component is unmounted
554
+ React.useEffect(function () {
555
+ return function () {
556
+ unsubscribeDocumentPathsSubscription();
557
+ unsubscribeCommentSubscription();
558
+ };
559
+ }, []);
560
+ React.useEffect(function () {
561
+ getCommentAnnotations();
562
+ }, [chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.data]);
563
+ React.useEffect(function () {
564
+ if (client) {
565
+ getCommentAnnotations();
566
+ }
567
+ }, [client]);
568
+ var getCommentAnnotations = function () {
569
+ var _a;
570
+ try {
571
+ unsubscribeDocumentPathsSubscription();
572
+ unsubscribeCommentSubscription();
573
+ if (client) {
574
+ var subscription = (_a = client === null || client === void 0 ? void 0 : client.docService) === null || _a === void 0 ? void 0 : _a.getDocumentPaths$().subscribe(function (paths) {
575
+ var _a;
576
+ if (paths === null || paths === void 0 ? void 0 : paths.clientDocumentId) {
577
+ unsubscribeCommentSubscription();
578
+ var commentElement = client.getCommentElement();
579
+ var subscription_1 = (_a = commentElement === null || commentElement === void 0 ? void 0 : commentElement.getAllCommentAnnotations(paths === null || paths === void 0 ? void 0 : paths.clientDocumentId)) === null || _a === void 0 ? void 0 : _a.subscribe(function (comments) {
580
+ filterGhostComments(comments);
581
+ });
582
+ setCommentSubscription(subscription_1);
583
+ }
584
+ });
585
+ setDocumentPathsSubscription(subscription);
586
+ }
587
+ }
588
+ catch (err) {
589
+ }
590
+ };
591
+ var filterGhostComments = function (comments) {
592
+ var _a, _b, _c;
593
+ try {
594
+ var chartComments = (_a = comments === null || comments === void 0 ? void 0 : comments.filter(function (annotation) { return annotation.commentType === 'chart'; })) === null || _a === void 0 ? void 0 : _a.filter(function (annotation) { var _a; return ((_a = annotation === null || annotation === void 0 ? void 0 : annotation.metadata) === null || _a === void 0 ? void 0 : _a.id) === id; });
595
+ if ((_b = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars) === null || _b === void 0 ? void 0 : _b.length) {
596
+ var ghostComments_1 = [];
597
+ chartComments.forEach(function (annotation) {
598
+ var _a;
599
+ var metadata = annotation.metadata;
600
+ var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
601
+ var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
602
+ var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
603
+ if (groupId && value && label) {
604
+ var bar = (_a = chartComputedData.bars) === null || _a === void 0 ? void 0 : _a.find(function (bar) { var _a, _b, _c; return ((_a = bar === null || bar === void 0 ? void 0 : bar.data) === null || _a === void 0 ? void 0 : _a.id) === groupId && ((_b = bar === null || bar === void 0 ? void 0 : bar.data) === null || _b === void 0 ? void 0 : _b.value) === value && ((_c = bar === null || bar === void 0 ? void 0 : bar.data) === null || _c === void 0 ? void 0 : _c.indexValue) === label; });
605
+ if (!bar) {
606
+ ghostComments_1.push(annotation);
607
+ }
608
+ }
609
+ });
610
+ var width = ((_c = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars[0]) === null || _c === void 0 ? void 0 : _c.width) || 0;
611
+ setGhostCommentsData({ comments: ghostComments_1, width: width, type: 'bar' });
612
+ }
613
+ else if (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.points) {
614
+ var ghostComments_2 = [];
615
+ chartComments.forEach(function (annotation) {
616
+ var _a;
617
+ var metadata = annotation.metadata;
618
+ var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
619
+ var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
620
+ var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
621
+ if (groupId && value && label) {
622
+ var point = (_a = chartComputedData.points) === null || _a === void 0 ? void 0 : _a.find(function (point) { var _a, _b; return (point === null || point === void 0 ? void 0 : point.serieId) === groupId && ((_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.y) === value && ((_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.x) === label; });
623
+ if (!point) {
624
+ ghostComments_2.push(annotation);
625
+ }
626
+ }
627
+ });
628
+ var width = 0;
629
+ setGhostCommentsData({ comments: ghostComments_2, width: width, type: 'line' });
630
+ }
631
+ }
632
+ catch (err) {
633
+ }
634
+ };
534
635
  var polarToCartesian = function (centerX, centerY, radius, angleInRadians) {
535
636
  return {
536
637
  x: centerX + radius * Math.cos(angleInRadians - Math.PI / 2),
537
638
  y: centerY + radius * Math.sin(angleInRadians - Math.PI / 2)
538
639
  };
539
640
  };
641
+ var unsubscribeDocumentPathsSubscription = function () {
642
+ try {
643
+ if (documentPathsSubscription) {
644
+ documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
645
+ }
646
+ }
647
+ catch (err) {
648
+ }
649
+ };
650
+ var unsubscribeCommentSubscription = function () {
651
+ try {
652
+ if (commentSubscription) {
653
+ commentSubscription === null || commentSubscription === void 0 ? void 0 : commentSubscription.unsubscribe();
654
+ }
655
+ }
656
+ catch (err) {
657
+ }
658
+ };
540
659
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
541
660
  React__default["default"].createElement("foreignObject", null,
542
- 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 ")),
543
- ((_b = props === null || props === void 0 ? void 0 : props.points) === null || _b === void 0 ? void 0 : _b.length) && props.points.map(function (point, index) {
661
+ 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 ")),
662
+ ((_b = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.points) === null || _b === void 0 ? void 0 : _b.length) && chartComputedData.points.map(function (point, index) {
544
663
  var _a, _b;
545
- 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);
664
+ var commentMetadata = {
665
+ id: id,
666
+ label: (_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.x,
667
+ groupId: point === null || point === void 0 ? void 0 : point.serieId,
668
+ value: (_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.y,
669
+ };
546
670
  return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x, ", ").concat(point.y, ")"), key: point.id },
547
- React__default["default"].createElement("foreignObject", { x: -20, y: -40, width: "40", height: "40" },
671
+ React__default["default"].createElement("foreignObject", { x: -12, y: -40, width: "24", height: "24" },
548
672
  React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
549
- React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
550
- React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
551
- React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
552
- React__default["default"].createElement("div", { slot: 'button' },
553
- 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" },
554
- 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" }))))),
555
- React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
556
- React__default["default"].createElement("div", { slot: 'content' },
557
- 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" },
558
- 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" }))))))));
673
+ React__default["default"].createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
559
674
  }),
560
- ((_c = props === null || props === void 0 ? void 0 : props.bars) === null || _c === void 0 ? void 0 : _c.length) && props.bars.map(function (point, index) {
561
- var _a, _b;
562
- 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);
675
+ ((_c = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars) === null || _c === void 0 ? void 0 : _c.length) && chartComputedData.bars.map(function (point, index) {
676
+ var _a, _b, _c;
677
+ var commentMetadata = {
678
+ id: id,
679
+ label: (_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.indexValue,
680
+ groupId: (_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.id,
681
+ value: (_c = point === null || point === void 0 ? void 0 : point.data) === null || _c === void 0 ? void 0 : _c.value,
682
+ };
563
683
  return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
564
684
  React__default["default"].createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
565
685
  React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
566
- React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
567
- React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
568
- React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
569
- React__default["default"].createElement("div", { slot: 'button' },
570
- 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" },
571
- 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" }))))),
572
- React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
573
- React__default["default"].createElement("div", { slot: 'content' },
574
- 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" },
575
- 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" }))))))));
686
+ React__default["default"].createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
576
687
  }),
577
- ((_d = props === null || props === void 0 ? void 0 : props.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && props.dataWithArc.map(function (arcData, index) {
688
+ ((_d = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && chartComputedData.dataWithArc.map(function (arcData, index) {
578
689
  var midAngle = (arcData.arc.startAngle + arcData.arc.endAngle) / 2;
579
690
  var radiusOffset = 20; // Extend beyond the outer radius for visibility
580
- var position = polarToCartesian(props.centerX, props.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
581
- var targetCommentElementId = "".concat(arcData === null || arcData === void 0 ? void 0 : arcData.id, "-").concat(arcData === null || arcData === void 0 ? void 0 : arcData.value);
691
+ var position = polarToCartesian(chartComputedData.centerX, chartComputedData.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
692
+ var commentMetadata = {
693
+ id: id,
694
+ label: arcData === null || arcData === void 0 ? void 0 : arcData.label,
695
+ value: arcData === null || arcData === void 0 ? void 0 : arcData.value,
696
+ };
582
697
  return (React__default["default"].createElement("g", { transform: "translate(".concat(position.x, ", ").concat(position.y, ")"), key: arcData.id },
583
698
  React__default["default"].createElement("foreignObject", { width: "100", height: "50", x: "-50", y: "-25", style: { overflow: 'visible' } },
584
699
  React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
585
- React__default["default"].createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
586
- React__default["default"].createElement("div", { className: 'nivo-chart-comment-tool' },
587
- React__default["default"].createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
588
- React__default["default"].createElement("div", { slot: 'button' },
589
- 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" },
590
- 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" }))))),
591
- React__default["default"].createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
592
- React__default["default"].createElement("div", { slot: 'content' },
593
- 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" },
594
- 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" }))))))));
595
- })));
700
+ React__default["default"].createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['label', 'value'] })))));
701
+ }),
702
+ ((_e = ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.comments) === null || _e === void 0 ? void 0 : _e.length) && ((_f = ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.comments) === null || _f === void 0 ? void 0 : _f.map(function (annotation) {
703
+ var metadata = annotation.metadata;
704
+ var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
705
+ var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
706
+ var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
707
+ var x = (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.xScale) ? chartComputedData.xScale(label) : 0;
708
+ var y = (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.yScale) ? chartComputedData.yScale(value) : 0;
709
+ var point = { x: x, y: y, width: (ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.width) || 0, key: annotation.annotationId };
710
+ var commentMetadata = {
711
+ id: id,
712
+ label: label,
713
+ groupId: groupId,
714
+ value: value,
715
+ };
716
+ switch (ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.type) {
717
+ case 'bar':
718
+ return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
719
+ React__default["default"].createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
720
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
721
+ React__default["default"].createElement(VeltChartComment, { ghostComment: true, commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
722
+ case 'line':
723
+ return (React__default["default"].createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
724
+ React__default["default"].createElement("foreignObject", { x: -12, y: -48, width: "24", height: "24" },
725
+ React__default["default"].createElement("div", { className: 'nivo-chart-comment-container' },
726
+ React__default["default"].createElement(VeltChartComment, { ghostComment: true, commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
727
+ default:
728
+ return null;
729
+ }
730
+ }))));
731
+ };
732
+
733
+ var HighchartsReact;
734
+ var Highcharts;
735
+ // optionally import highcharts modules using try catch
736
+ try {
737
+ HighchartsReact = require('highcharts-react-official');
738
+ Highcharts = require('highcharts');
739
+ }
740
+ catch (err) {
741
+ HighchartsReact = null;
742
+ Highcharts = null;
743
+ }
744
+ var VeltHighChartComments = function (_a) {
745
+ var chartComputedData = _a.chartComputedData, id = _a.id, dialogMetadataTemplate = _a.dialogMetadataTemplate;
746
+ var _b = React.useState([]), points = _b[0], setPoints = _b[1];
747
+ var _c = React.useState([]), ghostPoints = _c[0], setGhostPoints = _c[1];
748
+ var chartRef = React.useRef(chartComputedData);
749
+ var commentsRef = React.useRef([]);
750
+ var client = useVeltClient().client;
751
+ var _d = React__default["default"].useState(null), documentPathsSubscription = _d[0], setDocumentPathsSubscription = _d[1];
752
+ var _e = React.useState(null), commentSubscription = _e[0], setCommentSubscription = _e[1];
753
+ // Unsubscribe from the subscriptions when the component is unmounted
754
+ React.useEffect(function () {
755
+ return function () {
756
+ unsubscribeDocumentPathsSubscription();
757
+ unsubscribeCommentSubscription();
758
+ };
759
+ }, []);
760
+ React.useEffect(function () {
761
+ if (client) {
762
+ getCommentAnnotations();
763
+ }
764
+ }, [client]);
765
+ var getCommentAnnotations = function () {
766
+ var _a;
767
+ try {
768
+ unsubscribeDocumentPathsSubscription();
769
+ unsubscribeCommentSubscription();
770
+ if (client) {
771
+ var subscription = (_a = client === null || client === void 0 ? void 0 : client.docService) === null || _a === void 0 ? void 0 : _a.getDocumentPaths$().subscribe(function (paths) {
772
+ var _a;
773
+ if (paths === null || paths === void 0 ? void 0 : paths.clientDocumentId) {
774
+ unsubscribeCommentSubscription();
775
+ var commentElement = client.getCommentElement();
776
+ var subscription_1 = (_a = commentElement === null || commentElement === void 0 ? void 0 : commentElement.getAllCommentAnnotations(paths === null || paths === void 0 ? void 0 : paths.clientDocumentId)) === null || _a === void 0 ? void 0 : _a.subscribe(function (comments) {
777
+ commentsRef.current = comments;
778
+ filterGhostComments(comments);
779
+ });
780
+ setCommentSubscription(subscription_1);
781
+ }
782
+ });
783
+ setDocumentPathsSubscription(subscription);
784
+ }
785
+ }
786
+ catch (err) {
787
+ }
788
+ };
789
+ var filterGhostComments = function (comments) {
790
+ var _a;
791
+ try {
792
+ var chartComments = (_a = comments === null || comments === void 0 ? void 0 : comments.filter(function (annotation) { return annotation.commentType === 'chart'; })) === null || _a === void 0 ? void 0 : _a.filter(function (annotation) { var _a; return ((_a = annotation === null || annotation === void 0 ? void 0 : annotation.metadata) === null || _a === void 0 ? void 0 : _a.id) === id; });
793
+ var ghostPoints_1 = [];
794
+ chartComments.forEach(function (annotation) {
795
+ var metadata = annotation.metadata;
796
+ var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
797
+ var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
798
+ var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
799
+ if (groupId && value && label) {
800
+ var series = chartRef.current.chart.series.find(function (series) { return series.name === groupId; });
801
+ if (series === null || series === void 0 ? void 0 : series.visible) {
802
+ switch (series.type) {
803
+ case 'line':
804
+ var linePoint = series.points.find(function (point) { return point.y === value && point.x === label; });
805
+ if (!linePoint) {
806
+ var x = series.xAxis.toPixels(label, true);
807
+ var y = series.yAxis.toPixels(value, true);
808
+ ghostPoints_1.push({
809
+ x: x,
810
+ y: y,
811
+ seriesName: groupId,
812
+ yValue: value,
813
+ transform: 'translate(-50%, -150%)',
814
+ id: "".concat(groupId, "-").concat(label, "-").concat(value),
815
+ metadata: {
816
+ id: id,
817
+ groupId: groupId,
818
+ label: label,
819
+ value: value,
820
+ },
821
+ });
822
+ }
823
+ break;
824
+ case 'bar':
825
+ case 'column':
826
+ var barPoint = series.points.find(function (point) { return point.y === value && point.category === label; });
827
+ if (!barPoint) {
828
+ var categoryIndex = series.xAxis.categories.indexOf(label);
829
+ var x = series.xAxis.toPixels(categoryIndex, true);
830
+ var y = series.yAxis.toPixels(value, true);
831
+ // const width = series.xAxis.toPixels(categoryIndex + 1, true) - x;
832
+ ghostPoints_1.push({
833
+ x: x,
834
+ y: y,
835
+ seriesName: groupId,
836
+ yValue: value,
837
+ id: "".concat(groupId, "-").concat(label, "-").concat(value),
838
+ // width: width,
839
+ transform: 'translate(-50%, -100%)',
840
+ metadata: {
841
+ id: id,
842
+ groupId: groupId,
843
+ label: label,
844
+ value: value,
845
+ },
846
+ });
847
+ }
848
+ }
849
+ }
850
+ }
851
+ });
852
+ setGhostPoints(ghostPoints_1);
853
+ }
854
+ catch (err) {
855
+ }
856
+ };
857
+ React.useEffect(function () {
858
+ // Attach the redraw event listener when the chart updates
859
+ if (chartRef.current && chartRef.current.chart) {
860
+ var currentChart_1 = chartRef.current.chart;
861
+ window.chart = currentChart_1;
862
+ // Define the callback to execute on chart redraw
863
+ var onRedraw_1 = function () {
864
+ calculatePoints();
865
+ filterGhostComments(commentsRef.current);
866
+ };
867
+ if (Highcharts) {
868
+ // Attach the event listener
869
+ Highcharts.addEvent(currentChart_1, 'redraw', onRedraw_1);
870
+ }
871
+ // Perform the initial calculation
872
+ calculatePoints();
873
+ // Clean up the event listener when the component unmounts or chart changes
874
+ return function () {
875
+ if (Highcharts) {
876
+ Highcharts.removeEvent(currentChart_1, 'redraw', onRedraw_1);
877
+ }
878
+ };
879
+ }
880
+ }, [chartComputedData]);
881
+ var calculatePoints = function (from) {
882
+ var _a, _b;
883
+ if (!((_b = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chart) === null || _b === void 0 ? void 0 : _b.series)) {
884
+ return;
885
+ }
886
+ // Create an array of points from all series
887
+ var newPoints = chartRef.current.chart.series.filter(function (series) { return series.visible; }).reduce(function (acc, series) {
888
+ var seriesPoints = [];
889
+ switch (series.type) {
890
+ case 'line':
891
+ seriesPoints = series.points.map(function (point) { return ({
892
+ x: point.plotX,
893
+ y: point.plotY,
894
+ seriesName: series.name,
895
+ yValue: point.y,
896
+ transform: 'translate(-50%, -150%)',
897
+ id: "".concat(series.name, "-").concat(point.x, "-").concat(point.y),
898
+ metadata: {
899
+ id: id,
900
+ groupId: series.name,
901
+ label: point.x,
902
+ value: point.y,
903
+ },
904
+ }); });
905
+ break;
906
+ case 'bar':
907
+ case 'column':
908
+ seriesPoints = series.points.map(function (point) {
909
+ var _a, _b, _c, _d, _e, _f, _g;
910
+ var x = (_a = point.shapeArgs) === null || _a === void 0 ? void 0 : _a.x;
911
+ var y = (_b = point.shapeArgs) === null || _b === void 0 ? void 0 : _b.y;
912
+ var transform = 'translate(-50%, -100%)';
913
+ var width = (_c = point.shapeArgs) === null || _c === void 0 ? void 0 : _c.width;
914
+ (_d = point.shapeArgs) === null || _d === void 0 ? void 0 : _d.height;
915
+ if (series.type === 'column') {
916
+ // Center horizontally for columns
917
+ x += point.shapeArgs.width / 2;
918
+ }
919
+ else if (series.type === 'bar') {
920
+ // Center vertically for bars
921
+ // y += point.shapeArgs!.height / 2;
922
+ x = (_e = point.shapeArgs) === null || _e === void 0 ? void 0 : _e.brBoxHeight;
923
+ transform = null;
924
+ (_f = point.shapeArgs) === null || _f === void 0 ? void 0 : _f.width;
925
+ width = null;
926
+ // y = (point.shapeArgs?.x! / 2) + (point.shapeArgs?.width! / 2);
927
+ // x = point.plotX! - (point?.shapeArgs?.width! / 2);
928
+ y = (_g = point.shapeArgs) === null || _g === void 0 ? void 0 : _g.x;
929
+ }
930
+ return {
931
+ x: x,
932
+ y: y,
933
+ seriesName: series.name,
934
+ yValue: point.y,
935
+ id: "".concat(series.name, "-").concat(point.x, "-").concat(point.y),
936
+ width: width,
937
+ // height: height,
938
+ transform: transform,
939
+ metadata: {
940
+ id: id,
941
+ groupId: series.name,
942
+ label: point.category,
943
+ value: point.y,
944
+ },
945
+ };
946
+ });
947
+ break;
948
+ }
949
+ return __spreadArray(__spreadArray([], acc, true), seriesPoints, true);
950
+ }, []);
951
+ setPoints(newPoints);
952
+ };
953
+ var unsubscribeDocumentPathsSubscription = function () {
954
+ try {
955
+ if (documentPathsSubscription) {
956
+ documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
957
+ }
958
+ }
959
+ catch (err) {
960
+ }
961
+ };
962
+ var unsubscribeCommentSubscription = function () {
963
+ try {
964
+ if (commentSubscription) {
965
+ commentSubscription === null || commentSubscription === void 0 ? void 0 : commentSubscription.unsubscribe();
966
+ }
967
+ }
968
+ catch (err) {
969
+ }
970
+ };
971
+ return (React__default["default"].createElement("div", { className: 'velt-chart-comments-container', style: {
972
+ zIndex: 100000,
973
+ position: 'absolute',
974
+ top: 0,
975
+ left: 0,
976
+ } },
977
+ React__default["default"].createElement("style", null, "\n .velt-chart-comments-container .point-container {\n opacity: 0 !important;\n visibility: hidden !important;\n }\n "),
978
+ points.map(function (point, index) { return (React__default["default"].createElement("div", { key: index, style: {
979
+ position: 'absolute',
980
+ left: "".concat(chartRef.current.chart.plotLeft + point.x, "px"),
981
+ top: "".concat(chartRef.current.chart.plotTop + point.y, "px"),
982
+ transform: point.transform,
983
+ padding: '2px 5px',
984
+ color: '#fff',
985
+ borderRadius: '3px',
986
+ fontSize: '10px',
987
+ width: "".concat(point.width, "px"),
988
+ height: "".concat(point.height, "px"),
989
+ display: 'flex',
990
+ alignItems: 'center',
991
+ justifyContent: 'center',
992
+ userSelect: 'none',
993
+ boxSizing: 'border-box',
994
+ } },
995
+ React__default["default"].createElement(VeltChartComment, { commentMetadata: point.metadata, dialogMetadataTemplate: dialogMetadataTemplate || point.dialogMetadataTemplate || ['groupId', 'label', 'value'] }))); }),
996
+ ghostPoints.map(function (point, index) { return (React__default["default"].createElement("div", { id: point.id, key: index, style: {
997
+ position: 'absolute',
998
+ left: "".concat(chartRef.current.chart.plotLeft + point.x, "px"),
999
+ top: "".concat(chartRef.current.chart.plotTop + point.y, "px"),
1000
+ transform: point.transform,
1001
+ padding: '2px 5px',
1002
+ color: '#fff',
1003
+ borderRadius: '3px',
1004
+ fontSize: '10px',
1005
+ width: "".concat(point.width, "px"),
1006
+ height: "".concat(point.height, "px"),
1007
+ display: 'flex',
1008
+ alignItems: 'center',
1009
+ justifyContent: 'center',
1010
+ userSelect: 'none',
1011
+ boxSizing: 'border-box',
1012
+ } },
1013
+ React__default["default"].createElement(VeltChartComment, { ghostComment: true, commentMetadata: point.metadata, dialogMetadataTemplate: dialogMetadataTemplate || point.dialogMetadataTemplate || ['groupId', 'label', 'value'] }))); })));
596
1014
  };
597
1015
 
598
1016
  var VeltWireframe = function (props) {
@@ -665,7 +1083,7 @@ var VeltCommentDialogComposerActionButton = function (props) {
665
1083
 
666
1084
  var VeltCommentDialogComposerAssignUser = function (props) {
667
1085
  var children = props.children;
668
- return (React__default["default"].createElement("velt-comment-dialog-composer-wireframe", null, children));
1086
+ return (React__default["default"].createElement("velt-comment-dialog-composer-assign-user-wireframe", null, children));
669
1087
  };
670
1088
 
671
1089
  var VeltCommentDialogComposerFiles = function (props) {
@@ -1816,6 +2234,7 @@ var logLiveState = function (action, liveStateDataId) {
1816
2234
 
1817
2235
  exports.VeltArrowTool = SnippylyArrowTool;
1818
2236
  exports.VeltArrows = SnippylyArrows;
2237
+ exports.VeltChartComment = VeltChartComment;
1819
2238
  exports.VeltCommentBubble = SnippylyCommentBubble;
1820
2239
  exports.VeltCommentBubbleAvatar = VeltCommentBubbleAvatar;
1821
2240
  exports.VeltCommentBubbleCommentsCount = VeltCommentBubbleCommentsCount;
@@ -1829,6 +2248,7 @@ exports.VeltComments = SnippylyComments;
1829
2248
  exports.VeltCommentsSidebar = SnippylyCommentsSidebar;
1830
2249
  exports.VeltCommentsSidebarWireframe = VeltCommentsSidebarWireframe;
1831
2250
  exports.VeltCursor = SnippylyCursor;
2251
+ exports.VeltHighChartComments = VeltHighChartComments;
1832
2252
  exports.VeltHuddle = SnippylyHuddle;
1833
2253
  exports.VeltHuddleTool = SnippylyHuddleTool;
1834
2254
  exports.VeltNivoChartComments = VeltNivoChartComments;