logitude-dashboard-library 3.2.55 → 3.2.57

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.
@@ -1274,4 +1274,93 @@ $dark-grey: #717585;
1274
1274
  display: block;
1275
1275
  overflow: hidden;
1276
1276
  text-overflow: ellipsis;
1277
+ }
1278
+
1279
+ // Widget Copy Dropdown (Duplicate / Copy)
1280
+ .widget-copy-dropdown-container {
1281
+ &-content {
1282
+ padding: 0 !important;
1283
+ border-radius: 4px !important;
1284
+ box-shadow: 0px 8px 16px 0px #0000001A !important;
1285
+ border: 1px solid #F3F4F5 !important;
1286
+ }
1287
+ }
1288
+
1289
+ .widget-copy-dropdown-menu {
1290
+ background: #FFFFFF;
1291
+ border-radius: 4px;
1292
+ width: 168px;
1293
+ height: 72px;
1294
+ padding: 8px;
1295
+ display: flex;
1296
+ flex-direction: column;
1297
+ justify-content: center;
1298
+
1299
+ .widget-copy-dropdown-item {
1300
+ padding: 6px 10px;
1301
+ font-family: "Manrope", sans-serif;
1302
+ font-weight: 500;
1303
+ font-size: 12px;
1304
+ line-height: 16px;
1305
+ color: #404040;
1306
+ cursor: pointer;
1307
+ white-space: nowrap;
1308
+
1309
+ &:hover {
1310
+ background-color: #F3F4F5;
1311
+ border-radius: 4px;
1312
+ }
1313
+ }
1314
+ }
1315
+
1316
+ // Widget Copied Notification
1317
+ .widget-copied-notification {
1318
+ position: absolute;
1319
+ top: 32px;
1320
+ left: 8px;
1321
+ background: #19395C;
1322
+ color: #FFFFFF;
1323
+ padding: 6px;
1324
+ border-radius: 4px;
1325
+ display: flex;
1326
+ align-items: center;
1327
+ gap: 4px;
1328
+ z-index: 1000;
1329
+ white-space: nowrap;
1330
+ width: calc(100% - 16px);
1331
+ max-width: calc(100% - 16px);
1332
+ animation: widgetCopiedFadeIn 0.2s ease;
1333
+
1334
+ .widget-copied-notification-check {
1335
+ font-size: 12px;
1336
+ line-height: 16px;
1337
+ }
1338
+
1339
+ .widget-copied-notification-title {
1340
+ font-family: "Manrope", sans-serif;
1341
+ font-weight: 600;
1342
+ font-size: 12px;
1343
+ line-height: 16px;
1344
+ max-width: calc(100% - 50px);
1345
+ overflow: hidden;
1346
+ text-overflow: ellipsis;
1347
+ }
1348
+
1349
+ .widget-copied-notification-text {
1350
+ font-family: "Manrope", sans-serif;
1351
+ font-weight: 500;
1352
+ font-size: 12px;
1353
+ line-height: 16px;
1354
+ }
1355
+ }
1356
+
1357
+ @keyframes widgetCopiedFadeIn {
1358
+ from {
1359
+ opacity: 0;
1360
+ transform: translateY(-4px);
1361
+ }
1362
+ to {
1363
+ opacity: 1;
1364
+ transform: translateY(0);
1365
+ }
1277
1366
  }
