@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/types/components/VeltChartComment/VeltChartComment.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ export interface IVeltChartCommentProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
3
+ commentMetadata?: {
4
+ [key: string]: any;
5
+ };
6
+ dialogMetadataTemplate?: string[];
7
+ ghostComment?: boolean;
8
+ }
9
+ declare const VeltChartComment: React.FC<IVeltChartCommentProps>;
10
+ export default VeltChartComment;
package/cjs/types/components/VeltChartComment/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './VeltChartComment';
package/cjs/types/components/VeltHighChartComments/VeltHighChartComments.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ export interface IVeltHighChartCommentsProps {
3
+ id: string;
4
+ chartComputedData: any;
5
+ dialogMetadataTemplate?: string[];
6
+ }
7
+ declare const VeltHighChartComments: React.FC<IVeltHighChartCommentsProps>;
8
+ export default VeltHighChartComments;
package/cjs/types/components/VeltHighChartComments/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from "./VeltHighChartComments";
package/cjs/types/components/VeltNivoChartComments/VeltNivoChartComments.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  export interface IVeltNivoChartCommentsProps {
3
- props?: any;
3
+ id: string;
4
+ chartComputedData?: any;
5
+ dialogMetadataTemplate?: string[];
4
6
  }
5
7
  declare const VeltNivoChartComments: React.FC<IVeltNivoChartCommentsProps>;
6
8
  export default VeltNivoChartComments;
package/cjs/types/components/index.d.ts CHANGED
@@ -26,6 +26,8 @@ export { default as VeltNotificationsTool } from "./VeltNotificationsTool";
26
26
  export { default as VeltNotificationsPanel } from "./VeltNotificationsPanel";
27
27
  export { default as VeltNotificationsHistoryPanel } from "./VeltNotificationsHistoryPanel";
28
28
  export { default as VeltNivoChartComments } from "./VeltNivoChartComments";
29
+ export { default as VeltHighChartComments } from "./VeltHighChartComments";
30
+ export { default as VeltChartComment } from "./VeltChartComment";
29
31
  export { default as VeltWireframe } from "./VeltWireframe";
30
32
  export { default as VeltCommentDialogWireframe } from "./VeltCommentDialogWireframe";
31
33
  export { default as VeltCommentsSidebarWireframe } from "./VeltCommentsSidebarWireframe";
package/esm/index.js CHANGED
@@ -74,6 +74,16 @@ function __generator(thisArg, body) {
74
74
  } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
75
75
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
76
76
  }
77
+ }
78
+
79
+ function __spreadArray(to, from, pack) {
80
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
81
+ if (ar || !(i in from)) {
82
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
83
+ ar[i] = from[i];
84
+ }
85
+ }
86
+ return to.concat(ar || Array.prototype.slice.call(from));
77
87
  }
78
88
 
79
89
  var VeltContext = createContext({ client: null });
@@ -520,71 +530,479 @@ var VeltNotificationsHistoryPanel = function (props) {
520
530
  return (React.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 }));
521
531
  };
522
532
 
