logitude-dashboard-library 3.2.11 → 3.2.13

package/dist/index.js

@@ -5,8 +5,8 @@ var React__default = _interopDefault(React);
 var reactGridLayout = require('react-grid-layout');
 var progressspinner = require('primereact/progressspinner');
 var axios = _interopDefault(require('axios'));
-var uuid = require('uuid');
 var moment = _interopDefault(require('moment'));
+var uuid = require('uuid');
 var datatable = require('primereact/datatable');
 var column = require('primereact/column');
 var ReactFC = _interopDefault(require('react-fusioncharts'));
@@ -15,6 +15,7 @@ var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
 var FusionTheme = _interopDefault(require('fusioncharts/themes/fusioncharts.theme.fusion'));
 var useResizeObserver = _interopDefault(require('use-resize-observer'));
 var Popup = _interopDefault(require('reactjs-popup'));
+var Charts$1 = _interopDefault(require('fusioncharts/fusioncharts.widgets'));
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -219,6 +220,18 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
     return this._ApiServices.post("/api/" + this.controller + "/PostGetTableData", widget);
   };
 
+  _proto.getGaugeData = function getGaugeData(widget, signal) {
+    if (signal === void 0) {
+      signal = undefined;
+    }
+
+    return this._ApiServices.post("/api/" + this.controller + "/PostGetGaugeData", widget, signal);
+  };
+
+  _proto.getObjectTableNameByWidgetEntityId = function getObjectTableNameByWidgetEntityId(entityId) {
+    return this._ApiServices.get("/api/analyticsfactsmetadatas/getsingle?id=" + entityId);
+  };
+
   return DashboardAnalyticsService;
 }();
 
@@ -253,6 +266,412 @@ function SvgRedWarning(props) {
   })));
 }
 