@@ -83,6 +83,7 @@ export interface ChartInfo {
83
83
  minPlotHeightForValue: string;
84
84
  minAngleForValue: string;
85
85
  drawCrossLine: string;
86
+ yAxisMaxValue: string;
86
87
  palettecolors: string;
87
88
  plotHoverEffect: string;
88
89
  numberSuffix: string | null;
@@ -19,6 +19,7 @@ declare type DashboardDesignerProps = {
19
19
  onLayoutChange: (layouts: Layouts) => void;
20
20
  onWidgetDelete: (deleteProps: DeleteWidgetProps) => void;
21
21
  onCopyWidget?: (id: string) => void;
22
+ onCopyWidgetToClipboard?: (key: string, widget: ReactWidgetPM) => void;
22
23
  dataBinding: DashboardDataBinding;
23
24
  onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
24
25
  };
@@ -5,6 +5,8 @@ import { DashboardDataBinding } from '../../types/DashboardDataBinding';
5
5
  declare type WidgetCardProps = {
6
6
  editBtnClicked(widget: any): any;
7
7
  copyBtnClicked?(id: any): any;
8
+ duplicateBtnClicked?(id: any): any;
9
+ copyToClipboardBtnClicked?(key: any, widget: ReactWidgetPM): any;
8
10
  deleteBtnClicked(i: any): any;
9
11
  widget: ReactWidgetPM | undefined;
10
12
  widgetRef: ReactWidgetPM | undefined;
package/dist/index.d.ts CHANGED
@@ -19,6 +19,7 @@ declare type DashboardProps = {
19
19
  }) => void;
20
20
  openEditWidget: (Widget: ReactWidgetPM) => void;
21
21
  onCopyWidget?: (key: string) => void;
22
+ onCopyWidgetToClipboard?: (key: string, widget: ReactWidgetPM) => void;
22
23
  openDeleteWidgetConfirmWindow: (deleteProps: DeleteWidgetProps) => void;
23
24
  onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
24
25
  };
