logitude-dashboard-library 3.1.3 → 3.1.5

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

@@ -83,6 +83,9 @@ 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,3 +16,19 @@ 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

@@ -140,14 +140,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 +201,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) {
@@ -703,45 +712,81 @@ var CustomChart = function CustomChart(props) {
   }, project());
 };
 
-var mainYellowColor = "#F6CF33";
-var mainRedColor = "#EE5F77";
-var mainGreenColor = "#4AC76F";
-var mainTurquoiseColor = "#32C7C7";
-var mainBlueColor = "#369CFB";
-var mainPurpleColor = "#935BE0";
-var mainOrangeColor = "#FAAD14";
+var plotColorsDictionary = {
+  plotColor0: "#F6CF33",
+  plotColor1: "#EE5F77",
+  plotColor2: "#4AC76F",
+  plotColor3: "#32C7C7",
+  plotColor4: "#369CFB",
+  plotColor5: "#935BE0",
+  plotColor6: "#FAAD14",
+  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;
 
-function getSeriesPositionColor(position) {
-  switch (position) {
     case 1:
-      return mainBlueColor;
+      return plotColorsDictionary.plotColor1;
 
     case 2:
-      return mainGreenColor;
+      return plotColorsDictionary.plotColor2;
 
     case 3:
-      return mainYellowColor;
+      return plotColorsDictionary.plotColor3;
 
     case 4:
-      return mainTurquoiseColor;
+      return plotColorsDictionary.plotColor4;
 
     case 5:
-      return mainPurpleColor;
+      return plotColorsDictionary.plotColor5;
 
     case 6:
-      return mainOrangeColor;
+      return plotColorsDictionary.plotColor6;
 
     case 7:
-      return mainRedColor;
+      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 null;
+      return "#0566c2";
   }
-}
+};
 
 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; 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    ";
 }
 
 function getTooltipPercentage(widget) {
@@ -830,8 +875,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;
   });
@@ -854,11 +898,10 @@ function buildDataSet(seriesMeasures, widget) {
         tooltext: buildToolTip(widget, e.Value, seriesMeasure, null, index)
       };
     });
-    var color = getSeriesPositionColor(seriesPosition);
+    var color = getPlotColorByIndexOrder(seriesPosition);
     dataSet.push({
       data: datas,
       seriesname: seriesMeasure.Name,
-      color: color,
       anchorBgColor: color,
       anchorBorderColor: "#FFFFFF",
       anchorBorderThickness: "2",
@@ -873,7 +916,6 @@ function buildDataSet(seriesMeasures, widget) {
 
 function buildStackedDataSet(seriesMeasures, widget) {
   var dataSet = [];
-  var seriesPosition = 1;
   var series = seriesMeasures[0];
   var uniqueGroups = [];
   series.Values.forEach(function (element) {
@@ -885,13 +927,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 +1290,7 @@ function getDefaultChartInfo(widget) {
     chart.minAngleForValue = "27";
   }
 
+  chart.palettecolors = "#F6CF33,#EE5F77,#4AC76F,#32C7C7,#369CFB,#935BE0,#FAAD14,#5D62B5, #29C3BE, #F2726F, #FFC533, #62B58F, #BC95DF, #67CDF2";
   chart.enableSlicing = "0";
   chart.enableRotation = "0";
   chart.chartTopMargin = "10";
@@ -1259,6 +1299,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";
@@ -1415,6 +1456,7 @@ var FusionChart = React.forwardRef(function (props, comRef) {
       resizeTimer = _useState4[0],
       setResizeTimer = _useState4[1];
 
+  var axiosController = React.useRef(new AbortController());
   var widget = React.useRef();
 
   var _useState5 = React.useState({}),
@@ -1434,6 +1476,7 @@ var FusionChart = React.forwardRef(function (props, comRef) {
   React.useEffect(function () {
     var _props$dataBinding;
 
+    axiosController.current = new AbortController();
     widget.current = props.widget;
     RefreshData();
     (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.widgetUpdated.subscribe(function (updatedWidget) {
@@ -1450,7 +1493,16 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     });
     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();
+      }
     };
   }, []);
 
@@ -1499,9 +1551,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;
 
@@ -1552,6 +1616,21 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     setFchart(chart);
   };
 
+  var loaded = function loaded(event) {
+    var chartData = event.sender.getChartData();
+
+    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({}, chartData));
+  };
+
   return !dataLoaded ? React__default.createElement("div", {
     ref: progressRef,
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
@@ -1566,12 +1645,14 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     className: 'db-fc-parent-container',
     ref: fusionRef
   }, React__default.createElement("div", {
-    key: fusionKey,
     className: 'db-fc-container',
     ref: ref,
     id: chartContainerId
-  }, React__default.createElement(ReactFC, Object.assign({}, args, {
+  }, React__default.createElement(ReactFC, Object.assign({
+    key: fusionKey
+  }, args, {
     "fcEvent-dataplotClick": dataplotClick,
+    "fcEvent-loaded": loaded,
     onRender: renderComplete
   })))) : React__default.createElement("div", {
     className: "dl-flex-content-center dl-full-hight",