@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.
- package/cjs/index.js +68 -0
- package/cjs/index.js.map +1 -1
- package/cjs/types/components/Snippyly/Snippyly.stories.d.ts +1 -2
- package/cjs/types/components/VeltNivoChartComments/VeltNivoChartComments.d.ts +6 -0
- package/cjs/types/components/VeltNivoChartComments/index.d.ts +1 -0
- package/cjs/types/components/index.d.ts +1 -0
- package/esm/index.js +68 -1
- package/esm/index.js.map +1 -1
- package/esm/types/components/Snippyly/Snippyly.stories.d.ts +1 -2
- package/esm/types/components/VeltNivoChartComments/VeltNivoChartComments.d.ts +6 -0
- package/esm/types/components/VeltNivoChartComments/index.d.ts +1 -0
- package/esm/types/components/index.d.ts +1 -0
- package/index.d.ts +6 -1
- package/package.json +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
2
1
|
import React from 'react';
|
|
3
2
|
declare const _default: ComponentMeta<React.FC<import("./Snippyly").IVeltProps>>;
|
|
4
3
|
export default _default;
|
|
5
|
-
export declare const Snippyly1:
|
|
4
|
+
export declare const Snippyly1: any;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./VeltNivoChartComments";
|
|
@@ -25,3 +25,4 @@ export { default as VeltCommentThread } from "./VeltCommentThread";
|
|
|
25
25
|
export { default as VeltNotificationsTool } from "./VeltNotificationsTool";
|
|
26
26
|
export { default as VeltNotificationsPanel } from "./VeltNotificationsPanel";
|
|
27
27
|
export { default as VeltNotificationsHistoryPanel } from "./VeltNotificationsHistoryPanel";
|
|
28
|
+
export { default as VeltNivoChartComments } from "./VeltNivoChartComments";
|
package/esm/index.js
CHANGED
|
@@ -495,6 +495,73 @@ var VeltNotificationsHistoryPanel = function (props) {
|
|
|
495
495
|
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 }));
|
|
496
496
|
};
|
|
497
497
|
|
|
498
|
+
var VeltNivoChartComments = function (_a) {
|
|
499
|
+
var _b, _c, _d;
|
|
500
|
+
var props = _a.props;
|
|
501
|
+
var polarToCartesian = function (centerX, centerY, radius, angleInRadians) {
|
|
502
|
+
return {
|
|
503
|
+
x: centerX + radius * Math.cos(angleInRadians - Math.PI / 2),
|
|
504
|
+
y: centerY + radius * Math.sin(angleInRadians - Math.PI / 2)
|
|
505
|
+
};
|
|
506
|
+
};
|
|
507
|
+
return (React.createElement(React.Fragment, null,
|
|
508
|
+
React.createElement("foreignObject", null,
|
|
509
|
+
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 ")),
|
|
510
|
+
((_b = props === null || props === void 0 ? void 0 : props.points) === null || _b === void 0 ? void 0 : _b.length) && props.points.map(function (point, index) {
|
|
511
|
+
var _a, _b;
|
|
512
|
+
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);
|
|
513
|
+
return (React.createElement("g", { transform: "translate(".concat(point.x, ", ").concat(point.y, ")"), key: point.id },
|
|
514
|
+
React.createElement("foreignObject", { x: -20, y: -40, width: "40", height: "40" },
|
|
515
|
+
React.createElement("div", { className: 'nivo-chart-comment-container' },
|
|
516
|
+
React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
|
|
517
|
+
React.createElement("div", { className: 'nivo-chart-comment-tool' },
|
|
518
|
+
React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
|
|
519
|
+
React.createElement("div", { slot: 'button' },
|
|
520
|
+
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" },
|
|
521
|
+
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" }))))),
|
|
522
|
+
React.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
|
|
523
|
+
React.createElement("div", { slot: 'content' },
|
|
524
|
+
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" },
|
|
525
|
+
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" }))))))));
|
|
526
|
+
}),
|
|
527
|
+
((_c = props === null || props === void 0 ? void 0 : props.bars) === null || _c === void 0 ? void 0 : _c.length) && props.bars.map(function (point, index) {
|
|
528
|
+
var _a, _b;
|
|
529
|
+
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);
|
|
530
|
+
return (React.createElement("g", { transform: "translate(".concat(point.x + point.width, ", ").concat(point.y, ")"), key: point.key },
|
|
531
|
+
React.createElement("foreignObject", { x: 0, y: -8, width: "24", height: "24" },
|
|
532
|
+
React.createElement("div", { className: 'nivo-chart-comment-container' },
|
|
533
|
+
React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
|
|
534
|
+
React.createElement("div", { className: 'nivo-chart-comment-tool' },
|
|
535
|
+
React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
|
|
536
|
+
React.createElement("div", { slot: 'button' },
|
|
537
|
+
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" },
|
|
538
|
+
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" }))))),
|
|
539
|
+
React.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
|
|
540
|
+
React.createElement("div", { slot: 'content' },
|
|
541
|
+
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" },
|
|
542
|
+
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" }))))))));
|
|
543
|
+
}),
|
|
544
|
+
((_d = props === null || props === void 0 ? void 0 : props.dataWithArc) === null || _d === void 0 ? void 0 : _d.length) && props.dataWithArc.map(function (arcData, index) {
|
|
545
|
+
var midAngle = (arcData.arc.startAngle + arcData.arc.endAngle) / 2;
|
|
546
|
+
var radiusOffset = 20; // Extend beyond the outer radius for visibility
|
|
547
|
+
var position = polarToCartesian(props.centerX, props.centerY, arcData.arc.outerRadius + radiusOffset, midAngle);
|
|
548
|
+
var targetCommentElementId = "".concat(arcData === null || arcData === void 0 ? void 0 : arcData.id, "-").concat(arcData === null || arcData === void 0 ? void 0 : arcData.value);
|
|
549
|
+
return (React.createElement("g", { transform: "translate(".concat(position.x, ", ").concat(position.y, ")"), key: arcData.id },
|
|
550
|
+
React.createElement("foreignObject", { width: "100", height: "50", x: "-50", y: "-25", style: { overflow: 'visible' } },
|
|
551
|
+
React.createElement("div", { className: 'nivo-chart-comment-container' },
|
|
552
|
+
React.createElement("div", { className: 'nivo-chart-comment-point', id: targetCommentElementId }),
|
|
553
|
+
React.createElement("div", { className: 'nivo-chart-comment-tool' },
|
|
554
|
+
React.createElement(SnippylyCommentTool, { targetCommentElementId: targetCommentElementId },
|
|
555
|
+
React.createElement("div", { slot: 'button' },
|
|
556
|
+
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" },
|
|
557
|
+
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" }))))),
|
|
558
|
+
React.createElement(SnippylyCommentBubble, { targetCommentElementId: targetCommentElementId },
|
|
559
|
+
React.createElement("div", { slot: 'content' },
|
|
560
|
+
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" },
|
|
561
|
+
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" }))))))));
|
|
562
|
+
})));
|
|
563
|
+
};
|
|
564
|
+
|
|
498
565
|
/**
|
|
499
566
|
* @beta This hook is in beta
|
|
500
567
|
*/
|
|
@@ -1129,5 +1196,5 @@ var logLiveState = function (action, liveStateDataId) {
|
|
|
1129
1196
|
}
|
|
1130
1197
|
};
|
|
1131
1198
|
|
|
1132
|
-
export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, SnippylyCursor as VeltCursor, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltVideoPlayer, VeltViewAnalytics, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUserEditorState, useVeltClient, useViewsUtils };
|
|
1199
|
+
export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentPlayerTimeline, VeltCommentThread, SnippylyCommentTool as VeltCommentTool, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, 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, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltVideoPlayer, VeltViewAnalytics, createLiveStateMiddleware, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUniqueViewsByDate, useUniqueViewsByUser, useUserEditorState, useVeltClient, useViewsUtils };
|
|
1133
1200
|
//# sourceMappingURL=index.js.map
|