+var DateGroupCodes = {
+  Full_Date: 'Full Date',
+  Month: 'Month',
+  Quarter: 'Quarter',
+  Year: 'Year',
+  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 getTodayDates = function getTodayDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getYesterdayDates = function getYesterdayDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(1, 'days').format(format);
+  var toDate = moment().subtract(1, 'days').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getTomorrowDates = function getTomorrowDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().add(1, 'days').format(format);
+  var toDate = moment().add(1, 'days').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getCurrentWeekDates = function getCurrentWeekDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().startOf('week').format(format);
+  var toDate = moment().endOf('week').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getCurrentMonthDates = function getCurrentMonthDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().startOf('month').format(format);
+  var toDate = moment().endOf('month').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getPreviousMonthDates = function getPreviousMonthDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(1, 'months').startOf('month').format(format);
+  var toDate = moment().subtract(1, 'months').endOf('month').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getCurrentMonthToDateDates = function getCurrentMonthToDateDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().startOf('month').format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getPreviousMonthToDateDates = function getPreviousMonthToDateDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(1, 'months').startOf('month').format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getCurrentQuarterDates = function getCurrentQuarterDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().startOf('quarter').format(format);
+  var toDate = moment().endOf('quarter').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getCurrentYearDates = function getCurrentYearDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().startOf('year').format(format);
+  var toDate = moment().endOf('year').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getPreviousYearDates = function getPreviousYearDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(1, 'years').startOf('year').format(format);
+  var toDate = moment().subtract(1, 'years').endOf('year').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getCurrentYearToDateDates = function getCurrentYearToDateDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().startOf('year').format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getPreviousYearToDateDates = function getPreviousYearToDateDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(1, 'years').startOf('year').format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getPreviousQuarterDates = function getPreviousQuarterDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(1, 'quarters').startOf('quarter').format(format);
+  var toDate = moment().subtract(1, 'quarters').endOf('quarter').format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getCurrentQuarterToDateDates = function getCurrentQuarterToDateDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().startOf('quarter').format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getPreviousQuarterToDateDates = function getPreviousQuarterToDateDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(1, 'quarters').startOf('quarter').format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getLast7DaysDates = function getLast7DaysDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(6, 'days').format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getLast30DaysDates = function getLast30DaysDates(format) {
+  if (format === void 0) {
+    format = "YYYYMMDD000000";
+  }
+
+  var dateValues = [];
+  var fromDate = moment().subtract(29, 'days').format(format);
+  var toDate = moment().format(format);
+  dateValues.push(fromDate);
+  dateValues.push(toDate);
+  return dateValues;
+};
+
+var getDateRangesByCode = function getDateRangesByCode(code) {
+  var result = {
+    fromDate: null,
+    toDate: null
+  };
+
+  if (!code) {
+    return {
+      fromDate: getTodayDates()[0],
+      toDate: getTodayDates()[1]
+    };
+  }
+
+  switch (code) {
+    case "Current_Year":
+      result.fromDate = getCurrentYearDates()[0];
+      result.toDate = getCurrentYearDates()[1];
+      break;
+
+    case "Previous_Year":
+      result.fromDate = getPreviousYearDates()[0];
+      result.toDate = getPreviousYearDates()[1];
+      break;
+
+    case "Current_Year_To_Date":
+      result.fromDate = getCurrentYearToDateDates()[0];
+      result.toDate = getCurrentYearToDateDates()[1];
+      break;
+
+    case "Previous_Year_To_Date":
+      result.fromDate = getPreviousYearToDateDates()[0];
+      result.toDate = getPreviousYearToDateDates()[1];
+      break;
+
+    case "Current_Quarter":
+      result.fromDate = getCurrentQuarterDates()[0];
+      result.toDate = getCurrentQuarterDates()[1];
+      break;
+
+    case "Previous_Quarter":
+      result.fromDate = getPreviousQuarterDates()[0];
+      result.toDate = getPreviousQuarterDates()[1];
+      break;
+
+    case "Current_Quarter_To_Date":
+      result.fromDate = getCurrentQuarterToDateDates()[0];
+      result.toDate = getCurrentQuarterToDateDates()[1];
+      break;
+
+    case "Previous_Quarter_To_Date":
+      result.fromDate = getPreviousQuarterToDateDates()[0];
+      result.toDate = getPreviousQuarterToDateDates()[1];
+      break;
+
+    case "Current_Month":
+      result.fromDate = getCurrentMonthDates()[0];
+      result.toDate = getCurrentMonthDates()[1];
+      break;
+
+    case "Previous_Month":
+      result.fromDate = getPreviousMonthDates()[0];
+      result.toDate = getPreviousMonthDates()[1];
+      break;
+
+    case "Current_Month_To_Date":
+      result.fromDate = getCurrentMonthToDateDates()[0];
+      result.toDate = getCurrentMonthToDateDates()[1];
+      break;
+
+    case "Previous_Month_To_Date":
+      result.fromDate = getPreviousMonthToDateDates()[0];
+      result.toDate = getPreviousMonthToDateDates()[1];
+      break;
+
+    case "Today":
+      result.fromDate = getTodayDates()[0];
+      result.toDate = getTodayDates()[1];
+      break;
+
+    case "Yesterday":
+      result.fromDate = getYesterdayDates()[0];
+      result.toDate = getYesterdayDates()[1];
+      break;
+
+    case "Tomorrow":
+      result.fromDate = getTomorrowDates()[0];
+      result.toDate = getTomorrowDates()[1];
+      break;
+
+    case "Last 7 Days":
+      result.fromDate = getLast7DaysDates()[0];
+      result.toDate = getLast7DaysDates()[1];
+      break;
+
+    case "Last 30 Days":
+      result.fromDate = getLast30DaysDates()[0];
+      result.toDate = getLast30DaysDates()[1];
+      break;
+
+    case "This Week":
+      result.fromDate = getCurrentWeekDates()[0];
+      result.toDate = getCurrentWeekDates()[1];
+      break;
+  }
+
+  return result;
+};
+
 var isNullOrUndefined = function isNullOrUndefined(val) {
   return val == null || val == undefined;
 };
@@ -261,6 +680,39 @@ var isNullOrUndefinedOrEmpty = function isNullOrUndefinedOrEmpty(val) {
   return val == null || val == undefined || val == "";
 };
 
+var getGlobalNumberFormatting = function getGlobalNumberFormatting() {
+  var numberFormatCode = Session.NumberFormatCode;
+  var numberSeparatorSettings = {
+    thousandsSeparator: ",",
+    decimalSeparator: "."
+  };
+  if (isNullOrUndefinedOrEmpty(numberFormatCode)) return numberSeparatorSettings;
+
+  switch (numberFormatCode) {
+    case "CD":
+      numberSeparatorSettings.thousandsSeparator = ",";
+      numberSeparatorSettings.decimalSeparator = ".";
+      break;
+
+    case "DC":
+      numberSeparatorSettings.thousandsSeparator = ".";
+      numberSeparatorSettings.decimalSeparator = ",";
+      break;
+
+    case "AD":
+      numberSeparatorSettings.thousandsSeparator = "'";
+      numberSeparatorSettings.decimalSeparator = ".";
+      break;
+
+    default:
+      numberSeparatorSettings.thousandsSeparator = ",";
+      numberSeparatorSettings.decimalSeparator = ".";
+      break;
+  }
+
+  return numberSeparatorSettings;
+};
+
 var KpiChart = function KpiChart(props) {
   var _widget$current16;
 
@@ -312,6 +764,29 @@ var KpiChart = function KpiChart(props) {
     setIsKPICustomSizeNeeded(_isKPICustomResizeNeeded && !_isPreviewModeActive);
   };
 
+  var calculateWidgetKPISettingsDates = function calculateWidgetKPISettingsDates() {
+    var _updatedWidget = _extends({}, widget.current);
+
+    if (_updatedWidget && _updatedWidget.KPIComparisonSettings && _updatedWidget.KPIComparisonSettings.length) {
+      var kpiSettings = JSON.parse(_updatedWidget.KPIComparisonSettings);
+      var isKPISettingsActivated = !isNullOrUndefinedOrEmpty(kpiSettings.PeriodFieldId);
+
+      if (isKPISettingsActivated) {
+        var PeriodDateFilterDates = getDateRangesByCode(kpiSettings.PeriodDateFilter.DateTimeValueCode);
+        var ComparePeriodDateFilterDates = kpiSettings.ComparisonPeriodType == 'Manually' ? getDateRangesByCode(kpiSettings.ComparePeriodDateFilter.DateTimeValueCode) : getDateRangesByCode(null);
+        kpiSettings.PeriodDateFilter.FieldValue = PeriodDateFilterDates.fromDate;
+        kpiSettings.PeriodDateFilter.FieldValue2 = PeriodDateFilterDates.toDate;
+        kpiSettings.ComparePeriodDateFilter.FieldValue = ComparePeriodDateFilterDates.fromDate;
+        kpiSettings.ComparePeriodDateFilter.FieldValue2 = ComparePeriodDateFilterDates.toDate;
+        _updatedWidget.KPIComparisonSettings = JSON.stringify(kpiSettings);
+      }
+
+      return _updatedWidget;
+    }
+
+    return _updatedWidget;
+  };
+
   var RefreshData = function RefreshData() {
     if (Session.Tenant == 0) {
       var emptyData = {};
@@ -322,11 +797,8 @@ var KpiChart = function KpiChart(props) {
     }
 
     var dashboardAnalyticsService = new DashboardAnalyticsService();
-
-    var postWidget = _extends({}, widget.current);
-
+    var postWidget = calculateWidgetKPISettingsDates();
     postWidget.onChange = undefined;
-    postWidget.EntityId = !isNullOrUndefinedOrEmpty(postWidget.RelatedToEntityId) ? postWidget.RelatedToEntityId : postWidget.EntityId;
     dashboardAnalyticsService.getKpiData(postWidget).then(function (result) {
       setData(result.data);
       setIsLoading(false);
@@ -430,7 +902,7 @@ var KpiChart = function KpiChart(props) {
         fontSize: getKPIFormattingPropertyValue("ComparisonValueFontSize", "px")
       },
       className: "dl-kpi-prev-text"
-    }, comparisonValue), (data === null || data === void 0 ? void 0 : data.ComparisonAbbreviationSymbol) && React__default.createElement("div", {
+    }, "" + comparisonValue + (isPercentageMeasureField() ? "%" : "")), (data === null || data === void 0 ? void 0 : data.ComparisonAbbreviationSymbol) && React__default.createElement("div", {
       style: {
         color: getKPIFormattingPropertyValue("ComparisonValueFontColor"),
         fontSize: getKPIFormattingPropertyValue("ComparisonValueFontSize", "px")
@@ -441,10 +913,14 @@ var KpiChart = function KpiChart(props) {
         color: getKPIFormattingPropertyValue("ComparisonValueFontColor"),
         fontSize: getKPIFormattingPropertyValue("ComparisonValueFontSize", "px")
       },
-      className: "dl-kpi-unit"
+      className: "comparison-value-dl-kpi-unit"
     }, data === null || data === void 0 ? void 0 : data.Unit));
   }
 
+  var isPercentageMeasureField = function isPercentageMeasureField() {
+    return (widget === null || widget === void 0 ? void 0 : widget.current) && (widget === null || widget === void 0 ? void 0 : widget.current.WidgetMeasures) && (widget === null || widget === void 0 ? void 0 : widget.current.WidgetMeasures[0]) && (widget === null || widget === void 0 ? void 0 : widget.current.WidgetMeasures[0].MeasureFieldDataType) && (widget === null || widget === void 0 ? void 0 : widget.current.WidgetMeasures[0].MeasureFieldDataType) == 'Percentage';
+  };
+
   function getValueData() {
     if ((data === null || data === void 0 ? void 0 : data.Value) == null) return React__default.createElement("div", {
       className: "dl-kpi-no-data"
@@ -455,7 +931,7 @@ var KpiChart = function KpiChart(props) {
         fontSize: getKPIFormattingPropertyValue("MainValueFontSize", "px")
       },
       className: "dl-kpi-value dl-kpi-textTrimming"
-    }, data === null || data === void 0 ? void 0 : data.Value);
+    }, "" + (data === null || data === void 0 ? void 0 : data.Value) + (isPercentageMeasureField() ? "%" : ""));
   }
 
   function getValueComponent() {
@@ -580,6 +1056,7 @@ var TableChart = function TableChart(props) {
       setError = _useState3[1];
 
   var _useState4 = React.useState(),
+      widget = _useState4[0],
       setWidget = _useState4[1];
 
   var _useState5 = React.useState([]),
@@ -599,13 +1076,45 @@ var TableChart = function TableChart(props) {
       setSortOrder = _useState8[1];
 
   var isDefaultSortOptionsUsed = React.useRef(false);
+  var widgetRefData = React.useRef(null);
+
+  var _useState9 = React.useState(null),
+      objectTableName = _useState9[0],
+      setObjectTableName = _useState9[1];
+
   React.useEffect(function () {
+    var _props$customChartPro;
+
     if (props.customChartProps && props.customChartProps.widget) {
       setWidget(props.customChartProps.widget);
-      getTableData(props.customChartProps.widget);
+      widgetRefData.current = props.customChartProps.widget;
+      getObjectTableName(props.customChartProps.widget);
     }
+
+    (_props$customChartPro = props.customChartProps.dataBinding) === null || _props$customChartPro === void 0 ? void 0 : _props$customChartPro.widgetUpdated.subscribe(function (updatedWidget) {
+      var _widgetRefData$curren;
+
+      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widgetRefData$curren = widgetRefData.current) === null || _widgetRefData$curren === void 0 ? void 0 : _widgetRefData$curren.key)) return;
+      setWidget(_extends({}, updatedWidget));
+    });
   }, []);
 
+  var getObjectTableName = function getObjectTableName(widget) {
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+    dashboardAnalyticsService.getObjectTableNameByWidgetEntityId(widget === null || widget === void 0 ? void 0 : widget.EntityId).then(function (res) {
+      if (res && res.data && res.data.ObjectTableName) {
+        setObjectTableName(res.data.ObjectTableName);
+        getTableData(widget);
+      } else {
+        setError("Erorr: No object table name match this widget entity id");
+        setIsLoading(false);
+      }
+    })["catch"](function () {
+      setError("Erorr: No object table name match this widget entity id");
+      setIsLoading(false);
+    });
+  };
+
   var getTableData = function getTableData(widget) {
     if (Session.Tenant == 0) {
       setTableData([]);
@@ -617,7 +1126,6 @@ var TableChart = function TableChart(props) {
     widget.onChange = undefined;
     widget.PageIndex = 0;
     widget.PageSize = 100;
-    widget.EntityId = !isNullOrUndefinedOrEmpty(widget.RelatedToEntityId) ? widget.RelatedToEntityId : widget.EntityId;
     dashboardAnalyticsService.getTableData(widget).then(function (res) {
       if (res && res.data) {
         fillTableData(res.data);
@@ -633,11 +1141,14 @@ var TableChart = function TableChart(props) {
   };
 
   var getBooleanStringValue = function getBooleanStringValue(value) {
-    if (isNullOrUndefined(value)) return "";
+    if (isNullOrUndefined(value) || isNullOrUndefined(value.Label)) return "";
 
-    var _value = value + "";
+    var _value = value.Label + "";
 
-    return _value.charAt(0).toUpperCase() + _value.slice(1);
+    return {
+      Label: _value.charAt(0).toUpperCase() + _value.slice(1),
+      Value: _value.charAt(0).toUpperCase() + _value.slice(1)
+    };
   };
 
   var getDateTimeValue = function getDateTimeValue(value) {
@@ -667,7 +1178,7 @@ var TableChart = function TableChart(props) {
 
           var _value = valueType && valueType == "Boolean" ? getBooleanStringValue(item[key]) : item[key];
 
-          _tableRow[key] = isNullOrUndefined(_value) ? "" : _value;
+          _tableRow[key] = isNullOrUndefined(_value) || isNullOrUndefined(_value.Value) && isNullOrUndefined(_value.Label) ? "" : _value;
         });
         tableRecords.push(_tableRow);
       });
@@ -716,7 +1227,8 @@ var TableChart = function TableChart(props) {
     return field ? field.Id : null;
   };
 
-  var sortTableData = function sortTableData(sortedField) {
+  var sortTableData = function sortTableData(sortedField, isCalculatedColumn) {
+    if (!canSort()) return;
     setSortField(sortedField);
 
     var _sortOrder = sortOrder == 1 ? -1 : sortOrder == -1 ? 1 : 1;
@@ -729,7 +1241,7 @@ var TableChart = function TableChart(props) {
     _widget.PageSize = 100;
     _widget.ScreenSortBy = getSortFieldIdBySortFieldCode(sortedField);
     _widget.ScreenSortDirection = _sortOrder == 1 ? 'asc' : _sortOrder == -1 ? 'desc' : null;
-    _widget.EntityId = !isNullOrUndefinedOrEmpty(_widget.RelatedToEntityId) ? _widget.RelatedToEntityId : _widget.EntityId;
+    _widget.ScreenSortByType = isNullOrUndefinedOrEmpty(isCalculatedColumn) ? "Field" : isCalculatedColumn ? "CalculatedColumn" : "Field";
     setIsTableLoading(true);
     dashboardAnalyticsService.getTableData(_widget).then(function (res) {
       if (res && res.data) {
@@ -753,45 +1265,172 @@ var TableChart = function TableChart(props) {
     return false;
   };
 
+  var getTableFormattingData = function getTableFormattingData() {
+    return widget && isNullOrUndefinedOrEmpty(widget.TableFormatSettings) ? {} : JSON.parse(widget === null || widget === void 0 ? void 0 : widget.TableFormatSettings);
+  };
+
+  var getTableFormattingPropertyValue = function getTableFormattingPropertyValue(propertyName, unit) {
+    if (unit === void 0) {
+      unit = "";
+    }
+
+    var tableFormattingData = getTableFormattingData();
+    return tableFormattingData && tableFormattingData[propertyName] ? tableFormattingData[propertyName] + unit : undefined;
+  };
+
+  var getTableConditionalRulesData = function getTableConditionalRulesData() {
+    return widget && isNullOrUndefinedOrEmpty(widget.TableConditionalRules) ? [] : JSON.parse(widget === null || widget === void 0 ? void 0 : widget.TableConditionalRules);
+  };
+
+  var isValueEmpty = function isValueEmpty(val) {
+    return val === null || val === undefined || val === "";
+  };
+
+  var IsValidRule = function IsValidRule(rule, value) {
+    var operator = rule && rule.RuleOperator ? rule.RuleOperator.Code : null;
+    if (!operator) return null;
+    var ruleValue1 = rule.RuleValue1;
+    var ruleValue2 = rule.RuleValue2;
+
+    switch (operator) {
+      case "Equal":
+        return ruleValue1 == value;
+
+      case "NotEqual":
+        return ruleValue1 != value;
+
+      case "Between":
+        return !isValueEmpty(ruleValue1) && !isValueEmpty(ruleValue2) && ruleValue1 <= value && value <= ruleValue2;
+
+      case "GreaterThan":
+        return !isValueEmpty(ruleValue1) && value > ruleValue1;
+
+      case "GreaterThanOrEqual":
+        return !isValueEmpty(ruleValue1) && value >= ruleValue1;
+
+      case "LessThan":
+        return !isValueEmpty(ruleValue1) && value < ruleValue1;
+
+      case "LessThanOrEqual":
+        return !isValueEmpty(ruleValue1) && value <= ruleValue1;
+
+      case "IsEmpty":
+        return isValueEmpty(value);
+
+      case "IsNotEmpty":
+        return !isValueEmpty(value);
+
+      default:
+        return null;
+    }
+  };
+
+  var getCellPropertyByRule = function getCellPropertyByRule(column, cellValue, propertyName, defaultValue) {
+    if (defaultValue === void 0) {
+      defaultValue = null;
+    }
+
+    var tableFormattingData = getTableConditionalRulesData();
+    var columnType = column.IsCalculatedColumn ? "CalculatedColumn" : "Field";
+    var columnData = tableFormattingData.find(function (el) {
+      return el.FieldId == column.Id && el.FieldType == columnType;
+    });
+
+    if (!columnData || !columnData.FieldRules || columnData.FieldRules.length == 0) {
+      return defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
+    }
+    var firstValidRule = columnData.FieldRules.find(function (rule) {
+      return IsValidRule(rule, cellValue);
+    });
+
+    if (!firstValidRule) {
+      return defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
+    }
+
+    return !isNullOrUndefinedOrEmpty(firstValidRule[propertyName]) ? firstValidRule[propertyName] : defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
+  };
+
+  var getCellFloatAlignment = function getCellFloatAlignment(column) {
+    if (column.DataTypeCode == 'Decimal' || column.DataTypeCode == 'Percentage' || column.DataTypeCode == 'Integer' || column.DataTypeCode == 'Double' || column.DataTypeCode == 'SigDouble') {
+      return "right";
+    }
+
+    return "unset";
+  };
+
+  var isClickableCell = function isClickableCell(fieldCode) {
+    return fieldCode == "ShipmentNumber" && objectTableName == "Shipment" || fieldCode == "InvoiceNumber" && objectTableName == "APInvoice" || fieldCode == "InvoiceNumber" && objectTableName == "ARInvoice" || fieldCode == "ContainerNumber" && objectTableName == "Container" || fieldCode == "QuoteNumber" && objectTableName == "Quote" || fieldCode == "Subject" && objectTableName == "Opportunity" || fieldCode == "EnglishName" && objectTableName == "Customer";
+  };
+
+  var tableCellClicked = function tableCellClicked(data, fieldCode) {
+    if (!data || !data.Id || !data.Id.Label || !isClickableCell(fieldCode) || props.customChartProps.isInEditMode) return;
+    props.customChartProps.onSelectDataPoint({
+      ObjectTableName: objectTableName,
+      TableRowEntityId: data.Id.Label
+    });
+  };
+
   var cellTemplateBody = function cellTemplateBody(data, column) {
+    var _data$column$FieldCod, _data$column$FieldCod2, _data$column$FieldCod3, _data$column$FieldCod4, _data$column$FieldCod5, _data$column$FieldCod6, _data$column$FieldCod7;
+
     if (!column || !column.FieldCode) return "";
-    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? getDateTimeValue(data[column.FieldCode]) : data[column.FieldCode];
+    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? React__default.createElement("span", {
+      title: getDateTimeValue((_data$column$FieldCod = data[column.FieldCode]) === null || _data$column$FieldCod === void 0 ? void 0 : _data$column$FieldCod.Label),
+      className: "table-cell",
+      style: {
+        color: getTableFormattingPropertyValue("TableCellFontColor"),
+        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
+      }
+    }, getDateTimeValue((_data$column$FieldCod2 = data[column.FieldCode]) === null || _data$column$FieldCod2 === void 0 ? void 0 : _data$column$FieldCod2.Label)) : React__default.createElement("span", {
+      onClick: function onClick() {
+        return tableCellClicked(data, column.FieldCode);
+      },
+      title: (_data$column$FieldCod3 = data[column.FieldCode]) === null || _data$column$FieldCod3 === void 0 ? void 0 : _data$column$FieldCod3.Label,
+      className: "table-cell " + (isClickableCell(column.FieldCode) ? 'table-link-cell' : ''),
+      style: {
+        color: getTableFormattingPropertyValue("TableCellFontColor"),
+        backgroundColor: getCellPropertyByRule(column, (_data$column$FieldCod4 = data[column.FieldCode]) === null || _data$column$FieldCod4 === void 0 ? void 0 : _data$column$FieldCod4.Value, 'RuleBackgroundColor'),
+        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px"),
+        "float": getCellFloatAlignment(column)
+      }
+    }, column.DataTypeCode == "Percentage" ? (_data$column$FieldCod5 = data[column.FieldCode]) !== null && _data$column$FieldCod5 !== void 0 && _data$column$FieldCod5.Label ? ((_data$column$FieldCod6 = data[column.FieldCode]) === null || _data$column$FieldCod6 === void 0 ? void 0 : _data$column$FieldCod6.Label) + "%" : 0 + '%' : (_data$column$FieldCod7 = data[column.FieldCode]) === null || _data$column$FieldCod7 === void 0 ? void 0 : _data$column$FieldCod7.Label);
   };
 
   var headerTemplate = function headerTemplate(column) {
-    var sortClassIcon = "";
 
     if (sortField != column.FieldCode) {
       return React__default.createElement("div", {
+        style: {
+          backgroundColor: getTableFormattingPropertyValue("TableHeaderBackgroundColor")
+        },
         onClick: function onClick() {
-          return sortTableData(column.FieldCode);
+          return sortTableData(column.FieldCode, column.IsCalculatedColumn);
         },
         className: "header-content"
       }, React__default.createElement("span", {
+        style: {
+          color: getTableFormattingPropertyValue("TableHeaderFontColor"),
+          fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+        },
         className: "p-column-title"
-      }, column.DisplayName), canSort() && React__default.createElement("span", {
-        className: "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-alt"
-      }));
-    }
-
-    if (sortOrder == 1) {
-      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-amount-up-alt";
-    } else if (sortOrder == -1) {
-      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-amount-down";
-    } else {
-      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-alt";
+      }, column.DisplayName));
     }
 
     return React__default.createElement("div", {
+      style: {
+        backgroundColor: getTableFormattingPropertyValue("TableHeaderBackgroundColor")
+      },
       onClick: function onClick() {
-        return sortTableData(column.FieldCode);
+        return sortTableData(column.FieldCode, column.IsCalculatedColumn);
       },
       className: "header-content"
     }, React__default.createElement("span", {
+      style: {
+        color: getTableFormattingPropertyValue("TableHeaderFontColor"),
+        fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+      },
       className: "p-column-title"
-    }, column.DisplayName), canSort() && React__default.createElement("span", {
-      className: sortClassIcon
-    }));
+    }, column.DisplayName));
   };
 
   return isLoading ? React__default.createElement("div", {
@@ -829,120 +1468,38 @@ var TableChart = function TableChart(props) {
       }
     });
   }));
-};
-
-var CustomChart = function CustomChart(props) {
-  var _props$widget2, _props$widget3, _props$widget4;
-
-  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
-        });
-
-      case "table":
-        return React__default.createElement(TableChart, {
-          customChartProps: props
-        });
-
-      default:
-        return React__default.createElement("div", null, "Invalid Type");
-    }
-  };
-
-  var drilldownToTableData = function drilldownToTableData() {
-    props.onSelectDataPoint({
-      GroupById: undefined,
-      MeasureFieldId: undefined,
-      MeasureCode: undefined,
-      Formula: undefined,
-      Widget: props.widget,
-      GroupByIdSec: undefined
-    });
-  };
-
-  return React__default.createElement(React__default.Fragment, null, ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) && ((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == 'table' && React__default.createElement("div", {
-    className: "table-hint-container"
-  }, React__default.createElement("div", {
-    className: "table-rows-number-indicator"
-  }, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement("div", {
-    onClick: drilldownToTableData,
-    className: "show-more-records"
-  }, "( Show More Records )")), React__default.createElement("div", {
-    className: props.widget && ((_props$widget4 = props.widget) === null || _props$widget4 === void 0 ? void 0 : _props$widget4.TypeCode) == 'table' ? "dl-custom-chart-container dl-table-chart-container" : "dl-custom-chart-container"
-  }, project()));
-};
-
-var DateGroupCodes = {
-  Full_Date: 'Full Date',
-  Month: 'Month',
-  Quarter: 'Quarter',
-  Year: 'Year',
-  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");
+var CustomChart = function CustomChart(props) {
+  var _props$widget2;
 
-    case DateGroupCodes.Quarter:
-      return label;
+  var project = function project() {
+    var _props$widget;
 
-    case DateGroupCodes.Year:
-      return getDateFormat(label, "YYYY");
+    switch ((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.TypeCode) {
+      case "kpi":
+        return React__default.createElement(KpiChart, {
+          customChartProps: props
+        });
 
-    case DateGroupCodes.Month_Year:
-      return getDateFormat(label, "MMM YYYY");
+      case "table":
+        return React__default.createElement(TableChart, {
+          customChartProps: props
+        });
 
-    case DateGroupCodes.Quarter_Year:
-      return getQuarterYearFormat(label);
+      default:
+        return React__default.createElement("div", null, "Invalid Type");
+    }
+  };
 
-    default:
-      return label;
-  }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: props.widget && ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == 'table' ? "dl-custom-chart-container dl-table-chart-container" : "dl-custom-chart-container"
+  }, project()));
 };
 
 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; min-height: 10px; min-width: 10px; height: 10px; width: 10px; background-color: transparent; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px; white-space: pre-line; font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;\"> " + getTooltiplabel(label, seriesName) + "</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'; white-space: pre-line; font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px; white-space: pre-line; font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;\">" + getTooltipValue(value) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
