logitude-dashboard-library 3.1.12 → 3.2.2

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

@@ -388,12 +388,6 @@ $dark-grey: #717585;
     align-items: flex-start;
 }
 
-.table-rows-number-indicator {
-    margin: 4px 0px 2px 0px;
-    color: #939393;
-    font-size: 11px;
-    padding-left: 12px;
-}
 .filter-label {
     font-size: 12px;
     color: $dark-grey;
@@ -723,41 +717,21 @@ $dark-grey: #717585;
 .dl-table-chart-container {
     overflow: auto;
     position: absolute;
-    top: 22px;
+    top: 0;
     right: 0;
     left: 0;
     bottom: 0;
-    height: calc(100% - 35px);
+    height: calc(100% - 15px);
     width: calc(100% - 25px);
     margin: 0 auto;
 
-    &::-webkit-scrollbar {
-        width: 10px;
-        height: 10px
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border: 1px solid rgba(0, 0, 0, 0);
-        background-clip: padding-box;
-        border-radius: 9999px;
-        background-color: #D9D9D9;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: #F3F3F3;
-        border: 1px solid white;
-        border-radius: 9999px;
-    }
-
-    .p-datatable {
+    table {
+        border-collapse: collapse;
         width: 100%;
+        height: auto;
+        max-height: 100%;
     }
 
-    .p-datatable > .p-datatable-wrapper {
-        overflow-x: inherit;
-    }
-
-
     td,
     th {
         border: 1px solid #ddd;
@@ -769,18 +743,12 @@ $dark-grey: #717585;
         font-weight: bold;
         font-size: 14px;
         white-space: nowrap;
-
-        .p-column-title {
-            font-weight: bold !important;
-            font-size: 14px !important;
-        }
     }
 
     td {
         border: 1px solid #ddd;
-        padding: 0.5rem 1rem !important;
+        padding: 8px;
         max-width: 1px;
-        height: 36px;
         min-width: 140px;
         line-height: normal;
         word-break: break-all;

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionChartObjectHelper.d.ts

@@ -83,9 +83,6 @@ export interface ChartInfo {
     minPlotHeightForValue: string;
     minAngleForValue: string;
     drawCrossLine: string;
-    palettecolors: string;
-    plotHoverEffect: string;
 }
 export declare function getSeriesPositionColor(position: number): string | null;
 export declare function getSeriesHoverPositionColor(position: number): string | null;
-export declare const getPlotColorByIndexOrder: (index: number) => string;

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionColors.d.ts

@@ -16,19 +16,3 @@ export declare const grey1Color = "#F6F6F6";
 export declare const grey2Color = "#F0F0F0";
 export declare const grey3Color = "#D9D9D9";
 export declare const grey4Color = "#A4A4A4";
-export declare const plotColorsDictionary: {
-    plotColor0: string;
-    plotColor1: string;
-    plotColor2: string;
-    plotColor3: string;
-    plotColor4: string;
-    plotColor5: string;
-    plotColor6: string;
-    plotColor7: string;
-    plotColor8: string;
-    plotColor9: string;
-    plotColor10: string;
-    plotColor11: string;
-    plotColor12: string;
-    plotColor13: string;
-};

package/dist/index.js

@@ -7,8 +7,6 @@ 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'));
@@ -142,19 +140,14 @@ var ApiServices = /*#__PURE__*/function () {
     });
   };
 
-  _proto.post = function post(api, date, requestSignal) {
-    if (requestSignal === void 0) {
-      requestSignal = undefined;
-    }
-
+  _proto.post = function post(api, date) {
     var token = this.getTokenFromStorage();
     var apiURL = "" + this._apiUrl + api;
     return axios.post(apiURL, date, {
       headers: {
         'Content-Type': 'application/json',
         'Token': token
-      },
-      signal: requestSignal
+      }
     });
   };
 
@@ -203,12 +196,8 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 
   var _proto = DashboardAnalyticsService.prototype;
 
-  _proto.getData = function getData(widget, signal) {
-    if (signal === void 0) {
-      signal = undefined;
-    }
-
-    return this._ApiServices.post("/api/" + this.controller + "/PostGetDataAnalytic", widget, signal);
+  _proto.getData = function getData(widget) {
+    return this._ApiServices.post("/api/" + this.controller + "/PostGetDataAnalytic", widget);
   };
 
   _proto.getKpiData = function getKpiData(widget) {
@@ -562,10 +551,6 @@ 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);
@@ -583,7 +568,7 @@ var TableChart = function TableChart(props) {
     var dashboardAnalyticsService = new DashboardAnalyticsService();
     widget.onChange = undefined;
     widget.PageIndex = 0;
-    widget.PageSize = 100;
+    widget.PageSize = 50;
     dashboardAnalyticsService.getTableData(widget).then(function (res) {
       if (res && res.data) {
         fillTableData(res.data);
@@ -616,29 +601,56 @@ var TableChart = function TableChart(props) {
   };
 
   var fillTableData = function fillTableData(tableData) {
-    var tableRecords = [];
-
-    if (tableData.Fields && tableData.Fields.length) {
-      setTableColumns([].concat(tableData.Fields));
+    var tableRecoreds = [];
+    var tableRow = [];
+
+    if (tableData.Fields) {
+      tableData.Fields.forEach(function (item) {
+        tableRow.push(_extends({}, item, {
+          value: item.DisplayName ? item.DisplayName : "",
+          isHeader: true
+        }));
+      });
     }
 
-    if (tableData.Result && tableData.Result.length) {
-      tableData.Result.forEach(function (item) {
-        var _tableRow = _extends({}, item);
+    tableRecoreds.push(tableRow);
 
+    if (tableData.Result) {
+      tableData.Result.forEach(function (item) {
+        var _tableRow = [];
         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[key] = isNullOrUndefined(_value) ? "" : _value;
+          _tableRow.push({
+            value: _value
+          });
         });
-        tableRecords.push(_tableRow);
+        tableRecoreds.push(_tableRow);
       });
     }
 
-    setTableData([].concat(tableRecords));
+    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 + "" : '');
+      }));
+    })));
   };
 
   return isLoading ? React__default.createElement("div", {
@@ -661,20 +673,11 @@ var TableChart = function TableChart(props) {
     className: "red-warning-icon"
   }), React__default.createElement("span", {
     className: "dl-tooltiptext"
-  }, 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
-    });
-  }));
+  }, error))) : getTableTemplate();
 };
 
 var CustomChart = function CustomChart(props) {
-  var _props$widget2, _props$widget3, _props$widget4;
+  var _props$widget2;
 
   var project = function project() {
     var _props$widget;
@@ -695,16 +698,50 @@ var CustomChart = function CustomChart(props) {
     }
   };
 
-  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()));
+  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());
 };
 
