logitude-dashboard-library 1.4.60 → 1.4.61

package/dist/index.js

@@ -17,16 +17,19 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
   return _extends.apply(this, arguments);
 }
+
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -35,14 +38,19 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
+
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
   return arr2;
 }
+
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (it) return (it = it.call(o)).next.bind(it);
+
   if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
     if (it) o = it;
     var i = 0;
@@ -56,6 +64,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
       };
     };
   }
+
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
@@ -63,8 +72,10 @@ var Session = function Session() {};
 
 var Tools = /*#__PURE__*/function () {
   function Tools() {}
+
   Tools.GetLogitudeURL = function GetLogitudeURL() {
     var logitude_url = location.href.replace('index.html', '');
+
     if (location.href.indexOf('localhost') > -1) {
       logitude_url = 'http://localhost:9996';
     } else {
@@ -73,19 +84,24 @@ var Tools = /*#__PURE__*/function () {
       url = url.replace(url.substring(url.lastIndexOf('/'), url.length), "");
       logitude_url = url;
     }
+
     return logitude_url;
   };
+
   Tools.Map = function Map(from, to) {
     if (!from) return;
     if (!to) to = {};
     var keys = Object.keys(from);
+
     for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
       var k = _keys[_i];
+
       if (from[k]) {
         to[k] = from[k];
       }
     }
   };
+
   return Tools;
 }();
 
@@ -93,7 +109,9 @@ var ApiServices = /*#__PURE__*/function () {
   function ApiServices() {
     this._apiUrl = Tools.GetLogitudeURL();
   }
+
   var _proto = ApiServices.prototype;
+
   _proto.getByFilters = function getByFilters(api, filters) {
     var token = this.getTokenFromStorage();
     var apiURL = "" + this._apiUrl + api;
@@ -105,6 +123,7 @@ var ApiServices = /*#__PURE__*/function () {
       }
     });
   };
+
   _proto.get = function get(api) {
     var token = this.getTokenFromStorage();
     var apiURL = "" + this._apiUrl + api;
@@ -115,6 +134,7 @@ var ApiServices = /*#__PURE__*/function () {
       }
     });
   };
+
   _proto.post = function post(api, date) {
     var token = this.getTokenFromStorage();
     var apiURL = "" + this._apiUrl + api;
@@ -125,32 +145,41 @@ var ApiServices = /*#__PURE__*/function () {
       }
     });
   };
+
   _proto.getTokenFromStorage = function getTokenFromStorage() {
     return Session.Token || '';
   };
+
   _proto.ConcatFiltersToURL = function ConcatFiltersToURL(filters, urlparameters) {
     var mykeys = Object.keys(filters);
     var addtionalFiltersValues = null;
+
     for (var i in mykeys) {
       var propName = mykeys[i];
       var propValue = filters[propName];
       var ignoreFilter = propName.indexOf("Operator") > 0 && propValue == "Equals" || propName == "AdditionalFilters";
+
       if (urlparameters != "?") {
         urlparameters = urlparameters.concat('&');
       }
+
       if (!ignoreFilter) {
         propValue = propValue ? encodeURIComponent(propValue) : '';
         urlparameters = urlparameters.concat(propName.concat('=').concat(propValue));
       }
+
       if (propName == "AdditionalFilters" && propValue.length > 0) {
         addtionalFiltersValues = JSON.stringify(propValue);
       }
     }
+
     if (addtionalFiltersValues) {
       urlparameters = urlparameters.concat("&AdditionalFilters=").concat(addtionalFiltersValues);
     }
+
     return urlparameters;
   };
+
   return ApiServices;
 }();
 
@@ -159,31 +188,39 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
     this.controller = 'DashboardAnalytics';
     this._ApiServices = new ApiServices();
   }
+
   var _proto = DashboardAnalyticsService.prototype;
+
   _proto.getData = function getData(widget) {
     return this._ApiServices.post("/api/" + this.controller + "/PostGetDataAnalytic", widget);
   };
+
   _proto.getKpiData = function getKpiData(widget) {
     return this._ApiServices.post("/api/" + this.controller + "/PostGetKpiData", widget);
   };
+
   return DashboardAnalyticsService;
 }();
 
 var _path;
+
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
   return _extends$1.apply(this, arguments);
 }