package/dist/index.js CHANGED
@@ -2542,6 +2542,7 @@ var quarters = ["Q", "Q1", "Q2", "Q3", "Q4"];
2542
2542
  function getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget) {
2543
2543
  if (seriesMeasuresIsEmpty(seriesMeasures)) return null;
2544
2544
  handelNullLabels(seriesMeasures);
2545
+ setSafeYAxisMaxValue(chartInfo, seriesMeasures, widget);
2545
2546
  return {
2546
2547
  chart: chartInfo,
2547
2548
  categories: buildCategories(seriesMeasures, widget),
@@ -2551,6 +2552,7 @@ function getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget) {
2551
2552
  function getStackedDataSource(chartInfo, seriesMeasures, widget) {
2552
2553
  if (seriesMeasuresIsEmpty(seriesMeasures)) return null;
2553
2554
  handelNullLabels(seriesMeasures);
2555
+ setSafeYAxisMaxValue(chartInfo, seriesMeasures, widget);
2554
2556
  return {
2555
2557
  chart: chartInfo,
2556
2558
  categories: buildStackedCategories(seriesMeasures, widget),
@@ -2583,6 +2585,66 @@ function seriesMeasuresIsEmpty(seriesMeasures) {
2583
2585
  return !hasValue;
2584
2586
  }
2585
2587
 
2588
+ function setSafeYAxisMaxValue(chartInfo, seriesMeasures, widget) {
2589
+ if (!isColumnOrBarChart(widget)) return;
2590
+ var maxMeasureValue = getMaxMeasureValue(seriesMeasures, widget);
2591
+ if (maxMeasureValue === null) return;
2592
+ var safeYAxisMaxValue = Math.max(1, Math.ceil(maxMeasureValue * 1.2));
2593
+ chartInfo.yAxisMaxValue = safeYAxisMaxValue.toString();
2594
+ }
2595
+
2596
+ function getMaxMeasureValue(seriesMeasures, widget) {
2597
+ if (!seriesMeasures || seriesMeasures.length === 0) return null;
2598
+
2599
+ if (widget !== null && widget !== void 0 && widget.IsStacked) {
2600
+ var stackedTotalsByGroupId = new Map();
2601
+ seriesMeasures.forEach(function (seriesMeasure) {
2602
+ var _seriesMeasure$Values;
2603
+
2604
+ seriesMeasure === null || seriesMeasure === void 0 ? void 0 : (_seriesMeasure$Values = seriesMeasure.Values) === null || _seriesMeasure$Values === void 0 ? void 0 : _seriesMeasure$Values.forEach(function (valueItem) {
2605
+ var numericValue = toNumericValue(valueItem === null || valueItem === void 0 ? void 0 : valueItem.Value);
2606
+ if (numericValue === null) return;
2607
+ var groupId = valueItem === null || valueItem === void 0 ? void 0 : valueItem.GroupById;
2608
+ var currentTotal = stackedTotalsByGroupId.get(groupId) || 0;
2609
+ stackedTotalsByGroupId.set(groupId, currentTotal + numericValue);
2610
+ });
2611
+ });
2612
+ var maxStackedTotal = null;
2613
+ stackedTotalsByGroupId.forEach(function (total) {
2614
+ if (maxStackedTotal === null || total > maxStackedTotal) {
2615
+ maxStackedTotal = total;
2616
+ }
2617
+ });
2618
+ return maxStackedTotal;
2619
+ }
2620
+
2621
+ var maxValue = null;
2622
+ seriesMeasures.forEach(function (seriesMeasure) {
2623
+ var _seriesMeasure$Values2;
2624
+
2625
+ seriesMeasure === null || seriesMeasure === void 0 ? void 0 : (_seriesMeasure$Values2 = seriesMeasure.Values) === null || _seriesMeasure$Values2 === void 0 ? void 0 : _seriesMeasure$Values2.forEach(function (valueItem) {
2626
+ var numericValue = toNumericValue(valueItem === null || valueItem === void 0 ? void 0 : valueItem.Value);
2627
+ if (numericValue === null) return;
2628
+
2629
+ if (maxValue === null || numericValue > maxValue) {
2630
+ maxValue = numericValue;
2631
+ }
2632
+ });
2633
+ });
2634
+ return maxValue;
2635
+ }
2636
+
2637
+ function toNumericValue(value) {
2638
+ if (value === null || value === undefined || value === "") return null;
2639
+ var numericValue = typeof value === "number" ? value : Number(value);
2640
+ if (!Number.isFinite(numericValue)) return null;
2641
+ return numericValue;
2642
+ }
2643
+
2644
+ function isColumnOrBarChart(widget) {
2645
+ return (widget === null || widget === void 0 ? void 0 : widget.TypeCode) === "column" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) === "bar";
2646
+ }
2647
+
2586
2648
  function buildDataSource(values, widget) {
2587
2649
  var data = [];
2588
2650
  if (!values || !values[0]) return data;
@@ -3052,11 +3114,15 @@ function getDefaultChartInfo(widget) {
3052
3114
  chart.valuePosition = widget.ShowValue && widget.ValuePosition ? widget.ValuePosition : 'Outside';
3053
3115
  var isValuePositionInside = widget.ShowValue && widget.ValuePosition && widget.ValuePosition.toLowerCase() == 'inside';
3054
3116
 
3055
- if (widget.ShowValue && widget.ValuePosition && isColumnOrBarChart(widget)) {
3117
+ if (isColumnOrBarChart$1(widget)) {
3118
+ chart.canvasTopPadding = "40";
3119
+ }
3120
+
3121
+ if (widget.ShowValue && widget.ValuePosition && isColumnOrBarChart$1(widget)) {
3056
3122
  chart.placeValuesInside = widget.ValuePosition.toLowerCase() == 'inside' ? "1" : "0";
3057
3123
  }
3058
3124
 
3059
- if (widget.IsStacked && isValuePositionInside && isColumnOrBarChart(widget)) {
3125
+ if (widget.IsStacked && isValuePositionInside && isColumnOrBarChart$1(widget)) {
3060
3126
  chart.minPlotHeightForValue = "15";
3061
3127
  }
3062
3128
 
@@ -3124,7 +3190,7 @@ function getWidgetLegendPosition(widget) {
3124
3190
  return widget.TypeCode == 'pie' || widget.TypeCode == 'donut' ? "right" : "bottom";
3125
3191
  }
3126
3192
 
3127
- function isColumnOrBarChart(widget) {
3193
+ function isColumnOrBarChart$1(widget) {
3128
3194
  if (!widget) return false;
3129
3195
  return widget.TypeCode == 'column' || widget.TypeCode == 'bar';
3130
3196
  }
@@ -4028,7 +4094,7 @@ var FusionChart$1 = React.forwardRef(function (props, comRef) {
4028
4094
  });
4029
4095
 
4030
4096
  var WidgetCard = React.forwardRef(function (props, comRef) {
4031
- var _widget$current13, _widget$current14, _widget$current15;
4097
+ var _widget$current15, _widget$current16, _widget$current17, _widget$current18;
4032
4098
 
4033
4099
  var widget = React.useRef();
4034
4100
 
@@ -4050,15 +4116,39 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4050
4116
  headerErrorMessages = _useState4[0],
4051
4117
  setHeaderErrorMessages = _useState4[1];
4052
4118
 
4119
+ var _useState5 = React.useState(false),
4120
+ showCopiedNotification = _useState5[0],
4121
+ setShowCopiedNotification = _useState5[1];
4122
+
4123
+ var copyPopupRef = React.useRef(null);
4124
+ var copiedNotificationTimer = React.useRef(null);
4125
+
4053
4126
  var editWidget = function editWidget() {
4054
4127
  props.editBtnClicked(widget.current);
4055
4128
  };
4056
4129
 
4057
- var copyWidget = function copyWidget() {
4058
- if (props && props.copyBtnClicked) {
4130
+ var duplicateWidget = function duplicateWidget() {
4131
+ if (props && props.duplicateBtnClicked) {
4059
4132
  var _widget$current;
4060
4133
 
4061
- props.copyBtnClicked((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key);
4134
+ props.duplicateBtnClicked((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key);
4135
+ } else if (props && props.copyBtnClicked) {
4136
+ var _widget$current2;
4137
+
4138
+ props.copyBtnClicked((_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.key);
4139
+ }
4140
+ };
4141
+
4142
+ var copyWidgetToClipboard = function copyWidgetToClipboard() {
4143
+ if (props && props.copyToClipboardBtnClicked && widget.current) {
4144
+ var _widget$current3;
4145
+
4146
+ props.copyToClipboardBtnClicked((_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.key, widget.current);
4147
+ setShowCopiedNotification(true);
4148
+ if (copiedNotificationTimer.current) clearTimeout(copiedNotificationTimer.current);
4149
+ copiedNotificationTimer.current = setTimeout(function () {
4150
+ setShowCopiedNotification(false);
4151
+ }, 700);
4062
4152
  }
4063
4153
  };
4064
4154
 
@@ -4067,20 +4157,23 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4067
4157
 
4068
4158
  widget.current = props.widget;
4069
4159
  (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onEditWidget.subscribe(function (e) {
4070
- var _widget$current2;
4160
+ var _widget$current4;
4071
4161
 
4072
- 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;
4162
+ 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;
4073
4163
  setIsLoading(true);
4074
4164
  widget.current = _extends({}, e);
4075
4165
  setIsLoading(false);
4076
4166
  });
4077
4167
  (_props$dataBinding2 = props.dataBinding) === null || _props$dataBinding2 === void 0 ? void 0 : _props$dataBinding2.widgetUpdated.subscribe(function (updatedWidget) {
4078
- var _widget$current3;
4168
+ var _widget$current5;
4079
4169
 
4080
- 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;
4170
+ 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;
4081
4171
  widget.current = _extends({}, updatedWidget);
4082
4172
  setTriggerId(uuid.v4());
4083
4173
  });
4174
+ return function () {
4175
+ if (copiedNotificationTimer.current) clearTimeout(copiedNotificationTimer.current);
4176
+ };
4084
4177
  }, []);
4085
4178
  React.useImperativeHandle(comRef, function () {
4086
4179
  return {
@@ -4105,10 +4198,10 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4105
4198
  };
4106
4199
 
4107
4200
  var GetChartComponent = function GetChartComponent() {
4108
- var _widget$current4, _widget$current5, _widget$current6, _widget$current7, _widget$current8;
4201
+ var _widget$current6, _widget$current7, _widget$current8, _widget$current9, _widget$current10;
4109
4202
 
4110
- if (isLoading || !((_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TypeCode)) return "";
4111
- if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
4203
+ if (isLoading || !((_widget$current6 = widget.current) !== null && _widget$current6 !== void 0 && _widget$current6.TypeCode)) return "";
4204
+ if (((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
4112
4205
  isInEditMode: props.isInEditMode,
4113
4206
  isPreviewModeActive: props.isPreviewModeActive,
4114
4207
  dataBinding: props.dataBinding,
@@ -4119,7 +4212,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4119
4212
  return showErrorMsg(errorMsg);
4120
4213
  }
4121
4214
  });
4122
- 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, {
4215
+ 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, {
4123
4216
  isInEditMode: props.isInEditMode,
4124
4217
  isPreviewModeActive: props.isPreviewModeActive,
4125
4218
  dataBinding: props.dataBinding,
@@ -4127,7 +4220,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4127
4220
  widgetRef: props.widgetRef,
4128
4221
  onSelectDataPoint: props.onSelectDataPoint
4129
4222
  });
4130
- if (((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
4223
+ if (((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
4131
4224
  ref: fusionChartRef,
4132
4225
  dataBinding: props.dataBinding,
4133
4226
  widget: widget.current,
@@ -4186,15 +4279,15 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4186
4279
  };
4187
4280
 
4188
4281
  var isThereTitle = function isThereTitle() {
4189
- var _widget$current9, _widget$current10;
4282
+ var _widget$current11, _widget$current12;
4190
4283
 
4191
- 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;
4284
+ 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;
4192
4285
  };
4193
4286
 
4194
4287
  var isThereSubtitle = function isThereSubtitle() {
4195
- var _widget$current11, _widget$current12;
4288
+ var _widget$current13, _widget$current14;
4196
4289
 
4197
- 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;
4290
+ 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;
4198
4291
  };
4199
4292
 
4200
4293
  var tableHintMessage = function tableHintMessage() {
@@ -4243,7 +4336,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4243
4336
  color: getCSSPropertyValue(widget.current, 'TitleFontColor', ''),
4244
4337
  textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined)
4245
4338
  }
4246
- }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title),
4339
+ }, (_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Title),
4247
4340
  position: ['top center'],
4248
4341
  arrowStyle: {
4249
4342
  color: '#19395C'
@@ -4252,7 +4345,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4252
4345
  on: ['hover', 'focus']
4253
4346
  }, React__default.createElement("span", {
4254
4347
  className: "widget-title-tooltip-text"
4255
- }, (_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Title))), isTableOrPivotWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
4348
+ }, (_widget$current16 = widget.current) === null || _widget$current16 === void 0 ? void 0 : _widget$current16.Title))), isTableOrPivotWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
4256
4349
  className: "titles-vertical-seeparator"
4257
4350
  }), React__default.createElement("div", {
4258
4351
  className: isThereSubtitle() ? "subtitle" : "subtitle margin-top-4",
@@ -4262,25 +4355,57 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
4262
4355
  color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', ''),
4263
4356
  minWidth: isThereSubtitle() && isTableOrPivotWidget() ? '5%' : undefined
4264
4357
  }
4265
- }, (_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Subtitle)), !isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
4358
+ }, (_widget$current17 = widget.current) === null || _widget$current17 === void 0 ? void 0 : _widget$current17.Subtitle)), !isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
4266
4359
  className: isThereTitle() ? "widget-options-container" : "widget-options-container margin-top-6"
4267
4360
  }, React__default.createElement("div", null, " ", React__default.createElement(SvgEditIcon, {
4268
4361
  className: "widget-card-edit-icon",
4269
4362
  onClick: function onClick() {
4270
4363
  return editWidget();
4271
4364
  }
4272
- }), " "), React__default.createElement("div", null, " ", React__default.createElement(SvgCopyIcon, {
4273
- className: "widget-card-copy-icon",
4365
+ }), " "), React__default.createElement(Popup, {
4366
+ ref: copyPopupRef,
4367
+ className: "widget-copy-dropdown-container",
4368
+ trigger: React__default.createElement("div", null, React__default.createElement(SvgCopyIcon, {
4369
+ className: "widget-card-copy-icon"
4370
+ })),
4371
+ position: ['bottom left', 'bottom center'],
4372
+ closeOnDocumentClick: true,
4373
+ closeOnEscape: true,
4374
+ arrow: false,
4375
+ offsetY: 2
4376
+ }, React__default.createElement("div", {
4377
+ className: "widget-copy-dropdown-menu"
4378
+ }, React__default.createElement("div", {
4379
+ className: "widget-copy-dropdown-item",
4274
4380
  onClick: function onClick() {
4275
- return copyWidget();
4381
+ var _copyPopupRef$current;
4382
+
4383
+ (_copyPopupRef$current = copyPopupRef.current) === null || _copyPopupRef$current === void 0 ? void 0 : _copyPopupRef$current.close();
4384
+ duplicateWidget();
4276
4385
  }
4277
- }), " "), React__default.createElement("div", null, " ", React__default.createElement(SvgDeleteIcon, {
4386
+ }, "Duplicate"), React__default.createElement("div", {
4387
+ className: "widget-copy-dropdown-item",
4388
+ onClick: function onClick() {
4389
+ var _copyPopupRef$current2;
4390
+
4391
+ (_copyPopupRef$current2 = copyPopupRef.current) === null || _copyPopupRef$current2 === void 0 ? void 0 : _copyPopupRef$current2.close();
4392
+ copyWidgetToClipboard();
4393
+ }
4394
+ }, "Copy"))), React__default.createElement("div", null, " ", React__default.createElement(SvgDeleteIcon, {
4278
4395
  onClick: function onClick() {
4279
4396
  var _props$widget;
4280
4397
 
4281
4398
  return props.deleteBtnClicked((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.key);
4282
4399
  }
4283
- }), " ")), !props.isInEditMode && showHeaderErrorMessages && React__default.createElement("div", {
4400
+ }), " ")), showCopiedNotification && React__default.createElement("div", {
4401
+ className: "widget-copied-notification"
4402
+ }, React__default.createElement("span", {
4403
+ className: "widget-copied-notification-check"
4404
+ }, "\u2713"), React__default.createElement("span", {
4405
+ className: "widget-copied-notification-title"
4406
+ }, (_widget$current18 = widget.current) === null || _widget$current18 === void 0 ? void 0 : _widget$current18.Title), React__default.createElement("span", {
4407
+ className: "widget-copied-notification-text"
4408
+ }, "widget copied")), !props.isInEditMode && showHeaderErrorMessages && React__default.createElement("div", {
4284
4409
  className: "header-message-error"
4285
4410
  }, React__default.createElement(Popup, {
4286
4411
  className: "header-message-error-tooltip-container",
@@ -4456,6 +4581,12 @@ var DashboardDesigner = function DashboardDesigner(props) {
4456
4581
  }
4457
4582
  }
4458
4583
 
4584
+ function copyWidgetToClipboard(key, widget) {
4585
+ if (props && props.onCopyWidgetToClipboard) {
4586
+ props.onCopyWidgetToClipboard(key, widget);
4587
+ }
4588
+ }
4589
+
4459
4590
  function UpdatePlaceholderDimensions(layouts) {
4460
4591
  if (!layouts) return;
4461
4592
  var max = minimumPlaceholderRowsCount;
@@ -4528,7 +4659,8 @@ var DashboardDesigner = function DashboardDesigner(props) {
4528
4659
  editBtnClicked: editWidget,
4529
4660
  deleteBtnClicked: confirmDeleteWidget,
4530
4661
  onSelectDataPoint: props.onSelectDataPoint,
4531
- copyBtnClicked: copyWidget,
4662
+ duplicateBtnClicked: copyWidget,
4663
+ copyToClipboardBtnClicked: copyWidgetToClipboard,
4532
4664
  ref: function ref(el) {
4533
4665
  var _widget$Layout3;
4534
4666
 
@@ -4610,6 +4742,12 @@ var Dashboard = function Dashboard(props) {
4610
4742
  }
4611
4743
  };
4612
4744
 
4745
+ var copyWidgetToClipboard = function copyWidgetToClipboard(key, widget) {
4746
+ if (props && props.onCopyWidgetToClipboard) {
4747
+ props.onCopyWidgetToClipboard(key, widget);
4748
+ }
4749
+ };
4750
+
4613
4751
  var updateWidgets = function updateWidgets(layouts) {
4614
4752
  var layoutsDic = {};
4615
4753
  Object.keys(layouts).forEach(function (sizeType) {
@@ -4677,6 +4815,7 @@ var Dashboard = function Dashboard(props) {
4677
4815
  return props.openDeleteWidgetConfirmWindow(deleteProps);
4678
4816
  },
4679
4817
  onCopyWidget: copyWidget,
4818
+ onCopyWidgetToClipboard: copyWidgetToClipboard,
4680
4819
  openEditWidget: function openEditWidget(widget) {
4681
4820
  return props.openEditWidget(widget);
4682
4821
  }