logitude-dashboard-library 3.2.1 → 3.2.3

package/dist/index.js

@@ -7,6 +7,8 @@ var progressspinner = require('primereact/progressspinner');
 var axios = _interopDefault(require('axios'));
 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'));
 var FusionCharts = _interopDefault(require('fusioncharts'));
 var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
@@ -140,14 +142,19 @@ var ApiServices = /*#__PURE__*/function () {
     });
   };
 
-  _proto.post = function post(api, date) {
+  _proto.post = function post(api, date, requestSignal) {
+    if (requestSignal === void 0) {
+      requestSignal = undefined;
+    }
+
     var token = this.getTokenFromStorage();
     var apiURL = "" + this._apiUrl + api;
     return axios.post(apiURL, date, {
       headers: {
         'Content-Type': 'application/json',
         'Token': token
-      }
+      },
+      signal: requestSignal
     });
   };
 
@@ -196,8 +203,12 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 
   var _proto = DashboardAnalyticsService.prototype;
 
-  _proto.getData = function getData(widget) {
-    return this._ApiServices.post("/api/" + this.controller + "/PostGetDataAnalytic", widget);
+  _proto.getData = function getData(widget, signal) {
+    if (signal === void 0) {
+      signal = undefined;
+    }
+
+    return this._ApiServices.post("/api/" + this.controller + "/PostGetDataAnalytic", widget, signal);
   };
 
   _proto.getKpiData = function getKpiData(widget) {
@@ -311,7 +322,7 @@ var isNullOrUndefined = function isNullOrUndefined(val) {
 };
 
 var KpiChart = function KpiChart(props) {
-  var _widget$current17;
+  var _widget$current18;
 
   var _useState = React.useState(true),
       isLoading = _useState[0],
@@ -402,8 +413,22 @@ var KpiChart = function KpiChart(props) {
     });
   };
 
+  var isComparisonIndicatorChecked = function isComparisonIndicatorChecked() {
+    var _widget$current5;
+
+    var _kpiSettings = (_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.KPIComparisonSettings;
+
+    if (_kpiSettings) {
+      var _kpiSettingsAsObj = JSON.parse(_kpiSettings);
+
+      return !isNullOrUndefined(_kpiSettingsAsObj.ComparisonIndicator) ? _kpiSettingsAsObj.ComparisonIndicator : false;
+    }
+
+    return false;
+  };
+
   function getRatioComponent() {
-    if (!(data !== null && data !== void 0 && data.CompareWithPrevious)) return null;
+    if (!(data !== null && data !== void 0 && data.CompareWithPrevious) || !isComparisonIndicatorChecked()) return null;
     return React__default.createElement("div", {
       className: "dl-kpi-ratio-container"
     }, getArrowComponent(), React__default.createElement("div", {
@@ -412,7 +437,7 @@ var KpiChart = function KpiChart(props) {
   }
 
   function getArrowComponent() {
-    var _widget$current5, _widget$current6, _widget$current7, _widget$current8, _widget$current9, _widget$current10, _widget$current11, _widget$current12;
+    var _widget$current6, _widget$current7, _widget$current8, _widget$current9, _widget$current10, _widget$current11, _widget$current12, _widget$current13;
 
     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", {
@@ -425,22 +450,22 @@ var KpiChart = function KpiChart(props) {
         marginTop: "2px"
       }
     }));
-    if ((data === null || data === void 0 ? void 0 : data.Ratio) > 1 && (_widget$current5 = widget.current) !== null && _widget$current5 !== void 0 && _widget$current5.Increase && ((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.Increase) == "Positive") return React__default.createElement("div", {
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) > 1 && (_widget$current6 = widget.current) !== null && _widget$current6 !== void 0 && _widget$current6.Increase && ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.Increase) == "Positive") return React__default.createElement("div", {
       className: "dl-kpi-arrow-container"
     }, React__default.createElement("span", {
       className: "dl-kpi-arrow-pic dl-kpi-arrow-up-green"
     }));
-    if ((data === null || data === void 0 ? void 0 : data.Ratio) > 1 && (_widget$current7 = widget.current) !== null && _widget$current7 !== void 0 && _widget$current7.Increase && ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Increase) == "Negative") return React__default.createElement("div", {
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) > 1 && (_widget$current8 = widget.current) !== null && _widget$current8 !== void 0 && _widget$current8.Increase && ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Increase) == "Negative") return React__default.createElement("div", {
       className: "dl-kpi-arrow-container"
     }, React__default.createElement("span", {
       className: "dl-kpi-arrow-pic dl-kpi-arrow-up-red"
     }));
-    if ((data === null || data === void 0 ? void 0 : data.Ratio) < 1 && (_widget$current9 = widget.current) !== null && _widget$current9 !== void 0 && _widget$current9.Increase && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Increase) == "Positive") return React__default.createElement("div", {
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) < 1 && (_widget$current10 = widget.current) !== null && _widget$current10 !== void 0 && _widget$current10.Increase && ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Increase) == "Positive") return React__default.createElement("div", {
       className: "dl-kpi-arrow-container"
     }, React__default.createElement("span", {
       className: "dl-kpi-arrow-pic dl-kpi-arrow-down-red"
     }));