+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: transparent; 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; height: 10px; width: 10px; background-color: #A4A4A4; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px;font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;  flex: none; order: 1;flex-grow: 0;\"> " + getTooltiplabel(label) + "</p>\n        </div>\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n        <div style=\"display: flex;align-items: center;margin:0;margin-top: 6px;\">\n            <p style=\"margin: 0;font-family: 'Manrope';font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;flex: none;order: 0;flex-grow: 0;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;flex: none; order: 1;flex-grow: 0;\">" + getTooltipValue(value) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
 }
 
 function getTooltipPercentage(widget) {
@@ -793,7 +830,8 @@ function buildDataSource(values, widget) {
         MeasureCode: series.MeasureCode,
         Formula: series.Formula
       },
-      tooltext: buildToolTip(widget, null, series, e.Label, 0)
+      tooltext: buildToolTip(widget, null, series, e.Label, 0),
+      color: getSeriesPositionColor(index + 1)
     };
     return item;
   });
@@ -802,6 +840,7 @@ 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 {
@@ -815,22 +854,26 @@ function buildDataSet(seriesMeasures, widget) {
         tooltext: buildToolTip(widget, e.Value, seriesMeasure, null, index)
       };
     });
+    var color = getSeriesPositionColor(seriesPosition);
     dataSet.push({
       data: datas,
       seriesname: seriesMeasure.Name,
-      anchorBgColor: "inherit",
+      color: color,
+      anchorBgColor: color,
       anchorBorderColor: "#FFFFFF",
       anchorBorderThickness: "2",
-      anchorHoverColor: "inherit",
+      anchorHoverColor: color,
       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) {
@@ -842,10 +885,13 @@ 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;
@@ -1205,7 +1251,6 @@ 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";
@@ -1214,7 +1259,6 @@ function getDefaultChartInfo(widget) {
   chart.chartRightMargin = "40";
   chart.toolTipBgColor = "#FFFFFF";
   chart.showToolTipShadow = "1";
-  chart.plotHoverEffect = "0";
   chart.scrollHeight = "6";
   chart.scrollWidth = "6";
   chart.plotColorinTooltip = "0";
@@ -1348,78 +1392,6 @@ 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==',
@@ -1438,35 +1410,27 @@ 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 _useState5 = React.useState({}),
-      args = _useState5[0],
-      setArgs = _useState5[1];
+  var _useState4 = React.useState({}),
+      args = _useState4[0],
+      setArgs = _useState4[1];
 
-  var _useState6 = React.useState(),
-      fChart = _useState6[0],
-      setFchart = _useState6[1];
-
-  var _useState7 = React.useState(uuid.v4()),
-      chartContainerId = _useState7[0];
+  var _useState5 = React.useState(),
+      fChart = _useState5[0],
+      setFchart = _useState5[1];
 
+  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;
-    RefreshData();
+    setTimeout(function () {
+      RefreshData();
+    }, 500);
     (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.widgetUpdated.subscribe(function (updatedWidget) {
       var _widget$current;
 
@@ -1476,32 +1440,25 @@ 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);
       }
     });
-    window.addEventListener("resize", handleResize);
-    return function () {
-      var _axiosController$curr;
-
-      window.removeEventListener("resize", handleResize);
-      setDataLoaded(false);
+  }, []);
+  React.useEffect(function () {
+    var timeout;
 
-      if (axiosController && axiosController !== null && axiosController !== void 0 && (_axiosController$curr = axiosController.current) !== null && _axiosController$curr !== void 0 && _axiosController$curr.abort) {
-        var _axiosController$curr2;
+    var handleResize = function handleResize() {
+      clearTimeout(timeout);
+      timeout = setTimeout(function () {
+        HandleSizeChange();
+      }, 200);
+    };
 
-        axiosController === null || axiosController === void 0 ? void 0 : (_axiosController$curr2 = axiosController.current) === null || _axiosController$curr2 === void 0 ? void 0 : _axiosController$curr2.abort();
-      }
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
     };
   }, []);
-
-  var handleResize = function handleResize() {
-    clearTimeout(resizeTimer);
-    setResizeTimer(setTimeout(function () {
-      HandleSizeChange();
-    }, 200));
-  };
-
   React.useImperativeHandle(comRef, function () {
     return {
       onResizeFinish: function onResizeFinish() {
@@ -1540,21 +1497,9 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     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.getData(postWidget, signal).then(function (result) {
+    dashboardAnalyticsService.getData(postWidget).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;
 
@@ -1578,10 +1523,6 @@ var FusionChart = React.forwardRef(function (props, comRef) {
 
     if (!isDummyChange) {
       setDataLoaded(true);
-    } else {
-      setTimeout(function () {
-        isDummyChangesActive.current = false;
-      }, 100);
     }
   };
 
@@ -1609,46 +1550,6 @@ 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'
@@ -1663,13 +1564,12 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     className: 'db-fc-parent-container',
     ref: fusionRef
   }, React__default.createElement("div", {
-    className: 'db-fc-container',
     key: fusionKey,
+    className: 'db-fc-container',
     ref: ref,
-    id: chartContainerId
+    id: id
   }, 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",