+
 function SvgRedWarning(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -204,59 +241,79 @@ var DateGroupCodes = {
   Month_Year: 'Month & Year',
   Quarter_Year: 'Quarter & Year'
 };
+
 var getDateFormat = function getDateFormat(label, _format) {
   if (!label) return label;
+
   var _date = moment(label);
+
   if (!_date || !_date.isValid()) return label;
   return _date.format(_format);
 };
+
 var getQuarterYearFormat = function getQuarterYearFormat(label) {
   if (!label) return label;
+
   if (label.includes("/")) {
     var result = label.split("/");
     var quarterVal = result && result[1] ? result[1] : "";
     var yearVal = result && result[0] ? result[0] : "";
     return quarterVal + " " + yearVal;
   }
+
   return label;
 };
+
 var getLabelFormatByDateGroupType = function getLabelFormatByDateGroupType(label, widget, isSecondGrouping) {
   if (isSecondGrouping === void 0) {
     isSecondGrouping = false;
   }
+
   if (!widget) return label;
   var groupFieldDataType = isSecondGrouping ? widget.SecondaryDateGroupCode : widget.DateGroupCode;
   if (!groupFieldDataType) return label;
+
   switch (groupFieldDataType) {
     case DateGroupCodes.Full_Date:
       return getDateFormat(label, "DD MMM YYYY");
+
     case DateGroupCodes.Month:
       return getDateFormat(label, "MMM");
+
     case DateGroupCodes.Quarter:
       return label;
+
     case DateGroupCodes.Year:
       return getDateFormat(label, "YYYY");
+
     case DateGroupCodes.Month_Year:
       return getDateFormat(label, "MMM YYYY");
+
     case DateGroupCodes.Quarter_Year:
       return getQuarterYearFormat(label);
+
     default:
       return label;
   }
 };
 
 var KpiChart = function KpiChart(props) {
-  var _widget$current3;
+  var _widget$current4;
+
   var _useState = React.useState(false),
-    dataLoaded = _useState[0],
-    setDataLoaded = _useState[1];
+      dataLoaded = _useState[0],
+      setDataLoaded = _useState[1];
+
   var _useState2 = React.useState(),
-    error = _useState2[0],
-    setError = _useState2[1];
+      error = _useState2[0],
+      setError = _useState2[1];
+
   var widget = React.useRef();
+
   var _useState3 = React.useState(),
-    data = _useState3[0],
-    setData = _useState3[1];
+      data = _useState3[0],
+      setData = _useState3[1];
+
   React.useEffect(function () {
     widget.current = props.customChartProps.widget;
     setDataLoaded(false);
@@ -264,6 +321,7 @@ var KpiChart = function KpiChart(props) {
       RefreshData();
     }, 500);
   }, []);
+
   var RefreshData = function RefreshData() {
     if (Session.Tenant == 0) {
       var emptyData = {};
@@ -272,28 +330,39 @@ var KpiChart = function KpiChart(props) {
       setDataLoaded(true);
       return;
     }
+
     var dashboardAnalyticsService = new DashboardAnalyticsService();
+
     var postWidget = _extends({}, widget.current);
+
     postWidget.onChange = undefined;
     dashboardAnalyticsService.getKpiData(postWidget).then(function (result) {
       setData(result.data);
       setDataLoaded(true);
     }, function (error) {
       var _error$response, _error$response$data, _error$response2, _error$response2$data;
+
       console.log('error', error);
       if (error !== null && error !== void 0 && (_error$response = error.response) !== null && _error$response !== void 0 && (_error$response$data = _error$response.data) !== null && _error$response$data !== void 0 && _error$response$data.ErrorMessage) setError(error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : _error$response2$data.ErrorMessage);else setError(error.message);
       setDataLoaded(true);
     });
   };
+
   var kpiClick = function kpiClick() {
-    var _widget$current, _widget$current2, _widget$current2$Widg;
+    var _widget$current, _widget$current2, _widget$current3, _widget$current3$Widg;
+
     var measureFieldId;
-    if (widget !== null && widget !== void 0 && (_widget$current = widget.current) !== null && _widget$current !== void 0 && _widget$current.WidgetMeasures) measureFieldId = widget === null || widget === void 0 ? void 0 : (_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : (_widget$current2$Widg = _widget$current2.WidgetMeasures[0]) === null || _widget$current2$Widg === void 0 ? void 0 : _widget$current2$Widg.MeasureFieldId;
+    var currentWidgetMeasure = widget === null || widget === void 0 ? void 0 : (_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.WidgetMeasures[0];
+    if (widget !== null && widget !== void 0 && (_widget$current2 = widget.current) !== null && _widget$current2 !== void 0 && _widget$current2.WidgetMeasures) measureFieldId = widget === null || widget === void 0 ? void 0 : (_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : (_widget$current3$Widg = _widget$current3.WidgetMeasures[0]) === null || _widget$current3$Widg === void 0 ? void 0 : _widget$current3$Widg.MeasureFieldId;
     props.customChartProps.onSelectDataPoint({
       MeasureFieldId: measureFieldId,
-      Widget: widget.current
+      Widget: widget.current,
+      MeasureCode: currentWidgetMeasure.MeasureCode,
+      Formula: currentWidgetMeasure.Formula,
+      GroupById: data === null || data === void 0 ? void 0 : data.GroupById
     });
   };
+
   function getRatioComponent() {
     if (!(data !== null && data !== void 0 && data.CompareWithPrevious)) return null;
     return React__default.createElement("div", {
@@ -302,6 +371,7 @@ var KpiChart = function KpiChart(props) {
       className: 'dl-kpi-ratio-text'
     }, data === null || data === void 0 ? void 0 : data.Ratio, " %"));
   }
+
   function getArrowComponent() {
     if (!data) return null;
     if ((data === null || data === void 0 ? void 0 : data.Ratio) == 0 || data.Value == data.ComparisonValue || (data.Value == "0" || data.Value == 0) && (data.ComparisonValue == "0" || data.ComparisonValue == 0)) return React__default.createElement("div", {
@@ -336,6 +406,7 @@ var KpiChart = function KpiChart(props) {
     }));
     return null;
   }
+
   function getPreviousValueComponent() {
     if (!(data !== null && data !== void 0 && data.CompareWithPrevious)) return null;
     var prevtext = !(data !== null && data !== void 0 && data.ComparisonValue) ? '' : data === null || data === void 0 ? void 0 : data.ComparisonValue;
@@ -349,6 +420,7 @@ var KpiChart = function KpiChart(props) {
       className: "dl-kpi-prev-abbreviationSymbol"
     }, data === null || data === void 0 ? void 0 : data.ComparisonAbbreviationSymbol));
   }
+
   function getValueData() {
     if ((data === null || data === void 0 ? void 0 : data.Value) == null) return React__default.createElement("div", {
       className: "dl-kpi-no-data"
@@ -357,6 +429,7 @@ var KpiChart = function KpiChart(props) {
       className: "dl-kpi-value dl-kpi-textTrimming"
     }, data === null || data === void 0 ? void 0 : data.Value);
   }
+
   function getValueComponent() {
     return React__default.createElement("div", {
       className: "dl-kpi-sub-container"
@@ -366,14 +439,16 @@ var KpiChart = function KpiChart(props) {
       className: "dl-kpi-unit"
     }, data === null || data === void 0 ? void 0 : data.Unit), getRatioComponent());
   }
+
   function getLabel() {
     var labelFormated = getLabelFormatByDateGroupType(data.Label, widget.current, false);
     return React__default.createElement("div", {
       className: "dl-kpi-label-container"
     }, React__default.createElement("span", {
-      className: "dl-kpi-label-span"
+      className: "dl-kpi-label-span dl-kpi-textTrimming"
     }, labelFormated));
   }
+
   return !dataLoaded ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
@@ -385,7 +460,7 @@ var KpiChart = function KpiChart(props) {
     animationDuration: "2s"
   })) : !error ? React__default.createElement("div", {
     onClick: kpiClick,
-    className: ((_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.Alighnment) == "Left" ? "dl-kpi-container-click" : "dl-kpi-container-click dl-kpi-center-container"
+    className: ((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.Alighnment) == "Left" ? "dl-kpi-container-click" : "dl-kpi-container-click dl-kpi-center-container"
   }, React__default.createElement("div", {
     className: "dl-kpi-container"
   }, getLabel(), getValueComponent(), getPreviousValueComponent())) : React__default.createElement("div", {
@@ -405,15 +480,18 @@ var KpiChart = function KpiChart(props) {
 var CustomChart = function CustomChart(props) {
   var project = function project() {
     var _props$widget;
+
     switch ((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.TypeCode) {
       case "kpi":
         return React__default.createElement(KpiChart, {
           customChartProps: props
         });
+
       default:
         return React__default.createElement("div", null, "Invalid Type");
     }
   };
+
   return React__default.createElement("div", {
     className: "dl-custom-chart-container"
   }, project());
@@ -431,18 +509,25 @@ function getSeriesPositionColor(position) {
   switch (position) {
     case 1:
       return mainBlueColor;
+
     case 2:
       return mainGreenColor;
+
     case 3:
       return mainYellowColor;
+
     case 4:
       return mainTurquoiseColor;
+
     case 5:
       return mainPurpleColor;
+
     case 6:
       return mainOrangeColor;
+
     case 7:
       return mainRedColor;
+
     default:
       return null;
   }
@@ -452,18 +537,22 @@ function buildToolTip(widget, value, seriesName, label, index) {
   var padding = widget.TypeCode == 'line' && index > 0 ? 'padding-top: 3px' : '';
   return "\n    <div style=\"min-width: 108px;" + padding + "\">\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; height: 10px; width: 10px; background-color: #A4A4A4; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px;font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;  flex: none; order: 1;flex-grow: 0;\"> " + getTooltiplabel(label) + "</p>\n        </div>\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n        <div style=\"display: flex;align-items: center;margin:0;margin-top: 6px;\">\n            <p style=\"margin: 0;font-family: 'Manrope';font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;flex: none;order: 0;flex-grow: 0;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;flex: none; order: 1;flex-grow: 0;\">" + getTooltipValue(value) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
 }
+
 function getTooltipPercentage(widget) {
   if (widget.TypeCode != "donut" && widget.TypeCode != "pie") return "";
   return "\n    <p style=\"margin: 0;margin-left: 2px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;flex: none; order: 1;flex-grow: 0;\">($percentValue)</p>\n    ";
 }
+
 function getTooltiplabel(value) {
   if (value) return value;
   return '$label';
 }
+
 function getTooltipValue(value) {
   if (value) return value;
   return '$dataValue';
 }
+
 function getMeasureType(seriesName) {
   if (!seriesName) return "Count:";
   return seriesName.replace(/ .*/, '') + ":";
@@ -495,6 +584,7 @@ function getSimpleDataSource(chartInfo, seriesMeasures, widget) {
     data: buildDataSource(seriesMeasures, widget)
   };
 }
+
 function handelNullLabels(seriesMeasures) {
   seriesMeasures.forEach(function (element) {
     element.Values.forEach(function (value) {
@@ -502,6 +592,7 @@ function handelNullLabels(seriesMeasures) {
     });
   });
 }
+
 function seriesMeasuresIsEmpty(seriesMeasures) {
   if (!seriesMeasures || seriesMeasures.length == 0) return true;
   var hasValue = false;
@@ -510,6 +601,7 @@ function seriesMeasuresIsEmpty(seriesMeasures) {
   });
   return !hasValue;
 }
+
 function buildDataSource(values, widget) {
   var data = [];
   if (!values || !values[0]) return data;
@@ -520,7 +612,9 @@ function buildDataSource(values, widget) {
       label: getLabelFormatByDateGroupType(e.Label, widget, false),
       id: {
         GroupById: e.GroupById,
-        MeasureFieldId: series.MeasureFieldId
+        MeasureFieldId: series.MeasureFieldId,
+        MeasureCode: series.MeasureCode,
+        Formula: series.Formula
       },
       tooltext: buildToolTip(widget, null, series.Name, e.Label, 0),
       color: getSeriesPositionColor(index + 1)
@@ -529,6 +623,7 @@ function buildDataSource(values, widget) {
   });
   return data;
 }
+
 function buildDataSet(seriesMeasures, widget) {
   var dataSet = [];
   var seriesPosition = 1;
@@ -538,7 +633,9 @@ function buildDataSet(seriesMeasures, widget) {
         value: e.Value,
         id: {
           GroupById: e.GroupById,
-          MeasureFieldId: seriesMeasure.MeasureFieldId
+          MeasureFieldId: seriesMeasure.MeasureFieldId,
+          MeasureCode: seriesMeasure.MeasureCode,
+          Formula: seriesMeasure.Formula
         },
         tooltext: buildToolTip(widget, e.Value, seriesMeasure.Name, null, index)
       };
@@ -559,6 +656,7 @@ function buildDataSet(seriesMeasures, widget) {
   });
   return dataSet;
 }
+
 function buildStackedDataSet(seriesMeasures, widget) {
   var dataSet = [];
   var seriesPosition = 1;
@@ -583,11 +681,13 @@ function buildStackedDataSet(seriesMeasures, widget) {
   });
   return dataSet;
 }
+
 function buildStackedGroupData(secGroup, series, widget) {
   var uniqueGroups = getUniqueGroupOrderdList(series);
   var data = [];
   uniqueGroups.forEach(function (group) {
     var _series$Values$find;
+
     data.push({
       value: (_series$Values$find = series.Values.find(function (x) {
         return x.GroupById == group.code && x.GroupByIdSec == secGroup.code;
@@ -602,6 +702,7 @@ function buildStackedGroupData(secGroup, series, widget) {
   });
   return data;
 }
+
 function buildCategories(seriesMeasures, widget) {
   var categories = seriesMeasures[0].Values.map(function (e) {
     return {
@@ -614,6 +715,7 @@ function buildCategories(seriesMeasures, widget) {
   });
   return result;
 }
+
 function buildStackedCategories(seriesMeasures, widget) {
   var uniqueGroups = getUniqueGroupOrderdList(seriesMeasures[0]);
   var categories = uniqueGroups.map(function (e) {
@@ -627,6 +729,7 @@ function buildStackedCategories(seriesMeasures, widget) {
   });
   return result;
 }
+
 function getUniqueGroupOrderdList(series) {
   var uniqueGroups = [];
   series.Values.forEach(function (element) {
@@ -648,20 +751,26 @@ function BuildFusionChartObject(seriesMeasures, widget) {
     case 'bar':
       if (!widget.SecondaryGroupById) return getBarObject(seriesMeasures, widget);
       return getStackedBarObject(seriesMeasures, widget);
+
     case 'line':
       if (!widget.SecondaryGroupById) return getLineObject(seriesMeasures, widget);
       return getClusteredLineObject(seriesMeasures, widget);
+
     case 'pie':
       return getPieObject(seriesMeasures, widget);
+
     case 'donut':
       return getDonutObject(seriesMeasures, widget);
+
     case 'column':
       if (!widget.SecondaryGroupById) return getColumnObject(seriesMeasures, widget);
       return getClusteredColumnObject(seriesMeasures, widget);
+
     default:
       return {};
   }
 }
+
 function getBarObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "scrollbar2d";
@@ -677,6 +786,7 @@ function getBarObject(seriesMeasures, widget) {
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
+
 function getStackedBarObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = widget.IsStacked ? "scrollstackedbar2d" : "scrollbar2d";
@@ -692,6 +802,7 @@ function getStackedBarObject(seriesMeasures, widget) {
   chart.dataSource = getStackedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
+
 function getClusteredColumnObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = widget.IsStacked ? "scrollstackedcolumn2d" : "scrollcolumn2d";
@@ -707,6 +818,7 @@ function getClusteredColumnObject(seriesMeasures, widget) {
   chart.dataSource = getStackedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
+
 function getClusteredLineObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "msline";
@@ -722,6 +834,7 @@ function getClusteredLineObject(seriesMeasures, widget) {
   chart.dataSource = getStackedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
+
 function getLineObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "scrollline2d";
@@ -742,6 +855,7 @@ function getLineObject(seriesMeasures, widget) {
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
+
 function getDonutObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "doughnut2d";
@@ -756,6 +870,7 @@ function getDonutObject(seriesMeasures, widget) {
   chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
+
 function getPieObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "pie2d";
@@ -770,6 +885,7 @@ function getPieObject(seriesMeasures, widget) {
   chartInfo.legendPosition = getWidgetLegendPosition(widget);
   return chart;
 }
+
 function getColumnObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "scrollcombidy2d";
@@ -789,6 +905,7 @@ function getColumnObject(seriesMeasures, widget) {
   chartInfo.legendPosition = getWidgetLegendPosition(widget);
   return chart;
 }
+
 function setLineDash(chartInfo) {
   chartInfo.divLineDashed = "1";
   chartInfo.divLineDashLen = "5";
@@ -797,6 +914,7 @@ function setLineDash(chartInfo) {
   chartInfo.divLineAlpha = "100";
   chartInfo.divLineThickness = "1";
 }
+
 function getDefaultChartobject() {
   var chart = {};
   chart.type = "column2d";
@@ -805,6 +923,7 @@ function getDefaultChartobject() {
   chart.dataFormat = "json";
   return chart;
 }
+
 function getDefaultChartInfo(widget) {
   var chart = {};
   chart.theme = "fusion";
@@ -838,15 +957,19 @@ function getDefaultChartInfo(widget) {
   chart.showValues = widget.ShowValue ? "1" : '0';
   chart.valuePosition = widget.ShowValue && widget.ValuePosition ? widget.ValuePosition : 'Outside';
   var isValuePositionInside = widget.ShowValue && widget.ValuePosition && widget.ValuePosition.toLowerCase() == 'inside';
+
   if (widget.ShowValue && widget.ValuePosition && isColumnOrBarChart(widget)) {
     chart.placeValuesInside = widget.ValuePosition.toLowerCase() == 'inside' ? "1" : "0";
   }
+
   if (widget.IsStacked && isValuePositionInside && isColumnOrBarChart(widget)) {
     chart.minPlotHeightForValue = "15";
   }
+
   if (isValuePositionInside && isPieOrDonutChart(widget)) {
     chart.minAngleForValue = "15";
   }
+
   chart.enableSlicing = "0";
   chart.enableRotation = "0";
   chart.chartTopMargin = "10";
@@ -860,24 +983,29 @@ function getDefaultChartInfo(widget) {
   chart.plotColorinTooltip = "0";
   return chart;
 }
+
 function setPieDonutLegends(chart, widget) {
   chart.showLabels = widget.LabelsPosition == 'InLegend' ? '0' : '1';
   chart.showLegend = widget.ShowLegend ? '1' : '0';
   setOnChartLegend(chart, widget);
   setChartInLegend(chart, widget);
 }
+
 function getWidgetLegendPosition(widget) {
   if (widget.LegendPosition) return widget.LegendPosition;
   return widget.TypeCode == 'pie' || widget.TypeCode == 'donut' ? "right" : "bottom";
 }
+
 function isColumnOrBarChart(widget) {
   if (!widget) return false;
   return widget.TypeCode == 'column' || widget.TypeCode == 'bar';
 }
+
 function isPieOrDonutChart(widget) {
   if (!widget) return false;
   return widget.TypeCode == 'pie' || widget.TypeCode == 'donut';
 }
+
 function setOnChartLegend(chart, widget) {
   if (widget.LabelsPosition != 'InLegend') return;
   chart.legendPosition = getWidgetLegendPosition(widget);
@@ -890,12 +1018,15 @@ function setOnChartLegend(chart, widget) {
   chart.showPercentValues = "0";
   chart.chartRightMargin = "20";
 }
+
 function setChartInLegend(chart, widget) {
   if (widget.LabelsPosition == 'InLegend') return;
   chart.pieRadius = "70%";
 }
+
 function setDualyAxis(chartInfo, widget, seriesMeasures) {
   var _seriesMeasures$, _seriesMeasures$2;
+
   chartInfo.showSecondaryLimits = "0";
   chartInfo.showDivLineSecondaryValue = "0";
   if (!widget) return;
@@ -910,6 +1041,7 @@ function setDualyAxis(chartInfo, widget, seriesMeasures) {
   chartInfo.pYAxisName = getTitle((_seriesMeasures$ = seriesMeasures[0]) === null || _seriesMeasures$ === void 0 ? void 0 : _seriesMeasures$.Name, textLength);
   chartInfo.sYAxisname = getTitle((_seriesMeasures$2 = seriesMeasures[1]) === null || _seriesMeasures$2 === void 0 ? void 0 : _seriesMeasures$2.Name, textLength);
 }
+
 function getTitle(text, maxLenght) {
   var textLenght = text.length;
   if (textLenght >= maxLenght) return text.replace(/\s+/g, '&nbsp;&nbsp;');
@@ -924,15 +1056,20 @@ var FusionChartHelper = /*#__PURE__*/function () {
     this.chart = chart;
     this.widget = widget;
   }
+
   var _proto = FusionChartHelper.prototype;
+
   _proto.getPieRadius = function getPieRadius() {
     return this.pieRadius;
   };
+
   _proto.getLegendWidth = function getLegendWidth() {
     return this.legendWidth;
   };
+
   _proto.trimChartLabels = function trimChartLabels(chartWidth, chartHeight) {
     var _this$chart;
+
     if (!this.widget || this.widget.TypeCode != "pie" && this.widget.TypeCode != "donut") return;
     if (!this.chart) return;
     var dataSource = (_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.dataSource;
@@ -940,6 +1077,7 @@ var FusionChartHelper = /*#__PURE__*/function () {
     var chartInfo = dataSource.chart;
     if (this.widget.LabelsPosition == 'InLegend') this.handleLegendWidth(chartWidth, chartHeight, chartInfo);else this.handlePieRadius(chartHeight, chartInfo);
   };
+
   _proto.handlePieRadius = function handlePieRadius(chartHeight, chartInfo) {
     var chartMinumunHeight = 236;
     var startPercantage = 70;
@@ -948,23 +1086,27 @@ var FusionChartHelper = /*#__PURE__*/function () {
     if (step < 0) step = 0;
     var pieRadius = startPercantage - step * 10;
     if (pieRadius < 60) pieRadius = 60;
+
     if (window.innerWidth > 1700) {
       this.pieRadius = pieRadius;
       chartInfo.pieRadius = pieRadius + "%";
       return;
     }
+
     var reducedValue = Math.floor((1700 - window.innerWidth) / 100) + 1;
     if (reducedValue > 5) reducedValue = 5;
     pieRadius = pieRadius - reducedValue * 5;
     this.pieRadius = pieRadius;
     chartInfo.pieRadius = pieRadius + "%";
   };
+
   _proto.handleLegendWidth = function handleLegendWidth(chartWidth, chartHeight, chartInfo) {
     if (chartWidth < 730) chartInfo.legendWidth = "200";
     if (chartWidth >= 730) chartInfo.legendWidth = "400";
     if (chartWidth >= 1000) chartInfo.legendWidth = "500";
     this.legendWidth = chartInfo.legendWidth;
   };
+
   return FusionChartHelper;
 }();
 
@@ -975,18 +1117,23 @@ FusionCharts.options['license']({
 });
 var FusionChart = React.forwardRef(function (props, comRef) {
   var _useState = React.useState(false),
-    dataLoaded = _useState[0],
-    setDataLoaded = _useState[1];
+      dataLoaded = _useState[0],
+      setDataLoaded = _useState[1];
+
   var _useState2 = React.useState(),
-    error = _useState2[0],
-    setError = _useState2[1];
+      error = _useState2[0],
+      setError = _useState2[1];
+
   var widget = React.useRef();
+
   var _useState3 = React.useState({}),
-    args = _useState3[0],
-    setArgs = _useState3[1];
+      args = _useState3[0],
+      setArgs = _useState3[1];
+
   var _useState4 = React.useState(),
-    fChart = _useState4[0],
-    setFchart = _useState4[1];
+      fChart = _useState4[0],
+      setFchart = _useState4[1];
+
   var id = (Math.random() + 1).toString(36).substring(7);
   var progressRef = React.useRef(null);
   var fusionRef = React.useRef(null);
@@ -999,12 +1146,14 @@ var FusionChart = React.forwardRef(function (props, comRef) {
   }, []);
   React.useEffect(function () {
     var timeout;
+
     var handleResize = function handleResize() {
       clearTimeout(timeout);
       timeout = setTimeout(function () {
         HandleSizeChange();
       }, 200);
     };
+
     window.addEventListener("resize", handleResize);
     return function () {
       return window.removeEventListener("resize", handleResize);
@@ -1017,11 +1166,14 @@ var FusionChart = React.forwardRef(function (props, comRef) {
       }
     };
   });
+
   var HandleSizeChange = function HandleSizeChange() {
     var _widget$current, _widget$current2;
+
     if (!widget || ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.TypeCode) != "pie" && ((_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.TypeCode) != "donut") return;
     setTimeout(function () {
       var _fusionChartHelper$cu, _fusionChartHelper$cu2, _fusionChartHelper$cu3, _fusionRef$current, _fusionRef$current2, _widget$current3, _fusionChartHelper$cu4, _widget$current4, _fusionChartHelper$cu5;
+
       var oldPieRadius = fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu = fusionChartHelper.current) === null || _fusionChartHelper$cu === void 0 ? void 0 : _fusionChartHelper$cu.getPieRadius();
       var oldLegendWidth = fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu2 = fusionChartHelper.current) === null || _fusionChartHelper$cu2 === void 0 ? void 0 : _fusionChartHelper$cu2.getLegendWidth();
       fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu3 = fusionChartHelper.current) === null || _fusionChartHelper$cu3 === void 0 ? void 0 : _fusionChartHelper$cu3.trimChartLabels(fusionRef === null || fusionRef === void 0 ? void 0 : (_fusionRef$current = fusionRef.current) === null || _fusionRef$current === void 0 ? void 0 : _fusionRef$current.offsetWidth, fusionRef === null || fusionRef === void 0 ? void 0 : (_fusionRef$current2 = fusionRef.current) === null || _fusionRef$current2 === void 0 ? void 0 : _fusionRef$current2.offsetHeight);
@@ -1033,51 +1185,65 @@ var FusionChart = React.forwardRef(function (props, comRef) {
       }, 100);
     }, 100);
   };
+
   var RefreshData = function RefreshData() {
     if (Session.Tenant == 0) {
       handleData(null);
       return;
     }
+
     var dashboardAnalyticsService = new DashboardAnalyticsService();
+
     var postWidget = _extends({}, widget.current);
+
     postWidget.onChange = undefined;
     dashboardAnalyticsService.getData(postWidget).then(function (result) {
       handleData(result === null || result === void 0 ? void 0 : result.data);
     }, function (error) {
       var _error$response, _error$response$data, _error$response2, _error$response2$data;
+
       console.log('error', error);
       if (error !== null && error !== void 0 && (_error$response = error.response) !== null && _error$response !== void 0 && (_error$response$data = _error$response.data) !== null && _error$response$data !== void 0 && _error$response$data.ErrorMessage) setError(error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : _error$response2$data.ErrorMessage);else setError(error.message);
       setDataLoaded(true);
     });
   };
+
   var handleData = function handleData(data) {
     var _progressRef$current, _progressRef$current2;
+
     var chart = BuildFusionChartObject(data, widget.current);
     fusionChartHelper.current = new FusionChartHelper(widget.current, chart);
     fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : fusionChartHelper.current.trimChartLabels(progressRef === null || progressRef === void 0 ? void 0 : (_progressRef$current = progressRef.current) === null || _progressRef$current === void 0 ? void 0 : _progressRef$current.offsetWidth, progressRef === null || progressRef === void 0 ? void 0 : (_progressRef$current2 = progressRef.current) === null || _progressRef$current2 === void 0 ? void 0 : _progressRef$current2.offsetHeight);
     setArgs(chart);
     setDataLoaded(true);
   };
+
   var dataplotClick = function dataplotClick(eventObj, dataObj) {
     props.onSelectDataPoint({
       GroupById: dataObj.id.groupbyid,
       MeasureFieldId: dataObj.id.measurefieldid,
+      MeasureCode: dataObj.id.measurecode,
+      Formula: dataObj.id.formula,
       Widget: widget.current,
       GroupByIdSec: dataObj.id.groupbyidsec
     });
   };
+
   var renderComplete = function renderComplete(chart) {
     setFchart(chart);
   };
+
   var drawComplete = function drawComplete(event) {};
+
   var _useResizeObserver = useResizeObserver({
-      onResize: function onResize(_ref) {
-        var width = _ref.width,
+    onResize: function onResize(_ref) {
+      var width = _ref.width,
           height = _ref.height;
-        fChart === null || fChart === void 0 ? void 0 : fChart.resizeTo(width, height);
-      }
-    }),
-    ref = _useResizeObserver.ref;
+      fChart === null || fChart === void 0 ? void 0 : fChart.resizeTo(width, height);
+    }
+  }),
+      ref = _useResizeObserver.ref;
+
   return !dataLoaded ? React__default.createElement("div", {
     ref: progressRef,
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
@@ -1118,20 +1284,24 @@ var isNullOrUndefined = function isNullOrUndefined(val) {
 };
 
 var _path$1;
+
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
   return _extends$2.apply(this, arguments);
 }
+
 function SvgDeleteIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     viewBox: "0 0 20 20",
@@ -1144,20 +1314,24 @@ function SvgDeleteIcon(props) {
 }
 
 var _path$2;
+
 function _extends$3() {
   _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
   return _extends$3.apply(this, arguments);
 }
+
 function SvgEditIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({
     viewBox: "0 0 20 20",
@@ -1171,24 +1345,33 @@ function SvgEditIcon(props) {
 
 var WidgetCard = React.forwardRef(function (props, comRef) {
   var _widget$current2, _widget$current3, _widget$current4, _widget$current5, _widget$current6, _widget$current7, _widget$current8;
+
   var widget = React.useRef();
+
   var _useState = React.useState(false),
-    isLoading = _useState[0],
-    setIsLoading = _useState[1];
+      isLoading = _useState[0],
+      setIsLoading = _useState[1];
+
   var _useState2 = React.useState(false),
-    isWidgetHovered = _useState2[0],
-    setIsWidgetHovered = _useState2[1];
+      isWidgetHovered = _useState2[0],
+      setIsWidgetHovered = _useState2[1];
+
   var _useState3 = React.useState(false),
-    showTooltip = _useState3[1];
+      showTooltip = _useState3[1];
+
   var fusionChartRef = React.useRef(null);
+
   var editWidget = function editWidget() {
     props.editBtnClicked(widget.current);
   };
+
   React.useEffect(function () {
     var _props$dataBinding;
+
     widget.current = props.widget;
     (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onEditWidget.subscribe(function (e) {
       var _widget$current;
+
       if ((e === null || e === void 0 ? void 0 : e.key) != ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key)) return;
       setIsLoading(true);
       widget.current = _extends({}, e);
@@ -1199,19 +1382,24 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     return {
       onResizeFinish: function onResizeFinish() {
         var _fusionChartRef$curre;
+
         fusionChartRef === null || fusionChartRef === void 0 ? void 0 : (_fusionChartRef$curre = fusionChartRef.current) === null || _fusionChartRef$curre === void 0 ? void 0 : _fusionChartRef$curre.onResizeFinish();
       }
     };
   });
+
   var getCSSPropertyValue = function getCSSPropertyValue(widgetData, propName, propUnit, propDefaultVal) {
     if (propUnit === void 0) {
       propUnit = "";
     }
+
     if (propDefaultVal === void 0) {
       propDefaultVal = "";
     }
+
     return widgetData && propName && !isNullOrUndefined(widgetData[propName]) ? widgetData[propName] + propUnit : propDefaultVal || "";
   };
+
   return React__default.createElement("div", {
     className: "dl-panel",
     key: props.el.i,
@@ -1267,6 +1455,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   }), 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);
     }
   })) : null), React__default.createElement("div", {
@@ -1278,8 +1467,10 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   })), React__default.createElement("div", {
     className: "dl-dashboard-widget"
   }, " ", GetChartComponent(), " "));
+
   function GetChartComponent() {
     var _widget$current9, _widget$current10;
+
     if (isLoading || !((_widget$current9 = widget.current) !== null && _widget$current9 !== void 0 && _widget$current9.TypeCode)) return null;
     if (((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
       dataBinding: props.dataBinding,
@@ -1302,32 +1493,40 @@ function deepClone(obj) {
 }
 
 var ResponsiveReactGridLayout = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
+
 var DashboardDesigner = function DashboardDesigner(props) {
   var array12 = Array.from({
     length: 12
   }).fill(null);
   var minimumPlaceholderRowsCount = 12;
+
   var _useState = React.useState({
-      lg: []
-    }),
-    layouts = _useState[0],
-    setLayouts = _useState[1];
+    lg: []
+  }),
+      layouts = _useState[0],
+      setLayouts = _useState[1];
+
   var _useState2 = React.useState(Array.from({
-      length: minimumPlaceholderRowsCount
-    }).fill(null)),
-    placeholderRowsArray = _useState2[0],
-    setplaceholderRowsArray = _useState2[1];
+    length: minimumPlaceholderRowsCount
+  }).fill(null)),
+      placeholderRowsArray = _useState2[0],
+      setplaceholderRowsArray = _useState2[1];
+
   var _useState3 = React.useState(undefined),
-    dateFilter = _useState3[0];
+      dateFilter = _useState3[0];
+
   var _useState4 = React.useState(false),
-    isInEditMode = _useState4[0],
-    setisInEditMode = _useState4[1];
+      isInEditMode = _useState4[0],
+      setisInEditMode = _useState4[1];
+
   var widgetsDictionaryRef = React.useRef({});
+
   var _useState5 = React.useState({
-      lg: []
-    }),
-    widgets = _useState5[0],
-    setWidgets = _useState5[1];
+    lg: []
+  }),
+      widgets = _useState5[0],
+      setWidgets = _useState5[1];
+
   var gridLayoutComponent = React.useRef(null);
   var entered = React.useRef(false);
   var widgetCardRef = React.useRef([]);
@@ -1336,12 +1535,14 @@ var DashboardDesigner = function DashboardDesigner(props) {
   }, [props.Widgetlayouts]);
   React.useEffect(function () {
     var _props$dataBinding;
+
     (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onDeleteWidgetConfirmed.subscribe(function (deleteProps) {
       if (deleteProps) {
         deletePanel(deleteProps);
       }
     });
   }, []);
+
   var FillLayout = function FillLayout(dashboardLayouts) {
     var clone = deepClone(dashboardLayouts);
     var layout = createLayout(clone);
@@ -1350,12 +1551,14 @@ var DashboardDesigner = function DashboardDesigner(props) {
     setLayouts(layout);
     UpdatePlaceholderDimensions(layout);
   };
+
   var FillWidgetDictionary = function FillWidgetDictionary(clone) {
     for (var _iterator = _createForOfIteratorHelperLoose(clone.lg), _step; !(_step = _iterator()).done;) {
       var item = _step.value;
       widgetsDictionaryRef.current[item.key] = item;
     }
   };
+
   var createLayout = function createLayout(dashboardLayouts) {
     var layout = {
       lg: []
@@ -1367,33 +1570,42 @@ var DashboardDesigner = function DashboardDesigner(props) {
     });
     return layout;
   };
+
   React.useEffect(function () {
     setisInEditMode(props.editMode);
   }, [props.editMode]);
+
   function onLayoutChange(layout, changedLayouts) {
     UpdateWidget(changedLayouts);
     setLayouts(changedLayouts);
     UpdatePlaceholderDimensions(changedLayouts);
+
     if (entered.current == false) {
       entered.current = true;
       return;
     }
+
     props.onLayoutChange(changedLayouts);
   }
+
   function onResizeStop(event, oldItem) {
     var _widgetCardRef$curren, _widgetCardRef$curren2;
+
     widgetCardRef === null || widgetCardRef === void 0 ? void 0 : (_widgetCardRef$curren = widgetCardRef.current) === null || _widgetCardRef$curren === void 0 ? void 0 : (_widgetCardRef$curren2 = _widgetCardRef$curren.find(function (x) {
       return x.i == oldItem.i;
     })) === null || _widgetCardRef$curren2 === void 0 ? void 0 : _widgetCardRef$curren2.ref.onResizeFinish(widgetsDictionaryRef.current[oldItem.i].key);
   }
+
   function UpdateWidget(changedLayouts) {
     for (var _iterator2 = _createForOfIteratorHelperLoose(changedLayouts.lg), _step2; !(_step2 = _iterator2()).done;) {
       var item = _step2.value;
+
       if (widgetsDictionaryRef.current[item.i]) {
         widgetsDictionaryRef.current[item.i].Layout = item;
       }
     }
   }
+
   var confirmDeleteWidget = function confirmDeleteWidget(id) {
     var deleteWidgetProps = {
       id: id,
@@ -1402,6 +1614,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
     };
     props.onWidgetDelete(deleteWidgetProps);
   };
+
   function deletePanel(deleteProps) {
     var newLayouts = {
       lg: deleteProps.layouts.lg.filter(function (e) {
@@ -1418,23 +1631,28 @@ var DashboardDesigner = function DashboardDesigner(props) {
     setWidgets(newWidgets);
     props.onLayoutChange(newLayouts);
   }
+
   function editWidget(widget) {
     widget.ChangeSetOp = 'Update';
     props.openEditWidget(widget);
   }
+
   function UpdatePlaceholderDimensions(layouts) {
     if (!layouts) return;
     var max = minimumPlaceholderRowsCount;
+
     for (var _iterator3 = _createForOfIteratorHelperLoose(layouts['lg']), _step3; !(_step3 = _iterator3()).done;) {
       var layout = _step3.value;
       if (layout.y + layout.h > max) max = layout.y + layout.h;
     }
+
     var newPlaceholderRows = max + 2;
     newPlaceholderRows = newPlaceholderRows < minimumPlaceholderRowsCount ? minimumPlaceholderRowsCount : newPlaceholderRows;
     setplaceholderRowsArray(Array.from({
       length: newPlaceholderRows
     }).fill(null));
   }
+
   return React__default.createElement("div", {
     className: "dl-full-hight-scroll"
   }, React__default.createElement("div", {
@@ -1467,6 +1685,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
     onLayoutChange: onLayoutChange
   }), widgets.lg.map(function (widget, i) {
     var _widget$Layout, _widget$Layout2;
+
     return React__default.createElement("div", {
       key: (_widget$Layout = widget.Layout) === null || _widget$Layout === void 0 ? void 0 : _widget$Layout.i
     }, React__default.createElement(WidgetCard, {
@@ -1482,6 +1701,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
       onSelectDataPoint: props.onSelectDataPoint,
       ref: function ref(el) {
         var _widget$Layout3;
+
         widgetCardRef.current[i] = {
           ref: el,
           i: (_widget$Layout3 = widget.Layout) === null || _widget$Layout3 === void 0 ? void 0 : _widget$Layout3.i
@@ -1490,6 +1710,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
     }));
   }))))));
 };
+
 var layoutGridProps = {
   rowHeight: 50,
   className: "layout",
@@ -1505,23 +1726,29 @@ var layoutGridProps = {
 
 var Dashboard = function Dashboard(props) {
   var _previewWidget$Layout, _previewWidget$Layout2;
+
   var Widgetlayouts = React.useRef({
     lg: []
   });
+
   var _useState = React.useState({
-      lg: []
-    }),
-    widgetlayoutsState = _useState[0],
-    setWidgetlayoutsState = _useState[1];
+    lg: []
+  }),
+      widgetlayoutsState = _useState[0],
+      setWidgetlayoutsState = _useState[1];
+
   var _useState2 = React.useState(false),
-    isInEditMode = _useState2[0],
-    setIsInEditMode = _useState2[1];
+      isInEditMode = _useState2[0],
+      setIsInEditMode = _useState2[1];
+
   var _useState3 = React.useState(props.isPreviewMode !== undefined ? props.isPreviewMode : false),
-    isPreviewModeActive = _useState3[0],
-    setIsPreviewModeActive = _useState3[1];
+      isPreviewModeActive = _useState3[0],
+      setIsPreviewModeActive = _useState3[1];
+
   var _useState4 = React.useState(props.widgetData),
-    previewWidget = _useState4[0],
-    setPreviewWidgett = _useState4[1];
+      previewWidget = _useState4[0],
+      setPreviewWidgett = _useState4[1];
+
   React.useEffect(function () {
     Session.CurrentUserId = props.userId;
     Session.Tenant = props.tenant;
@@ -1544,6 +1771,7 @@ var Dashboard = function Dashboard(props) {
       setPreviewWidgett(JSON.parse(JSON.stringify(props.widgetData)));
     }
   }, [props.widgetData]);
+
   var updateWidgets = function updateWidgets(layouts) {
     var layoutsDic = {};
     Object.keys(layouts).forEach(function (sizeType) {
@@ -1568,6 +1796,7 @@ var Dashboard = function Dashboard(props) {
     };
     props.onChangeLayouts(Widgetlayouts.current);
   };
+
   return isPreviewModeActive && previewWidget ? React.createElement("div", {
     style: {
       width: "420px",