-    if ((data === null || data === void 0 ? void 0 : data.Ratio) < 1 && (_widget$current11 = widget.current) !== null && _widget$current11 !== void 0 && _widget$current11.Increase && ((_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Increase) == "Negative") return React__default.createElement("div", {
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) < 1 && (_widget$current12 = widget.current) !== null && _widget$current12 !== void 0 && _widget$current12.Increase && ((_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Increase) == "Negative") return React__default.createElement("div", {
       className: "dl-kpi-arrow-container"
     }, React__default.createElement("span", {
       className: "dl-kpi-arrow-pic dl-kpi-arrow-down-green"
@@ -449,10 +474,10 @@ var KpiChart = function KpiChart(props) {
   }
 
   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;
-    var labelFormated = getLabelFormatByDateGroupType(data.ComparisonLabel, widget.current, false);
-    prevtext = labelFormated + ": " + prevtext;
+    if (isNullOrUndefined(data) || isNullOrUndefined(data === null || data === void 0 ? void 0 : data.ComparisonValue) || isNullOrUndefined(data === null || data === void 0 ? void 0 : data.ComparisonLabel)) return "";
+    var labelFormatByDateGroupType = getLabelFormatByDateGroupType(data.ComparisonLabel, widget.current, false);
+    var labelFormated = !isNullOrUndefined(labelFormatByDateGroupType) ? labelFormatByDateGroupType : null;
+    var prevtext = labelFormated ? labelFormated + ": " + (data === null || data === void 0 ? void 0 : data.ComparisonValue) : "";
     return React__default.createElement("div", {
       className: "dl-kpi-prev-container"
     }, React__default.createElement("div", {
@@ -497,11 +522,11 @@ var KpiChart = function KpiChart(props) {
   };
 
   var isKPICustomResizeNeeded = function isKPICustomResizeNeeded() {
-    var _widget$current13, _widget$current14, _widget$current15, _widget$current16;
+    var _widget$current14, _widget$current15, _widget$current16, _widget$current17;
 
     if (!widget || !widget.current) return;
-    var isThereTitle = !isNullOrUndefined((_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title) && ((_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Title.length) > 0;
-    var isThereSubTitle = !isNullOrUndefined((_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Subtitle) && ((_widget$current16 = widget.current) === null || _widget$current16 === void 0 ? void 0 : _widget$current16.Subtitle.length) > 0;
+    var isThereTitle = !isNullOrUndefined((_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Title) && ((_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Title.length) > 0;
+    var isThereSubTitle = !isNullOrUndefined((_widget$current16 = widget.current) === null || _widget$current16 === void 0 ? void 0 : _widget$current16.Subtitle) && ((_widget$current17 = widget.current) === null || _widget$current17 === void 0 ? void 0 : _widget$current17.Subtitle.length) > 0;
     var isKPIHasSmallestHeight = getIsKPIHasSmallestHeight();
     return isThereTitle && isThereSubTitle && isKPIHasSmallestHeight;
   };
@@ -518,7 +543,7 @@ var KpiChart = function KpiChart(props) {
   })) : !error && widget.current ? React__default.createElement("div", {
     key: triggerId,
     onClick: kpiClick,
-    className: ((_widget$current17 = widget.current) === null || _widget$current17 === void 0 ? void 0 : _widget$current17.Alighnment) == "Left" ? "dl-kpi-container-click db-justify-content-flex-start" : "dl-kpi-container-click"
+    className: ((_widget$current18 = widget.current) === null || _widget$current18 === void 0 ? void 0 : _widget$current18.Alighnment) == "Left" ? "dl-kpi-container-click db-justify-content-flex-start" : "dl-kpi-container-click"
   }, React__default.createElement("div", {
     className: isKPICustomSizeNeeded ? "dl-kpi-container kpi-custom-size" : "dl-kpi-container"
   }, getLabel(), getValueComponent(), getPreviousValueComponent())) : React__default.createElement("div", {
@@ -551,6 +576,10 @@ var TableChart = function TableChart(props) {
       tableData = _useState4[0],
       setTableData = _useState4[1];
 
+  var _useState5 = React.useState([]),
+      tableColumns = _useState5[0],
+      setTableColumns = _useState5[1];
+
   React.useEffect(function () {
     if (props.customChartProps && props.customChartProps.widget) {
       setWidget(props.customChartProps.widget);
@@ -568,7 +597,7 @@ var TableChart = function TableChart(props) {
     var dashboardAnalyticsService = new DashboardAnalyticsService();
     widget.onChange = undefined;
     widget.PageIndex = 0;
-    widget.PageSize = 50;
+    widget.PageSize = 100;
     dashboardAnalyticsService.getTableData(widget).then(function (res) {
       if (res && res.data) {
         fillTableData(res.data);
@@ -601,56 +630,29 @@ var TableChart = function TableChart(props) {
   };
 
   var fillTableData = function fillTableData(tableData) {
-    var tableRecoreds = [];
-    var tableRow = [];
-
-    if (tableData.Fields) {
-      tableData.Fields.forEach(function (item) {
-        tableRow.push(_extends({}, item, {
-          value: item.DisplayName ? item.DisplayName : "",
-          isHeader: true
-        }));
-      });
-    }
+    var tableRecords = [];
 
-    tableRecoreds.push(tableRow);
+    if (tableData.Fields && tableData.Fields.length) {
+      setTableColumns([].concat(tableData.Fields));
+    }
 
-    if (tableData.Result) {
+    if (tableData.Result && tableData.Result.length) {
       tableData.Result.forEach(function (item) {
-        var _tableRow = [];
+        var _tableRow = _extends({}, item);
+
         tableData.Fields.forEach(function (field) {
           var key = field.FieldCode;
           var valueType = field.DataTypeCode;
 
           var _value = valueType && (valueType == "Date" || valueType == "DateTime") ? getDateTimeValue(item[key]) : valueType == "Boolean" ? getBooleanStringValue(item[key]) : item[key];
 
-          _tableRow.push({
-            value: _value
-          });
+          _tableRow[key] = isNullOrUndefined(_value) ? "" : _value;
         });
-        tableRecoreds.push(_tableRow);
+        tableRecords.push(_tableRow);
       });
     }
 
-    setTableData([].concat(tableRecoreds));
-  };
-
-  var getTableTemplate = function getTableTemplate() {
-    return tableData.length == 0 ? React__default.createElement("div", {
-      className: "dl-kpi-no-data margin-auto"
-    }, "No data to display.") : React__default.createElement("table", null, React__default.createElement("thead", null, React__default.createElement("tr", null, tableData[0].map(function (el) {
-      return React__default.createElement("th", {
-        key: el.value
-      }, !isNullOrUndefined(el.value) ? el.value + "" : '');
-    }))), React__default.createElement("tbody", null, tableData.map(function (el, index) {
-      return index == 0 ? null : React__default.createElement("tr", {
-        key: index
-      }, el.map(function (item, index2) {
-        return React__default.createElement("td", {
-          key: index2 + "_" + el.value
-        }, !isNullOrUndefined(item.value) ? item.value + "" : '');
-      }));
-    })));
+    setTableData([].concat(tableRecords));
   };
 
   return isLoading ? React__default.createElement("div", {
@@ -673,11 +675,20 @@ var TableChart = function TableChart(props) {
     className: "red-warning-icon"
   }), React__default.createElement("span", {
     className: "dl-tooltiptext"
-  }, error))) : getTableTemplate();
+  }, error))) : React__default.createElement(datatable.DataTable, {
+    value: tableData,
+    responsiveLayout: "scroll"
+  }, tableColumns.map(function (column$1, index) {
+    return React__default.createElement(column.Column, {
+      key: column$1.FieldCode + "_" + index,
+      field: column$1.FieldCode,
+      header: column$1.DisplayName
+    });
+  }));
 };
 
 var CustomChart = function CustomChart(props) {
-  var _props$widget2;
+  var _props$widget2, _props$widget3, _props$widget4;
 
   var project = function project() {
     var _props$widget;
@@ -698,50 +709,16 @@ var CustomChart = function CustomChart(props) {
     }
   };
 
-  return 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());
+  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-rows-number-indicator"
+  }, "Showing the first 100 rows"), 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 mainYellowColor = "#F6CF33";
-var mainRedColor = "#EE5F77";
-var mainGreenColor = "#4AC76F";
-var mainTurquoiseColor = "#32C7C7";
-var mainBlueColor = "#369CFB";
-var mainPurpleColor = "#935BE0";
-var mainOrangeColor = "#FAAD14";
-
-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;
-  }
-}
-
 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    ";
+  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    ";
 }
 
 function getTooltipPercentage(widget) {
@@ -749,8 +726,9 @@ function getTooltipPercentage(widget) {
   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) {
+function getTooltiplabel(value, seriesMeasure) {
   if (value) return value;
+  if (seriesMeasure && seriesMeasure.Name) return '$label' + " - " + seriesMeasure.Name;
   return '$label';
 }
 
@@ -830,8 +808,7 @@ function buildDataSource(values, widget) {
         MeasureCode: series.MeasureCode,
         Formula: series.Formula
       },
-      tooltext: buildToolTip(widget, null, series, e.Label, 0),
-      color: getSeriesPositionColor(index + 1)
+      tooltext: buildToolTip(widget, null, series, e.Label, 0)
     };
     return item;
   });
@@ -840,7 +817,6 @@ function buildDataSource(values, widget) {
 
 function buildDataSet(seriesMeasures, widget) {
   var dataSet = [];
-  var seriesPosition = 1;
   seriesMeasures.forEach(function (seriesMeasure) {
     var datas = seriesMeasure.Values.map(function (e, index) {
       return {
@@ -854,26 +830,22 @@ function buildDataSet(seriesMeasures, widget) {
         tooltext: buildToolTip(widget, e.Value, seriesMeasure, null, index)
       };
     });
-    var color = getSeriesPositionColor(seriesPosition);
     dataSet.push({
       data: datas,
       seriesname: seriesMeasure.Name,
-      color: color,
-      anchorBgColor: color,
+      anchorBgColor: "inherit",
       anchorBorderColor: "#FFFFFF",
       anchorBorderThickness: "2",
-      anchorHoverColor: color,
+      anchorHoverColor: "inherit",
       parentyaxis: seriesMeasure.PlotasLineChart && seriesMeasure.PlotonSecondAxis ? 'S' : "P",
       renderAs: seriesMeasure.PlotasLineChart ? 'line' : "column"
     });
-    seriesPosition++;
   });
   return dataSet;
 }
 
 function buildStackedDataSet(seriesMeasures, widget) {
   var dataSet = [];
-  var seriesPosition = 1;
   var series = seriesMeasures[0];
   var uniqueGroups = [];
   series.Values.forEach(function (element) {
@@ -885,13 +857,10 @@ function buildStackedDataSet(seriesMeasures, widget) {
     });
   });
   uniqueGroups.forEach(function (group) {
-    var color = getSeriesPositionColor(seriesPosition);
     dataSet.push({
       seriesName: group.label,
-      color: color,
       data: buildStackedGroupData(group, series, widget)
     });
-    seriesPosition++;
   });
   var emptylabels = dataSet.filter(function (e) {
     return e.seriesName == null;
@@ -1251,6 +1220,7 @@ function getDefaultChartInfo(widget) {
     chart.minAngleForValue = "27";
   }
 
+  chart.palettecolors = "#369CFB,#4AC76F,#F6CF33,#32C7C7,#935BE0,#FAAD14,#EE5F77,#5D62B5, #29C3BE, #F2726F, #FFC533, #62B58F, #BC95DF, #67CDF2";
   chart.enableSlicing = "0";
   chart.enableRotation = "0";
   chart.chartTopMargin = "10";
@@ -1259,6 +1229,7 @@ function getDefaultChartInfo(widget) {
   chart.chartRightMargin = "40";
   chart.toolTipBgColor = "#FFFFFF";
   chart.showToolTipShadow = "1";
+  chart.plotHoverEffect = "0";
   chart.scrollHeight = "6";
   chart.scrollWidth = "6";
   chart.plotColorinTooltip = "0";
@@ -1392,6 +1363,78 @@ var FusionChartHelper = /*#__PURE__*/function () {
   return FusionChartHelper;
 }();
 
+var plotColorsDictionary = {
+  plotColor0: "#369CFB",
+  plotColor1: "#4AC76F",
+  plotColor2: "#F6CF33",
+  plotColor3: "#32C7C7",
+  plotColor4: "#935BE0",
+  plotColor5: "#FAAD14",
+  plotColor6: "#EE5F77",
+  plotColor7: "#5D62B5",
+  plotColor8: "#29C3BE",
+  plotColor9: "#F2726F",
+  plotColor10: "#FFC533",
+  plotColor11: "#62B58F",
+  plotColor12: "#BC95DF",
+  plotColor13: "#67CDF2"
+};
+
+var getPlotColorByIndexOrder = function getPlotColorByIndexOrder(index) {
+  var _index = index;
+
+  if (_index >= 14) {
+    _index = _index % 14;
+  }
+
+  switch (_index) {
+    case 0:
+      return plotColorsDictionary.plotColor0;
+
+    case 1:
+      return plotColorsDictionary.plotColor1;
+
+    case 2:
+      return plotColorsDictionary.plotColor2;
+
+    case 3:
+      return plotColorsDictionary.plotColor3;
+
+    case 4:
+      return plotColorsDictionary.plotColor4;
+
+    case 5:
+      return plotColorsDictionary.plotColor5;
+
+    case 6:
+      return plotColorsDictionary.plotColor6;
+
+    case 7:
+      return plotColorsDictionary.plotColor7;
+
+    case 8:
+      return plotColorsDictionary.plotColor8;
+
+    case 9:
+      return plotColorsDictionary.plotColor9;
+
+    case 10:
+      return plotColorsDictionary.plotColor10;
+
+    case 11:
+      return plotColorsDictionary.plotColor11;
+
+    case 12:
+      return plotColorsDictionary.plotColor12;
+
+    case 13:
+      return plotColorsDictionary.plotColor13;
+
+    default:
+      return "#0566c2";
+  }
+};
+
 ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
 FusionCharts.options['license']({
   key: 'prD4C-8eiA7A3A3C7E6G4B4A3J4C7B2D3D2nyqE1C3fd1npaE4D4tlA-21D7E4F4F1F1E1F4F1A10A8C2C5F5E2F2D1hwqD1B5D1aG4A19A32twbC6D3G4lhJ-7A9C11A5B-13ddA2I3A1B9B3D7A2B4G2H3H1F-7smC8B2XB4cetB8A7A5mxD3SG4F2tvgB2A3B2E4C3I3C7B3A4A3A2D3D2G4J-7==',
@@ -1410,27 +1453,35 @@ var FusionChart = React.forwardRef(function (props, comRef) {
       fusionKey = _useState3[0];
 
   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 _useState4 = React.useState({}),
-      args = _useState4[0],
-      setArgs = _useState4[1];
+  var _useState5 = React.useState({}),
+      args = _useState5[0],
+      setArgs = _useState5[1];
 
-  var _useState5 = React.useState(),
-      fChart = _useState5[0],
-      setFchart = _useState5[1];
+  var _useState6 = React.useState(),
+      fChart = _useState6[0],
+      setFchart = _useState6[1];
+
+  var _useState7 = React.useState(uuid.v4()),
+      chartContainerId = _useState7[0];
 
-  var id = (Math.random() + 1).toString(36).substring(7);
   var progressRef = React.useRef(null);
   var fusionRef = React.useRef(null);
   var fusionChartHelper = React.useRef();
+  var isDummyChangesActive = React.useRef(false);
   React.useEffect(function () {
     var _props$dataBinding;
 
+    axiosController.current = new AbortController();
     widget.current = props.widget;
-    setTimeout(function () {
-      RefreshData();
-    }, 500);
+    RefreshData();
     (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.widgetUpdated.subscribe(function (updatedWidget) {
       var _widget$current;
 
@@ -1440,25 +1491,32 @@ var FusionChart = React.forwardRef(function (props, comRef) {
       if (chartData && chartData.current) {
         var _data = JSON.parse(JSON.stringify(chartData.current));
 
+        isDummyChangesActive.current = true;
         handleData(_data, true);
       }
     });
-  }, []);
-  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);
+      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 () {
+      HandleSizeChange();
+    }, 200));
+  };
+
   React.useImperativeHandle(comRef, function () {
     return {
       onResizeFinish: function onResizeFinish() {
@@ -1497,9 +1555,21 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     var postWidget = _extends({}, widget.current);
 
     postWidget.onChange = undefined;
-    dashboardAnalyticsService.getData(postWidget).then(function (result) {
+    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.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;
+      setDataLoaded(true);
     }, function (error) {
       var _error$response, _error$response$data, _error$response2, _error$response2$data;
 
@@ -1523,6 +1593,10 @@ var FusionChart = React.forwardRef(function (props, comRef) {
 
     if (!isDummyChange) {
       setDataLoaded(true);
+    } else {
+      setTimeout(function () {
+        isDummyChangesActive.current = false;
+      }, 100);
     }
   };
 
@@ -1550,6 +1624,46 @@ 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 color = getPlotColorByIndexOrder(index);
+        item.tooltext = item.tooltext.replaceAll("transparent", color);
+      });
+      setArgs(_extends({}, args, {
+        dataSource: chartData
+      }));
+    }
+  };
+
+  var handleOtherChartsTooltip = function handleOtherChartsTooltip(chartData) {
+    if (chartData && chartData.dataset && chartData.dataset.length) {
+      chartData.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
+      }));
+    }
+  };
+
+  var loaded = function loaded(event) {
+    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 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);
+    } else {
+      handleOtherChartsTooltip(chartData);
+    }
+  };
+
   return !dataLoaded ? React__default.createElement("div", {
     ref: progressRef,
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
@@ -1564,12 +1678,13 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     className: 'db-fc-parent-container',
     ref: fusionRef
   }, React__default.createElement("div", {
-    key: fusionKey,
     className: 'db-fc-container',
+    key: fusionKey,
     ref: ref,
-    id: id
+    id: chartContainerId
   }, React__default.createElement(ReactFC, Object.assign({}, args, {
     "fcEvent-dataplotClick": dataplotClick,
+    "fcEvent-loaded": loaded,
     onRender: renderComplete
   })))) : React__default.createElement("div", {
     className: "dl-flex-content-center dl-full-hight",