logitude-dashboard-library 3.2.56 → 3.2.57

package/dist/assets/styles/dl-dashboard.scss

@@ -1274,4 +1274,93 @@ $dark-grey: #717585;
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
+}
+
+// Widget Copy Dropdown (Duplicate / Copy)
+.widget-copy-dropdown-container {
+    &-content {
+        padding: 0 !important;
+        border-radius: 4px !important;
+        box-shadow: 0px 8px 16px 0px #0000001A !important;
+        border: 1px solid #F3F4F5 !important;
+    }
+}
+
+.widget-copy-dropdown-menu {
+    background: #FFFFFF;
+    border-radius: 4px;
+    width: 168px;
+    height: 72px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .widget-copy-dropdown-item {
+        padding: 6px 10px;
+        font-family: "Manrope", sans-serif;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 16px;
+        color: #404040;
+        cursor: pointer;
+        white-space: nowrap;
+
+        &:hover {
+            background-color: #F3F4F5;
+            border-radius: 4px;
+        }
+    }
+}
+
+// Widget Copied Notification
+.widget-copied-notification {
+    position: absolute;
+    top: 32px;
+    left: 8px;
+    background: #19395C;
+    color: #FFFFFF;
+    padding: 6px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    z-index: 1000;
+    white-space: nowrap;
+    width: calc(100% - 16px);
+    max-width: calc(100% - 16px);
+    animation: widgetCopiedFadeIn 0.2s ease;
+
+    .widget-copied-notification-check {
+        font-size: 12px;
+        line-height: 16px;
+    }
+
+    .widget-copied-notification-title {
+        font-family: "Manrope", sans-serif;
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 16px;
+        max-width: calc(100% - 50px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .widget-copied-notification-text {
+        font-family: "Manrope", sans-serif;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 16px;
+    }
+}
+
+@keyframes widgetCopiedFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }

package/dist/features/Dashboard/DashboardDesigner.d.ts

@@ -19,6 +19,7 @@ declare type DashboardDesignerProps = {
     onLayoutChange: (layouts: Layouts) => void;
     onWidgetDelete: (deleteProps: DeleteWidgetProps) => void;
     onCopyWidget?: (id: string) => void;
+    onCopyWidgetToClipboard?: (key: string, widget: ReactWidgetPM) => void;
     dataBinding: DashboardDataBinding;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };

package/dist/features/Dashboard/WidgetCard.d.ts

@@ -5,6 +5,8 @@ import { DashboardDataBinding } from '../../types/DashboardDataBinding';
 declare type WidgetCardProps = {
     editBtnClicked(widget: any): any;
     copyBtnClicked?(id: any): any;
+    duplicateBtnClicked?(id: any): any;
+    copyToClipboardBtnClicked?(key: any, widget: ReactWidgetPM): any;
     deleteBtnClicked(i: any): any;
     widget: ReactWidgetPM | undefined;
     widgetRef: ReactWidgetPM | undefined;

package/dist/index.d.ts

@@ -19,6 +19,7 @@ declare type DashboardProps = {
     }) => void;
     openEditWidget: (Widget: ReactWidgetPM) => void;
     onCopyWidget?: (key: string) => void;
+    onCopyWidgetToClipboard?: (key: string, widget: ReactWidgetPM) => void;
     openDeleteWidgetConfirmWindow: (deleteProps: DeleteWidgetProps) => void;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };

package/dist/index.js

@@ -2602,12 +2602,10 @@ function getMaxMeasureValue(seriesMeasures, widget) {
       var _seriesMeasure$Values;
 
       seriesMeasure === null || seriesMeasure === void 0 ? void 0 : (_seriesMeasure$Values = seriesMeasure.Values) === null || _seriesMeasure$Values === void 0 ? void 0 : _seriesMeasure$Values.forEach(function (valueItem) {
-        var _stackedTotalsByGroup;
-
         var numericValue = toNumericValue(valueItem === null || valueItem === void 0 ? void 0 : valueItem.Value);
         if (numericValue === null) return;
         var groupId = valueItem === null || valueItem === void 0 ? void 0 : valueItem.GroupById;
-        var currentTotal = (_stackedTotalsByGroup = stackedTotalsByGroupId.get(groupId)) != null ? _stackedTotalsByGroup : 0;
+        var currentTotal = stackedTotalsByGroupId.get(groupId) || 0;
         stackedTotalsByGroupId.set(groupId, currentTotal + numericValue);
       });
     });