533
+ var VeltChartComment = function (props) {
534
+ var commentMetadata = props.commentMetadata, dialogMetadataTemplate = props.dialogMetadataTemplate, children = props.children, ghostComment = props.ghostComment;
535
+ return (React.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));
536
+ };
537
+
523
538
  var VeltNivoChartComments = function (_a) {
524
- var _b, _c, _d;
525
- var props = _a.props;
539
+ var _b, _c, _d, _e, _f;
540
+ var chartComputedData = _a.chartComputedData, dialogMetadataTemplate = _a.dialogMetadataTemplate, id = _a.id;
541
+ var client = useVeltClient().client;
542
+ var _g = React.useState({ comments: [] }), ghostCommentsData = _g[0], setGhostCommentsData = _g[1];
543
+ var _h = React.useState(null), documentPathsSubscription = _h[0], setDocumentPathsSubscription = _h[1];
544
+ var _j = React.useState(null), commentSubscription = _j[0], setCommentSubscription = _j[1];
545
+ // Unsubscribe from the subscriptions when the component is unmounted
546
+ useEffect(function () {
547
+ return function () {
548
+ unsubscribeDocumentPathsSubscription();
549
+ unsubscribeCommentSubscription();
550
+ };
551
+ }, []);
552
+ useEffect(function () {
553
+ getCommentAnnotations();
554
+ }, [chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.data]);
555
+ useEffect(function () {
556
+ if (client) {
557
+ getCommentAnnotations();
558
+ }
559
+ }, [client]);
560
+ var getCommentAnnotations = function () {
561
+ var _a;
562
+ try {
563
+ unsubscribeDocumentPathsSubscription();
564
+ unsubscribeCommentSubscription();
565
+ if (client) {
566
+ var subscription = (_a = client === null || client === void 0 ? void 0 : client.docService) === null || _a === void 0 ? void 0 : _a.getDocumentPaths$().subscribe(function (paths) {
567
+ var _a;
568
+ if (paths === null || paths === void 0 ? void 0 : paths.clientDocumentId) {
569
+ unsubscribeCommentSubscription();
570
+ var commentElement = client.getCommentElement();
571
+ 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) {
572
+ filterGhostComments(comments);
573
+ });
574
+ setCommentSubscription(subscription_1);
575
+ }
576
+ });
577
+ setDocumentPathsSubscription(subscription);
578
+ }
579
+ }
580
+ catch (err) {
581
+ }
582
+ };
583
+ var filterGhostComments = function (comments) {
584
+ var _a, _b, _c;
585
+ try {
586
+ 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; });
587
+ if ((_b = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars) === null || _b === void 0 ? void 0 : _b.length) {
588
+ var ghostComments_1 = [];
589
+ chartComments.forEach(function (annotation) {
590
+ var _a;
591
+ var metadata = annotation.metadata;
592
+ var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
593
+ var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
594
+ var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
595
+ if (groupId && value && label) {
596
+ 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; });
597
+ if (!bar) {
598
+ ghostComments_1.push(annotation);
599
+ }
600
+ }
601
+ });
602
+ var width = ((_c = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars[0]) === null || _c === void 0 ? void 0 : _c.width) || 0;
603
+ setGhostCommentsData({ comments: ghostComments_1, width: width, type: 'bar' });
604
+ }
605
+ else if (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.points) {
606
+ var ghostComments_2 = [];
607
+ chartComments.forEach(function (annotation) {
608
+ var _a;
609
+ var metadata = annotation.metadata;
610
+ var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
611
+ var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
612
+ var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
613
+ if (groupId && value && label) {
614
+ 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; });
615
+ if (!point) {
616
+ ghostComments_2.push(annotation);
617
+ }
618
+ }
619
+ });
620
+ var width = 0;
621
+ setGhostCommentsData({ comments: ghostComments_2, width: width, type: 'line' });
622
+ }
623
+ }
624
+ catch (err) {
625
+ }
626
+ };
526
627
  var polarToCartesian = function (centerX, centerY, radius, angleInRadians) {
527
628
  return {
528
629
  x: centerX + radius * Math.cos(angleInRadians - Math.PI / 2),
529
630
  y: centerY + radius * Math.sin(angleInRadians - Math.PI / 2)
530
631
  };
531
632
  };