+  return "\n    <div style=\"min-width: 108px;" + padding + "\">\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; min-height: 10px; min-width: 10px; height: 10px; width: 10px; background-color: transparent; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px; white-space: pre-line; font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;\"> " + getTooltiplabel(label, seriesName) + "</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'; white-space: pre-line; font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px; white-space: pre-line; font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;\">" + getTooltipValue(value, seriesName) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
 }
 
 function getTooltipPercentage(widget) {
@@ -956,8 +1513,30 @@ function getTooltiplabel(value, seriesMeasure) {
   return '$label';
 }
 
-function getTooltipValue(value) {
-  if (value) return value;
+var getFormattedValue = function getFormattedValue(value) {
+  if (isNaN(value)) return value;
+
+  var _numberSeparatorSettings = getGlobalNumberFormatting();
+
+  var _val = value.toLocaleString('en-US');
+
+  if (_val) {
+    var _formattedValue = _val.replaceAll(",", "*");
+
+    _formattedValue = _formattedValue.replaceAll(".", "-");
+    _formattedValue = _formattedValue.replaceAll("*", _numberSeparatorSettings.thousandsSeparator);
+    _formattedValue = _formattedValue.replaceAll("-", _numberSeparatorSettings.decimalSeparator);
+    return _formattedValue;
+  }
+
+  return value;
+};
+
+function getTooltipValue(value, seriesMeasure) {
+  if (!isNullOrUndefined(value)) {
+    return seriesMeasure && seriesMeasure.MeasureFieldDataType == 'Percentage' ? getFormattedValue(value) + "%" : getFormattedValue(value);
+  }
+
   return '$dataValue';
 }
 
@@ -1223,6 +1802,42 @@ function BuildFusionChartObject(seriesMeasures, widget) {
   }
 }
 
+var getWidgetRanges = function getWidgetRanges(widget, value) {
+  var gaugeRanges = widget.GaugeRanges && widget.GaugeRanges.length > 0 ? JSON.parse(widget.GaugeRanges) : null;
+  if (gaugeRanges == null || isNullOrUndefinedOrEmpty(value)) return [];
+
+  if (value < gaugeRanges[0].minValue) {
+    gaugeRanges[0].minValue = value;
+  }
+
+  if (value > gaugeRanges[2].maxValue) {
+    gaugeRanges[2].maxValue = value;
+  }
+
+  return gaugeRanges;
+};
+
+var getGaugeObject = function getGaugeObject(data, widget) {
+  var fusionObject = getDefaultChartobject();
+  fusionObject.type = 'angulargauge';
+  var chartInfo = getDefaultChartInfo(widget);
+  chartInfo.manageResize = "1";
+  chartInfo.valueBelowPivot = "1";
+  chartInfo.showValue = "1";
+  fusionObject.dataSource = {
+    "chart": chartInfo,
+    "colorRange": {
+      "color": getWidgetRanges(widget, !isNullOrUndefined(data) && !isNullOrUndefined(data === null || data === void 0 ? void 0 : data.Value) ? data === null || data === void 0 ? void 0 : data.Value : 0)
+    },
+    "dials": {
+      "dial": [{
+        "value": !isNullOrUndefined(data) && !isNullOrUndefined(data === null || data === void 0 ? void 0 : data.Value) ? data === null || data === void 0 ? void 0 : data.Value : 0
+      }]
+    }
+  };
+  return fusionObject;
+};
+
 function getBarObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = isGroupByFieldDateTime(widget.GroupByFieldDataType) ? "msbar2d" : "scrollbar2d";
@@ -1359,9 +1974,17 @@ var isGroupByFieldDateTime = function isGroupByFieldDateTime(GroupByFieldDataTyp
   return GroupByFieldDataType == "DateTime" || GroupByFieldDataType == "Date";
 };
 
+var isFirstMeasureTypePercentage = function isFirstMeasureTypePercentage(widget) {
+  return widget && widget.WidgetMeasures && widget.WidgetMeasures[0] && widget.WidgetMeasures[0].MeasureFieldDataType && widget.WidgetMeasures[0].MeasureFieldDataType == 'Percentage';
+};
+
+var isSecondMeasureTypePercentage = function isSecondMeasureTypePercentage(widget) {
+  return widget && widget.WidgetMeasures && widget.WidgetMeasures[1] && widget.WidgetMeasures[1].MeasureFieldDataType && widget.WidgetMeasures[1].MeasureFieldDataType == 'Percentage';
+};
+
 function getColumnObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
-  chart.type = isGroupByFieldDateTime(widget.GroupByFieldDataType) ? "mscombi2D" : "scrollcombidy2d";
+  chart.type = isGroupByFieldDateTime(widget.GroupByFieldDataType) ? "mscombidy2d" : "scrollcombidy2d";
   var chartInfo = getDefaultChartInfo(widget);
   chartInfo.scrollPadding = "8";
   chartInfo.flatScrollBars = "1";
@@ -1445,7 +2068,13 @@ function getDefaultChartInfo(widget) {
     chart.minAngleForValue = "27";
   }
 
-  chart.palettecolors = "#369CFB,#4AC76F,#F6CF33,#32C7C7,#935BE0,#FAAD14,#EE5F77,#5D62B5, #29C3BE, #F2726F, #FFC533, #62B58F, #BC95DF, #67CDF2";
+  chart.numberSuffix = isFirstMeasureTypePercentage(widget) ? "%" : null;
+
+  var _numberSeparatorSettings = getGlobalNumberFormatting();
+
+  chart.thousandSeparator = _numberSeparatorSettings.thousandsSeparator;
+  chart.decimalSeparator = _numberSeparatorSettings.decimalSeparator;
+  chart.palettecolors = "#369CFB, #FCAF16, #EE5F77, #4AC76F, #935BE0, #FAD337, #32C7C7, #EB67D0, #3C9957, #FF7D4B, #78A6FF, #35838F, #BAA9F3, #C1DA72, #F0AEAD, #246EAB";
   chart.enableSlicing = "0";
   chart.enableRotation = "0";
   chart.chartTopMargin = "10";
@@ -1458,6 +2087,7 @@ function getDefaultChartInfo(widget) {
   chart.scrollHeight = "6";
   chart.scrollWidth = "6";
   chart.plotColorinTooltip = "0";
+  chart.formatNumberScale = "0";
   return chart;
 }
 
@@ -1515,6 +2145,7 @@ function setDualyAxis(chartInfo, widget, seriesMeasures) {
   chartInfo.showDivLineSecondaryValue = "1";
   chartInfo.pYAxisNameBorderPadding = 0;
   chartInfo.sYAxisNameBorderPadding = 0;
+  chartInfo.sNumberSuffix = isSecondMeasureTypePercentage(widget) ? "%" : null;
   var textLength = Math.max(seriesMeasures[0].Name.length, seriesMeasures[1].Name.length);
   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);
@@ -1590,26 +2221,28 @@ var FusionChartHelper = /*#__PURE__*/function () {
 
 var plotColorsDictionary = {
   plotColor0: "#369CFB",
-  plotColor1: "#4AC76F",
-  plotColor2: "#F6CF33",
-  plotColor3: "#32C7C7",
+  plotColor1: "#FCAF16",
+  plotColor2: "#EE5F77",
+  plotColor3: "#4AC76F",
   plotColor4: "#935BE0",
-  plotColor5: "#FAAD14",
-  plotColor6: "#EE5F77",
-  plotColor7: "#5D62B5",
-  plotColor8: "#29C3BE",
-  plotColor9: "#F2726F",
-  plotColor10: "#FFC533",
-  plotColor11: "#62B58F",
-  plotColor12: "#BC95DF",
-  plotColor13: "#67CDF2"
+  plotColor5: "#FAD337",
+  plotColor6: "#32C7C7",
+  plotColor7: "#EB67D0",
+  plotColor8: "#3C9957",
+  plotColor9: "#FF7D4B",
+  plotColor10: "#78A6FF",
+  plotColor11: "#35838F",
+  plotColor12: "#BAA9F3",
+  plotColor13: "#C1DA72",
+  plotColor14: "#F0AEAD",
+  plotColor15: "#246EAB"
 };
 
 var getPlotColorByIndexOrder = function getPlotColorByIndexOrder(index) {
   var _index = index;
 
-  if (_index >= 14) {
-    _index = _index % 14;
+  if (_index >= 16) {
+    _index = _index % 16;
   }
 
   switch (_index) {
@@ -1655,6 +2288,12 @@ var getPlotColorByIndexOrder = function getPlotColorByIndexOrder(index) {
     case 13:
       return plotColorsDictionary.plotColor13;
 
+    case 14:
+      return plotColorsDictionary.plotColor14;
+
+    case 15:
+      return plotColorsDictionary.plotColor15;
+
     default:
       return "#0566c2";
   }
@@ -1791,7 +2430,6 @@ var FusionChart = React.forwardRef(function (props, comRef) {
       signal = updatedAxiosController === null || updatedAxiosController === void 0 ? void 0 : updatedAxiosController.signal;
     }
 
-    postWidget.EntityId = !isNullOrUndefinedOrEmpty(postWidget.RelatedToEntityId) ? postWidget.RelatedToEntityId : postWidget.EntityId;
     dashboardAnalyticsService.getData(postWidget, signal).then(function (result) {
       handleData(result === null || result === void 0 ? void 0 : result.data);
       chartData.current = result === null || result === void 0 ? void 0 : result.data;
@@ -1850,28 +2488,28 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     setFchart(chart);
   };
 
-  var handlePieDonutChartTooltip = function handlePieDonutChartTooltip(chartData) {
-    if (chartData && chartData.data && chartData.data.length) {
-      chartData.data.forEach(function (item, index) {
+  var handlePieDonutChartTooltip = function handlePieDonutChartTooltip(chartDataSource) {
+    if (chartDataSource && chartDataSource.data && chartDataSource.data.length) {
+      chartDataSource.data.forEach(function (item, index) {
         var color = getPlotColorByIndexOrder(index);
         item.tooltext = item.tooltext.replaceAll("transparent", color);
       });
       setArgs(_extends({}, args, {
-        dataSource: chartData
+        dataSource: chartDataSource
       }));
     }
   };
 
-  var handleOtherChartsTooltip = function handleOtherChartsTooltip(chartData) {
-    if (chartData && chartData.dataset && chartData.dataset.length) {
-      chartData.dataset.forEach(function (el, index) {
+  var handleOtherChartsTooltip = function handleOtherChartsTooltip(chartDataSource) {
+    if (chartDataSource && chartDataSource.dataset && chartDataSource.dataset.length) {
+      chartDataSource.dataset.forEach(function (el, index) {
         el.data.forEach(function (item) {
           var color = getPlotColorByIndexOrder(index);
           item.tooltext = item.tooltext.replaceAll("transparent", color);
         });
       });
       setArgs(_extends({}, args, {
-        dataSource: chartData
+        dataSource: chartDataSource
       }));
     }
   };
@@ -1880,13 +2518,13 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     var _widget$current6, _widget$current7;
 
     if (isDummyChangesActive && isDummyChangesActive.current) return;
-    var chartData = event.sender.args && event.sender.args.dataSource ? event.sender.args.dataSource : null;
+    var chartDataSource = event.sender.args && event.sender.args.dataSource ? event.sender.args.dataSource : null;
     var isPieOrDonutChart = ((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TypeCode) == 'pie' || ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == 'donut';
 
     if (isPieOrDonutChart) {
-      handlePieDonutChartTooltip(chartData);
+      handlePieDonutChartTooltip(chartDataSource);
     } else {
-      handleOtherChartsTooltip(chartData);
+      handleOtherChartsTooltip(chartDataSource);
     }
   };
 
@@ -2016,8 +2654,177 @@ function SvgCopyIcon(props) {
   })));
 }
 
+ReactFC.fcRoot(FusionCharts, Charts$1, FusionTheme);
+FusionCharts.options['license']({
+  key: 'prD4C-8eiA7A3A3C7E6G4B4A3J4C7B2D3D2nyqE1C3fd1npaE4D4tlA-21D7E4F4F1F1E1F4F1A10A8C2C5F5E2F2D1hwqD1B5D1aG4A19A32twbC6D3G4lhJ-7A9C11A5B-13ddA2I3A1B9B3D7A2B4G2H3H1F-7smC8B2XB4cetB8A7A5mxD3SG4F2tvgB2A3B2E4C3I3C7B3A4A3A2D3D2G4J-7==',
+  creditLabel: false
+});
+var FusionChart$1 = React.forwardRef(function (props, comRef) {
+  var _useState = React.useState(false),
+      dataLoaded = _useState[0],
+      setDataLoaded = _useState[1];
+
+  var _useState2 = React.useState(),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  var _useState3 = React.useState(uuid.v4()),
+      fusionKey = _useState3[0],
+      setFusionKey = _useState3[1];
+
+  var chartData = React.useRef(null);
+
+  var _useState4 = React.useState(null),
+      resizeTimer = _useState4[0],
+      setResizeTimer = _useState4[1];
+
+  var axiosController = React.useRef(new AbortController());
+  var widget = React.useRef();
+
+  var _useState5 = React.useState({}),
+      args = _useState5[0],
+      setArgs = _useState5[1];
+
+  var _useState6 = React.useState(uuid.v4()),
+      chartContainerId = _useState6[0];
+
+  var progressRef = React.useRef(null);
+  var fusionRef = React.useRef(null);
+  var isDummyChangesActive = React.useRef(false);
+  React.useEffect(function () {
+    var _props$dataBinding;
+
+    axiosController.current = new AbortController();
+    widget.current = props.widget;
+    getChartData();
+    (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.widgetUpdated.subscribe(function (updatedWidget) {
+      var _widget$current;
+
+      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key)) return;
+      widget.current = _extends({}, updatedWidget);
+
+      if (chartData && chartData.current) {
+        var _data = JSON.parse(JSON.stringify(chartData.current));
+
+        isDummyChangesActive.current = true;
+        handleData(_data, true);
+      }
+    });
+    window.addEventListener("resize", handleResize);
+    return function () {
+      var _axiosController$curr;
+
+      window.removeEventListener("resize", handleResize);
+      setDataLoaded(false);
+
+      if (axiosController && axiosController !== null && axiosController !== void 0 && (_axiosController$curr = axiosController.current) !== null && _axiosController$curr !== void 0 && _axiosController$curr.abort) {
+        var _axiosController$curr2;
+
+        axiosController === null || axiosController === void 0 ? void 0 : (_axiosController$curr2 = axiosController.current) === null || _axiosController$curr2 === void 0 ? void 0 : _axiosController$curr2.abort();
+      }
+    };
+  }, []);
+
+  var handleResize = function handleResize() {
+    clearTimeout(resizeTimer);
+    setResizeTimer(setTimeout(function () {
+      setFusionKey(uuid.v4());
+    }, 200));
+  };
+
+  React.useImperativeHandle(comRef, function () {
+    return {
+      onResizeFinish: function onResizeFinish() {
+        setFusionKey(uuid.v4());
+      }
+    };
+  });
+
+  var getChartData = function getChartData() {
+    if (Session.Tenant == 0) {
+      handleData(null);
+      return;
+    }
+
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+
+    var postWidget = _extends({}, widget.current);
+
+    postWidget.onChange = undefined;
+    var signal = undefined;
+
+    if (axiosController) {
+      var _axiosController$curr3;
+
+      axiosController === null || axiosController === void 0 ? void 0 : (_axiosController$curr3 = axiosController.current) === null || _axiosController$curr3 === void 0 ? void 0 : _axiosController$curr3.abort();
+      var updatedAxiosController = new AbortController();
+      axiosController.current = updatedAxiosController;
+      signal = updatedAxiosController === null || updatedAxiosController === void 0 ? void 0 : updatedAxiosController.signal;
+    }
+
+    dashboardAnalyticsService.getGaugeData(postWidget, signal).then(function (result) {
+      handleData(result === null || result === void 0 ? void 0 : result.data);
+      chartData.current = result === null || result === void 0 ? void 0 : 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 handleData = function handleData(data, isDummyChange) {
+    if (isDummyChange === void 0) {
+      isDummyChange = false;
+    }
+
+    var chart = getGaugeObject(data, widget.current);
+    setArgs(chart);
+
+    if (!isDummyChange) {
+      setDataLoaded(true);
+    } else {
+      setTimeout(function () {
+        isDummyChangesActive.current = false;
+      }, 100);
+    }
+  };
+
+  return !dataLoaded ? React__default.createElement("div", {
+    ref: progressRef,
+    className: 'dl-full-hight dl-flex-content-center spinner-custome'
+  }, React__default.createElement(progressspinner.ProgressSpinner, {
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    strokeWidth: "4",
+    animationDuration: "2s"
+  })) : !error ? React__default.createElement("div", {
+    className: 'db-fc-parent-container',
+    ref: fusionRef
+  }, React__default.createElement("div", {
+    className: 'db-fc-container',
+    key: fusionKey,
+    id: chartContainerId
+  }, React__default.createElement(ReactFC, Object.assign({}, args)))) : React__default.createElement("div", {
+    className: "dl-flex-content-center dl-full-hight",
+    style: {
+      width: '100%'
+    }
+  }, React__default.createElement("div", {
+    className: "dl-tooltip"
+  }, React__default.createElement(SvgRedWarning, {
+    className: "red-warning-icon"
+  }), React__default.createElement("span", {
+    className: "dl-tooltiptext"
+  }, error)));
+});
+
 var WidgetCard = React.forwardRef(function (props, comRef) {
-  var _widget$current7, _widget$current8, _widget$current9, _widget$current10, _widget$current11, _widget$current12, _widget$current13;
+  var _widget$current12, _widget$current13, _widget$current14;
 
   var widget = React.useRef();
 
@@ -2086,7 +2893,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var GetChartComponent = function GetChartComponent() {
-    var _widget$current4, _widget$current5, _widget$current6;
+    var _widget$current4, _widget$current5, _widget$current6, _widget$current7;
 
     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" || ((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TypeCode) == "table") return React__default.createElement(CustomChart, {
@@ -2097,6 +2904,13 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       widgetRef: props.widgetRef,
       onSelectDataPoint: props.onSelectDataPoint
     });
+    if (((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
+      ref: fusionChartRef,
+      dataBinding: props.dataBinding,
+      widget: widget.current,
+      widgetRef: props.widgetRef,
+      onSelectDataPoint: props.onSelectDataPoint
+    });
     return React__default.createElement(FusionChart, {
       ref: fusionChartRef,
       dataBinding: props.dataBinding,
@@ -2106,6 +2920,50 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     });
   };
 
+  var isTableWidget = function isTableWidget() {
+    return widget && widget.current && widget.current.TypeCode == 'table';
+  };
+
+  var getwidgetTitlesContainer = function getwidgetTitlesContainer() {
+    return isTableWidget() ? "widget-table-titles-container" : "widget-titles-container";
+  };
+
+  var drilldownToTableData = function drilldownToTableData() {
+    props.onSelectDataPoint({
+      GroupById: undefined,
+      MeasureFieldId: undefined,
+      MeasureCode: undefined,
+      Formula: undefined,
+      Widget: widget.current,
+      GroupByIdSec: undefined
+    });
+  };
+
+  var isThereTitle = function isThereTitle() {
+    var _widget$current8, _widget$current9;
+
+    return ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Title) && ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Title.length) > 0;
+  };
+
+  var isThereSubtitle = function isThereSubtitle() {
+    var _widget$current10, _widget$current11;
+
+    return ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle) && ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Subtitle.length) > 0;
+  };
+
+  var tableHintMessage = function tableHintMessage() {
+    return React__default.createElement("span", {
+      className: "table-hint-container " + (isTitleAligmentRight() ? "padding-left-12" : "")
+    }, React__default.createElement("span", null, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, "("), React__default.createElement("span", {
+      onClick: drilldownToTableData,
+      className: "show-more-records"
+    }, " Show More Records "), React__default.createElement("span", null, ")")));
+  };
+
+  var isTitleAligmentRight = function isTitleAligmentRight() {
+    return widget && widget.current && widget.current.TitleAlignment && widget.current.TitleAlignment.toLowerCase() == 'right';
+  };
+
   return React__default.createElement("div", {
     className: "dl-panel",
     key: props.el.i
@@ -2113,12 +2971,14 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     key: triggerId,
     className: "widget-header"
   }, React__default.createElement("div", {
-    className: "header-contents"
-  }, React__default.createElement("div", {
+    className: "header-contents " + (isTableWidget() ? "border-bottom-light-white" : "")
+  }, isTitleAligmentRight() && isTableWidget() && tableHintMessage(), React__default.createElement("div", {
     style: {
-      cursor: props.isInEditMode ? "move" : "default"
+      cursor: props.isInEditMode ? "move" : "default",
+      justifyContent: isTableWidget() ? getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined) : undefined,
+      flexDirection: isTitleAligmentRight() ? "row-reverse" : "row"
     },
-    className: "widget-titles-container"
+    className: getwidgetTitlesContainer()
   }, React__default.createElement("div", {
     className: "title-container",
     style: {
@@ -2133,7 +2993,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$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.Title),
+    }, (_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Title),
     position: ['top center'],
     arrowStyle: {
       color: '#262626'
@@ -2142,16 +3002,19 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     on: ['hover', 'focus']
   }, React__default.createElement("span", {
     className: "widget-title-tooltip-text"
-  }, (_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Title))), React__default.createElement("div", {
-    className: (_widget$current9 = widget.current) !== null && _widget$current9 !== void 0 && _widget$current9.Subtitle && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle.length) > 0 ? "subtitle" : "subtitle margin-top-4",
+  }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title))), isTableWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
+    className: "titles-vertical-seeparator"
+  }), React__default.createElement("div", {
+    className: isThereSubtitle() ? "subtitle" : "subtitle margin-top-4",
     style: {
       fontSize: getCSSPropertyValue(widget.current, 'SubtitleFontSize', 'px'),
       textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined),
-      color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', '')
+      color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', ''),
+      minWidth: isThereSubtitle() && isTableWidget() ? '5%' : undefined
     }
-  }, (_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Subtitle)), React__default.createElement("div", {
-    className: (_widget$current12 = widget.current) !== null && _widget$current12 !== void 0 && _widget$current12.Title && ((_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title.length) > 0 ? "widget-options-container" : "widget-options-container margin-top-6"
-  }, props.isInEditMode ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgEditIcon, {
+  }, (_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Subtitle)), !isTitleAligmentRight() && isTableWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
+    className: isThereTitle() ? "widget-options-container" : "widget-options-container margin-top-6"
+  }, React__default.createElement(SvgEditIcon, {
     onClick: function onClick() {
       return editWidget();
     }
@@ -2165,7 +3028,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
 
       return props.deleteBtnClicked((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.key);
     }
-  })) : null))), React__default.createElement("div", {
+  })))), React__default.createElement("div", {
     className: "dl-dashboard-widget"
   }, GetChartComponent()));
 });
@@ -2218,11 +3081,13 @@ var DashboardDesigner = function DashboardDesigner(props) {
   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);
-      }
-    });
+    if (props !== null && props !== void 0 && (_props$dataBinding = props.dataBinding) !== null && _props$dataBinding !== void 0 && _props$dataBinding.onDeleteWidgetConfirmed) {
+      props.dataBinding.onDeleteWidgetConfirmed.subscribe(function (deleteProps) {
+        if (deleteProps) {
+          deletePanel(deleteProps);
+        }
+      });
+    }
   }, []);
 
   var FillLayout = function FillLayout(dashboardLayouts) {
@@ -2452,6 +3317,7 @@ var Dashboard = function Dashboard(props) {
     Session.CurrentUserId = props.userId;
     Session.Tenant = props.tenant;
     Session.Token = props === null || props === void 0 ? void 0 : props.token;
+    Session.NumberFormatCode = props === null || props === void 0 ? void 0 : props.numberFormatCode;
     setIsPreviewModeActive(props.isPreviewMode);
     props.dataBinding.onGetLayouts.subscribe(function (layouts) {
       Widgetlayouts.current = layouts;