@@ -4096,7 +4094,7 @@ var FusionChart$1 = React.forwardRef(function (props, comRef) {
 });
 
 var WidgetCard = React.forwardRef(function (props, comRef) {
-  var _widget$current13, _widget$current14, _widget$current15;
+  var _widget$current15, _widget$current16, _widget$current17, _widget$current18;
 
   var widget = React.useRef();
 
@@ -4118,15 +4116,39 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       headerErrorMessages = _useState4[0],
       setHeaderErrorMessages = _useState4[1];
 
+  var _useState5 = React.useState(false),
+      showCopiedNotification = _useState5[0],
+      setShowCopiedNotification = _useState5[1];
+
+  var copyPopupRef = React.useRef(null);
+  var copiedNotificationTimer = React.useRef(null);
+
   var editWidget = function editWidget() {
     props.editBtnClicked(widget.current);
   };
 
-  var copyWidget = function copyWidget() {
-    if (props && props.copyBtnClicked) {
+  var duplicateWidget = function duplicateWidget() {
+    if (props && props.duplicateBtnClicked) {
       var _widget$current;
 
-      props.copyBtnClicked((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key);
+      props.duplicateBtnClicked((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key);
+    } else if (props && props.copyBtnClicked) {
+      var _widget$current2;
+
+      props.copyBtnClicked((_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.key);
+    }
+  };
+
+  var copyWidgetToClipboard = function copyWidgetToClipboard() {
+    if (props && props.copyToClipboardBtnClicked && widget.current) {
+      var _widget$current3;
+
+      props.copyToClipboardBtnClicked((_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.key, widget.current);
+      setShowCopiedNotification(true);
+      if (copiedNotificationTimer.current) clearTimeout(copiedNotificationTimer.current);
+      copiedNotificationTimer.current = setTimeout(function () {
+        setShowCopiedNotification(false);
+      }, 700);
     }
   };
 
@@ -4135,20 +4157,23 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
 
     widget.current = props.widget;
     (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onEditWidget.subscribe(function (e) {
-      var _widget$current2;
+      var _widget$current4;
 
-      if ((e === null || e === void 0 ? void 0 : e.key) != ((_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.key)) return;
+      if ((e === null || e === void 0 ? void 0 : e.key) != ((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.key)) return;
       setIsLoading(true);
       widget.current = _extends({}, e);
       setIsLoading(false);
     });
     (_props$dataBinding2 = props.dataBinding) === null || _props$dataBinding2 === void 0 ? void 0 : _props$dataBinding2.widgetUpdated.subscribe(function (updatedWidget) {
-      var _widget$current3;
+      var _widget$current5;
 
-      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.key)) return;
+      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.key)) return;
       widget.current = _extends({}, updatedWidget);
       setTriggerId(uuid.v4());
     });
+    return function () {
+      if (copiedNotificationTimer.current) clearTimeout(copiedNotificationTimer.current);
+    };
   }, []);
   React.useImperativeHandle(comRef, function () {
     return {
@@ -4173,10 +4198,10 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var GetChartComponent = function GetChartComponent() {
-    var _widget$current4, _widget$current5, _widget$current6, _widget$current7, _widget$current8;
+    var _widget$current6, _widget$current7, _widget$current8, _widget$current9, _widget$current10;
 
-    if (isLoading || !((_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TypeCode)) return "";
-    if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
+    if (isLoading || !((_widget$current6 = widget.current) !== null && _widget$current6 !== void 0 && _widget$current6.TypeCode)) return "";
+    if (((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
       isInEditMode: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
@@ -4187,7 +4212,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
         return showErrorMsg(errorMsg);
       }
     });
-    if (((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TypeCode) == "table" || ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "pivot") return React__default.createElement(CustomChart, {
+    if (((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.TypeCode) == "table" || ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.TypeCode) == "pivot") return React__default.createElement(CustomChart, {
       isInEditMode: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
@@ -4195,7 +4220,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       widgetRef: props.widgetRef,
       onSelectDataPoint: props.onSelectDataPoint
     });
-    if (((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
+    if (((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
       ref: fusionChartRef,
       dataBinding: props.dataBinding,
       widget: widget.current,
@@ -4254,15 +4279,15 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var isThereTitle = function isThereTitle() {
-    var _widget$current9, _widget$current10;
+    var _widget$current11, _widget$current12;
 
-    return ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Title) && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Title.length) > 0;
+    return ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Title) && ((_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Title.length) > 0;
   };
 
   var isThereSubtitle = function isThereSubtitle() {
-    var _widget$current11, _widget$current12;
+    var _widget$current13, _widget$current14;
 
-    return ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Subtitle) && ((_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Subtitle.length) > 0;
+    return ((_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Subtitle) && ((_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Subtitle.length) > 0;
   };
 
   var tableHintMessage = function tableHintMessage() {
@@ -4311,7 +4336,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
         color: getCSSPropertyValue(widget.current, 'TitleFontColor', ''),
         textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined)
       }
-    }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title),
+    }, (_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Title),
     position: ['top center'],
     arrowStyle: {
       color: '#19395C'
@@ -4320,7 +4345,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     on: ['hover', 'focus']
   }, React__default.createElement("span", {
     className: "widget-title-tooltip-text"
-  }, (_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Title))), isTableOrPivotWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
+  }, (_widget$current16 = widget.current) === null || _widget$current16 === void 0 ? void 0 : _widget$current16.Title))), isTableOrPivotWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
     className: "titles-vertical-seeparator"
   }), React__default.createElement("div", {
     className: isThereSubtitle() ? "subtitle" : "subtitle margin-top-4",
@@ -4330,25 +4355,57 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', ''),
       minWidth: isThereSubtitle() && isTableOrPivotWidget() ? '5%' : undefined
     }
-  }, (_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Subtitle)), !isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
+  }, (_widget$current17 = widget.current) === null || _widget$current17 === void 0 ? void 0 : _widget$current17.Subtitle)), !isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
     className: isThereTitle() ? "widget-options-container" : "widget-options-container margin-top-6"
   }, React__default.createElement("div", null, " ", React__default.createElement(SvgEditIcon, {
     className: "widget-card-edit-icon",
     onClick: function onClick() {
       return editWidget();
     }
-  }), " "), React__default.createElement("div", null, " ", React__default.createElement(SvgCopyIcon, {
-    className: "widget-card-copy-icon",
+  }), " "), React__default.createElement(Popup, {
+    ref: copyPopupRef,
+    className: "widget-copy-dropdown-container",
+    trigger: React__default.createElement("div", null, React__default.createElement(SvgCopyIcon, {
+      className: "widget-card-copy-icon"
+    })),
+    position: ['bottom left', 'bottom center'],
+    closeOnDocumentClick: true,
+    closeOnEscape: true,
+    arrow: false,
+    offsetY: 2
+  }, React__default.createElement("div", {
+    className: "widget-copy-dropdown-menu"
+  }, React__default.createElement("div", {
+    className: "widget-copy-dropdown-item",
     onClick: function onClick() {
-      return copyWidget();
+      var _copyPopupRef$current;
+
+      (_copyPopupRef$current = copyPopupRef.current) === null || _copyPopupRef$current === void 0 ? void 0 : _copyPopupRef$current.close();
+      duplicateWidget();
+    }
+  }, "Duplicate"), React__default.createElement("div", {
+    className: "widget-copy-dropdown-item",
+    onClick: function onClick() {
+      var _copyPopupRef$current2;
+
+      (_copyPopupRef$current2 = copyPopupRef.current) === null || _copyPopupRef$current2 === void 0 ? void 0 : _copyPopupRef$current2.close();
+      copyWidgetToClipboard();
     }
-  }), " "), React__default.createElement("div", null, " ", React__default.createElement(SvgDeleteIcon, {
+  }, "Copy"))), React__default.createElement("div", null, " ", React__default.createElement(SvgDeleteIcon, {
     onClick: function onClick() {
       var _props$widget;
 
       return props.deleteBtnClicked((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.key);
     }
-  }), " ")), !props.isInEditMode && showHeaderErrorMessages && React__default.createElement("div", {
+  }), " ")), showCopiedNotification && React__default.createElement("div", {
+    className: "widget-copied-notification"
+  }, React__default.createElement("span", {
+    className: "widget-copied-notification-check"
+  }, "\u2713"), React__default.createElement("span", {
+    className: "widget-copied-notification-title"
+  }, (_widget$current18 = widget.current) === null || _widget$current18 === void 0 ? void 0 : _widget$current18.Title), React__default.createElement("span", {
+    className: "widget-copied-notification-text"
+  }, "widget copied")), !props.isInEditMode && showHeaderErrorMessages && React__default.createElement("div", {
     className: "header-message-error"
   }, React__default.createElement(Popup, {
     className: "header-message-error-tooltip-container",
@@ -4524,6 +4581,12 @@ var DashboardDesigner = function DashboardDesigner(props) {
     }
   }
 
+  function copyWidgetToClipboard(key, widget) {
+    if (props && props.onCopyWidgetToClipboard) {
+      props.onCopyWidgetToClipboard(key, widget);
+    }
+  }
+
   function UpdatePlaceholderDimensions(layouts) {
     if (!layouts) return;
     var max = minimumPlaceholderRowsCount;
@@ -4596,7 +4659,8 @@ var DashboardDesigner = function DashboardDesigner(props) {
       editBtnClicked: editWidget,
       deleteBtnClicked: confirmDeleteWidget,
       onSelectDataPoint: props.onSelectDataPoint,
-      copyBtnClicked: copyWidget,
+      duplicateBtnClicked: copyWidget,
+      copyToClipboardBtnClicked: copyWidgetToClipboard,
       ref: function ref(el) {
         var _widget$Layout3;
 
@@ -4678,6 +4742,12 @@ var Dashboard = function Dashboard(props) {
     }
   };
 
+  var copyWidgetToClipboard = function copyWidgetToClipboard(key, widget) {
+    if (props && props.onCopyWidgetToClipboard) {
+      props.onCopyWidgetToClipboard(key, widget);
+    }
+  };
+
   var updateWidgets = function updateWidgets(layouts) {
     var layoutsDic = {};
     Object.keys(layouts).forEach(function (sizeType) {
@@ -4745,6 +4815,7 @@ var Dashboard = function Dashboard(props) {
       return props.openDeleteWidgetConfirmWindow(deleteProps);
     },
     onCopyWidget: copyWidget,
+    onCopyWidgetToClipboard: copyWidgetToClipboard,
     openEditWidget: function openEditWidget(widget) {
       return props.openEditWidget(widget);
     }