633
+ var unsubscribeDocumentPathsSubscription = function () {
634
+ try {
635
+ if (documentPathsSubscription) {
636
+ documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
637
+ }
638
+ }
639
+ catch (err) {
640
+ }
641
+ };
642
+ var unsubscribeCommentSubscription = function () {
643
+ try {
644
+ if (commentSubscription) {
645
+ commentSubscription === null || commentSubscription === void 0 ? void 0 : commentSubscription.unsubscribe();
646
+ }
647
+ }
648
+ catch (err) {
649
+ }
650
+ };
532
651
  return (React.createElement(React.Fragment, null,
533
652
  React.createElement("foreignObject", null,
534
- React.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 ")),
535
- ((_b = props === null || props === void 0 ? void 0 : props.points) === null || _b === void 0 ? void 0 : _b.length) && props.points.map(function (point, index) {
653
+ React.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 ")),
654
+ ((_b = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.points) === null || _b === void 0 ? void 0 : _b.length) && chartComputedData.points.map(function (point, index) {
536
655
  var _a, _b;
537
- 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);
656
+ var commentMetadata = {
657
+ id: id,
658
+ label: (_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.x,
659
+ groupId: point === null || point === void 0 ? void 0 : point.serieId,
660
+ value: (_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.y,
661
+ };
538
662
  return (React.createElement("g", { transform: "translate(".concat(point.x, ", ").concat(point.y, ")"), key: point.id },
539
- React.createElement("foreignObject", { x: -20, y: -40, width: "40", height: "40" },
663
+ React.createElement("foreignObject", { x: -12, y: -40, width: "24", height: "24" },
540
664
  React.createElement("div", { className: 'nivo-chart-comment-container' },
541
- React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
542
- React.createElement("div", { className: 'nivo-chart-comment-tool' },
543
- React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
544
- React.createElement("div", { slot: 'button' },
545
- React.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.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.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
548
- React.createElement("div", { slot: 'content' },
549
- React.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" },
550
- React.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" }))))))));
665
+ React.createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
551
666
  }),
552
- ((_c = props === null || props === void 0 ? void 0 : props.bars) === null || _c === void 0 ? void 0 : _c.length) && props.bars.map(function (point, index) {
553
- var _a, _b;
554
- 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);
667
+ ((_c = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.bars) === null || _c === void 0 ? void 0 : _c.length) && chartComputedData.bars.map(function (point, index) {
668
+ var _a, _b, _c;
669
+ var commentMetadata = {
670
+ id: id,
671
+ label: (_a = point === null || point === void 0 ? void 0 : point.data) === null || _a === void 0 ? void 0 : _a.indexValue,
672
+ groupId: (_b = point === null || point === void 0 ? void 0 : point.data) === null || _b === void 0 ? void 0 : _b.id,
673
+ value: (_c = point === null || point === void 0 ? void 0 : point.data) === null || _c === void 0 ? void 0 : _c.value,
674
+ };
555
675
  return (React.createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
556
676
  React.createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
557
677
  React.createElement("div", { className: 'nivo-chart-comment-container' },
558
- React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
559
- React.createElement("div", { className: 'nivo-chart-comment-tool' },
560
- React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
561
- React.createElement("div", { slot: 'button' },
562
- React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
563
- React.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" }))))),
564
- React.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
565
- React.createElement("div", { slot: 'content' },
566
- React.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" },
567
- React.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" }))))))));
678
+ React.createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
568
679
  }),
569
- ((_d = props === null || props === void 0 ? void 0 : props.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && props.dataWithArc.map(function (arcData, index) {
680
+ ((_d = chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && chartComputedData.dataWithArc.map(function (arcData, index) {
570
681
  var midAngle = (arcData.arc.startAngle + arcData.arc.endAngle) / 2;
571
682
  var radiusOffset = 20; // Extend beyond the outer radius for visibility
572
- var position = polarToCartesian(props.centerX, props.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
573
- var targetCommentElementId = "".concat(arcData === null || arcData === void 0 ? void 0 : arcData.id, "-").concat(arcData === null || arcData === void 0 ? void 0 : arcData.value);
683
+ var position = polarToCartesian(chartComputedData.centerX, chartComputedData.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
684
+ var commentMetadata = {
685
+ id: id,
686
+ label: arcData === null || arcData === void 0 ? void 0 : arcData.label,
687
+ value: arcData === null || arcData === void 0 ? void 0 : arcData.value,
688
+ };
574
689
  return (React.createElement("g", { transform: "translate(".concat(position.x, ", ").concat(position.y, ")"), key: arcData.id },
575
690
  React.createElement("foreignObject", { width: "100", height: "50", x: "-50", y: "-25", style: { overflow: 'visible' } },
576
691
  React.createElement("div", { className: 'nivo-chart-comment-container' },
577
- React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
578
- React.createElement("div", { className: 'nivo-chart-comment-tool' },
579
- React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
580
- React.createElement("div", { slot: 'button' },
581
- React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: '#625DF5', className: "bi bi-chat", viewBox: "0 0 16 16" },
582
- React.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" }))))),
583
- React.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
584
- React.createElement("div", { slot: 'content' },
585
- React.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" },
586
- React.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" }))))))));
587
- })));
692
+ React.createElement(VeltChartComment, { commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['label', 'value'] })))));
693
+ }),
694
+ ((_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) {
695
+ var metadata = annotation.metadata;
696
+ var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
697
+ var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
698
+ var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
699
+ var x = (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.xScale) ? chartComputedData.xScale(label) : 0;
700
+ var y = (chartComputedData === null || chartComputedData === void 0 ? void 0 : chartComputedData.yScale) ? chartComputedData.yScale(value) : 0;
701
+ var point = { x: x, y: y, width: (ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.width) || 0, key: annotation.annotationId };
702
+ var commentMetadata = {
703
+ id: id,
704
+ label: label,
705
+ groupId: groupId,
706
+ value: value,
707
+ };
708
+ switch (ghostCommentsData === null || ghostCommentsData === void 0 ? void 0 : ghostCommentsData.type) {
709
+ case 'bar':
710
+ return (React.createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
711
+ React.createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
712
+ React.createElement("div", { className: 'nivo-chart-comment-container' },
713
+ React.createElement(VeltChartComment, { ghostComment: true, commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
714
+ case 'line':
715
+ return (React.createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
716
+ React.createElement("foreignObject", { x: -12, y: -48, width: "24", height: "24" },
717
+ React.createElement("div", { className: 'nivo-chart-comment-container' },
718
+ React.createElement(VeltChartComment, { ghostComment: true, commentMetadata: commentMetadata, dialogMetadataTemplate: dialogMetadataTemplate || ['groupId', 'label', 'value'] })))));
719
+ default:
720
+ return null;
721
+ }
722
+ }))));
723
+ };
724
+
725
+ var HighchartsReact;
726
+ var Highcharts;
727
+ // optionally import highcharts modules using try catch
728
+ try {
729
+ HighchartsReact = require('highcharts-react-official');
730
+ Highcharts = require('highcharts');
731
+ }
732
+ catch (err) {
733
+ HighchartsReact = null;
734
+ Highcharts = null;
735
+ }
736
+ var VeltHighChartComments = function (_a) {
737
+ var chartComputedData = _a.chartComputedData, id = _a.id, dialogMetadataTemplate = _a.dialogMetadataTemplate;
738
+ var _b = useState([]), points = _b[0], setPoints = _b[1];
739
+ var _c = useState([]), ghostPoints = _c[0], setGhostPoints = _c[1];
740
+ var chartRef = useRef(chartComputedData);
741
+ var commentsRef = useRef([]);
742
+ var client = useVeltClient().client;
743
+ var _d = React.useState(null), documentPathsSubscription = _d[0], setDocumentPathsSubscription = _d[1];
744
+ var _e = useState(null), commentSubscription = _e[0], setCommentSubscription = _e[1];
745
+ // Unsubscribe from the subscriptions when the component is unmounted
746
+ useEffect(function () {
747
+ return function () {
748
+ unsubscribeDocumentPathsSubscription();
749
+ unsubscribeCommentSubscription();
750
+ };
751
+ }, []);
752
+ useEffect(function () {
753
+ if (client) {
754
+ getCommentAnnotations();
755
+ }
756
+ }, [client]);
757
+ var getCommentAnnotations = function () {
758
+ var _a;
759
+ try {
760
+ unsubscribeDocumentPathsSubscription();
761
+ unsubscribeCommentSubscription();
762
+ if (client) {
763
+ var subscription = (_a = client === null || client === void 0 ? void 0 : client.docService) === null || _a === void 0 ? void 0 : _a.getDocumentPaths$().subscribe(function (paths) {
764
+ var _a;
765
+ if (paths === null || paths === void 0 ? void 0 : paths.clientDocumentId) {
766
+ unsubscribeCommentSubscription();
767
+ var commentElement = client.getCommentElement();
768
+ 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) {
769
+ commentsRef.current = comments;
770
+ filterGhostComments(comments);
771
+ });
772
+ setCommentSubscription(subscription_1);
773
+ }
774
+ });
775
+ setDocumentPathsSubscription(subscription);
776
+ }
777
+ }
778
+ catch (err) {
779
+ }
780
+ };
781
+ var filterGhostComments = function (comments) {
782
+ var _a;
783
+ try {
784
+ 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; });
785
+ var ghostPoints_1 = [];
786
+ chartComments.forEach(function (annotation) {
787
+ var metadata = annotation.metadata;
788
+ var groupId = metadata === null || metadata === void 0 ? void 0 : metadata.groupId;
789
+ var value = metadata === null || metadata === void 0 ? void 0 : metadata.value;
790
+ var label = metadata === null || metadata === void 0 ? void 0 : metadata.label;
791
+ if (groupId && value && label) {
792
+ var series = chartRef.current.chart.series.find(function (series) { return series.name === groupId; });
793
+ if (series === null || series === void 0 ? void 0 : series.visible) {
794
+ switch (series.type) {
795
+ case 'line':
796
+ var linePoint = series.points.find(function (point) { return point.y === value && point.x === label; });
797
+ if (!linePoint) {
798
+ var x = series.xAxis.toPixels(label, true);
799
+ var y = series.yAxis.toPixels(value, true);
800
+ ghostPoints_1.push({
801
+ x: x,
802
+ y: y,
803
+ seriesName: groupId,
804
+ yValue: value,
805
+ transform: 'translate(-50%, -150%)',
806
+ id: "".concat(groupId, "-").concat(label, "-").concat(value),
807
+ metadata: {
808
+ id: id,
809
+ groupId: groupId,
810
+ label: label,
811
+ value: value,
812
+ },
813
+ });
814
+ }
815
+ break;
816
+ case 'bar':
817
+ case 'column':
818
+ var barPoint = series.points.find(function (point) { return point.y === value && point.category === label; });
819
+ if (!barPoint) {
820
+ var categoryIndex = series.xAxis.categories.indexOf(label);
821
+ var x = series.xAxis.toPixels(categoryIndex, true);
822
+ var y = series.yAxis.toPixels(value, true);
823
+ // const width = series.xAxis.toPixels(categoryIndex + 1, true) - x;
824
+ ghostPoints_1.push({
825
+ x: x,
826
+ y: y,
827
+ seriesName: groupId,
828
+ yValue: value,
829
+ id: "".concat(groupId, "-").concat(label, "-").concat(value),
830
+ // width: width,
831
+ transform: 'translate(-50%, -100%)',
832
+ metadata: {
833
+ id: id,
834
+ groupId: groupId,
835
+ label: label,
836
+ value: value,
837
+ },
838
+ });
839
+ }
840
+ }
841
+ }
842
+ }
843
+ });
844
+ setGhostPoints(ghostPoints_1);
845
+ }
846
+ catch (err) {
847
+ }
848
+ };
849
+ useEffect(function () {
850
+ // Attach the redraw event listener when the chart updates
851
+ if (chartRef.current && chartRef.current.chart) {
852
+ var currentChart_1 = chartRef.current.chart;
853
+ window.chart = currentChart_1;
854
+ // Define the callback to execute on chart redraw
855
+ var onRedraw_1 = function () {
856
+ calculatePoints();
857
+ filterGhostComments(commentsRef.current);
858
+ };
859
+ if (Highcharts) {
860
+ // Attach the event listener
861
+ Highcharts.addEvent(currentChart_1, 'redraw', onRedraw_1);
862
+ }
863
+ // Perform the initial calculation
864
+ calculatePoints();
865
+ // Clean up the event listener when the component unmounts or chart changes
866
+ return function () {
867
+ if (Highcharts) {
868
+ Highcharts.removeEvent(currentChart_1, 'redraw', onRedraw_1);
869
+ }
870
+ };
871
+ }
872
+ }, [chartComputedData]);
873
+ var calculatePoints = function (from) {
874
+ var _a, _b;
875
+ if (!((_b = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chart) === null || _b === void 0 ? void 0 : _b.series)) {
876
+ return;
877
+ }
878
+ // Create an array of points from all series
879
+ var newPoints = chartRef.current.chart.series.filter(function (series) { return series.visible; }).reduce(function (acc, series) {
880
+ var seriesPoints = [];
881
+ switch (series.type) {
882
+ case 'line':
883
+ seriesPoints = series.points.map(function (point) { return ({
884
+ x: point.plotX,
885
+ y: point.plotY,
886
+ seriesName: series.name,
887
+ yValue: point.y,
888
+ transform: 'translate(-50%, -150%)',
889
+ id: "".concat(series.name, "-").concat(point.x, "-").concat(point.y),
890
+ metadata: {
891
+ id: id,
892
+ groupId: series.name,
893
+ label: point.x,
894
+ value: point.y,
895
+ },
896
+ }); });
897
+ break;
898
+ case 'bar':
899
+ case 'column':
900
+ seriesPoints = series.points.map(function (point) {
901
+ var _a, _b, _c, _d, _e, _f, _g;
902
+ var x = (_a = point.shapeArgs) === null || _a === void 0 ? void 0 : _a.x;
903
+ var y = (_b = point.shapeArgs) === null || _b === void 0 ? void 0 : _b.y;
904
+ var transform = 'translate(-50%, -100%)';
905
+ var width = (_c = point.shapeArgs) === null || _c === void 0 ? void 0 : _c.width;
906
+ (_d = point.shapeArgs) === null || _d === void 0 ? void 0 : _d.height;
907
+ if (series.type === 'column') {
908
+ // Center horizontally for columns
909
+ x += point.shapeArgs.width / 2;
910
+ }
911
+ else if (series.type === 'bar') {
912
+ // Center vertically for bars
913
+ // y += point.shapeArgs!.height / 2;
914
+ x = (_e = point.shapeArgs) === null || _e === void 0 ? void 0 : _e.brBoxHeight;
915
+ transform = null;
916
+ (_f = point.shapeArgs) === null || _f === void 0 ? void 0 : _f.width;
917
+ width = null;
918
+ // y = (point.shapeArgs?.x! / 2) + (point.shapeArgs?.width! / 2);
919
+ // x = point.plotX! - (point?.shapeArgs?.width! / 2);
920
+ y = (_g = point.shapeArgs) === null || _g === void 0 ? void 0 : _g.x;
921
+ }
922
+ return {
923
+ x: x,
924
+ y: y,
925
+ seriesName: series.name,
926
+ yValue: point.y,
927
+ id: "".concat(series.name, "-").concat(point.x, "-").concat(point.y),
928
+ width: width,
929
+ // height: height,
930
+ transform: transform,
931
+ metadata: {
932
+ id: id,
933
+ groupId: series.name,
934
+ label: point.category,
935
+ value: point.y,
936
+ },
937
+ };
938
+ });
939
+ break;
940
+ }
941
+ return __spreadArray(__spreadArray([], acc, true), seriesPoints, true);
942
+ }, []);
943
+ setPoints(newPoints);
944
+ };
945
+ var unsubscribeDocumentPathsSubscription = function () {
946
+ try {
947
+ if (documentPathsSubscription) {
948
+ documentPathsSubscription === null || documentPathsSubscription === void 0 ? void 0 : documentPathsSubscription.unsubscribe();
949
+ }
950
+ }
951
+ catch (err) {
952
+ }
953
+ };
954
+ var unsubscribeCommentSubscription = function () {
955
+ try {
956
+ if (commentSubscription) {
957
+ commentSubscription === null || commentSubscription === void 0 ? void 0 : commentSubscription.unsubscribe();
958
+ }
959
+ }
960
+ catch (err) {
961
+ }
962
+ };
963
+ return (React.createElement("div", { className: 'velt-chart-comments-container', style: {
964
+ zIndex: 100000,
965
+ position: 'absolute',
966
+ top: 0,
967
+ left: 0,
968
+ } },
969
+ React.createElement("style", null, "\n .velt-chart-comments-container .point-container {\n opacity: 0 !important;\n visibility: hidden !important;\n }\n "),
970
+ points.map(function (point, index) { return (React.createElement("div", { key: index, style: {
971
+ position: 'absolute',
972
+ left: "".concat(chartRef.current.chart.plotLeft + point.x, "px"),
973
+ top: "".concat(chartRef.current.chart.plotTop + point.y, "px"),
974
+ transform: point.transform,
975
+ padding: '2px 5px',
976
+ color: '#fff',
977
+ borderRadius: '3px',
978
+ fontSize: '10px',
979
+ width: "".concat(point.width, "px"),
980
+ height: "".concat(point.height, "px"),
981
+ display: 'flex',
982
+ alignItems: 'center',
983
+ justifyContent: 'center',
984
+ userSelect: 'none',
985
+ boxSizing: 'border-box',
986
+ } },
987
+ React.createElement(VeltChartComment, { commentMetadata: point.metadata, dialogMetadataTemplate: dialogMetadataTemplate || point.dialogMetadataTemplate || ['groupId', 'label', 'value'] }))); }),
988
+ ghostPoints.map(function (point, index) { return (React.createElement("div", { id: point.id, key: index, style: {
989
+ position: 'absolute',
990
+ left: "".concat(chartRef.current.chart.plotLeft + point.x, "px"),
991
+ top: "".concat(chartRef.current.chart.plotTop + point.y, "px"),
992
+ transform: point.transform,
993
+ padding: '2px 5px',
994
+ color: '#fff',
995
+ borderRadius: '3px',
996
+ fontSize: '10px',
997
+ width: "".concat(point.width, "px"),
998
+ height: "".concat(point.height, "px"),
999
+ display: 'flex',
1000
+ alignItems: 'center',
1001
+ justifyContent: 'center',
1002
+ userSelect: 'none',
1003
+ boxSizing: 'border-box',
1004
+ } },
1005
+ React.createElement(VeltChartComment, { ghostComment: true, commentMetadata: point.metadata, dialogMetadataTemplate: dialogMetadataTemplate || point.dialogMetadataTemplate || ['groupId', 'label', 'value'] }))); })));
588
1006
  };
589
1007
 
590
1008
  var VeltWireframe = function (props) {
@@ -657,7 +1075,7 @@ var VeltCommentDialogComposerActionButton = function (props) {
657
1075
 
658
1076
  var VeltCommentDialogComposerAssignUser = function (props) {
659
1077
  var children = props.children;
660
- return (React.createElement("velt-comment-dialog-composer-wireframe", null, children));
1078
+ return (React.createElement("velt-comment-dialog-composer-assign-user-wireframe", null, children));
661
1079
  };
662
1080
 
663
1081
  var VeltCommentDialogComposerFiles = function (props) {
@@ -1806,5 +2224,5 @@ var logLiveState = function (action, liveStateDataId) {
1806
2224
  }
1807
2225
  };
1808
2226
 
1809
- export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentBubbleAvatar, VeltCommentBubbleCommentsCount, VeltCommentDialogWireframe, VeltCommentPinWireframe, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, VeltCommentToolWireframe, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, VeltCommentsSidebarWireframe, SnippylyCursor as VeltCursor, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, VeltSidebarButtonWireframe, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, VeltTextCommentToolWireframe, VeltTextCommentToolbar as VeltTextCommentToolbarWireframe, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltUserSelectorDropdown as VeltUserSelectorDropdownWireframe, VeltVideoPlayer, VeltViewAnalytics, VeltWireframe, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useEditorAccessTimer, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUnsetDocumentId, useUserEditorState, useVeltClient, useViewsUtils };
2227
+ export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, VeltChartComment, SnippylyCommentBubble as VeltCommentBubble, VeltCommentBubbleAvatar, VeltCommentBubbleCommentsCount, VeltCommentDialogWireframe, VeltCommentPinWireframe, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, VeltCommentToolWireframe, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, VeltCommentsSidebarWireframe, SnippylyCursor as VeltCursor, VeltHighChartComments, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, VeltSidebarButtonWireframe, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, VeltTextCommentToolWireframe, VeltTextCommentToolbar as VeltTextCommentToolbarWireframe, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltUserSelectorDropdown as VeltUserSelectorDropdownWireframe, VeltVideoPlayer, VeltViewAnalytics, VeltWireframe, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useEditorAccessTimer, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUnsetDocumentId, useUserEditorState, useVeltClient, useViewsUtils };
1810
2228
  //# sourceMappingURL=index.js.map